:root {
    --ink: #f4f7f4;
    --muted: rgba(244, 247, 244, 0.72);
    --line: rgba(255, 255, 255, 0.2);
    --green: #88c649;
    --deep: #071813;
    --panel: rgba(7, 24, 19, 0.82);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--deep);
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--deep);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #0a1d17 url("poster.jpg") center / cover no-repeat;
}

.backdrop video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.8) contrast(1.05);
}

.backdrop__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 15, 12, 0.76) 0%, rgba(3, 15, 12, 0.34) 58%, rgba(3, 15, 12, 0.5) 100%),
        linear-gradient(0deg, rgba(3, 15, 12, 0.5), transparent 52%);
}

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(24px, 4vw, 52px) clamp(22px, 6vw, 88px);
}

.brand img {
    display: block;
    width: clamp(150px, 17vw, 235px);
    height: auto;
}

.header-enquire {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
}

main, footer { position: relative; z-index: 1; }

.hero {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-items: end;
    padding: clamp(150px, 22vh, 230px) clamp(22px, 8vw, 118px) clamp(90px, 13vh, 140px);
}

.hero__content { max-width: 780px; }

.eyebrow {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

h1, h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

h1 { font-size: clamp(54px, 8.2vw, 124px); }

.hero__statement {
    max-width: 650px;
    margin: clamp(24px, 4vw, 44px) 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.45;
}

.primary-action, .submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin-top: 34px;
    padding: 0 26px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(5, 20, 16, 0.24);
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.primary-action:hover, .primary-action:focus-visible,
.submit-button:hover, .submit-button:focus-visible {
    border-color: #fff;
    background: #fff;
    color: var(--deep);
}

.scroll-cue {
    position: absolute;
    right: clamp(22px, 5vw, 72px);
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
}

.scroll-cue__line { width: 1px; height: 64px; background: rgba(255, 255, 255, 0.48); }

.contact {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.78fr);
    gap: clamp(52px, 9vw, 148px);
    align-items: center;
    padding: clamp(100px, 13vw, 180px) clamp(22px, 8vw, 118px);
    background: linear-gradient(90deg, rgba(3, 17, 13, 0.91), rgba(3, 17, 13, 0.75));
}

.contact__intro { max-width: 620px; }
.contact h2 { font-size: clamp(46px, 6vw, 88px); }
.contact__intro > p:last-child { max-width: 520px; margin: 30px 0 0; color: var(--muted); font-size: 18px; }

.form-card {
    padding: clamp(28px, 4vw, 52px);
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 22px; }

.field label {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.field label span { color: rgba(255, 255, 255, 0.46); font-size: 9px; letter-spacing: 0.08em; }

input, textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
}

input { height: 42px; }
textarea { min-height: 130px; padding: 10px 0; resize: vertical; }
input:focus, textarea:focus { border-bottom-color: var(--green); }

input[type="file"] {
    height: auto;
    padding: 11px 0 15px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.submit-button { width: 100%; margin-top: 4px; cursor: pointer; }
.trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.notice {
    margin-bottom: 24px;
    padding: 15px 17px;
    border-left: 3px solid var(--green);
    background: rgba(136, 198, 73, 0.1);
    font-size: 14px;
}
.notice strong, .notice span { display: block; }
.notice--error { border-left-color: #f1a282; background: rgba(241, 162, 130, 0.1); }
.notice ul { margin: 7px 0 0; padding-left: 18px; }

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px clamp(22px, 8vw, 118px);
    background: #04100d;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

footer img { width: 115px; height: auto; opacity: 0.8; }

@media (max-width: 820px) {
    .site-header { padding-top: max(24px, env(safe-area-inset-top)); }
    .header-enquire { display: none; }
    .brand img { width: 170px; }
    .backdrop video { object-position: 56% center; }
    .backdrop__veil { background: linear-gradient(0deg, rgba(3, 15, 12, 0.72), rgba(3, 15, 12, 0.34) 68%, rgba(3, 15, 12, 0.54)); }
    .hero { padding-bottom: max(82px, calc(58px + env(safe-area-inset-bottom))); }
    .hero__statement { font-size: 18px; }
    .scroll-cue { display: none; }
    .contact { grid-template-columns: 1fr; gap: 48px; padding-top: 100px; }
    .form-card { backdrop-filter: none; }
}

@media (max-width: 560px) {
    h1 { max-width: 330px; font-size: clamp(50px, 16vw, 72px); }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .field label { display: block; }
    .field label span { display: block; margin-top: 4px; }
    footer { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .backdrop video { display: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
