:root{
    --cream:#FAF9F3;
    --cream-line:#E7E1D3;
    --white:#FFFFFF;
    --ink:#333333;
    --charcoal:#3A3A3A;
    --indigo:#5B3FE0;
    --gold:#C79A46;
    --teal:#17332F;
    --field-border:#858585;
    --btn-border:rgba(35,35,35,0.55);
  }

  /* This design commits to one light, editorial look regardless of OS theme —
     a charter airline's brand palette shouldn't invert to dark mode. */

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--cream);
    color:var(--charcoal);
    font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ text-decoration:none; color:inherit; }
  :focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; }
  /* Sticky nav is ~85px tall — keep anchored sections clear of it. */
  section[id]{ scroll-margin-top:96px; }

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

  /* ---------- Nav ---------- */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--cream);
    border-bottom:1px solid var(--cream-line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px clamp(20px,4vw,64px);
  }
  .nav__logo{ height:56px; width:auto; }
  .nav__links{
    display:flex;
    align-items:center;
    gap:clamp(20px,3vw,44px);
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:15px;
    letter-spacing:0.01em;
  }
  .nav__links a{
    position:relative;
    color:var(--ink);
    padding:4px 0;
    transition:color .2s ease;
  }
  .nav__links a::after{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:-2px;
    height:2px;
    background:var(--indigo);
    transition:right .25s ease;
  }
  .nav__links a:hover{ color:var(--indigo); }
  .nav__links a:hover::after{ right:0; }
  .nav__links a.is-active{ color:var(--indigo); }
  .nav__links a.is-active::after{ right:0; }

  .nav__toggle{
    display:none;
    width:44px; height:44px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    color:var(--ink);
  }
  .nav__toggle span{
    display:block;
    width:22px; height:1.5px;
    margin:5px auto;
    background:currentColor;
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    height:88vh;
    min-height:640px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hero__bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:32% 55%;
  }
  .hero__scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(20,24,20,0.02) 0%, rgba(20,24,20,0) 30%, rgba(15,18,15,0.06) 100%);
  }
  .hero__content{
    position:relative;
    z-index:2;
    max-width:720px;
    padding:0 28px;
    text-align:center;
  }
  .hero__content h1{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:clamp(30px, 4.4vw, 52px);
    line-height:1.18;
    color:var(--ink);
    margin:0 0 22px;
    text-wrap:balance;
  }
  .hero__content p{
    font-weight:300;
    font-size:clamp(15px,1.15vw,17px);
    line-height:1.75;
    color:var(--charcoal);
    max-width:560px;
    margin:0 auto 34px;
  }
  .btn-ghost{
    display:inline-block;
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:14px;
    letter-spacing:0.02em;
    color:var(--ink);
    border:1px solid var(--btn-border);
    padding:13px 40px;
    background:rgba(250,249,243,0.35);
    backdrop-filter:blur(2px);
    transition:background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
  }
  .btn-ghost:hover{
    background:var(--ink);
    color:var(--cream);
    border-color:var(--ink);
    transform:translateY(-1px);
  }
  /* On a plain white panel the border reads at full strength. */
  .btn-ghost--solid{
    border-color:var(--ink);
    background:transparent;
    backdrop-filter:none;
    font-size:15px;
    line-height:1;
    padding:14.5px 41px;
  }

  /* ---------- Social rail (fixed: persists across sections) ---------- */
  .social-rail{
    position:fixed;
    right:clamp(14px,2.4vw,34px);
    top:50%;
    transform:translateY(-50%);
    z-index:40;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .social-rail a{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    background:rgba(250,249,243,0.55);
    border-radius:50%;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .social-rail a:hover{
    background:var(--ink);
    color:var(--cream);
    transform:translateY(-2px);
  }
  .social-rail svg{ width:17px; height:17px; }

  /* ---------- About ---------- */
  .about{
    background:var(--cream);
    padding:clamp(40px,4vw,64px) clamp(20px,4.17vw,80px);
  }
  .about__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:clamp(420px,28.5vw,547px);
  }
  .about__panel{
    background:var(--white);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    text-align:center;
    padding:60px clamp(24px,3vw,44px) 28px;
  }
  .about__panel h2{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:clamp(34px,3.4vw,64px);
    line-height:1.1;
    letter-spacing:0.005em;
    text-transform:uppercase;
    color:var(--ink);
    margin:0 0 23px;
    text-wrap:balance;
  }
  .about__panel p{
    font-size:clamp(15px,0.85vw,16px);
    line-height:1.9;
    color:var(--ink);
    max-width:424px;
    margin:0 0 57px;
  }
  .about__media{
    position:relative;
    overflow:hidden;
  }
  /* Absolute so the photo's intrinsic height can't drive the row height —
     the grid's min-height and the panel content own that. */
  .about__media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  /* ---------- Services ---------- */
  .services{
    background:var(--cream);
    padding:clamp(40px,4vw,64px) clamp(16px,2.73vw,52px);
  }
  .services__panel{
    background:var(--white);
    padding:clamp(56px,8vw,153px) clamp(24px,3vw,48px) clamp(48px,5.3vw,102px);
    text-align:center;
  }
  .services__title{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:clamp(34px,3.4vw,64px);
    line-height:1.1;
    letter-spacing:0.005em;
    text-transform:uppercase;
    color:var(--ink);
    margin:0 0 20px;
    text-wrap:balance;
  }
  .services__intro{
    font-size:clamp(15px,0.85vw,16px);
    line-height:1.9;
    color:var(--ink);
    max-width:690px;
    margin:0 auto 30px;
  }
  .services__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    max-width:1020px;
    margin:0 auto;
  }
  .service{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .service__num{
    font-weight:700;
    font-size:clamp(40px,3.02vw,58px);
    line-height:1.1;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin:0 0 20px;
  }
  .service__name{
    font-weight:400;
    font-size:clamp(17px,1.04vw,20px);
    line-height:1.4;
    color:var(--ink);
    margin:0 0 16px;
  }
  .service__copy{
    font-size:clamp(15px,0.85vw,16px);
    line-height:1.9;
    color:var(--ink);
    max-width:240px;
    margin:0;
  }

  /* ---------- Sectors ---------- */
  .sectors{
    background:var(--cream);
    padding:clamp(40px,4vw,64px) clamp(20px,4.17vw,80px) clamp(48px,5vw,80px);
  }
  .sectors__title{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:clamp(34px,3.4vw,64px);
    line-height:1.1;
    letter-spacing:0.005em;
    text-transform:uppercase;
    color:var(--ink);
    text-align:center;
    margin:0 0 12px;
    text-wrap:balance;
  }
  /* Only the Industries page passes an intro; the home page has none, so the
     title keeps its original 12px gap to the grid there. */
  .sectors__intro{
    font-size:clamp(15px,0.85vw,16px);
    line-height:1.9;
    color:var(--ink);
    text-align:center;
    max-width:690px;
    margin:0 auto 30px;
  }
  .sectors__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
  }
  .sector{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    margin:0;
  }
  .sector img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
  }
  .sector figcaption{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    text-align:center;
    background:rgba(18,22,28,0.45);
    color:#FFFFFF;
    font-family:'Poppins',sans-serif;
    font-weight:400;
    font-size:clamp(20px,2.66vw,51px);
    line-height:1.22;
    text-transform:uppercase;
    text-wrap:balance;
    opacity:0;
    transition:opacity .35s ease;
  }
  /* Reveal on pointer hover; keyboard users and touch devices get the
     always-on treatment below, and the text is in the DOM either way. */
  @media (hover:hover){
    .sector:hover figcaption{ opacity:1; }
    .sector:hover img{ transform:scale(1.04); }
  }
  @media (hover:none){
    .sector figcaption{
      opacity:1;
      align-items:flex-end;
      background:linear-gradient(180deg, rgba(18,22,28,0) 35%, rgba(18,22,28,0.72) 100%);
      font-size:clamp(14px,3.4vw,20px);
      padding:14px;
    }
  }

  /* ---------- Contact ---------- */
  .contact{
    position:relative;
    background-color:#F4EEE2;
    background-image:url("/images/contact-bg.jpg");
    background-size:cover;
    background-position:center;
    padding:clamp(56px,6.09vw,117px) clamp(20px,4vw,64px) clamp(56px,5.9vw,114px);
    text-align:center;
  }
  .contact__title{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:clamp(34px,3.4vw,64px);
    line-height:1.1;
    letter-spacing:0.005em;
    text-transform:uppercase;
    color:var(--ink);
    margin:0 0 40px;
    text-wrap:balance;
  }
  .contact__details{
    margin:0 0 76px;
  }
  .contact__details p{
    font-size:clamp(15px,0.85vw,16px);
    line-height:1.9;
    color:var(--ink);
    margin:0 0 11px;
  }
  .contact__details p:last-child{ margin-bottom:0; }
  .contact__details a{
    color:inherit;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease;
  }
  .contact__details a:hover{ border-bottom-color:currentColor; }

  .contact__lead{
    font-size:clamp(18px,1.15vw,22px);
    line-height:1.4;
    color:var(--ink);
    margin:0 0 62px;
  }

  .contact__form{
    width:100%;
    max-width:572px;
    margin:0 auto;
    text-align:left;
  }
  .contact__row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
  }
  /* label cap-top to input top measures 25px in the reference.
     :last-of-type is listed too, or the quote form's 24px bottom margin
     (declared later in this sheet) wins and inflates the grid row. */
  .contact__form .field,
  .contact__form .field:last-of-type{ margin-bottom:0; gap:13px; }
  /* Row spacing only between rows - never between the two fields inside one,
     which would drop the right-hand column below the left. */
  .contact__form .contact__row + .contact__row,
  .contact__form .contact__row + .field{ margin-top:44px; }
  .contact__form textarea{ height:92px; }
  .contact__form .quote__submit{ height:43px; margin-top:41px; }

  /* ---------- Cookie consent ---------- */
  .consent{
    position:fixed;
    left:clamp(14px,2.4vw,26px);
    bottom:clamp(14px,2.4vw,26px);
    z-index:60;
    max-width:420px;
    background:var(--white);
    border:1px solid var(--cream-line);
    box-shadow:0 6px 26px rgba(35,35,35,0.16);
    padding:20px 22px;
  }
  .consent[hidden]{ display:none; }
  .consent p{
    font-size:14px;
    line-height:1.65;
    color:var(--ink);
    margin:0 0 16px;
  }
  .consent__row{ display:flex; gap:10px; flex-wrap:wrap; }
  .consent button{
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:14px;
    line-height:1;
    padding:11px 20px;
    border:1px solid var(--ink);
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  .consent__accept{ background:var(--ink); color:var(--white); }
  .consent__accept:hover{ background:#1F1F1F; }
  .consent__decline{ background:transparent; color:var(--ink); }
  .consent__decline:hover{ background:var(--ink); color:var(--white); }
  @media (max-width:560px){
    .consent{ left:12px; right:12px; bottom:12px; max-width:none; padding:18px; }
  }

  /* ---------- Footer ---------- */
  /* NOTE: do not make .site a flex column to pin the footer down on short
     pages. That was tried and it collapsed the hero — this layout has been
     broken by exactly that change once before. The empty area under the
     footer on a short page is cosmetic and goes away as content is written. */
  .site-footer{
    background:var(--cream);
    text-align:center;
    padding:44px 24px;
  }
  .site-footer p{
    font-family:'Poppins',sans-serif;
    font-weight:400;
    font-size:15px;
    line-height:1.4;
    color:var(--ink);
    margin:0;
  }

  /* ---------- Quote section ---------- */
  .quote{
    background:var(--cream);
    padding:clamp(64px,8vw,104px) 24px clamp(72px,9vw,116px);
  }
  .quote__title{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:clamp(28px,3.2vw,38px);
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--ink);
    text-align:center;
    margin:0 0 43px;
  }
  .quote__card{
    max-width:500px;
    margin:0 auto;
    background:var(--white);
    padding:26px 24px;
  }
  .field{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:28px;
  }
  /* explicit last gap so it can't collapse with the button's margin */
  .field:last-of-type{ margin-bottom:24px; }
  .field label{
    font-family:'Poppins',sans-serif;
    font-weight:400;
    font-size:14px;
    line-height:1;
    color:var(--ink);
  }
  .field label .req{ color:var(--gold); }
  .field input,
  .field textarea{
    font-family:'Inter',sans-serif;
    font-size:15px;
    color:var(--ink);
    background:var(--white);
    border:1px solid var(--field-border);
    border-radius:0;
    padding:0 12px;
    height:41px;
    width:100%;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field textarea{
    height:92px;
    padding:11px 12px;
    resize:vertical;
    line-height:1.6;
  }
  .field input:focus,
  .field textarea:focus{
    outline:none;
    border-color:var(--ink);
    box-shadow:0 0 0 2px rgba(51,51,51,0.10);
  }
  .field input[aria-invalid="true"],
  .field textarea[aria-invalid="true"]{ border-color:#B4402F; }
  .field .error{
    font-size:12.5px;
    color:#B4402F;
    margin-top:-6px;
  }
  .field .error:empty{ display:none; }

  .quote__submit{
    display:block;
    width:100%;
    height:41px;
    border:none;
    border-radius:0;
    background:var(--ink);
    color:var(--white);
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:15px;
    cursor:pointer;
    margin-top:0;
    transition:background .2s ease, transform .15s ease;
  }
  .quote__submit:hover{ background:#1F1F1F; transform:translateY(-1px); }
  .quote__submit:disabled{ opacity:.6; cursor:default; transform:none; }

  .quote__status{
    margin:16px 0 0;
    font-size:14px;
    line-height:1.6;
    text-align:center;
    color:var(--ink);
  }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .quote__status:empty{ display:none; }
  .quote__status[data-tone="ok"]{ color:#1F6F4A; }
  .quote__status[data-tone="err"]{ color:#B4402F; }

  @media (max-width:760px){
    .nav{ flex-wrap:wrap; }
    .nav__toggle{ display:block; }
    .nav__links{
      order:3;
      flex-basis:100%;
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      max-height:0;
      overflow:hidden;
      transition:max-height .3s ease;
    }
    .nav__links.is-open{ max-height:340px; }
    .nav__links a{
      width:100%;
      padding:13px 2px;
      border-top:1px solid var(--cream-line);
    }
    .nav__links a::after{ display:none; }

    /* The full rail can't share the narrow content column, so mobile keeps only
       the WhatsApp action button. All three links also live in the footer. */
    .social-rail{
      top:auto;
      bottom:18px;
      right:18px;
      transform:none;
    }
    .social-rail a:not(:first-child){ display:none; }
    .social-rail a:first-child{
      width:48px; height:48px;
      background:var(--ink);
      color:var(--cream);
      box-shadow:0 4px 14px rgba(35,35,35,0.28);
    }
    .social-rail svg{ width:21px; height:21px; }

    .hero{ height:auto; min-height:100svh; padding:110px 0 70px; }
    .hero__content p{ font-size:14.5px; }
    .about__grid{
      grid-template-columns:1fr;
      min-height:0;
    }
    .about__panel{
      order:2;
      justify-content:flex-start;
      padding:36px 24px 40px;
    }
    .about__panel p{ margin-bottom:34px; }
    .about__media{ order:1; position:relative; aspect-ratio:3/2; }
    .services__grid{
      grid-template-columns:1fr;
      gap:40px;
      max-width:340px;
    }
    .sectors__grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
    .contact__row{ gap:16px; }
    .sectors__title{ margin-bottom:20px; }
    .quote{ padding-left:20px; padding-right:20px; }
    .quote__card{ padding:24px 20px; }
  }

  /* ---------- Interior pages (Phase 1) ---------- */
  .page{
    background:var(--cream);
    padding:clamp(48px,6vw,88px) clamp(20px,4.17vw,80px);
  }
  .page + .page{ padding-top:0; }
  .page__head{ max-width:760px; margin:0 auto clamp(28px,3vw,44px); text-align:center; }
  .page__eyebrow{
    font-family:'Poppins',sans-serif; font-weight:500;
    font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--gold); margin:0 0 14px;
  }
  .page__eyebrow a{ color:inherit; }
  .page__eyebrow a:hover{ text-decoration:underline; }
  .page h1{
    font-family:'Poppins',sans-serif; font-weight:700;
    font-size:clamp(32px,3.4vw,56px); line-height:1.12;
    text-transform:uppercase; letter-spacing:0.005em;
    color:var(--ink); margin:0 0 20px; text-wrap:balance;
  }
  .page__lead{
    font-size:clamp(16px,1.05vw,18px); line-height:1.85;
    color:var(--ink); margin:0; text-wrap:pretty;
  }
  .page__body{ max-width:680px; margin:0 auto; }
  .page__body h2{
    font-family:'Poppins',sans-serif; font-weight:600;
    font-size:clamp(20px,1.6vw,26px); line-height:1.3;
    color:var(--ink); margin:38px 0 12px;
  }
  .page__body h2:first-child{ margin-top:0; }
  .page__body p{ font-size:16px; line-height:1.9; color:var(--ink); margin:0 0 16px; }
  .page__cta{ text-align:center; margin-top:clamp(32px,4vw,52px); }
  /* A trailing section that holds only the button — the block above it has
     already supplied the section's own bottom padding. */
  .page--cta{ padding-top:0; }

  /* Placeholder copy the client still has to write. Deliberately obvious:
     if any of these reach production, they should be impossible to miss. */
  .todo{
    border-left:3px solid var(--gold);
    background:rgba(199,154,70,0.07);
    padding:14px 18px; font-style:italic; color:#6B6152 !important;
  }
  .todo::before{
    content:"To write: "; font-style:normal; font-weight:600; color:var(--gold);
  }

  /* Service names link through to their own pages */
  .service__name a{ color:inherit; border-bottom:1px solid transparent; transition:border-color .2s ease; }
  .service__name a:hover{ border-bottom-color:var(--gold); }

  /* Header brand + language switcher */
  .nav__brand{ display:block; line-height:0; }
  .nav__langs{ display:inline-flex; gap:10px; margin-left:6px; padding-left:16px; border-left:1px solid var(--cream-line); }
  .nav__langs a{ font-size:13px; letter-spacing:0.06em; color:var(--charcoal); }
  .nav__langs a.is-active{ color:var(--indigo); font-weight:600; }
  @media (max-width:760px){
    .nav__langs{ border-left:0; padding-left:0; margin:8px 0 0; }
    .nav__langs a{ padding:10px 0; }
  }