:root { --ink:#0b1f3a; --ink-soft:#38516b; --paper:#eef0ec; --sky:#a8c7d9; --signal:#b5371b; --line:rgba(11,31,58,.2); --serif:"Brygada 1918",Georgia,serif; --sans:"Onest",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.45; }
::selection { background:var(--signal); color:#fff; }
:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
.skip-link { position:fixed; z-index:20; top:-4rem; left:1rem; padding:.7rem 1rem; background:#fff; color:var(--ink); font-weight:700; }
.skip-link:focus { top:1rem; }
.site-header { position:absolute; z-index:5; width:100%; min-height:96px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 4.5vw; color:#fff; }
.brand { display:inline-flex; width:fit-content; color:inherit; text-decoration:none; }
.brand img { display:block; height:70px; width:auto; object-fit:contain; filter:brightness(1.3) saturate(.9); }
nav { display:flex; gap:1.8rem; }
nav a,.header-action,.site-footer a { color:inherit; font-size:.92rem; font-weight:650; text-decoration:none; }
nav a { color:rgba(255,255,255,.86); }
nav a:hover,.header-action:hover,.site-footer a:hover { text-decoration:underline; text-underline-offset:.28em; }
.header-action { justify-self:end; }
.header-action span { color:#ffb19c; font-size:1.15rem; }
.menu-toggle { display:none; }
.enquiry-hero { position:relative; min-height:clamp(490px,73svh,690px); display:flex; align-items:end; overflow:hidden; background:var(--ink); color:#fff; isolation:isolate; }
.hero-image { position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(5,18,34,.91) 0%,rgba(5,18,34,.72) 39%,rgba(5,18,34,.18) 78%),url("../assets/destination-guides/yunnan-g2f8c09145_1280.jpg") center/cover; }
.hero-copy { max-width:47rem; padding:10rem 7vw 6rem; }
.eyebrow,.form-kicker { margin:0 0:1rem; color:inherit; font-size:.73rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hero-copy h1,.enquiry-aside h2 { margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.045em; line-height:.91; text-wrap:balance; }
.hero-copy h1 { font-size:clamp(3.5rem,6vw,6.4rem); }
.hero-copy h1 em { color:#ffb19c; }
.hero-copy > p:not(.eyebrow) { max-width:47ch; margin:1.6rem 0 0; color:rgba(255,255,255,.82); font-size:1.05rem; }
.hero-link { display:inline-flex; gap:.8rem; margin-top:2.2rem; color:#fff; font-weight:700; text-decoration:none; }
.hero-link:hover { text-decoration:underline; text-underline-offset:.3em; }
.image-caption { position:absolute; right:4vw; bottom:1.5rem; margin:0; color:rgba(255,255,255,.7); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.enquiry-section { display:grid; grid-template-columns:minmax(19rem,.74fr) minmax(28rem,1.26fr); gap:clamp(4rem,10vw,12rem); padding:clamp(5rem,10vw,10rem) 7vw; }
.enquiry-aside { max-width:31rem; }
.enquiry-aside .eyebrow { color:var(--signal); }
.enquiry-aside h2 { font-size:clamp(3.1rem,4.8vw,5.4rem); }
.enquiry-aside > p:not(.eyebrow) { max-width:35ch; margin:1.7rem 0 0; color:var(--ink-soft); font-size:1.06rem; }
.next-steps { margin:3rem 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.next-steps li { display:grid; grid-template-columns:2.4rem 1fr; gap:.8rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.next-steps li > span { color:var(--signal); font-size:.72rem; font-weight:700; }
.next-steps strong { font-family:var(--serif); font-size:1.2rem; font-weight:600; }
.next-steps p { margin:.2rem 0 0; color:var(--ink-soft); font-size:.9rem; }
.enquiry-form { display:grid; gap:2.2rem; padding:clamp(1.5rem,3.7vw,3.5rem); background:#17304e; color:#fff; }
.form-intro { display:flex; justify-content:space-between; gap:1rem; padding-bottom:1.35rem; border-bottom:1px solid rgba(255,255,255,.28); }
.form-intro p { margin:0; color:rgba(255,255,255,.68); font-size:.8rem; }
.form-intro .form-kicker { color:#fff; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.55rem 1.35rem; }
label { display:grid; gap:.52rem; font-size:.79rem; font-weight:700; letter-spacing:.01em; }
label > span[aria-hidden="true"], legend span,.consent b { color:#ffb19c; }
input,select,textarea { width:100%; appearance:none; border:0; border-bottom:1px solid rgba(255,255,255,.42); border-radius:0; padding:.78rem 0; color:#fff; background:transparent; font:inherit; }
input::placeholder,textarea::placeholder { color:rgba(255,255,255,.48); }
select { color:#fff; }
option { color:var(--ink); }
textarea { min-height:8.5rem; resize:vertical; line-height:1.48; }
input:focus,select:focus,textarea:focus { outline:0; border-color:#fff; }
fieldset { margin:0; padding:0; border:0; }
legend { margin-bottom:1rem; font-size:.79rem; font-weight:700; }
.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.choice { position:relative; display:block; min-height:2.75rem; border:1px solid rgba(255,255,255,.34); padding:.73rem .7rem .68rem 2.15rem; cursor:pointer; font-size:.76rem; font-weight:600; transition:background .2s,border-color .2s; }
.choice input { position:absolute; width:1px; height:1px; opacity:0; }
.choice span::before { content:""; position:absolute; left:.74rem; top:.79rem; width:.65rem; height:.65rem; border:1px solid rgba(255,255,255,.7); }
.choice input:checked + span::before { border-color:#fff; background:#ffb19c; box-shadow:inset 0 0 0 2px #17304e; }
.choice:has(input:checked) { border-color:#fff; background:rgba(255,255,255,.09); }
.field-error { min-height:1rem; color:#ffd0c3; font-size:.72rem; font-weight:500; letter-spacing:0; }
.consent { grid-template-columns:1.05rem 1fr; align-items:start; gap:.75rem; font-size:.78rem; font-weight:500; line-height:1.4; }
.consent input { width:1.05rem; height:1.05rem; margin:.05rem 0 0; accent-color:#ffb19c; }
.consent-error { margin-top:-1.5rem; }
.submit-button { width:fit-content; border:0; padding:1rem 1.25rem; background:#fff; color:var(--ink); font:700 .88rem var(--sans); cursor:pointer; transition:transform .2s ease,background .2s ease; }
.submit-button:hover { transform:translateY(-2px); background:#dcecf4; }
.submit-button:disabled { cursor:wait; opacity:.7; transform:none; }
.form-message { min-height:1.3rem; margin:-1.25rem 0 0; color:#cfe5f1; font-size:.9rem; font-weight:600; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem 4.5vw; background:#09182c; color:#fff; }
.site-footer .brand img { height:42px; filter:none; }
.site-footer p { margin:0; color:rgba(255,255,255,.62); font-size:.78rem; }
@media (max-width:900px) { .site-header { grid-template-columns:1fr auto; min-height:80px; padding:0 5vw; } .brand img { height:60px; } .menu-toggle { display:block; border:0; background:transparent; color:#fff; font:700 .78rem var(--sans); } nav { display:none; grid-column:1/-1; grid-row:2; padding-bottom:1rem; flex-direction:column; gap:.7rem; } nav.is-open { display:flex; } .header-action { display:none; } .enquiry-section { grid-template-columns:1fr; } .enquiry-aside { max-width:40rem; } }
@media (max-width:620px) { .enquiry-hero { min-height:41rem; } .hero-copy { padding:8.5rem 5vw 4rem; } .hero-copy h1 { font-size:clamp(3.25rem,14vw,4.5rem); } .image-caption { display:none; } .enquiry-section { gap:3.5rem; padding:4.5rem 5vw; } .form-grid,.choice-grid { grid-template-columns:1fr; } .enquiry-form { margin:0 -5vw; padding:2rem 5vw; } .form-intro { display:block; } .form-intro .form-kicker { margin-bottom:.35rem; } .site-footer { align-items:flex-start; flex-direction:column; } }