/* ======================================================================
   Colour system v3: complementary colours, not shades of one.
   Teal acts (buttons, links). Coral is its warm complement and the colour
   of the Websites service. Saffron marks the offer and "just booked".
   Mint, sand and blush give each section its own ground.
   Loaded after site.css, so these win.
   ====================================================================== */
:root {
  --coral: #F2785C;  --coral-ink: #5E1D10;  --coral-soft: #FDE6DF;
  --saffron: #F4B942; --saffron-ink: #4A3200; --saffron-soft: #FFF1D6;
  --mint: #E3F3EF; --sand: #FFF4E6; --blush: #FDEDEA;
  --mari: var(--saffron); --mari-soft: var(--saffron-soft); --on-mari: var(--saffron-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --coral: #F48C74; --coral-ink: #2B0D06; --coral-soft: #3A1E19;
    --saffron: #F6C55E; --saffron-ink: #2A1C00; --saffron-soft: #33280F;
    --mint: #0F2A2B; --sand: #2A2116; --blush: #2C1C1B;
  }
}

.band.tint-mint  { background: var(--mint); }
.band.tint-sand  { background: var(--sand); }
.band.tint-blush { background: var(--blush); }

/* Two services, two colours: booking is teal, websites is coral. */
#services .duo .card, #services .tri .card, #pricing .duo .card { border-top: 5px solid var(--primary); }
#services .duo .card:nth-child(2), #services .tri .card:nth-child(2), #pricing .duo .card:nth-child(2) { border-top-color: var(--coral); }
#services .duo .card:nth-child(2) .icon { background: var(--coral-soft); color: var(--coral); }
#services .duo .card:nth-child(2) .btn, #services .tri .card:nth-child(2) .btn, #pricing .duo .card:nth-child(2) .btn {
  background: var(--coral); border-color: var(--coral); color: var(--coral-ink); }
#services .duo .card:nth-child(2) .btn:hover, #services .tri .card:nth-child(2) .btn:hover, #pricing .duo .card:nth-child(2) .btn:hover {
  background: var(--coral); filter: brightness(1.06); }

/* Third service (AI) is saffron. */
#services .tri .card:nth-child(3) { border-top-color: var(--saffron); }
#services .tri .card:nth-child(3) .btn { background: var(--saffron); border-color: var(--saffron); color: var(--saffron-ink); }
#services .tri .card:nth-child(3) .btn:hover { background: var(--saffron); filter: brightness(1.06); }

/* Numbered steps and the three feature cards: one colour each. */
.tri .card:nth-child(1) .step-n { background: var(--saffron-soft); border-color: var(--saffron); color: var(--saffron-ink); }
.tri .card:nth-child(2) .step-n { background: var(--coral-soft); border-color: var(--coral); color: var(--coral-ink); }
.tri .card:nth-child(3) .step-n { background: var(--mint); border-color: var(--primary); color: var(--primary); }
.tri .card:nth-child(2) .icon { background: var(--coral-soft); color: var(--coral); }
.tri .card:nth-child(3) .icon { background: var(--saffron-soft); color: var(--saffron-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tri .card:nth-child(1) .step-n,
  :root:not([data-theme="light"]) .tri .card:nth-child(3) .icon { color: var(--saffron); }
  :root:not([data-theme="light"]) .tri .card:nth-child(2) .step-n { color: var(--coral); }
}

/* Offer badge and "just booked" highlights in saffron. */
.offer { border-color: var(--saffron); background: var(--saffron-soft); }
.offer .tag { background: var(--saffron); color: var(--saffron-ink); }
.scene .link { background: var(--saffron); color: var(--saffron-ink); }
.diary .row.new { border-color: var(--saffron); background: var(--saffron-soft); }
.diary .row.new em { background: var(--saffron); color: var(--saffron-ink); }

/* Gallery: each kind label gets its own chip colour. */
.item .kind { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--mint); color: var(--primary); }
.gallery .item:nth-child(2) .kind { background: var(--coral-soft); color: var(--coral-ink); }
.gallery .item:nth-child(3) .kind { background: var(--saffron-soft); color: var(--saffron-ink); }
.gallery .item:nth-child(4) .kind { background: var(--blush); color: var(--coral-ink); }
.item .open { color: var(--coral); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gallery .item:nth-child(n+2) .kind { color: var(--ink); }
}

.ticks li::before { background: var(--mint); }
.ticks li::after { border-color: var(--primary); }

/* The closing call goes dark: ink ground, saffron button, two colour shapes. */
.closing { background: var(--ink); color: var(--bg); position: relative; overflow: hidden; }
.closing::before, .closing::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.closing::before { width: 220px; height: 220px; right: -60px; top: -70px; background: var(--coral); }
.closing::after { width: 140px; height: 140px; left: -40px; bottom: -50px; background: var(--saffron); }
.closing > * { position: relative; z-index: 1; }
.closing .btn { background: var(--saffron); border-color: var(--saffron); color: var(--saffron-ink); }
.closing .btn:hover { background: var(--saffron); filter: brightness(1.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .closing { background: #061418; color: var(--ink); }
}

/* Hero: two soft colour shapes behind the picture. */
.hero { position: relative; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.hero::before { width: 440px; height: 440px; right: -130px; top: -150px; background: var(--mint); }
.hero::after { width: 260px; height: 260px; right: 28%; bottom: -150px; background: var(--blush); }
.hero .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------- scroll motion */
.progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; transform-origin: 0 50%;
            transform: scaleX(0); background: linear-gradient(90deg, var(--primary), var(--coral), var(--saffron)); }
.reveal { opacity: 0; transform: translateY(26px);
          transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .progress { display: none; }
}

/* ---------------------------------------------------------- forms */
.form { display: grid; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: block; font-weight: 650; font-size: 14.5px; color: var(--ink); }
.form label > input, .form label > textarea, .form label > .affix { margin-top: 7px; }
.form label > input, .form label > textarea { display: block; }
.form label small { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--mint); color: var(--primary); font-size: 12px; font-weight: 650; vertical-align: 1px; }
.form input, .form textarea {
  font: inherit; font-size: 16px; font-weight: 450; color: var(--ink);
  background: color-mix(in srgb, var(--mint) 55%, var(--surface));
  border: 1.5px solid transparent; border-radius: 14px; padding: 14px 16px; width: 100%;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.form input { height: 52px; }
.form textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.form input::placeholder, .form textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.form input:hover, .form textarea:hover { border-color: var(--line); }
.form input:focus, .form textarea:focus { outline: none; background: var(--surface); border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.form input:user-invalid, .form textarea:user-invalid { border-color: var(--coral); }
/* A field with a fixed prefix, e.g. https:// before the website address. */
.form .affix { display: flex; align-items: stretch; border-radius: 14px;
  background: color-mix(in srgb, var(--mint) 55%, var(--surface)); border: 1.5px solid transparent;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.form .affix:hover { border-color: var(--line); }
.form .affix:focus-within { background: var(--surface); border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.form .affix span { display: grid; place-items: center; padding: 0 2px 0 16px; color: var(--muted);
  font-weight: 500; font-size: 16px; user-select: none; }
.form .affix input { background: transparent; border: 0; box-shadow: none; padding-left: 4px; }
.form .affix input:focus { box-shadow: none; background: transparent; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; }
.form .btn::after { content: "→"; font-weight: 700; transition: transform .2s; }
.form .btn:hover::after { transform: translateX(3px); }
.form .btn:disabled { opacity: .6; cursor: default; }
.form-status { font-size: 15px; margin: 0; }
.form-status:empty { display: none; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--coral-ink); }
.form.sent label, .form.sent .btn, .form.sent .row2 { display: none; }
.form.sent .form-status { font-size: 17px; font-weight: 600; padding: 16px 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.form-note { font-size: 14px; color: var(--muted); margin: 0; }
.form-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 0; padding: 0; list-style: none;
  font-size: 13.5px; color: var(--muted); }
.form-trust li::before { content: "✓"; color: var(--primary); font-weight: 800; margin-right: 6px; }
@media (max-width: 640px) {
  .form .row2 { grid-template-columns: 1fr; }
  .form .btn { justify-self: stretch; justify-content: center; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-status.err { color: var(--coral); }
  :root:not([data-theme="light"]) .form input, :root:not([data-theme="light"]) .form textarea,
  :root:not([data-theme="light"]) .form .affix { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); }
}

/* The offer badge's label must not break across two lines on phones. */
.offer .tag { white-space: nowrap; }
@media (max-width: 520px) { .offer { align-items: flex-start; font-size: 14.5px; } }

/* "Why owners pick Marchlight": six reasons, a colour stripe each so the row reads as a set. */
.why .card { border-top: 4px solid var(--primary); }
.why .card:nth-child(3n+2) { border-top-color: var(--coral); }
.why .card:nth-child(3n) { border-top-color: var(--saffron); }
.why .card h3 { margin-bottom: 6px; }

/* Three promises under the pricing: guarantee, report, bundle. */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.promises > div { background: var(--saffron-soft); border: 1px solid color-mix(in srgb, var(--saffron) 45%, transparent);
  border-radius: 16px; padding: 16px 18px; font-size: 15.5px; color: var(--ink); }
.promises b { display: block; margin-bottom: 4px; font-size: 16.5px; }
@media (max-width: 860px) { .promises { grid-template-columns: 1fr; } }

/* "Who we work with": industry links as chips. */
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.chip-link { padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; transition: border-color .15s, color .15s; }
.chip-link:hover, .chip-link:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }