/* =========================================================
   Techffs — Theresa O. Fernandez
   Colors, fonts and sizes copied from the original Wix site.
   ========================================================= */
:root {
  --bg: #242323;          /* main dark background */
  --bg-header: #2c2b2a;   /* top bar, footer, plan cards, pop-ups */
  --bg-card: #1c1c1c;     /* "About" card */
  --bg-olive: #363321;    /* travel section text panel */
  --title-bar: #585555;   /* pop-up title label */
  --cream: #e0dcc3;       /* headings, icons */
  --text: #d7d4d3;        /* body text */
  --line: #6d6b69;        /* thin lines */
  --font-din: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-brandon: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 300 17px/1.45 var(--font-din);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 300; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
section, footer { scroll-margin-top: var(--header-h); }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

.container { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--cream); color: #222; padding: 8px 14px; text-decoration: none; }
.skip-link:focus { top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 8px 20px;
  font: 300 15px/1.2 var(--font-din); letter-spacing: .02em;
  text-decoration: none; text-align: center; transition: background .2s, color .2s;
}
.btn-outline { background: transparent; border: 2px solid var(--text); color: var(--text); text-transform: uppercase; }
.btn-outline:hover { background: var(--text); color: #2c2b2a; }
.btn-cream { background: var(--cream); color: #2c2b2a; border: 0; min-height: 40px; padding: 8px 16px; }
.btn-cream:hover { background: #f3f0dc; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h); background: var(--bg-header);
}
.header-inner { height: 100%; display: flex; align-items: center; }
.home-link {
  width: 38px; height: 38px; border: 1.5px solid var(--cream); border-radius: 50%;
  display: grid; place-items: center; color: var(--cream); font-size: 21px; margin-left: 8px;
}
.home-link:hover { background: rgba(224, 220, 195, .12); }
.main-nav { display: grid; grid-template-columns: repeat(3, 226px); column-gap: 10px; margin-left: 76px; align-self: stretch; }
.main-nav a {
  display: block; padding-top: 11px; margin-top: 18px; border-top: 1px solid var(--line);
  text-align: center; text-decoration: none; text-transform: uppercase;
  font-size: 14px; letter-spacing: .03em; color: var(--text);
  line-height: 1; transition: border-color .2s;
}
.main-nav a:hover, .main-nav a.is-current { border-top: 3px solid #a9a6a2; padding-top: 9px; }

/* ---------- Hero slideshow ---------- */
.hero { position: relative; height: 730px; overflow: hidden; background: #1c1c1c; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s ease; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: rgba(28, 27, 27, .44); }
.slide--crisis::after { background: rgba(70, 68, 68, .42); }
.slide-title {
  position: absolute; inset: var(--header-h) 0 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; padding: 0 0 110px;
  text-align: center; color: var(--cream);
  font: 300 82px/1.23 var(--font-din); letter-spacing: .06em;
}
.slide-title span { max-width: 900px; padding: 0 70px; }
.slide-arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 44px; height: 64px; padding: 10px; background: none; border: 0;
  color: rgba(255, 255, 255, .8); display: grid; place-items: center;
}
.slide-arrow svg { width: 22px; height: 44px; }
.slide-arrow:hover { color: #fff; }
.slide-arrow.prev { left: max(6px, calc(50% - 545px)); }
.slide-arrow.next { right: max(6px, calc(50% - 545px)); }
.slide-dots { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.slide-dots button { width: 18px; height: 18px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.slide-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.slide-dots button[aria-current="true"]::before { background: #fff; }

/* ---------- Intro (name + two columns) ---------- */
.intro { padding: 36px 0 47px; }
.name { font: 300 46px/1.25 var(--font-brandon); letter-spacing: .18em; text-align: center; color: var(--text); }
.tagline { font: 300 24px/1.3 var(--font-brandon); letter-spacing: .1em; text-align: center; margin-top: 10px; }
.intro-cols { display: grid; grid-template-columns: 292px 312px; column-gap: 217px; padding-left: 39px; margin-top: 44px; }
.intro-cols h2, .about-text h3 { font: 300 34px/1.2 var(--font-din); color: var(--cream); margin-bottom: 6px; }
.intro-cols p { font-size: 17px; line-height: 24px; }

/* ---------- About ---------- */
.about { padding: 21px 16px 16px; }
.about-card { max-width: 926px; margin: 0 auto; background: var(--bg-card); padding: 54px 24px 36px; }
.eyebrow { font: 300 20px/1.2 var(--font-brandon); letter-spacing: .2em; text-align: center; color: var(--cream); }
.about-name { font: 300 37px/1.3 var(--font-brandon); letter-spacing: .18em; text-align: center; color: var(--text); margin-top: 6px; }
.headshot { width: 170px; height: 170px; border-radius: 50%; object-fit: cover; margin: 28px auto 0; }
.about-text { max-width: 608px; margin: 58px auto 0; }
.about-text p { font-size: 17px; line-height: 24px; }
.about-text p + p { margin-top: 24px; }
.about-text h3 + p { margin-top: 14px; }
.about-text .quote-strong { font-weight: 500; color: #eeebe6; }
.about-text h3:not(:first-child) { margin-top: 38px; }
.about-text .about-me { margin-top: 42px !important; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 30px; }

/* ---------- Services ---------- */
.services {
  padding: 44px 0 48px;
  background: #1d1d1d url("../images/services-bg.jpg") center / cover no-repeat;
}
.section-title { font: 300 34px/1.2 var(--font-din); text-transform: uppercase; letter-spacing: .04em; text-align: center; color: var(--cream); }
.services .btn-row { justify-content: center; gap: 16px 72px; margin-top: 36px; }
.services .btn-row .btn { width: 321px; min-height: 43px; }
.service-grid {
  list-style: none; margin: 72px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 300px); justify-content: center; column-gap: 8px; row-gap: 62px;
}
.service-grid li { text-align: center; }
.service-grid .icon { font-size: 80px; color: var(--cream); margin: 0 auto; }
.service-grid h3 { font: 300 22px/27px var(--font-din); text-transform: uppercase; color: var(--text); margin: 18px auto 0; max-width: 220px; }
.service-grid p { font-size: 15px; line-height: 20px; max-width: 222px; margin: 22px auto 0; }

/* ---------- Travel (split) ---------- */
.travel { display: grid; grid-template-columns: 1fr 1fr; min-height: 880px; }
.travel-text { background: var(--bg-olive); padding: 60px 32px 70px; text-align: center; }
.travel-text > div { max-width: 372px; margin: 0 auto; }
.travel-text h2 { font: 400 28px/34px var(--font-din); color: var(--cream); }
.travel-text h2 + hr { width: 285px; max-width: 100%; border: 0; border-top: 1px solid rgba(215, 212, 211, .55); margin: 20px auto 24px; }
.travel-text p { font-size: 20px; line-height: 28px; }
.travel-text p.indent { text-indent: 1.6em; }
.travel-text p + h2 { margin-top: 62px; }
.travel-photo { position: relative; min-height: 320px; }
.travel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }

/* ---------- Find the perfect plan ---------- */
.plans { padding: 30px 0 31px; text-align: center; }
.plans h2 { font: 400 28px/1.2 var(--font-din); text-transform: uppercase; color: var(--text); }
.plan-cards { display: flex; justify-content: center; gap: 27px; margin-top: 30px; }
.plan-card { width: 365px; height: 240px; background: var(--bg-header); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 22px 21px; }
.plan-card .icon { font-size: 72px; color: var(--cream); margin-bottom: 36px; }
.plan-card .btn { width: 100%; min-height: 41px; font-size: 14px; }

/* ---------- Footer / Contact ---------- */
.site-footer { background: var(--bg-header); padding-top: 22px; }
.site-footer h2 { font: 300 34px/1.2 var(--font-din); color: var(--cream); padding-left: 15px; }
.contact-list { list-style: none; margin: 14px 0 0; padding: 0 0 0 31px; }
.contact-list li { display: flex; align-items: center; gap: 17px; min-height: 51px; font-size: 17px; }
.contact-list .icon { font-size: 22px; color: var(--text); }
.contact-list a { text-decoration: none; }
.contact-list a[href^="tel"] { text-decoration: underline; text-underline-offset: 3px; }
.contact-list a:hover { color: var(--cream); text-decoration: underline; }
.footer-band { margin-top: 18px; background: #1f1e1e; min-height: 63px; display: flex; align-items: center; justify-content: center; }
.copyright { font-size: 13px; color: #8f8c89; letter-spacing: .03em; }

/* ---------- Pop-up panels (Plans) ---------- */
.panel {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(858px, 100%); height: 100%; max-height: none; max-width: 100%;
  padding: 0; border: 0; background: var(--bg-header); color: var(--text); overflow-y: auto; overscroll-behavior: contain;
}
.panel[open] { animation: panel-in .35s ease-out; }
.panel::backdrop { background: rgba(0, 0, 0, .4); }
@keyframes panel-in { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel[open] { animation: none; } }
html.modal-open { overflow: hidden; }
.panel-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(36, 35, 35, .75); color: #fff; display: grid; place-items: center; font-size: 22px;
}
.panel-close:hover { background: rgba(36, 35, 35, .95); }
.panel-hero { position: relative; height: 256px; }
.panel-hero img { width: 100%; height: 100%; object-fit: cover; }
.panel-title {
  position: absolute; left: 0; bottom: 0; max-width: calc(100% - 20px);
  background: var(--title-bar); color: var(--cream); font: 300 34px/1.2 var(--font-din); padding: 6px 26px 7px 18px;
}
.panel-intro { background: var(--bg); margin: 20px 20px 0; padding: 22px 60px; text-align: center; font-size: 17px; line-height: 24px; }
.panel-sub { font: 300 22px/1.2 var(--font-din); text-align: center; color: var(--text); margin: 30px 0 22px; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 48px; }
.plan-box { background: var(--bg); padding: 24px 26px 34px; text-align: center; }
.plan-box .icon { font-size: 52px; color: var(--cream); margin: 0 auto; }
.plan-box h4 { font: 300 22px/28px var(--font-din); color: var(--cream); margin: 14px auto 0; max-width: 300px; }
.plan-box ul { text-align: left; font-size: 16px; line-height: 20px; margin: 16px 0 0; padding-left: 20px; }
.plan-box li + li { margin-top: 4px; }
.plan-box p { font-size: 16px; line-height: 23px; margin-top: 22px; }
.plan-grid--two .plan-box { background: transparent; padding-top: 34px; }
.plan-grid--two .icon { font-size: 76px; }
.plan-grid--two h4 { font-size: 30px; line-height: 1.2; margin-top: 18px; }
.panel-cta { background: var(--bg); margin: 22px 13px 13px; padding: 62px 16px; text-align: center; }
.panel-cta .btn { width: 256px; min-height: 80px; font-size: 13px; }

/* ---------- Responsive ---------- */
@media (min-width: 1021px) {
  .intro-cols h2, .services .btn-row .btn { white-space: nowrap; }
}
@media (max-width: 1020px) {
  .main-nav { grid-template-columns: repeat(3, minmax(90px, 200px)); margin-left: auto; margin-right: 8px; }
  .intro-cols { grid-template-columns: 1fr 1fr; column-gap: 48px; padding-left: 0; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 300px)); }
}
@media (max-width: 760px) {
  :root { --header-h: 56px; }
  .home-link { width: 34px; height: 34px; font-size: 18px; margin-left: 0; }
  .main-nav { grid-template-columns: repeat(3, auto); column-gap: 14px; }
  .main-nav a { font-size: 12.5px; margin-top: 16px; padding: 10px 2px 0; }
  .main-nav a:hover, .main-nav a.is-current { padding-top: 8px; }
  .hero { height: min(78vh, 620px); min-height: 440px; }
  .slide-title { font-size: clamp(34px, 10vw, 56px); padding-bottom: 70px; letter-spacing: .04em; }
  .slide-title span { padding: 0 44px; }
  .slide-arrow { width: 36px; }
  .slide-arrow svg { width: 16px; height: 34px; }
  .intro { padding: 32px 0 40px; }
  .name { font-size: clamp(26px, 7.4vw, 46px); letter-spacing: .12em; }
  .tagline { font-size: 17px; letter-spacing: .06em; }
  .intro-cols { grid-template-columns: 1fr; row-gap: 36px; margin-top: 32px; }
  .intro-cols h2, .about-text h3, .section-title, .site-footer h2 { font-size: 28px; }
  .about { padding: 16px 0 0; }
  .about-card { padding: 40px 20px 36px; }
  .about-name { font-size: clamp(22px, 6.4vw, 37px); letter-spacing: .12em; }
  .about-text { margin-top: 40px; }
  .btn-row .btn { width: 100%; }
  .services .btn-row { gap: 14px; }
  .services .btn-row .btn { width: 100%; max-width: 360px; }
  .service-grid { grid-template-columns: 1fr; row-gap: 48px; margin-top: 52px; }
  .travel { grid-template-columns: 1fr; min-height: 0; }
  .travel-text { padding: 48px 20px 56px; }
  .travel-text h2 { font-size: 24px; line-height: 30px; }
  .travel-text p { font-size: 18px; line-height: 26px; }
  .travel-photo { min-height: 340px; }
  .plans { padding: 32px 16px; }
  .plans h2 { font-size: 22px; }
  .plan-cards { flex-direction: column; align-items: center; gap: 18px; }
  .plan-card { width: 100%; max-width: 365px; }
  .site-footer h2 { padding-left: 0; }
  .contact-list { padding-left: 0; }
  .contact-list li { font-size: 16px; gap: 14px; overflow-wrap: anywhere; }
  .panel-hero { height: 190px; }
  .panel-title { font-size: 22px; padding: 6px 14px; }
  .panel-intro { margin: 16px 16px 0; padding: 18px 16px; font-size: 16px; }
  .plan-grid { grid-template-columns: 1fr; margin: 0 16px; }
  .panel-cta { margin: 16px; padding: 40px 16px; }
}