/* ==========================================================================
   Kokoda Bay Resort — the public booking site

   A different audience from the front desk, so a different design. This is
   read once, on a phone, by someone deciding whether to trust a hotel they
   have never heard of with a night's money. The front desk board is read
   forty times a shift by someone who already works there.

   The palette is a PNG lagoon rather than a hotel-website template: water at
   depth for the hero, sea glass for the page, hibiscus as the single accent.
   Deliberately not the warm-cream-and-clay that every generated landing page
   arrives in.

   Boldness is spent once, on the hero. Everything below it stays quiet so
   the search box and the prices are what the eye lands on.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter+Tight:wght@400;500;600&display=swap');

:root {
    --deep:     #0A3540;
    --reef:     #14727B;
    --shallow:  #3E9AA0;
    --glass:    #E8F0EC;
    --shell:    #FFFFFF;
    --hibiscus: #BE3A26;
    --gold:     #A8772F;
    --ink:      #10262B;
    --muted:    #566A6E;
    --rule:     #CFDDD7;

    --display: 'Fraunces', Georgia, serif;
    --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--glass);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--reef); }
:focus-visible { outline: 2px solid var(--hibiscus); outline-offset: 2px; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* ------------------------------------------------------------- masthead -- */

.masthead {
    background: var(--deep);
    color: #DCE9E6;
}
.masthead__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}
.masthead a { color: #DCE9E6; text-decoration: none; }
.brand {
    font-family: var(--display);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -.015em;
    color: #FFFFFF;
    line-height: 1.1;
}
.brand span {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    color: #8FA9A8;
    letter-spacing: .02em;
}
.masthead nav { display: flex; gap: 20px; font-size: 14.5px; }
.masthead nav a:hover { color: #fff; }

/* ----------------------------------------------------------------- hero -- */
/* The one place this design raises its voice. A drawn coastline rather than
   a stock photograph: it is honest about being an illustration, it loads
   instantly on a slow connection, and it does not pretend to be a building
   that does not exist. */

.hero { position: relative; background: var(--deep); color: #fff; }
.hero__art { display: block; width: 100%; height: auto; }
.hero__words {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 52px 20px 0;
    text-align: center;
}
.hero__words h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(30px, 6vw, 56px);
    line-height: 1.04;
    letter-spacing: -.025em;
    margin: 0 0 10px;
    text-wrap: balance;
}
.hero__words p {
    margin: 0 auto;
    max-width: 30em;
    font-size: clamp(15px, 2.2vw, 18px);
    color: #BFD6D2;
}

/* --------------------------------------------------------------- search -- */

.searchbar {
    background: var(--shell);
    border-radius: 6px;
    box-shadow: 0 10px 34px rgba(10, 53, 64, .16);
    padding: 16px;
    margin: -46px auto 44px;
    position: relative;
    z-index: 2;
}
.searchbar form {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr .7fr .7fr .7fr auto;
    gap: 12px;
    align-items: end;
}
.searchbar label {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 4px;
}
.searchbar input, .searchbar select {
    width: 100%;
    font: inherit;
    font-size: 15px;
    padding: 9px 11px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--shell);
    color: var(--ink);
}
.searchbar input:focus, .searchbar select:focus {
    border-color: var(--reef);
    outline: none;
}

/* --------------------------------------------------------------- button -- */

.btn {
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid var(--reef);
    background: var(--reef);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}
.btn:hover { background: #10616A; border-color: #10616A; }
.btn--quiet {
    background: transparent;
    color: var(--reef);
}
.btn--quiet:hover { background: rgba(20, 114, 123, .08); }
.btn--accent { background: var(--hibiscus); border-color: var(--hibiscus); }
.btn--accent:hover { background: #A22F1E; border-color: #A22F1E; }
.btn--block { display: block; width: 100%; text-align: center; }

/* -------------------------------------------------------------- content -- */

section { padding: 10px 0 44px; }
h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(23px, 3.4vw, 31px);
    letter-spacing: -.02em;
    margin: 0 0 6px;
}
.lede { color: var(--muted); margin: 0 0 24px; max-width: 46em; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.card {
    background: var(--shell);
    border: 1px solid var(--rule);
    border-radius: 5px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.card h3 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 21px;
    margin: 0 0 3px;
    letter-spacing: -.01em;
}
.card__meta { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.card__body { flex: 1; font-size: 14.5px; }
.card ul { margin: 0 0 14px; padding-left: 17px; }
.card li { margin-bottom: 3px; }
.card__price {
    border-top: 1px solid var(--rule);
    padding-top: 13px;
    margin-top: 13px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.price {
    font-family: var(--display);
    font-weight: 600;
    font-size: 25px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.price small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); }

.tag {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(20, 114, 123, .1);
    color: #0E5A62;
}
.tag--last { background: rgba(190, 58, 38, .1); color: var(--hibiscus); }

/* ---------------------------------------------------------------- panel -- */

.panel {
    background: var(--shell);
    border: 1px solid var(--rule);
    border-radius: 5px;
    padding: 22px;
    margin-bottom: 18px;
}
.panel h3 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 19px;
    margin: 0 0 12px;
}
.rows { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rows td { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.rows tr:last-child td { border-bottom: 0; }
.rows td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rows .total td { font-weight: 600; border-top: 1px solid var(--ink); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.field input, .field textarea, .field select {
    width: 100%;
    font: inherit;
    font-size: 15px;
    padding: 9px 11px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--shell);
    color: var(--ink);
}
.field input:focus, .field textarea:focus { border-color: var(--reef); outline: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.hint { font-size: 13px; color: var(--muted); }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but fill positioned ones, and a screen reader is told to ignore it. */
.trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notice {
    border-left: 3px solid var(--hibiscus);
    background: #FBF0EE;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 18px;
    font-size: 14.5px;
}
.notice--calm { border-left-color: var(--reef); background: #EDF5F4; }

.stamp {
    background: var(--deep);
    color: #fff;
    border-radius: 6px;
    padding: 28px;
    text-align: center;
    margin-bottom: 20px;
}
.stamp h2 { color: #fff; margin-bottom: 6px; }
.stamp .number {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(28px, 6vw, 42px);
    letter-spacing: .01em;
    margin: 14px 0 4px;
}
.stamp p { color: #BFD6D2; margin: 0; }

/* --------------------------------------------------------------- footer -- */

footer {
    background: var(--deep);
    color: #8FA9A8;
    padding: 30px 0;
    margin-top: 30px;
    font-size: 14px;
}
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer strong { color: #DCE9E6; font-weight: 500; }
.demo-note {
    background: rgba(255, 255, 255, .06);
    border-radius: 4px;
    padding: 10px 14px;
    margin-top: 16px;
    font-size: 13px;
    color: #A9C2C0;
}

/* --------------------------------------------------------------- mobile -- */

@media (max-width: 820px) {
    .searchbar form { grid-template-columns: 1fr 1fr; }
    .searchbar form > *:last-child { grid-column: 1 / -1; }
    .searchbar { margin-top: -20px; }
    .hero__words { padding-top: 26px; }
    .two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}