/* =========================================================
   DNW Mockup — Shared Styles
   Matched to the DNW Registration form ("Vercel-Notion" light
   aesthetic): Inter only · warm off-white · near-black ink ·
   gold used sparingly · dark primary buttons.
   Tokens mirror assets/dnw-style.css so these marketing pages
   sit seamlessly next to the registration flow.
   ========================================================= */
:root{
  --bg:        #F7F7F5;   /* page background (matches --dnw-bg) */
  --card:      #FFFFFF;
  --soft:      #F4F4F2;   /* tinted bands / hovers */
  --soft-2:    #EFEFEC;
  --ink:       #0A0A0A;   /* primary text + primary buttons */
  --ink-2:     #3F3F46;
  --muted:     #6B6B70;
  --muted-2:   #9A9AA0;
  --line:      #EAEAEA;
  --line-2:    #F0F0F0;
  --accent:    #C9A24A;   /* DNW gold — used sparingly */
  --accent-2:  #E9D9AE;
  --accent-soft:rgba(201,162,74,.12);
  --success:   #16A34A;
  --danger:    #DC2626;
  --focus:     0 0 0 3px rgba(10,10,10,.08);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','cv11';
  min-height:100vh;
}
a{color:inherit}
img{max-width:100%;display:block}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(247,247,245,.82);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;letter-spacing:-0.01em;color:var(--ink);text-decoration:none;font-size:15px;
}
.brand .mark{
  width:32px;height:32px;border-radius:8px;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;
}
nav.main{display:flex;gap:4px;align-items:center}
nav.main a{
  color:var(--muted);text-decoration:none;
  padding:9px 13px;border-radius:8px;font-weight:500;font-size:14px;
  transition:.15s;
}
nav.main a:hover{color:var(--ink);background:var(--soft)}
nav.main a.active{color:var(--ink);background:var(--soft)}
nav.main a.cta{
  background:var(--ink);color:#fff;font-weight:500;
  padding:9px 18px;border-radius:var(--radius-sm);margin-left:8px;
}
nav.main a.cta:hover{background:#1A1A1A;color:#fff}
@media (max-width:760px){
  nav.main a:not(.cta){display:none}
}

/* =========================================================
   LAYOUT
   ========================================================= */
.wrap{max-width:1180px;margin:0 auto;padding:88px 32px 72px}
.wrap.tight{padding:60px 32px 56px}
.grid-2{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start}
@media (max-width:960px){
  .wrap{padding:56px 22px 56px}
  .grid-2{grid-template-columns:1fr;gap:44px}
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;
}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--accent);border-radius:2px}
h1.lead, h1.hero{
  font-size:clamp(36px,4.8vw,56px);
  line-height:1.08;letter-spacing:-0.03em;font-weight:700;color:var(--ink);
  margin:0 0 18px;
}
h1.lead em, h1.hero em{
  font-style:normal;font-weight:700;color:var(--accent);display:block;
}
h2.section-title{
  font-size:clamp(27px,3.4vw,38px);
  line-height:1.12;letter-spacing:-0.025em;font-weight:700;color:var(--ink);
  margin:0 0 14px;
}
h2.section-title em{
  font-style:normal;color:var(--accent);font-weight:700;
}
h3.card-title{
  font-size:18px;font-weight:600;color:var(--ink);margin:0 0 8px;letter-spacing:-0.015em;
}
.lead-sub, .section-sub{
  color:var(--muted);font-size:16px;line-height:1.6;max-width:600px;margin:0 0 36px;
}

/* =========================================================
   BADGE
   ========================================================= */
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px;border-radius:999px;
  background:var(--soft);border:1px solid var(--line);
  color:var(--muted);font-size:12.5px;font-weight:500;letter-spacing:0;
}
.badge .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.badge strong{color:var(--ink);font-weight:600;margin-right:2px}

/* =========================================================
   INFO LIST (left rail)
   ========================================================= */
.info-list{display:flex;flex-direction:column;gap:24px}
.info{padding:4px 0 4px 18px;border-left:2px solid var(--accent)}
.info .label{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 5px}
.info .value{color:var(--muted);font-size:15px;line-height:1.55;margin:0;word-break:break-word}
.info a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:.15s}
.info a:hover{color:var(--ink);border-color:var(--accent)}
.info em{color:var(--accent);font-style:normal;font-weight:600}

/* =========================================================
   SECTION BAND (charters / jobs feature sections)
   ========================================================= */
.band{padding:88px 0;border-top:1px solid var(--line)}
.band.tinted{background:var(--soft)}
.band .inner{max-width:1180px;margin:0 auto;padding:0 32px}
.band-head{max-width:720px;margin-bottom:44px}
.band-head.center{margin-left:auto;margin-right:auto;text-align:center}
@media (max-width:960px){.band{padding:60px 0}}

/* =========================================================
   FEATURE CARDS GRID
   ========================================================= */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.cards.cards-2{grid-template-columns:repeat(2,1fr)}
.cards.cards-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.cards,.cards.cards-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards,.cards.cards-2,.cards.cards-4{grid-template-columns:1fr}}
.feature{
  padding:26px;border-radius:var(--radius-lg);
  background:var(--card);
  border:1px solid var(--line);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.feature:hover{transform:translateY(-2px);border-color:#D4D4D4;box-shadow:0 8px 30px rgba(0,0,0,.05)}
.feature .icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--soft);border:1px solid var(--line);
  display:grid;place-items:center;margin-bottom:16px;font-size:21px;
}
.feature p{color:var(--muted);font-size:14.5px;margin:0;line-height:1.6}

/* =========================================================
   CHECKLIST (Jobs page – "What we look for")
   ========================================================= */
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.checklist li{
  position:relative;padding-left:32px;color:var(--muted);font-size:15px;line-height:1.5;
}
.checklist li::before{
  content:"✓";position:absolute;left:0;top:-1px;
  width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.checklist li strong{color:var(--ink);font-weight:600}
@media (max-width:640px){.checklist{grid-template-columns:1fr}}

/* =========================================================
   FORM CARD
   ========================================================= */
.form-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.04);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;margin-bottom:18px}
.field.full{grid-column:1 / -1}
.field label{font-size:13px;font-weight:500;color:var(--ink-2);margin:0 0 6px;letter-spacing:0}
.field label .req{color:var(--danger);margin-left:2px;font-weight:400}
.field .hint{color:var(--muted-2);font-size:12px;margin:6px 2px 0}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);font-family:inherit;font-size:14px;
  transition:border-color .15s,box-shadow .15s;outline:none;appearance:none;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.55}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6B70' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;cursor:pointer;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#D4D4D4}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ink);box-shadow:var(--focus);
}
.actions{
  margin-top:8px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.privacy{color:var(--muted-2);font-size:12px;line-height:1.5;max-width:360px}
.msg{margin-top:22px;padding:12px 14px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;display:none}
.msg.show{display:block}
.msg.ok{background:#F0FDF4;color:#14532D;border:1px solid #BBF7D0}
.msg.err{background:#FEF2F2;color:#991B1B;border:1px solid #FCA5A5}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
@media (max-width:640px){
  .form-card{padding:24px;border-radius:14px}
  .form-row{grid-template-columns:1fr}
  .field input,.field select,.field textarea{font-size:16px}
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  appearance:none;border:0;cursor:pointer;font-family:inherit;
  font-weight:500;font-size:14px;color:#fff;background:var(--ink);
  padding:13px 24px;border-radius:var(--radius-sm);
  transition:transform .15s,box-shadow .15s,background .15s;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  letter-spacing:-0.005em;
}
.btn:hover{transform:translateY(-1px);background:#1A1A1A;box-shadow:0 8px 24px rgba(0,0,0,.10)}
.btn:active{transform:translateY(0)}
.btn .arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}
.btn.ghost{
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  box-shadow:none;font-weight:500;
}
.btn.ghost:hover{background:var(--soft);border-color:#B0B0B0;box-shadow:none}
@media (max-width:480px){
  .btn{width:100%;justify-content:center}
  .actions{flex-direction:column-reverse;align-items:stretch}
}

/* =========================================================
   STATS STRIP (optional helper)
   ========================================================= */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.stat .n{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1}
.stat .l{color:var(--muted);font-size:14px;margin-top:6px}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr}}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg);
  padding:28px 32px;color:var(--muted-2);font-size:13.5px;
}
.site-footer .inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.site-footer a{color:var(--muted);text-decoration:none;margin-left:18px;transition:.15s}
.site-footer a:hover{color:var(--ink)}

/* ====== THEME-OVERRIDE GUARDS ======
   dnw-theme ships global html/body/nav rules that load after this file and
   force a dark navy background + a fixed navy header nav. These !important
   guards reclaim the intended light layout regardless of load order. */
html { background: #F7F7F5 !important; }
body { background: #F7F7F5 !important; color: var(--ink) !important; min-height: 100vh; }
.site-header nav.main {
  position: static !important; inset: auto !important;
  width: auto !important; height: auto !important;
  background: transparent !important; backdrop-filter: none !important;
  box-shadow: none !important; transform: none !important;
  display: flex !important; align-items: center;
}
.site-header nav.main a { position: static !important; float: none !important; }

/* Feature-card line icons (replaced emoji) */
.feature .icon { color: var(--ink); }
.feature .icon svg { width: 22px; height: 22px; display: block; }

/* ============================================================
   CONTACT PAGE — editorial "Browserbase" style (scoped .bb-*)
   ============================================================ */
.bb-contact { max-width: 1240px; margin: 0 auto; padding: 80px 32px 100px; }
.bb-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
.bb-left { position: relative; }
.bb-title { font-size: clamp(46px, 6vw, 76px); font-weight: 800; letter-spacing: -0.035em; line-height: .98; color: var(--ink); margin: 0 0 20px; }
.bb-sub { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 460px; margin: 0 0 40px; }
.bb-info { display: flex; flex-direction: column; gap: 14px; }
.bb-info-item { display: flex; align-items: baseline; gap: 18px; font-size: 15px; color: var(--ink); }
.bb-info-k { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted-light); min-width: 56px; }
.bb-info-item a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .15s; }
.bb-info-item a:hover { border-color: var(--accent); }
.bb-deco { margin-top: 52px; height: 240px; border-radius: 14px;
  background-image: radial-gradient(var(--accent) 1.3px, transparent 1.5px);
  background-size: 13px 13px; opacity: .2;
  -webkit-mask-image: linear-gradient(140deg, #000, transparent 72%);
  mask-image: linear-gradient(140deg, #000, transparent 72%); }

.bb-form { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 40px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px rgba(0,0,0,.05); }
.bb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.bb-field { display: flex; flex-direction: column; }
.bb-field.bb-full { margin-bottom: 24px; }
.bb-form label { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  text-transform: uppercase; font-size: 11.5px; letter-spacing: .12em; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.bb-form .req { color: var(--accent); margin-left: 2px; }
.bb-form input, .bb-form select, .bb-form textarea { width: 100%; padding: 13px 15px;
  border: 1px solid #D7D7D5; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--ink);
  background: var(--white); outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; }
.bb-form input::placeholder, .bb-form textarea::placeholder { color: var(--muted-light); }
.bb-form input:hover, .bb-form select:hover, .bb-form textarea:hover { border-color: #B9B9B6; }
.bb-form input:focus, .bb-form select:focus, .bb-form textarea:focus { border-color: var(--ink); box-shadow: var(--focus); }
.bb-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6B70' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; cursor: pointer; }
.bb-form textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.bb-submit { appearance: none; border: 0; cursor: pointer; background: var(--ink); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; padding: 13px 34px; border-radius: 999px; transition: background .15s, transform .1s; }
.bb-submit:hover { background: #1A1A1A; }
.bb-submit:active { transform: translateY(1px); }
.bb-terms { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 18px; max-width: 520px; }
.bb-form .msg { margin-top: 18px; }

@media (max-width: 900px) {
  .bb-contact { padding: 48px 20px 72px; }
  .bb-grid { grid-template-columns: 1fr; gap: 40px; }
  .bb-deco { display: none; }
  .bb-form { padding: 28px; }
  .bb-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .bb-row .bb-field { margin-bottom: 18px; }
  .bb-form input, .bb-form select, .bb-form textarea { font-size: 16px; }
}

/* ===== Site-wide consistency with the Contact page ===== */
.eyebrow { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-weight: 600; }
.bb-form label .req { color: var(--accent); }   /* gold asterisks on every form */

/* Closing tagline on editorial pages */
.bb-note { margin-top: 22px; font-size: 15px; line-height: 1.6; color: var(--muted); font-style: italic; max-width: 440px; }

/* ===== Contact-section background scene (bus illustration) ===== */
.bb-has-scene { position: relative; overflow: hidden; padding-bottom: 340px; }
.bb-has-scene .bb-grid { position: relative; z-index: 1; }
.bb-has-scene .bb-deco { display: none; }            /* replaced by the scene */
.bb-has-scene::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 470px; z-index: 0;
  pointer-events: none;
  background: url('contact-bus.jpg') center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent);
  mask-image: linear-gradient(to top, #000 60%, transparent);
}
@media (max-width: 900px) {
  .bb-has-scene { padding-bottom: 220px; }
  .bb-has-scene::after { height: 300px; }
}

/* Shorter scene band, anchored to the bottom so the TOP of the bus is cropped
   (per request: "move it up… it shouldn't be so long… top of the bus cut off is fine") */
.bb-has-scene { padding-bottom: 215px; }
.bb-has-scene::after {
  height: 340px;
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 74%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, #000 74%, rgba(0,0,0,0) 100%);
}
@media (max-width: 900px) {
  .bb-has-scene { padding-bottom: 150px; }
  .bb-has-scene::after { height: 230px; }
}

/* ============================================================
   GLOBAL THEME HEADER / FOOTER INTEGRATION
   These pages now render with the site's global header.php nav
   and footer.php (get_header()/get_footer()), same as the home
   page. The theme's hero <canvas> is empty here (its 3D script
   loads on the front page only) — hide it, and offset content
   below the theme's fixed nav.
   ============================================================ */
#bus-canvas { display: none !important; }

/* Clear the fixed global nav (theme nav is ~72px + floats at top) */
.bb-contact { padding-top: 132px !important; }
@media (max-width: 900px) {
  .bb-contact { padding-top: 104px !important; }
}

/* Careers hero (no form column — single, wider text block) */
.bb-hero-solo { max-width: 760px; }

/* ===== Careers hero — bus illustration as a soft bottom band =====
   Same idea as the Contact page: the scene sits as a centred band along the
   bottom of the hero, faded into the page at the top, with the copy on a
   clean background above it. A purpose-made crop (careers-band.jpg) trims
   the empty sky + side margins so the bus is framed and the hills reach the
   edges (cut on each side). Band height scales with the viewport so the bus
   stays framed at any width. */
.bb-hero-band{ position: relative; overflow: hidden; }
.bb-hero-band > *{ position: relative; z-index: 1; }         /* copy above the scene */
.bb-hero-band{ padding-bottom: clamp(220px, 32vw, 520px) !important; }
.bb-hero-band::after{
  content:''; position:absolute; left:0; right:0; bottom:0; z-index:0;
  height: clamp(200px, 30vw, 480px); pointer-events:none;
  background: url('careers-band.jpg') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 68%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to top, #000 68%, rgba(0,0,0,0) 100%);
}

/* The application form section sits at the very bottom of Careers;
   keep the two-column grid tidy inside the band */
.band .bb-grid { align-items: start; }