/* V5.5.133 — the charter estimate form, in Crockett Aviation's own brand.
 *
 * Pulled from crockettaviation.com.au on 21 September 2026 rather than approximated: near-black
 * #0F0F0F, gold #E6B92C, Oswald for headings and buttons (uppercase, 2.16px tracking, square
 * corners, no radius anywhere), Open Sans for body text on white with #666 copy.
 *
 * This page is the first thing a charter customer sees after the website, and it is where they
 * hand over an email and a mobile. A visual break there reads as a third-party widget, and
 * close-but-not-quite reads worse than obviously different — so these values are the site's,
 * exactly, not something in the same family.
 *
 * Single theme on purpose: the website is light and does not offer a dark one. Every colour is
 * painted explicitly so the page holds whatever ground it is placed on.
 *
 * Kept out of styles.css, like portal.css, so a change here can never move the CMS. */

:root{
  --ink:#0F0F0F;
  --body-text:#666666;
  --muted:#8A8A8A;
  --surface:#FFFFFF;
  --ground:#F4F4F5;
  --sunken:#FAFAFA;
  --line:#DEDEDE;
  --line-strong:#BFBFBF;
  --gold:#E6B92C;
  --gold-dark:#C79D19;
  --on-gold:#0F0F0F;
  --gold-soft:#FBF4DF;
  --link:#2EA3F2;
  --signal:#B3521A;
  --signal-soft:#FBEFE6;
  --ok:#2C7551;
  --display:"Oswald","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Open Sans",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(15,15,15,.05),0 10px 30px -22px rgba(15,15,15,.45);
  --pop:0 12px 34px -12px rgba(15,15,15,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--body-text);font-family:var(--body);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}

/* ---------- masthead ---------- */
.topbar{background:var(--ink);color:#fff;padding-top:env(safe-area-inset-top,0px);border-bottom:3px solid var(--gold)}
.topbar-in{max-width:1120px;margin:0 auto;padding:16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.brand .mark{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.18em;color:var(--gold);border:1px solid var(--gold);padding:5px 10px;line-height:1}
.brand h1{font-family:var(--display);font-weight:600;font-size:22px;margin:0;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.brand .sub{font-size:12px;letter-spacing:.06em;color:#B9B9B9;text-transform:uppercase}
.topbar-tools{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.staff-flag{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(230,185,44,.5);padding:5px 10px}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:26px 16px 44px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;align-items:start}
@media (max-width:880px){.wrap{grid-template-columns:1fr}}

.panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.phead{padding:16px 20px;border-bottom:1px solid var(--line)}
.phead h2{font-family:var(--display);font-weight:600;font-size:18px;margin:0;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pbody{padding:20px}

.eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0 0 10px}
hr.rule{border:0;border-top:1px solid var(--line);margin:20px 0}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;position:relative;min-width:0}
.field.inline{flex-direction:row;align-items:center;gap:10px}
.field.inline label{white-space:nowrap}
label{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.req{color:var(--gold-dark)}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=email],input[type=tel],input[type=search]{
  font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:0;padding:11px 12px;width:100%;min-width:0}
input::placeholder{color:#AFAFAF}
input:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
input:focus{border-color:var(--ink)}
input.bad{border-color:var(--signal);background:var(--signal-soft)}
.err{font-size:13px;color:var(--signal);line-height:1.45}

/* V5.5.135 — FOUR FIELDS AND A BUTTON DO NOT FIT ACROSS HALF A PAGE.
 *
 * V5.5.134 gave every track a minimum, which was right, and then kept all five across one row,
 * which was not: the minimums summed to ~713px while this panel is ~580px wide on a desktop
 * two-column layout. The row overflowed its own box and the TIME field rendered on top of the
 * estimate panel beside it.
 *
 * The breakpoints were the deeper mistake. They keyed off VIEWPORT width, and the viewport here
 * is 2000px — it is the CONTAINER that is narrow, and no media query can see that. So the layout
 * no longer tries: two fields per row at every width above phone size, which fits the panel it
 * actually lives in rather than the screen it is on.
 *
 * Row 1: where from, where to, and the remove control.
 * Row 2: date and time.
 * Placement is explicit by position, so it does not depend on source order surviving a refactor. */
.sector{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;
  gap:14px 14px;align-items:start;padding:16px;background:var(--sunken);border:1px solid var(--line)}
.sector>*:nth-child(1){grid-column:1;grid-row:1}
.sector>*:nth-child(2){grid-column:2;grid-row:1}
.sector>*:nth-child(3){grid-column:1;grid-row:2}
.sector>*:nth-child(4){grid-column:2;grid-row:2}
.sector>.del{grid-column:3;grid-row:1}
.sector label{white-space:nowrap}
.sector input[type=date],.sector input[type=time]{padding-left:10px;padding-right:8px}
.sector+.sector{margin-top:10px}
.sector .del{margin-top:26px}
@media (max-width:540px){
  .sector{grid-template-columns:minmax(0,1fr) 40px}
  .sector>*:nth-child(1){grid-column:1;grid-row:1}
  .sector>*:nth-child(2){grid-column:1;grid-row:2}
  .sector>*:nth-child(3){grid-column:1;grid-row:3}
  .sector>*:nth-child(4){grid-column:1;grid-row:4}
  .sector>.del{grid-column:2;grid-row:1}
}
.del{background:none;border:1px solid var(--line-strong);border-radius:0;color:var(--muted);width:40px;height:42px;cursor:pointer;font-size:18px;line-height:1}
.del:hover{color:var(--ink);border-color:var(--ink)}

.ap-sub{font-family:var(--display);font-size:12px;letter-spacing:.14em;color:var(--muted);min-height:16px}
.ap-sub.miss{color:var(--signal)}
.ap-list{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:270px;overflow-y:auto;background:var(--surface);border:1px solid var(--ink);box-shadow:var(--pop);padding:0;margin:0;list-style:none}
.ap-list[hidden]{display:none}
.ap-list .head{font-family:var(--display);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:10px 12px 6px}
.ap-list li.opt-row{padding:9px 12px;cursor:pointer;display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line)}
.ap-list li.opt-row:last-child{border-bottom:0}
.ap-list li.opt-row strong{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.04em;color:var(--ink)}
.ap-list li.opt-row span.name{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-list li.opt-row .code{margin-left:auto;font-family:var(--display);font-size:12px;letter-spacing:.14em;color:var(--muted)}
.ap-list li.opt-row[aria-selected=true],.ap-list li.opt-row:hover{background:var(--gold-soft)}
.ap-list li.none{padding:12px;color:var(--muted);font-size:14px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid3 .span2{grid-column:span 2}
@media (max-width:560px){.grid2,.grid3{grid-template-columns:1fr}.grid3 .span2{grid-column:auto}}

.rowtools{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap;align-items:center}
.check{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.check input{width:17px;height:17px;accent-color:var(--gold)}
.submitrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:20px}
.hint{font-size:13px;color:var(--muted);line-height:1.5}

/* ---------- buttons: the site's exactly — gold, square, uppercase, tracked ---------- */
.btn{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:2.16px;text-transform:uppercase;
  border-radius:0;padding:16px 30px;cursor:pointer;border:1px solid transparent;background:none;color:var(--ink)}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn-primary:hover{background:var(--gold-dark);border-color:var(--gold-dark)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.topbar .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.topbar .btn-ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn-sm{font-size:12px;letter-spacing:1.6px;padding:10px 18px}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------- result ---------- */
.gate{border:1px dashed var(--line-strong);padding:24px 20px;background:var(--sunken)}
.gate .lead{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.gate p{margin:0}

.result{border:1px solid var(--ink)}
.result .top{padding:24px 20px;background:var(--ink);color:#fff}
.result.referred .top{background:#2C3338}
.routeline{font-size:13px;color:#C9C9C9;margin:0;line-height:1.6}
.routeline .code{font-family:var(--display);font-size:12px;letter-spacing:.16em;color:var(--gold)}
.range{font-family:var(--display);font-weight:600;font-size:clamp(30px,5.6vw,44px);line-height:1.1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;margin:10px 0 0;color:var(--gold)}
.range.words{font-size:clamp(20px,3.6vw,26px);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.result .fine{padding:18px 20px;font-size:13.5px;color:var(--body-text);line-height:1.65;background:var(--surface)}
.refline{font-family:var(--display);font-size:12px;letter-spacing:.16em;color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#9A9A9A;padding-bottom:env(safe-area-inset-bottom,0px);margin-top:10px}
.foot-in{max-width:1120px;margin:0 auto;padding:26px 16px;font-size:12.5px;line-height:1.7}
.foot p{margin:0 0 8px;max-width:78ch}
.foot .legal{color:#6F6F6F;font-size:11.5px;letter-spacing:.04em}
.foot a{color:var(--gold);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .phone{font-family:var(--display);font-size:16px;letter-spacing:.1em;color:#fff}

@media (prefers-reduced-motion:no-preference){
  .result,.gate{animation:rise .22s ease-out}
  @keyframes rise{from{transform:translateY(5px);opacity:.35}to{transform:none;opacity:1}}
}

/* ---------- V5.5.139 — the honeypot ---------- */
/* Off-screen rather than display:none. A form filler that skips display:none still fills this
 * one, and nothing that a person or a screen reader can reach is affected: the wrapper carries
 * aria-hidden and the input is out of the tab order. */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- V5.5.139 — embed mode ----------
 *
 * Set by quote/embed.js when the URL carries ?embed=1, which is how this page is loaded inside
 * the iframe on crockettaviation.com.au/contact/. Everything below removes a piece of chrome the
 * HOST page already provides. Nothing below changes the form itself: the embed and the standalone
 * page must stay the same form, or the thing that gets tested is not the thing that ships.
 *
 * ONE DELIBERATE EXCEPTION: the footer's legal text stays. It names the operator and says an
 * estimate is not a binding quote, which is a statement about this form and has to travel with it
 * — the host page's own footer makes no such claim. It is restyled onto the page background
 * instead of a second dark slab under the site's own.
 *
 * V5.5.142 REVERSES ONE DECISION MADE HERE. 5.5.139 left the two-column layout alone, reasoning
 * that a media query inside an iframe measures the IFRAME, so the 880px breakpoint above finally
 * means the container width. That reasoning is still correct and the breakpoint still works — it
 * just answers the wrong question. On /contact/ the iframe is wider than 880px, so the estimator
 * rendered in two columns directly above a full-width form, and the page read as two different
 * layouts stacked on each other rather than one page. Embed mode is now single column at every
 * width, so the estimator and the form beneath it share one measure. The standalone page at
 * quote.crockettaviation.com.au keeps both columns and its breakpoint, unchanged. */
:root[data-embed="1"] body{background:transparent}
:root[data-embed="1"] .topbar{display:none}
:root[data-embed="1"] .wrap{max-width:none;padding:0 0 8px;grid-template-columns:1fr}
:root[data-embed="1"] .panel{box-shadow:none}

:root[data-embed="1"] .foot{background:transparent;color:var(--muted);margin-top:14px;border-top:1px solid var(--line)}
:root[data-embed="1"] .foot-in{max-width:none;padding:14px 0 0}
/* V5.5.158 — the 78ch measure on .foot p is a reading width for the standalone page, where the
 * footer sits on the dark band and the text is the only thing in it. In the iframe on /contact/
 * it reads as a half-width column under a full-width form, because releasing .foot-in alone
 * leaves the per-paragraph cap in place. Embed mode takes the frame. */
:root[data-embed="1"] .foot p{max-width:none}
:root[data-embed="1"] .foot .phone{display:none}
:root[data-embed="1"] .foot .legal{color:var(--muted)}
:root[data-embed="1"] .foot a{color:var(--gold-dark)}

/* An iframe reports its height to the parent; a horizontal scrollbar inside it is never wanted
 * and would be reported as content the parent cannot see. */
:root[data-embed="1"] body{overflow-x:hidden}

/* ---------- V5.5.139 — controls a thumb can hit ----------
 *
 * Found by opening the page at 390px rather than by reading it: "+ Add a stop" was 36px tall and
 * the Return-flight checkbox 17px, against a 44px minimum. Neither was new in this build — both
 * have been that size since the form was styled — but until 139 the only people using it were
 * staff on a desktop. A public page reached from a phone is a different test, and it is the one
 * that now applies.
 *
 * The checkbox itself stays small, because a 44px checkbox looks like a mistake. The LABEL is the
 * target: it wraps the input, so the whole 44px row is clickable. */
.rowtools .btn{min-height:44px}
.check{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.check input[type=checkbox]{width:20px;height:20px;accent-color:var(--gold);margin:0;flex:none}
.sector .del{min-height:44px}
.submitrow .btn{min-height:48px}