/* ============================================================
   Forkert Travel Concierge — stylesheet
   Palette:  navy #16283F / navy-deep #0E1C2C / ivory #F7F2E7
             gold #B8935B / teal #4B6E68 / ink #26313F
   Display type: 'EB Garamond'   Body/UI type: 'Jost'
   ============================================================ */

:root{
  --navy: #16283F;
  --navy-deep: #0E1C2C;
  --ivory: #F7F2E7;
  --paper: #FFFDF8;
  --gold: #B8935B;
  --gold-soft: #D8BD8E;
  --teal: #4B6E68;
  --ink: #26313F;
  --ink-soft: #5B6672;
  --line: rgba(22,40,63,0.14);

  --display: 'EB Garamond', 'Times New Roman', serif;
  --body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --max: 1180px;
  --radius: 2px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; font-weight: 400; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.15; }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1em; color: var(--ink-soft); }
.eyebrow{
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: 0.9em;
  display:inline-block;
}
.container{ max-width: var(--max); margin: 0 auto; padding: 0 32px; }
section{ padding: 96px 0; }
@media (max-width: 720px){
  section{ padding: 64px 0; }
  .container{ padding: 0 22px; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
}
.btn-gold{
  background: var(--gold);
  color: var(--navy-deep);
}
.btn-gold:hover{ background: var(--gold-soft); }
.btn-line{
  border-color: rgba(247,242,231,0.55);
  color: var(--paper);
}
.btn-line:hover{ border-color: var(--paper); background: rgba(247,242,231,0.08); }
.btn-line-dark{
  border-color: var(--navy);
  color: var(--navy);
}
.btn-line-dark:hover{ background: var(--navy); color: var(--paper); }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(247,242,231,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 32px;
  max-width: var(--max); margin: 0 auto;
}
.wordmark{
  display:flex; align-items:center; gap:12px;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--navy);
}
.wordmark img{ height:44px; width:auto; flex-shrink:0; display:block; }

/* large featured logo shown in the hero */
.hero-logo-wrap{ position:relative; max-width: var(--max); margin: 0 auto; padding: 0 32px; text-align:center; }
.hero-logo{
  display:flex; align-items:center; justify-content:center;
  background: var(--paper);
  border-radius: 16px;
  padding: 34px;
  max-width: 320px;
  margin: 0 auto 36px;
}
.hero-logo img{ width:100%; height:auto; display:block; }
@media (max-width: 900px){
  .hero-logo{ max-width: 220px; padding: 24px; margin-bottom: 26px; }
}
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--gold); transition: width .25s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{ margin-left: 6px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:1px; background:var(--navy); margin:5px 0; }

@media (max-width: 860px){
  .nav-links{
    position:fixed; inset: 74px 0 0 0; background: var(--ivory);
    flex-direction:column; align-items:flex-start; padding: 40px 32px;
    gap: 26px; transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: all .25s ease; border-top:1px solid var(--line);
  }
  .nav-links.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background: var(--navy);
  color: var(--paper);
  overflow:hidden;
  padding: 130px 0 110px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 78% 12%, rgba(184,147,91,0.16), transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(75,110,104,0.28), transparent 60%);
}
.hero .container{ position:relative; display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items:center; }
@media (max-width: 900px){ .hero .container{ grid-template-columns: 1fr; } }
.hero .eyebrow{ color: var(--gold-soft); }
.hero h1{ color: var(--paper); }
.hero h1 em{ font-style: italic; color: var(--gold-soft); }
.hero p.lead{ color: rgba(247,242,231,0.78); font-size: 1.08rem; max-width: 46ch; }
.hero .cta-row{ display:flex; gap:16px; margin-top: 34px; flex-wrap:wrap; }

/* route/voyage motif used in hero */
.voyage-mark{ width:100%; height:auto; }
.voyage-mark .route{
  fill:none; stroke: rgba(216,189,142,0.55); stroke-width:1.4; stroke-dasharray: 3 7; stroke-linecap:round;
}
.voyage-mark .port{ fill: var(--gold-soft); }
.voyage-mark .port-ring{ fill:none; stroke: rgba(216,189,142,0.4); stroke-width:1; }
.voyage-mark text{ font-family: var(--body); font-size:9px; letter-spacing:0.12em; fill: rgba(247,242,231,0.55); text-transform:uppercase; }

/* ---------- perks / difference strip ---------- */
.perks{ background: var(--paper); border-bottom:1px solid var(--line); }
.perks-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
@media (max-width: 860px){ .perks-grid{ grid-template-columns: repeat(2,1fr); } }
.perk{
  padding: 40px 30px; border-left:1px solid var(--line);
}
.perk:first-child{ border-left:none; }
@media (max-width: 860px){
  .perk{ border-left:none; border-top:1px solid var(--line); }
  .perk:nth-child(odd){ border-left:none; }
}
.perk .num{ font-family: var(--display); font-size:0.8rem; color: var(--gold); letter-spacing:0.1em; }
.perk h3{ margin: 10px 0 8px; font-size:1.1rem; }
.perk p{ font-size: 0.92rem; margin:0; }

/* ---------- story / about ---------- */
.story{ background: var(--paper); }
.story-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items:start; }
@media (max-width: 900px){ .story-grid{ grid-template-columns: 1fr; gap:40px; } }
.portrait-frame{
  aspect-ratio: 4/5; border-radius: var(--radius);
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 60%, var(--teal) 130%);
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding: 26px;
}
.portrait-frame .cap{ color: rgba(247,242,231,0.85); font-family: var(--display); font-style:italic; font-size:1rem; }
.portrait-frame .compass{ position:absolute; top:24px; right:24px; width:64px; height:64px; opacity:0.5; }
.story blockquote{
  font-family: var(--display); font-style: italic; font-size: 1.35rem;
  color: var(--navy); border-left: 2px solid var(--gold); padding-left: 22px;
  margin: 26px 0;
}
.story .signature{ font-family: var(--display); font-style:italic; color: var(--teal); font-size:1.1rem; }

/* ---------- process / how it works (alternating rows) ---------- */
.process{ background: var(--navy); color: var(--paper); }
.process .eyebrow{ color: var(--gold-soft); }
.process h2{ color: var(--paper); margin-bottom: 20px; }
.process-row{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items:center;
  padding: 46px 0; border-top: 1px solid rgba(247,242,231,0.14);
}
.process-row:first-of-type{ border-top: none; }
.process-row.reverse .process-copy{ order: 2; }
.process-row.reverse .process-visual{ order: 1; }
.process-copy .stop{
  font-family: var(--display); font-style:italic; color: var(--gold-soft);
  font-size: 1.6rem; margin-bottom: 6px;
}
.process-copy h3{ color: var(--paper); font-size: 1.4rem; }
.process-copy p{ color: rgba(247,242,231,0.72); font-size: 0.96rem; max-width: 46ch; }
.visual-panel{
  aspect-ratio: 4/3; border-radius: var(--radius);
  background: linear-gradient(150deg, var(--teal) 0%, var(--navy-deep) 55%, var(--gold) 145%);
  opacity: 0.9;
}
@media (max-width: 760px){
  .process-row, .process-row.reverse{ grid-template-columns: 1fr; gap: 22px; }
  .process-row.reverse .process-copy{ order:1; }
  .process-row.reverse .process-visual{ order:2; }
}

/* ---------- testimonials ---------- */
.testimonials{ background: var(--ivory); }
.t-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; }
@media (max-width: 900px){ .t-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .t-grid{ grid-template-columns: 1fr; } }
.t-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; display:flex; flex-direction:column; gap:16px;
}
.t-card p{ color: var(--ink); font-size:0.95rem; margin:0; }
.t-card .who{ font-family: var(--display); font-style:italic; color: var(--teal); font-size:0.95rem; }

/* ---------- partners strip ---------- */
.partners{ background: var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 46px 0; }
.partners .eyebrow{ display:block; text-align:center; margin-bottom:22px; }
.partner-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 14px 40px;
  font-family: var(--display); font-size:1.05rem; color: var(--ink-soft); letter-spacing:0.02em;
}

/* ---------- final CTA ---------- */
.final-cta{ background: var(--navy-deep); color: var(--paper); text-align:center; }
.final-cta h2{ color: var(--paper); max-width: 20ch; margin: 0 auto 18px; }
.final-cta p{ color: rgba(247,242,231,0.72); max-width: 46ch; margin: 0 auto 34px; }

/* ---------- footer ---------- */
.site-footer{ background: var(--navy-deep); color: rgba(247,242,231,0.65); font-size:0.85rem; padding: 44px 0 30px; }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap: 30px; flex-wrap:wrap; }
.site-footer .wordmark{ color: var(--paper); }
.site-footer .wordmark small{ color: var(--gold-soft); }
.footer-links{ display:flex; gap: 26px; flex-wrap:wrap; }
.footer-links a:hover{ color: var(--gold-soft); }
.footer-bottom{
  margin-top: 34px; padding-top: 22px; border-top:1px solid rgba(247,242,231,0.12);
  font-size:0.76rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ---------- contact page ---------- */
.page-hero{ background: var(--navy); color: var(--paper); padding: 110px 0 80px; text-align:left; }
.page-hero h1{ color: var(--paper); }
.contact-wrap{ background: var(--paper); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; gap:50px; } }
.contact-card{
  background: var(--ivory); border:1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px;
}
.contact-card h3{ margin-bottom: 6px; }
.contact-card .detail{ margin-top:22px; }
.contact-card .detail .label{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--teal); }
.contact-card .detail a, .contact-card .detail span{ font-family: var(--display); font-size:1.15rem; color: var(--navy); }

.form-field{ margin-bottom: 20px; }
.form-field label{
  display:block; font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--teal); margin-bottom: 8px;
}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 13px 14px; font-family: var(--body); font-size:0.95rem;
  border: 1px solid rgba(22,40,63,0.25); border-radius: var(--radius); background: var(--paper);
  color: var(--ink);
}
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }
.form-note{ font-size:0.82rem; color: var(--ink-soft); margin-top:14px; }
.form-success{
  display:none; background: var(--teal); color: var(--paper); padding: 22px 24px;
  border-radius: var(--radius); font-family: var(--display); font-size:1.05rem; font-style:italic;
}
.form-success.show{ display:block; }