/* ============================================================
   GOODALL AVIATION — site styles
   Palette: ink navy, warm paper, brass accent. Quiet and roomy.
   ============================================================ */

:root{
  --ink:      #0d1620;   /* headings, header bar */
  --ink-soft: #1b2735;
  --body:     #4c5665;   /* body copy */
  --muted:    #8a929e;   /* eyebrows, captions */
  --line:     #e4e1da;   /* hairlines */
  --paper:    #ffffff;
  --paper-2:  #f7f5f1;   /* alternating band */
  --brass:    #9c7c4f;   /* accent — used sparingly */

  --wrap: 1140px;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--ink);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.005em;
  margin:0 0 .6em;
}

h1{ font-size:clamp(2.5rem, 5.4vw, 4.15rem); }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size:1.35rem; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ---- shared bits -------------------------------------------------- */

.eyebrow{
  font-family:var(--sans);
  font-size:.685rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.4rem;
}

.lede{
  font-size:1.16rem;
  line-height:1.75;
  max-width:44ch;
}

.rule{
  width:52px; height:1px; border:0;
  background:var(--brass);
  margin:0 0 2.2rem;
}

section{ padding:clamp(66px, 9vw, 118px) 0; }
.band{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.measure{ max-width:62ch; }

/* ---- buttons ------------------------------------------------------ */

.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  padding:16px 34px;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ background:var(--ink); color:#fff; }

.btn-light{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ---- header ------------------------------------------------------- */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height:78px; gap:20px;
}

.brand{ text-decoration:none; display:flex; align-items:center; gap:12px; }
.brand img{ height:38px; width:auto; }
.brand .wordmark{
  font-family:var(--serif);
  font-size:1.32rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink);
  line-height:1;
}
.brand .sub{
  display:block;
  font-family:var(--sans);
  font-size:.56rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:6px;
}

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-size:.73rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--body);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.main-nav a:hover,
.main-nav a.active{ color:var(--ink); border-bottom-color:var(--brass); }

.nav-toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  font-size:1.4rem; color:var(--ink); line-height:1; padding:6px 2px;
}

/* ---- hero --------------------------------------------------------- */

/* Gulfstream G700 image sits behind the hero. It is deliberately near-invisible:
   the overlay below keeps the left side solid so the headline stays readable,
   and lets the aircraft surface only in the right-hand space. To swap the
   image, drop a new file in assets/img/ and change the filename here. */
.hero{
  position:relative;
  background:var(--ink) url("../img/hero-g700.jpg") no-repeat right center / cover;
  color:#fff;
  padding:clamp(96px, 15vw, 190px) 0 clamp(84px, 12vw, 150px);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    /* faint brass glow, unchanged */
    radial-gradient(120% 80% at 78% 12%, rgba(156,124,79,.14) 0%, rgba(156,124,79,0) 58%),
    /* left-to-right veil: opaque behind the text, thinning across the aircraft */
    linear-gradient(90deg,
      rgba(13,22,32,.99) 0%,
      rgba(13,22,32,.96) 26%,
      rgba(13,22,32,.84) 46%,
      rgba(13,22,32,.66) 68%,
      rgba(13,22,32,.70) 100%),
    /* top and bottom settle back into the page */
    linear-gradient(180deg, rgba(16,28,40,.42) 0%, rgba(13,22,32,.10) 45%, rgba(10,17,25,.72) 100%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero .eyebrow{ color:rgba(255,255,255,.6); }
.hero h1{ color:#fff; max-width:17ch; font-weight:300; }
.hero .lede{ color:rgba(255,255,255,.74); max-width:50ch; margin-top:1.8rem; }
.hero .hero-cta{ margin-top:2.8rem; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; }
.hero .hero-note{ font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.45); }

/* ---- two-column intro --------------------------------------------- */

.split{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(36px, 6vw, 90px);
  align-items:start;
}
.split h2{ margin-top:-.12em; }

/* ---- element / capability grids ------------------------------------ */

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.grid-4 .cell{ background:var(--paper-2); padding:38px 30px 42px; }
.band .grid-4 .cell{ background:#fff; }

.cell .num{
  font-family:var(--sans);
  font-size:.68rem; font-weight:500; letter-spacing:.2em;
  color:var(--brass); display:block; margin-bottom:18px;
}
.cell h3{ font-size:1.28rem; margin-bottom:.5em; }
.cell p{ font-size:.94rem; line-height:1.7; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(34px,5vw,64px); }

.list-clean{ list-style:none; margin:0; padding:0; }
.list-clean li{
  padding:17px 0 17px 26px;
  border-bottom:1px solid var(--line);
  position:relative;
  font-size:1rem;
}
.list-clean li:first-child{ border-top:1px solid var(--line); }
.list-clean li::before{
  content:""; position:absolute; left:0; top:29px;
  width:9px; height:1px; background:var(--brass);
}
.list-clean strong{ color:var(--ink); font-weight:500; }

/* ---- FAQ ------------------------------------------------------------ */

.faq{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 clamp(40px,6vw,80px);
}
.faq-item{ padding:26px 0 28px; border-top:1px solid var(--line); }
.faq-item h3{
  font-size:1.16rem;
  margin-bottom:.55em;
}
.faq-item p{ font-size:.95rem; line-height:1.72; margin:0; }
.faq-item a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.faq-item a:hover{ border-bottom-color:var(--brass); }

/* ---- presence / offices -------------------------------------------- */

/* auto-fit: three across on desktop, folding to two then one as it narrows */
.offices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(30px,4vw,56px); }
.office{ border-top:1px solid var(--line); padding-top:26px; }
.office .tag{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); display:block; margin-bottom:14px;
}
.office h3{ margin-bottom:.35em; }
.office p{ font-size:.96rem; }

/* ---- quiet CTA band ------------------------------------------------- */

.cta{
  background:var(--ink);
  color:#fff;
  text-align:center;
  padding:clamp(70px,9vw,110px) 0;
}
.cta h2{ color:#fff; font-weight:300; margin-bottom:.5em; }
.cta p{ color:rgba(255,255,255,.68); max-width:52ch; margin:0 auto 2.4rem; }

/* ---- contact page --------------------------------------------------- */

.page-head{
  border-bottom:1px solid var(--line);
  padding:clamp(64px,8vw,104px) 0 clamp(44px,6vw,70px);
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(40px,6vw,80px);
  align-items:start;
}

.form-card{ }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; }
.field{ margin-bottom:22px; display:flex; flex-direction:column; }
.field.full{ grid-column:1 / -1; }

label{
  font-size:.68rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px;
}
label .req{ color:var(--brass); }

input, select, textarea{
  font-family:var(--sans);
  font-size:1rem; font-weight:300; color:var(--ink);
  background:#fff;
  border:0; border-bottom:1px solid var(--line);
  padding:11px 2px;
  width:100%;
  border-radius:0;
  transition:border-color .2s ease;
}
select{ appearance:none; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238a929e' stroke-width='1.3'/></svg>") no-repeat right 2px center/12px; cursor:pointer; }
textarea{ resize:vertical; min-height:130px; line-height:1.7; }
input:focus, select:focus, textarea:focus{ outline:none; border-bottom-color:var(--brass); }
input::placeholder, textarea::placeholder{ color:#b9bec6; }

/* Segmented yes/no control — used for the AOG / emergency flag */
.choice{ grid-column:1 / -1; border:0; margin:0 0 22px; padding:0; min-width:0; }
.choice legend{
  font-size:.68rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:11px; padding:0;
}
.segment{ display:inline-flex; border:1px solid var(--line); background:#fff; }
.segment input{ position:absolute; opacity:0; width:0; height:0; }
.segment label{
  margin:0; cursor:pointer;
  font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--body);
  padding:13px 32px;
  transition:background .2s ease, color .2s ease;
}
.segment label:last-of-type{ border-left:1px solid var(--line); }
.segment label:hover{ color:var(--ink); }
.segment input:checked + label{ background:var(--ink); color:#fff; }
/* "Yes" reads as the exception — brass, so an AOG flag is visible at a glance */
.segment input[value="Yes"]:checked + label{ background:var(--brass); color:#fff; }
.segment input:focus-visible + label{ outline:2px solid var(--brass); outline-offset:2px; }

.form-actions{ margin-top:34px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.form-note{ font-size:.82rem; color:var(--muted); max-width:38ch; }

.form-status{
  display:none;
  margin-top:26px; padding:18px 22px;
  border-left:2px solid var(--brass);
  background:var(--paper-2);
  font-size:.95rem; color:var(--ink);
}
.form-status.show{ display:block; }

/* honeypot */
.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.contact-aside{ border-top:1px solid var(--line); padding-top:28px; }
.contact-aside .blk{ margin-bottom:34px; }
.contact-aside .tag{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:12px;
}
.contact-aside a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.contact-aside a:hover{ border-bottom-color:var(--brass); }
.contact-aside p{ font-size:.96rem; }

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

.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,.6);
  font-size:.88rem;
  padding:70px 0 44px;
}
.site-footer a{ color:rgba(255,255,255,.78); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22); }
.site-footer a:hover{ color:#fff; border-bottom-color:#fff; }

.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.footer-top .wordmark{
  font-family:var(--serif); color:#fff;
  font-size:1.2rem; letter-spacing:.17em; text-transform:uppercase;
  display:block; margin-bottom:16px;
}
.footer-col .tag{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.42); display:block; margin-bottom:14px;
}
.footer-col p{ margin-bottom:.5em; }

.footer-bottom{
  padding-top:26px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:.78rem; color:rgba(255,255,255,.42);
}
.disclaimer{
  margin-top:26px;
  font-size:.78rem; line-height:1.7;
  color:rgba(255,255,255,.42);
  max-width:80ch;
}

/* ---- responsive ------------------------------------------------------ */

@media (max-width:960px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:1fr; gap:36px; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .contact-layout{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  body{ font-size:16px; }

  /* Narrow screens: text runs the full width, so pull the aircraft further
     right and lay a heavier veil over it. It reads as texture, not a photo. */
  .hero{ background-position:78% center; }
  .hero::before{
    background:
      radial-gradient(120% 80% at 78% 12%, rgba(156,124,79,.12) 0%, rgba(156,124,79,0) 58%),
      linear-gradient(180deg, rgba(13,22,32,.93) 0%, rgba(13,22,32,.86) 55%, rgba(10,17,25,.94) 100%);
  }

  .nav-toggle{ display:block; }
  .main-nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:8px 28px 18px;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:13px 0; width:100%; border-bottom:1px solid var(--line); }
  .site-header .wrap{ position:relative; }
  .grid-4{ grid-template-columns:1fr; }
  .faq{ grid-template-columns:1fr; gap:0; }
  .offices{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:30px; }
}