/* Let's Explore Morocco — structure inspired by premium Morocco tour sites, LEM branding */



@import url("https://use.typekit.net/abz7sok.css");

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,600&family=Outfit:wght@300;400;500;600;700&display=swap");



*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



:root {

  --accent: #9a6230;

  --accent-dark: #7e4f26;

  --accent-soft: #b8874f;

  --gold: #b89a5a;

  --navy: #243447;

  --ink: #1a2332;

  --bg: #f6f1e8;

  --cream: #f6f1e8;

  --warm: #efe6d8;

  --cool: #ebe6de;

  --sage: #e7e4d9;

  --text: #1a2332;

  --muted: #5c5348;

  --border: #ddd4c4;

  --card: #fffcf7;

  --radius: 2px;

  /* Same display face as reference (IvyPresto) + Bodoni Moda fallback */

  --serif: ivypresto-display, "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;

  --sans: "Outfit", "Segoe UI", sans-serif;

  --title-weight: 400;

  --title-tracking: 0;

  --title-leading: 1.2;

  --nav-h: 68px;

}



html {

  scroll-behavior: smooth;

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;

}



body {

  font-family: var(--sans);

  background-color: var(--cream);

  background-image:

    radial-gradient(ellipse at 12% 0%, rgba(154, 98, 48, 0.06), transparent 42%),

    radial-gradient(ellipse at 88% 18%, rgba(36, 52, 71, 0.05), transparent 38%),

    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");

  color: var(--text);

  line-height: 1.65;

  -webkit-font-smoothing: antialiased;

  font-weight: 400;

  letter-spacing: 0.01em;

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;

  position: relative;

}



img {

  max-width: 100%;

  display: block;

}



a {

  color: inherit;

}



ul {

  list-style: none;

}



/* ========== TITLES — 100% site-wide (IvyPresto Display / Bodoni) ========== */

h1,

h2,

h3,

.section-title,

.page-hero h1,

.hero-content h1,

.intro-panel h2,

.intro-grid h2,

.how-copy h2,

.founder-copy h2,

.journeys-text h2,

.morocco-story-text h2,

.card-title,

.dt-title,

.pathway-copy h3,

.impact-card-title,

.cat-banner h2,

.cta-band h2,

.tour-overview h2,

.tour-facts h3,

.itinerary-day h3,

.inclusions-box h3,

.faq-q,

.contact-card h3,

.picked-sec h3,

.testi-name,

.footer-heading {

  font-family: var(--serif);

  font-weight: var(--title-weight);

  letter-spacing: var(--title-tracking);

  line-height: var(--title-leading);

  font-style: normal;

  text-wrap: balance;

}



h1,

.page-hero h1,

.hero-content h1 {

  font-size: clamp(34px, 5.5vw, 56px);

  font-weight: 400;

}



h2,

.section-title,

.intro-panel h2,

.intro-grid h2,

.how-copy h2,

.founder-copy h2,

.journeys-text h2,

.morocco-story-text h2,

.cat-banner h2,

.cta-band h2,

.tour-overview h2 {

  font-size: clamp(34px, 5.5vw, 56px);

  font-weight: 400;

  width: 100%;

}



.section-title {

  font-family: var(--serif);

  font-size: clamp(34px, 5.5vw, 56px);

  font-weight: 400;

  font-style: normal;

  text-align: center;

  margin-bottom: 8px;

  color: var(--ink);

  letter-spacing: 0;

  line-height: 1.2;

  width: 100%;

}



.card-title,

.dt-title,

.pathway-copy h3 {

  font-size: clamp(18px, 1.5vw, 22px);

  font-weight: 500;

  line-height: 1.3;

  letter-spacing: 0;

  width: 100%;

}



.impact-card-title {

  font-size: clamp(0.95rem, 1.2vw, 1.2rem);

  font-weight: 400;

  letter-spacing: 0.06em;

}



/* ========== NAV ========== */

nav {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  z-index: 100;

  background: transparent;

  backdrop-filter: none;

  border-bottom: 1px solid transparent;

  height: var(--nav-h);

  display: flex;

  align-items: center;

  padding: 0 32px;

  gap: 40px;

  transition:

    background 0.35s ease,

    border-color 0.35s ease,

    backdrop-filter 0.35s ease,

    box-shadow 0.35s ease;

}



nav.is-solid {

  background: rgba(255, 252, 247, 0.96);

  backdrop-filter: blur(10px);

  border-bottom-color: var(--border);

  box-shadow: 0 4px 18px rgba(36, 52, 71, 0.06);

}



.nav-logo {

  text-decoration: none;

  display: flex;

  align-items: center;

  flex-shrink: 0;

  line-height: 0;

}



.nav-logo img {

  display: block;

  height: 48px;

  width: auto;

  max-width: min(220px, 46vw);

  object-fit: contain;

  transition: filter 0.35s ease;

}



@media (max-width: 720px) {

  .nav-logo img {

    height: 40px;

  }

}



.nav-links {

  display: flex;

  gap: 28px;

  margin-left: auto;

  align-items: center;

}



.nav-links a {

  text-decoration: none;

  color: var(--text);

  font-size: 14px;

  font-weight: 500;

  transition: color 0.2s;

  white-space: nowrap;

}



/* Over dark hero: light links until solid */

body.has-hero-nav nav:not(.is-solid) .nav-links a:not(.nav-cta) {

  color: rgba(255, 252, 247, 0.92);

}



body.has-hero-nav nav:not(.is-solid) .nav-links a:not(.nav-cta):hover,

body.has-hero-nav nav:not(.is-solid) .nav-links a[aria-current="page"]:not(.nav-cta) {

  color: #fff;

}



.nav-links a:hover,

.nav-links a[aria-current="page"] {

  color: var(--accent);

}



.nav-cta {

  background: var(--accent) !important;

  color: #fff !important;

  padding: 8px 16px;

  border-radius: 4px;

  font-size: 13px !important;

}



.nav-cta:hover {

  background: var(--accent-dark) !important;

}



.nav-ham {

  display: none;

  background: none;

  border: none;

  cursor: pointer;

  padding: 4px;

  margin-left: auto;

}



.nav-ham span {

  display: block;

  width: 22px;

  height: 2px;

  margin: 5px 0;

  background: var(--text);

  transition: background 0.2s ease;

}



body.has-hero-nav nav:not(.is-solid) .nav-ham span {

  background: #fff;

}



/* ========== HERO ========== */

.hero {

  position: relative;

  height: 100vh;

  min-height: 560px;

  overflow: hidden;

  margin-top: 0;

  width: 100%;

  max-width: 100%;

}



.hero video,

.hero .hero-video,

.hero .hero-img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.hero .hero-img {

  transform: scale(1.08);

  animation: heroDrift 22s ease-in-out infinite alternate;

}



.hero-video {

  transform: none;

  animation: none;

  background: #1a1a2e;

}



.hero-overlay {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.55) 75%),

    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.45) 100%);

}



.hero-content {

  position: relative;

  z-index: 2;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: #fff;

  padding: 0 24px;

  max-width: none;

}



/* Exact agency logo — parts reveal one by one */

.hero-logo-mark {

  position: relative;

  width: min(92vw, 760px);

  aspect-ratio: 2483 / 595;

}



.hero-logo-layer {

  position: absolute;

  inset: 0;

  opacity: 0;

  transform: translateY(18px);

  filter: blur(8px);

}



.hero-logo-layer img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



/* Compass (left) */

.hero-logo-layer--compass img {

  clip-path: inset(2% 76% 2% 0.5%);

}



/* LET'S EXPLORE (top text) */

.hero-logo-layer--lets img {

  clip-path: inset(2% 0.5% 52% 20%);

}



/* MOROCCO (bottom copper text) */

.hero-logo-layer--morocco img {

  clip-path: inset(40% 0.5% 2% 20%);

}



.hero.is-ready .hero-logo-layer {

  animation: heroLogoPart 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;

  animation-delay: calc(0.25s + var(--i) * 0.55s);

}



@keyframes heroLogoPart {

  to {

    opacity: 1;

    transform: translateY(0);

    filter: blur(0);

  }

}



@media (prefers-reduced-motion: reduce) {

  .hero-logo-layer {

    opacity: 1;

    transform: none;

    filter: none;

    animation: none !important;

  }

}



.page-hero {

  position: relative;

  min-height: 48vh;

  margin-top: var(--nav-h);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: #fff;

  overflow: hidden;

  padding: 0;

}



.page-hero .hero-img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1.06);

  animation: heroDrift 22s ease-in-out infinite alternate;

}



.page-hero .hero-overlay {

  background: linear-gradient(

    180deg,

    rgba(26, 26, 46, 0.4) 0%,

    rgba(30, 58, 95, 0.65) 55%,

    rgba(184, 115, 51, 0.78) 100%

  );

}



.page-hero-inner {

  position: relative;

  z-index: 2;

  padding: 80px 24px 72px;

  max-width: 780px;

}



.page-hero h1 {

  font-family: var(--serif);

  font-size: clamp(34px, 5.5vw, 56px);

  font-weight: 400;

  letter-spacing: 0;

  line-height: 1.2;

  margin-bottom: 12px;

}



.page-hero p {

  font-size: 1.05rem;

  opacity: 0.9;

  font-weight: 300;

}



@keyframes heroDrift {

  from {

    transform: scale(1.08) translate3d(0, 0, 0);

  }

  to {

    transform: scale(1.16) translate3d(-1.5%, -1%, 0);

  }

}



/* ========== BUTTONS ========== */

.btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 12px 22px;

  border-radius: 1px;

  font-family: var(--sans);

  font-size: 13px;

  font-weight: 500;

  letter-spacing: 0.04em;

  cursor: pointer;

  transition: background 0.2s, color 0.2s, border-color 0.2s;

  text-decoration: none;

  border: 1px solid transparent;

}



.btn-primary {

  background: var(--accent);

  color: #fff;

  border-color: var(--accent);

}



.btn-primary:hover {

  background: var(--accent-dark);

  border-color: var(--accent-dark);

}



.btn-outline-white {

  background: transparent;

  color: #fff;

  border-color: rgba(255, 255, 255, 0.7);

}



.btn-outline-white:hover {

  background: rgba(255, 255, 255, 0.15);

}



.btn-ghost {

  background: transparent;

  color: var(--accent);

  border-color: var(--accent);

}



.btn-ghost:hover {

  background: var(--accent);

  color: #fff;

}



.btn-outline {

  background: transparent;

  color: var(--navy);

  border-color: var(--accent);

}



.btn-outline:hover {

  background: var(--accent);

  color: #fff;

}



.btn-block {

  width: 100%;

  justify-content: center;

  font-size: 13px;

  padding: 10px 16px;

}



.btn-sm {

  padding: 10px 18px;

  font-size: 12px;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}



.btn-row {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 8px;

}



/* ========== LAYOUT ========== */

section {

  padding: 80px 0;

}



.container {

  /* Fluid width across laptop/desktop; mobile keeps its own padding rules */

  max-width: min(92vw, 1400px);

  margin: 0 auto;

  padding: 0 24px;

  width: 100%;

  box-sizing: border-box;

  overflow-x: clip;

}



/* Desktop / laptop: fuller width + tighter vertical rhythm (mobile unchanged) */

@media (min-width: 1101px) {

  section {

    padding: 56px 0;

  }



  .section-sub {

    margin-bottom: 32px;

  }



  .cards-grid {

    gap: 20px;

  }



  .morocco-story-sec,

  .testimonials-sec {

    padding: 56px 0;

  }



  .page-listing {

    padding: 48px 0 64px;

  }



  .tour-overview,

  .story-philosophy-sec {

    padding: 56px 0;

  }

}



@media (min-width: 1440px) {

  .container {

    max-width: min(94vw, 1520px);

    padding: 0 28px;

  }

}



@media (min-width: 1680px) {

  .container {

    max-width: min(92vw, 1600px);

  }

}



.section-title {

  font-family: var(--serif);

  font-size: clamp(34px, 5.5vw, 56px);

  font-weight: 400;

  font-style: normal;

  text-align: center;

  margin-bottom: 8px;

  color: var(--ink);

  letter-spacing: 0;

  line-height: 1.2;

  width: 100%;

}



.section-sub {

  text-align: center;

  color: var(--muted);

  margin-bottom: 48px;

  font-size: 15px;

  max-width: 640px;

  margin-left: auto;

  margin-right: auto;

  line-height: 1.65;

}



.section-divider {

  width: 56px;

  height: 3px;

  background: var(--accent);

  margin: 12px auto 16px;

  border: 0;

}



.eyebrow {

  display: block;

  font-family: var(--sans);

  font-size: 11px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--accent);

  font-weight: 600;

  margin-bottom: 10px;

}



.center-cta {

  text-align: center;

  margin-top: 36px;

}



/* ========== INTRO / BIO — split like premium tour sites ========== */

.intro {

  background: var(--sage);

  padding: 0;

}



.intro-split {

  display: grid;

  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

  min-height: min(98vh, 980px);

  align-items: stretch;

  width: 100%;

  max-width: 100%;

}



.intro-photo {

  overflow: hidden;

  margin: 0;

  border-radius: 0;

  aspect-ratio: auto;

  height: 100%;

  min-height: 560px;

}



.intro-photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 25% center;

  animation: none;

}



.intro-panel {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  height: 100%;

  min-height: 100%;

  padding: clamp(36px, 5vw, 56px) clamp(28px, 5vw, 56px);

  background: var(--sage);

  box-sizing: border-box;

}



.intro-panel h2 {

  font-family: var(--serif);

  font-size: clamp(1.85rem, 3.2vw, 2.65rem);

  font-weight: 600;

  font-style: normal;

  color: var(--navy);

  line-height: 1.2;

  margin-bottom: 1.15rem;

  max-width: 16ch;

  flex-shrink: 0;

}



.intro-copy {

  display: block;

}



.intro-copy p {

  color: var(--muted);

  font-family: var(--sans);

  font-size: clamp(17px, 1.35vw, 19px);

  line-height: 1.85;

  margin-bottom: 1.15rem;

  max-width: none;

}



.intro-copy p:last-child {

  margin-bottom: 0;

}



.intro-copy strong {

  color: var(--ink);

  font-weight: 600;

}



.intro-grid {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 48px;

  align-items: start;

}



.intro-grid h2 {

  font-family: var(--serif);

  font-size: clamp(1.8rem, 3vw, 2.4rem);

  color: var(--navy);

  line-height: 1.2;

}



.intro-sec {

  background: #fff;

}



/* ========== OUR STORY (about) — same type system as site ========== */

.story-passions-sec {

  background: var(--cream);

}



.story-philosophy-sec {

  background: #fff;

  padding: 80px 0;

}



.story-list {

  margin-top: 8px;

  display: grid;

  gap: 12px;

}



.story-list li {

  font-family: var(--sans);

  font-size: 15px;

  font-weight: 400;

  color: var(--muted);

  line-height: 1.7;

  padding-left: 0;

  border-bottom: 1px solid var(--border);

  padding-bottom: 12px;

}



.story-list li:last-child {

  border-bottom: 0;

  padding-bottom: 0;

}



.story-philosophy-sec .intro-copy strong {

  font-family: var(--sans);

  font-weight: 600;

  color: var(--navy);

}



.story-closing {

  font-family: var(--serif);

  font-size: 1.25rem;

  font-weight: 600;

  font-style: italic;

  color: var(--navy);

  margin: 1.25rem 0 1.5rem !important;

}



.how-copy .section-divider {

  margin-left: 0;

  margin-right: auto;

}



.how-grid-reverse {

  direction: rtl;

}



.how-grid-reverse > * {

  direction: ltr;

}



@media (max-width: 900px) {

  .how-grid-reverse {

    direction: ltr;

  }

}



/* ========== HOW WE WORK ========== */

.how-sec {

  background: #fff;

  padding: clamp(88px, 11vw, 120px) 0;

}



.how-grid {

  display: grid;

  grid-template-columns: minmax(400px, 1.55fr) minmax(280px, 0.95fr);

  gap: clamp(32px, 5vw, 64px);

  align-items: center;

}



.how-photo {

  overflow: hidden;

  border-radius: 6px;

  aspect-ratio: auto;

  max-height: none;

  height: auto;

  background: transparent;

  width: 100%;

}



.how-photo img {

  width: 100%;

  height: auto;

  min-height: min(62vh, 640px);

  max-height: min(96vh, 920px);

  object-fit: cover;

  object-position: center;

  display: block;

}



.how-copy .eyebrow {

  font-size: clamp(13px, 1.15vw, 15px);

  letter-spacing: 0.2em;

  margin-bottom: 12px;

}



.how-copy h2 {

  font-family: var(--serif);

  font-size: clamp(42px, 6.2vw, 68px);

  font-weight: 400;

  color: var(--ink);

  margin-bottom: 10px;

  line-height: 1.15;

  letter-spacing: 0;

  width: 100%;

}



.how-copy p {

  color: var(--muted);

  font-size: clamp(16px, 1.35vw, 19px);

  line-height: 1.85;

  margin-bottom: 1.15rem;

}



.how-copy .btn {

  font-size: 15px;

  padding: 14px 28px;

  margin-top: 8px;

}



/* ========== COMPASS WATERMARK (shared) ========== */

.has-compass-bg {

  position: relative;

  overflow: hidden;

}



.has-compass-bg::before {

  content: "";

  position: absolute;

  top: 50%;

  right: -4%;

  width: min(58vw, 820px);

  height: min(100%, 880px);

  transform: translateY(-50%);

  background: url("../images/compass-half-logo-bg.png") right center / contain no-repeat;

  opacity: 0.16;

  pointer-events: none;

  z-index: 0;

}



.has-compass-bg.has-compass-bg--left::before {

  right: auto;

  left: -4%;

  background-position: left center;

  transform: translateY(-50%) scaleX(-1);

}



.has-compass-bg > .container,

.has-compass-bg > .intro-split,

.has-compass-bg > .map-video-stage {

  position: relative;

  z-index: 1;

}



/* Intro split: let watermark show through the text panel (section keeps sage bg) */

.intro.has-compass-bg .intro-panel {

  background: transparent;

}



/* Journeys: keep text/video above the watermark */

.journeys-sec.has-compass-bg .journeys-inner {

  position: relative;

  z-index: 1;

}



/* ========== FOUNDER — YAHYA ========== */

.founder-sec {

  position: relative;

  overflow: hidden;

  background: #1a2332;

  color: #f7f1e8;

  padding: clamp(48px, 7vw, 88px) 0;

}

.founder-sec.has-compass-bg::before {

  opacity: 0.55;

  mix-blend-mode: screen;

  filter: brightness(1.25);

}



.founder-bg {

  display: none; /* replaced by .has-compass-bg::before */

}



.founder-sec .container {

  position: relative;

  z-index: 1;

}



.founder-inner {

  display: flex;

  align-items: stretch;

  gap: 20px;

}



.founder-photo {

  position: relative;

  flex: 0 1 48%;

  width: 48%;

  max-width: 620px;

  overflow: visible;

  border-radius: 2px;

  aspect-ratio: 3 / 4.2;

  max-height: none;

  background: #1a1a1a;

  align-self: stretch;

}



.founder-copy {

  flex: 1 1 0;

  min-width: 0;

  max-width: none;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: clamp(6px, 1vh, 14px);

  padding: 4px 0 8px;

}



.founder-photo-main,

.founder-photo > img:not(.founder-inset img) {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  display: block;

  border-radius: 2px;

}



.founder-inset {

  position: absolute;

  right: -18px;

  bottom: 28px;

  z-index: 3;

  margin: 0;

  width: clamp(112px, 28%, 168px);

  aspect-ratio: 3 / 4;

  padding: 7px;

  background: #f7f1e8;

  border: 1px solid rgba(212, 165, 116, 0.65);

  box-shadow:

    0 14px 36px rgba(0, 0, 0, 0.4),

    0 0 0 1px rgba(26, 35, 50, 0.2);

  transform: rotate(-2.5deg);

}



.founder-inset img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  display: block;

}



.founder-copy .eyebrow {

  display: block;

  font-size: clamp(13px, 1.05vw, 15px);

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #d4a574;

  margin-bottom: 14px;

  font-weight: 600;

}



.founder-copy h2 {

  font-family: var(--serif);

  font-size: clamp(34px, 5.5vw, 56px);

  font-weight: 400;

  color: #f7f1e8;

  line-height: 1.2;

  margin: 0 0 6px;

  letter-spacing: 0;

  width: 100%;

}



.founder-role {

  font-size: clamp(14px, 1.1vw, 16px);

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: #d4a574;

  margin-bottom: 1.35rem !important;

  font-weight: 500;

}



.founder-copy > p {

  color: rgba(247, 241, 232, 0.86);

  font-size: clamp(16px, 1.25vw, 18.5px);

  line-height: 1.9;

  margin-bottom: 1.15rem;

}



.founder-quote {

  margin: 32px 0 0;

  padding: 26px 0 0 24px;

  border-left: 3px solid #d4a574;

}



.founder-quote p {

  font-family: var(--serif);

  font-size: clamp(1.35rem, 2.35vw, 1.7rem);

  font-style: italic;

  line-height: 1.6;

  color: #f7f1e8;

  margin: 0 0 16px;

}



.founder-quote cite {

  display: block;

  font-family: "Caveat", cursive;

  font-style: normal;

  font-size: clamp(1.7rem, 2.4vw, 2.05rem);

  color: var(--accent, #9a6230);

  letter-spacing: 0.02em;

}



/* ========== TOUR CARDS ========== */

.tours-home {

  background: var(--cream);

}



.daytrips-sec {

  background: var(--cool);

}



.activities-sec {

  background: var(--sage);

}



.cards-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



.cards-grid-3 {

  grid-template-columns: repeat(3, 1fr);

}



.card {

  background: #fff;

  border-radius: 4px;

  overflow: hidden;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  transition: transform 0.2s, box-shadow 0.2s;

  position: relative;

  border: 0;

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  opacity: 1;

}



/* Diagonal copper ribbons */

.card-ribbon {

  position: absolute;

  top: 18px;

  left: -34px;

  z-index: 3;

  width: 140px;

  padding: 7px 0;

  text-align: center;

  font-family: var(--sans);

  font-size: 10px;

  font-weight: 700;

  font-style: normal;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #fff;

  background: var(--accent);

  transform: rotate(-45deg);

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);

  pointer-events: none;

  border: 0;

}



.card-ribbon.ribbon-best {

  background: var(--navy);

}



.card-ribbon.ribbon-top {

  background: var(--ink);

}



.card-ribbon.ribbon-new {

  background: var(--accent-dark);

}



.card-img-wrap {

  overflow: hidden;

  height: 480px;

  position: relative;

  border-radius: 0;

}



.card-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  animation: cardKen 18s ease-in-out infinite alternate;

  will-change: transform;

}



.card:nth-child(2) .card-img {

  animation-delay: -6s;

}



.card:nth-child(3) .card-img {

  animation-delay: -12s;

}



.card:nth-child(4) .card-img {

  animation-delay: -3s;

}



@keyframes cardKen {

  from {

    transform: scale(1);

  }

  to {

    transform: scale(1.1);

  }

}



.card-body {

  padding: 18px 20px 22px;

  background: #fff;

}



.card-meta {

  font-size: 12px;

  color: var(--muted);

  margin-bottom: 8px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  font-weight: 500;

}



.card-title {

  font-family: var(--serif);

  font-size: clamp(18px, 1.5vw, 22px);

  font-weight: 500;

  font-style: normal;

  line-height: 1.3;

  margin-bottom: 10px;

  color: var(--ink);

  text-transform: none;

  letter-spacing: 0;

  width: 100%;

}



.card-title a {

  text-decoration: none;

  color: inherit;

}



.card-title a:hover {

  color: var(--accent);

}



.card-desc {

  font-size: 13.5px;

  color: var(--muted);

  line-height: 1.65;

  margin-bottom: 16px;

}



.card-rating {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 8px;

}



.stars {

  color: #f59e0b;

  font-size: 14px;

  letter-spacing: 1px;

}



.rating-count {

  font-size: 12px;

  color: var(--muted);

}



/* Horizontal track — width overridden on mobile */

.sig-track {

  display: flex;

  gap: 16px;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  padding-bottom: 8px;

  margin: 0 -4px;

}



.sig-track > .card,

.sig-track > .dt-card {

  flex: 0 0 calc(25% - 12px);

  min-width: 220px;

  scroll-snap-align: start;

}



.sig-track::-webkit-scrollbar {

  height: 4px;

}



.sig-track::-webkit-scrollbar-thumb {

  background: var(--accent);

  border-radius: 4px;

}



/* ========== DAY TRIP CARDS ========== */

.dt-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



.dt-card {

  background: #fff;

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);

  transition: transform 0.2s;

  position: relative;

}



.dt-card:hover {

  transform: translateY(-4px);

}



.dt-card .card-img-wrap {

  height: auto;

  aspect-ratio: 3 / 5;

  min-height: 480px;

}



.dt-body {

  padding: 18px 20px 20px;

}



.dt-rating {

  display: flex;

  gap: 4px;

  margin-bottom: 8px;

  color: #f59e0b;

  font-size: 14px;

}



.dt-title {

  font-family: var(--serif);

  font-size: 1rem;

  font-weight: 600;

  margin-bottom: 6px;

  line-height: 1.35;

  color: var(--navy);

  text-transform: uppercase;

  letter-spacing: 0.02em;

}



.dt-subtitle {

  font-size: 13px;

  color: var(--muted);

  margin-bottom: 14px;

}



/* ========== PATHWAYS ========== */

.pathways {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



.pathway {

  position: relative;

  min-height: 600px;

  aspect-ratio: 3 / 5;

  border-radius: var(--radius);

  overflow: hidden;

  display: flex;

  align-items: flex-end;

  color: #fff;

  text-decoration: none;

}



.pathway img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.45s ease;

}



.pathway:hover img {

  transform: scale(1.08);

}



.pathway::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(26, 26, 46, 0.85), rgba(30, 58, 95, 0.2));

}



.pathway-copy {

  position: relative;

  z-index: 1;

  padding: 28px 24px;

}



.pathway-copy h3 {

  font-family: var(--serif);

  font-size: 22px;

  font-weight: 400;

  margin-bottom: 6px;

}



.pathway-copy p {

  font-size: 14px;

  opacity: 0.85;

  font-weight: 300;

}



/* ========== JOURNEYS ========== */

.journeys-sec {
  background-color: #4a6755;
  color: #f5f2eb;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.journeys-sec.has-compass-bg::before {
  opacity: 0.1;
}

.journeys-inner {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: clamp(28px, 4vw, 48px);

  align-items: stretch;

}



.journeys-text {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 100%;

  padding: 80px 0;

}



.journeys-text .eyebrow {

  font-size: clamp(13px, 1.05vw, 15px);

  margin-bottom: 14px;

  color: #f5f2eb;

}



.journeys-text h2 {

  font-family: var(--serif);

  font-size: clamp(34px, 5.5vw, 56px);

  font-weight: 400;

  margin-bottom: 18px;

  line-height: 1.2;

  letter-spacing: 0;

  color: #c5a059;

  width: 100%;

}



.journeys-text .section-divider {

  margin: 0 0 28px !important;

  background: #c5a059;

}



.journeys-text p {

  color: #f5f2eb;

  font-size: clamp(17.5px, 1.45vw, 20.5px);

  line-height: 1.85;

  margin-bottom: 1.45rem;

}



.journeys-text .btn,

.journeys-text .btn-primary {

  margin-top: auto;

  align-self: flex-start;

  background: #c5a059;

  border-color: #c5a059;

  color: #4a6755;

}



.journeys-text .btn:hover,

.journeys-text .btn-primary:hover {

  background: #d4b36a;

  border-color: #d4b36a;

  color: #4a6755;

}



.journeys-photo {

  border-radius: 0;

  overflow: hidden;

  height: auto;

  min-height: 100%;

  align-self: stretch;

}



.journeys-photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.journeys-photo.journeys-video {

  position: relative;

  height: 100%;

  min-height: 100%;

  align-self: stretch;

  background: #1a1a1a;

}



.journeys-video-el {

  position: absolute;

  inset: 0;

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



.journeys-ig-link {

  position: absolute;

  right: 12px;

  bottom: 12px;

  z-index: 2;

  padding: 6px 10px;

  border-radius: 4px;

  background: rgba(0, 0, 0, 0.45);

  color: #fff;

  font-size: 11px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  text-decoration: none;

  backdrop-filter: blur(4px);

}



.journeys-ig-link:hover {

  background: rgba(0, 0, 0, 0.65);

}



/* ========== MOROCCAN STORY (between day trips & activities) ========== */

.morocco-story-sec {

  background: #1a2332;

  color: #f7f1e8;

  padding: 72px 0;

}

.morocco-story-sec.has-compass-bg::before {

  opacity: 0.55;

  mix-blend-mode: screen;

  filter: brightness(1.25);

}



.morocco-story-inner {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: clamp(28px, 5vw, 64px);

  align-items: stretch;

}



.morocco-story-photo {

  position: relative;

  overflow: hidden;

  border-radius: 2px;

  align-self: stretch;

  height: 100%;

  min-height: 0;

  background: #0f1620;

}



/* Keep column height tied to the text column (no fixed aspect gap) */

.morocco-story-photo::before {

  content: none;

  display: none;

}



.morocco-story-photo img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

}



.morocco-story-slides {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

}



.morocco-story-slideshow img {

  opacity: 0;

  transform: scale(1.04);

  transition: opacity 1.1s ease, transform 6.5s ease;

  will-change: opacity, transform;

}



.morocco-story-slideshow img.is-active {

  opacity: 1;

  transform: scale(1);

  z-index: 1;

}



@media (prefers-reduced-motion: reduce) {

  .morocco-story-slideshow img {

    transition: opacity 0.35s ease;

    transform: none;

  }



  .morocco-story-slideshow img.is-active {

    transform: none;

  }

}



.morocco-story-text {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 100%;

  padding: 4px 0;

}



.morocco-story-copy {

  flex: 1 1 auto;

}



.morocco-story-text .eyebrow {

  display: block;

  font-size: 12px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #d4a574;

  margin-bottom: 12px;

  font-weight: 600;

}



.morocco-story-text h2 {

  font-family: var(--serif);

  font-size: clamp(1.7rem, 2.6vw, 2.35rem);

  font-weight: 600;

  line-height: 1.2;

  color: #f7f1e8;

  margin: 0 0 8px;

}



.morocco-story-text p {

  color: rgba(247, 241, 232, 0.82);

  font-size: 15px;

  line-height: 1.85;

  margin-bottom: 1.05rem;

}



.morocco-story-text .morocco-story-copy p:last-child {

  margin-bottom: 0;

}



.morocco-story-text > .btn {

  margin-top: 28px;

  align-self: flex-start;

}



/* ========== IMPACT ========== */

.impact-sec {

  background: var(--bg);

}



.impact-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;

  margin-bottom: 48px;

}



.impact-card {

  position: relative;

  display: block;

  aspect-ratio: 3 / 5;

  min-height: 420px;

  border-radius: var(--radius);

  overflow: hidden;

  text-decoration: none;

  color: #fff;

  background: var(--navy);

  box-shadow: none;

}



.impact-card-img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.55s ease;

}



.impact-card-shade {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  transition: background 0.35s ease;

  background: linear-gradient(

    180deg,

    rgba(36, 52, 71, 0.35) 0%,

    rgba(36, 52, 71, 0.55) 48%,

    rgba(36, 52, 71, 0.78) 100%

  );

}



.impact-card:nth-child(even) .impact-card-shade {

  background: linear-gradient(

    180deg,

    rgba(126, 79, 38, 0.42) 0%,

    rgba(154, 98, 48, 0.55) 48%,

    rgba(36, 52, 71, 0.72) 100%

  );

}



.impact-card-content {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 28px 18px 32px;

  gap: 14px;

}



.impact-card-mark {

  width: 6.75rem;

  height: 6.75rem;

  border-radius: 50%;

  background: #0c0c0c;

  display: grid;

  place-items: center;

  overflow: hidden;

  flex-shrink: 0;

  padding: 0.7rem;

  box-sizing: border-box;

  /* Cream ring matches competitor’s light circle; dark fill keeps copper logo crisp */

  box-shadow:

    0 0 0 3px var(--cream),

    0 8px 24px rgba(0, 0, 0, 0.28);

  transition: transform 0.35s ease;

}



/* Full wordmark logo — fit entirely inside the circle */

.impact-card-mark img {

  width: 100%;

  height: 100%;

  max-width: 100%;

  object-fit: contain;

  object-position: center;

  display: block;

  pointer-events: none;

}



.impact-card-title {

  font-family: var(--serif);

  font-size: clamp(0.95rem, 1.15vw, 1.15rem);

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #fff;

  line-height: 1.3;

  max-width: 12em;

  margin: 0;

}



.impact-card-text {

  font-family: var(--sans);

  font-size: 13px;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.92);

  line-height: 1.65;

  max-width: 18em;

  margin: 0;

  opacity: 0;

  max-height: 0;

  overflow: hidden;

  transform: translateY(8px);

  transition:

    opacity 0.35s ease,

    max-height 0.4s ease,

    transform 0.35s ease;

}



.impact-card:hover .impact-card-img,

.impact-card:focus-visible .impact-card-img,

.impact-card.is-open .impact-card-img {

  transform: scale(1.06);

}



.impact-card:hover .impact-card-mark,

.impact-card:focus-visible .impact-card-mark,

.impact-card.is-open .impact-card-mark {

  transform: scale(1.04);

}



.impact-card:hover .impact-card-text,

.impact-card:focus-visible .impact-card-text,

.impact-card.is-open .impact-card-text {

  opacity: 1;

  max-height: 9em;

  transform: translateY(0);

}



.impact-card:hover .impact-card-shade,

.impact-card:focus-visible .impact-card-shade,

.impact-card.is-open .impact-card-shade {

  background: linear-gradient(

    180deg,

    rgba(36, 52, 71, 0.5) 0%,

    rgba(36, 52, 71, 0.68) 45%,

    rgba(36, 52, 71, 0.88) 100%

  );

}



.impact-card:nth-child(even):hover .impact-card-shade,

.impact-card:nth-child(even):focus-visible .impact-card-shade,

.impact-card:nth-child(even).is-open .impact-card-shade {

  background: linear-gradient(

    180deg,

    rgba(126, 79, 38, 0.55) 0%,

    rgba(154, 98, 48, 0.68) 45%,

    rgba(36, 52, 71, 0.86) 100%

  );

}



.impact-card:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 3px;

}



/* Touch / no-hover: keep a short line readable without requiring hover */

@media (hover: none) {

  .impact-card-text {

    opacity: 0.95;

    max-height: 4.6em;

    transform: none;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    line-clamp: 3;

  }



  .impact-card.is-open .impact-card-text {

    max-height: 10em;

    -webkit-line-clamp: unset;

    line-clamp: unset;

    display: block;

  }

}



@media (prefers-reduced-motion: reduce) {

  .impact-card-img,

  .impact-card-mark,

  .impact-card-text,

  .impact-card-shade {

    transition: none;

  }

}



.impact-cta {

  text-align: center;

  padding-top: 8px;

}



/* ========== PICKED ========== */

.picked-sec {

  background: #fff;

}



.popular-scroll {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

}



.pop-card {

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);

  background: var(--card);

  transition: transform 0.2s;

  text-decoration: none;

  color: inherit;

}



.pop-card:hover {

  transform: translateY(-3px);

}



.pop-card img {

  width: 100%;

  height: auto;

  aspect-ratio: 3 / 5;

  object-fit: cover;

  display: block;

}



.pop-card-body {

  padding: 12px 14px;

}



.pop-card-body p {

  font-size: 13px;

  font-family: var(--serif);

  font-weight: 600;

  line-height: 1.3;

  margin-bottom: 8px;

}



.pop-card-body span {

  font-size: 11px;

  color: var(--accent);

  font-weight: 600;

}



/* ========== TESTIMONIALS — guestbook / paper notes ========== */

.testimonials-sec {

  background-color: #f3ebe0;

  background-image:

    radial-gradient(ellipse at 80% 0%, rgba(154, 98, 48, 0.06), transparent 45%),

    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

  color: var(--ink);

  padding: 80px 0;

  border-top: 1px solid #ddd0bc;

}



.testimonials-sec .section-title {

  color: var(--navy);

}



.testimonials-sec .section-sub {

  color: var(--muted);

}



.testimonials-sec .section-divider {

  background: var(--accent);

}



.testi-eyebrow {

  font-family: "Caveat", cursive;

  font-size: 1.35rem;

  color: var(--accent);

  text-align: center;

  margin-bottom: 4px;

  font-weight: 600;

}



.testi-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;

  align-items: start;

}



.testi-card {

  background: #faf4e8;

  border: 1px solid #cbb99a;

  border-radius: 2px;

  padding: 28px 24px 24px;

  box-shadow: 3px 4px 0 rgba(90, 60, 30, 0.07);

  transform: rotate(var(--tilt, 0deg));

  position: relative;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.testi-card::before {

  content: "";

  position: absolute;

  top: -6px;

  left: 50%;

  width: 48px;

  height: 14px;

  margin-left: -24px;

  background: rgba(201, 168, 108, 0.5);

  transform: rotate(-2deg);

}



.testi-card:hover {

  transform: rotate(0deg) translateY(-4px);

  box-shadow: 4px 8px 0 rgba(90, 60, 30, 0.1);

}



.testi-stamp {

  font-family: "Caveat", cursive;

  font-size: 0.95rem;

  color: var(--accent);

  letter-spacing: 0.04em;

  margin-bottom: 10px;

  opacity: 0.85;

}



.testi-stars {

  display: none;

}



.testi-text {

  font-family: "Caveat", cursive;

  font-size: 1.35rem;

  line-height: 1.45;

  color: #4a3424;

  font-style: normal;

  font-weight: 500;

  margin-bottom: 18px;

  min-height: 6.2em;

}



.testi-text.is-typing::after {

  content: "▍

  display: inline-block;

  margin-left: 1px;

  color: var(--accent);

  font-weight: 400;

  animation: testiCaret 0.75s step-end infinite;

}



.testi-name {

  font-family: var(--serif);

  font-weight: 600;

  font-size: 1rem;

  color: var(--navy);

  transition: opacity 0.25s ease, transform 0.25s ease;

}



.testi-origin {

  font-family: var(--sans);

  font-size: 12px;

  color: var(--muted);

  margin-top: 2px;

  letter-spacing: 0.04em;

  transition: opacity 0.3s ease;

}



.testi-card.is-rewriting .testi-name,

.testi-card.is-rewriting .testi-origin {

  opacity: 0;

  pointer-events: none;

}



.testi-card.is-signing .testi-name,

.testi-card.is-signed .testi-name {

  font-family: "Caveat", cursive;

  font-weight: 600;

  font-size: 1.55rem;

  color: #3a2a1c;

  letter-spacing: 0.01em;

  opacity: 1;

  transform: rotate(-1.5deg);

  transform-origin: left center;

}



.testi-card.is-signed .testi-origin {

  opacity: 1;

  transition-delay: 0.15s;

}



@keyframes testiCaret {

  50% {

    opacity: 0;

  }

}



@media (prefers-reduced-motion: reduce) {

  .testi-text.is-typing::after {

    display: none;

    animation: none;

  }

}



@media (max-width: 900px) {

  .testi-grid {

    grid-template-columns: 1fr;

    max-width: 420px;

    margin: 0 auto;

  }



  .testi-card {

    transform: rotate(0deg);

  }



  .testi-card:nth-child(2) {

    transform: rotate(0.6deg);

  }



  .testi-card:nth-child(3) {

    transform: rotate(-0.5deg);

  }

}



/* ========== CTA BAND ========== */

.cta-band {

  background: linear-gradient(135deg, var(--navy) 0%, #2a4a6f 60%, var(--accent-dark) 100%);

  color: #fff;

  text-align: center;

  padding: 72px 24px;

}



.cta-band h2 {

  font-family: var(--serif);

  font-size: clamp(1.8rem, 3vw, 2.4rem);

  margin-bottom: 12px;

  font-weight: 700;

}



.cta-band p {

  opacity: 0.85;

  margin-bottom: 28px;

  font-weight: 300;

  max-width: 480px;

  margin-left: auto;

  margin-right: auto;

}



/* ========== MOROCCO MAP — full-bleed journey video ========== */

.map-itinerary {

  background: #1a2430;

  color: #f7f2e8;

  padding: 0;

  overflow: hidden;

  border-top: none;

  border-bottom: none;

}



.map-itinerary--video {

  position: relative;

}



.map-video-stage {

  position: relative;

  width: 100%;

  min-height: min(78vh, 720px);

  height: min(78vh, 720px);

  background: #1a2430;

}



.map-video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

}



@media (max-width: 900px) {

  .map-video-stage {

    min-height: 70vh;

    height: 70vh;

  }

}



/* ========== CATEGORY BANNERS (tours page) ========== */

.cat-banner {

  position: relative;

  min-height: 220px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: #fff;

  overflow: hidden;

  margin: 48px 0 32px;

  border-radius: 4px;

}



.cat-banner img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.cat-banner::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(26, 26, 46, 0.45), rgba(184, 115, 51, 0.72));

}



.cat-banner-inner {

  position: relative;

  z-index: 1;

  padding: 40px 24px;

  max-width: 640px;

}



.cat-banner h2 {

  font-family: var(--serif);

  font-size: clamp(1.6rem, 3vw, 2.2rem);

  margin-bottom: 8px;

}



.cat-banner p {

  font-size: 14px;

  opacity: 0.9;

  font-weight: 300;

}



.page-listing {

  padding: 64px 0 80px;

}



.page-listing .cards-grid {

  grid-template-columns: repeat(3, 1fr);

}



/* ========== TOUR DETAIL ========== */

.tour-overview {

  background: #fff;

  padding: 64px 0;

}



.tour-overview-grid {

  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 48px;

  align-items: start;

}



.tour-overview h2 {

  font-family: var(--serif);

  font-size: clamp(1.6rem, 2.5vw, 2rem);

  color: var(--navy);

  margin-bottom: 16px;

}



.tour-overview p {

  color: var(--muted);

  font-size: 15px;

  line-height: 1.85;

  margin-bottom: 1rem;

}



.tour-facts {

  background: var(--cream);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 28px;

}



.tour-facts h3 {

  font-family: var(--serif);

  font-size: 1.2rem;

  color: var(--navy);

  margin-bottom: 16px;

}



.tour-facts li {

  display: flex;

  justify-content: space-between;

  gap: 16px;

  padding: 10px 0;

  border-bottom: 1px solid var(--border);

  font-size: 14px;

}



.tour-facts li:last-child {

  border-bottom: 0;

}



.tour-facts li span:first-child {

  color: var(--muted);

}



.tour-facts li span:last-child {

  font-weight: 600;

  color: var(--navy);

  text-align: right;

}



.itinerary-sec {

  background: var(--cool);

  padding: 64px 0;

}



.itinerary-list {

  max-width: 800px;

  margin: 0 auto;

}



.itinerary-day {

  background: #fff;

  border-radius: var(--radius);

  padding: 22px 24px;

  margin-bottom: 14px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

}



.itinerary-day h3 {

  font-family: var(--serif);

  font-size: 1.1rem;

  color: var(--navy);

  margin-bottom: 6px;

}



.itinerary-day h3 span {

  color: var(--accent);

  font-weight: 600;

  margin-right: 6px;

}



.itinerary-day p {

  color: var(--muted);

  font-size: 14px;

  line-height: 1.7;

}



.inclusions-sec {

  background: #fff;

  padding: 64px 0;

}



.inclusions-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

  max-width: 900px;

  margin: 0 auto;

}



.inclusions-box h3 {

  font-family: var(--serif);

  font-size: 1.25rem;

  color: var(--navy);

  margin-bottom: 14px;

}



.inclusions-box ul {

  list-style: none;

}



.inclusions-box li {

  position: relative;

  padding: 8px 0 8px 22px;

  font-size: 14px;

  color: var(--muted);

  border-bottom: 1px solid var(--border);

}



.inclusions-box li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 15px;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--accent);

}



.inclusions-box.out li::before {

  background: var(--border);

}



/* ========== FAQ ========== */

.faq-sec {

  background: var(--cream);

  padding: 64px 0 80px;

}



.faq-list {

  max-width: 780px;

  margin: 0 auto;

}



.faq-item {

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 8px;

  margin-bottom: 12px;

  overflow: hidden;

}



.faq-q {

  width: 100%;

  text-align: left;

  background: none;

  border: none;

  padding: 18px 22px;

  font-family: var(--serif);

  font-size: 1.05rem;

  color: var(--navy);

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 16px;

}



.faq-q::after {

  content: "+";

  font-family: var(--sans);

  font-size: 1.4rem;

  color: var(--accent);

  flex-shrink: 0;

  line-height: 1;

}



.faq-item.open .faq-q::after {

  content: "−";

}



.faq-a {

  display: none;

  padding: 0 22px 18px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;

}



.faq-item.open .faq-a {

  display: block;

}



/* ========== CONTACT ========== */

.contact-grid {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 48px;

}



.contact-details h3 {

  font-family: var(--serif);

  font-size: 1.2rem;

  margin-bottom: 6px;

  color: var(--navy);

}



.contact-details > div {

  margin-bottom: 1.5rem;

}



.contact-details a {

  color: var(--accent);

  text-decoration: none;

}



.contact-details p {

  color: var(--muted);

  font-size: 14px;

}



.form {

  display: grid;

  gap: 14px;

  background: #fff;

  padding: 28px;

  border-radius: var(--radius);

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);

}



.form label {

  display: grid;

  gap: 6px;

  font-size: 13px;

  font-weight: 500;

  color: var(--navy);

}



.form input,

.form textarea,

.form select {

  width: 100%;

  padding: 11px 14px;

  border: 1px solid var(--border);

  background: var(--cream);

  font-family: var(--sans);

  font-size: 14px;

  color: var(--text);

  border-radius: 4px;

}



.form input:focus,

.form textarea:focus,

.form select:focus {

  outline: 2px solid var(--accent);

  outline-offset: 1px;

}



.form textarea {

  min-height: 130px;

  resize: vertical;

}



/* ========== FOOTER ========== */

footer {

  background: #111;

  color: rgba(255, 255, 255, 0.72);

  padding: 64px 0 28px;

}



.footer-inner {

  display: grid;

  grid-template-columns: 1.4fr 0.85fr 1fr 1.15fr;

  gap: clamp(28px, 4vw, 48px);

  align-items: start;

  margin-bottom: 36px;

  padding-bottom: 36px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.footer-brand {

  margin-bottom: 14px;

  line-height: 0;

}



.footer-brand img {

  display: block;

  height: 52px;

  width: auto;

  max-width: 240px;

  object-fit: contain;

}



.footer-tagline {

  font-size: 14px;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.62);

  max-width: 34ch;

  margin: 0 0 4px;

}



.footer-heading {

  font-family: var(--serif);

  font-size: 1.15rem;

  font-weight: 600;

  color: #fff;

  margin: 0 0 16px;

  letter-spacing: 0.02em;

}



.footer-menu,

.footer-contact-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 10px;

}



.footer-menu a {

  color: rgba(255, 255, 255, 0.62);

  text-decoration: none;

  font-size: 14px;

  transition: color 0.15s;

}



.footer-menu a:hover {

  color: #fff;

}



.footer-contact-list li {

  display: grid;

  gap: 2px;

  font-size: 14px;

  line-height: 1.55;

}



.footer-label {

  display: block;

  font-size: 11px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.4);

  margin-bottom: 2px;

}



.footer-contact-list a {

  color: rgba(255, 255, 255, 0.85);

  text-decoration: none;

  word-break: break-word;

}



.footer-contact-list a:hover {

  color: #fff;

}



.footer-contact p {

  font-size: 14px;

  line-height: 1.9;

}



.footer-contact a {

  color: inherit;

  text-decoration: none;

}



.footer-contact a:hover {

  color: #fff;

}



.footer-social {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 18px;

}



.footer-social a {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background: rgba(255, 255, 255, 0.08);

  color: rgba(255, 252, 247, 0.92);

  transition: background 0.2s, transform 0.2s, color 0.2s;

}



.footer-social a:hover {

  background: rgba(255, 255, 255, 0.16);

  transform: translateY(-2px);

  color: #fff;

}



.footer-social a[title="TripAdvisor"] {

  color: #34e0a1;

}



.footer-social a[title="WhatsApp"] {

  color: #25d366;

}



.footer-social a[title="Instagram"]:hover {

  color: #e1306c;

}



.footer-social a[title="YouTube"]:hover {

  color: #ff0033;

}



.footer-social svg {

  width: 22px;

  height: 22px;

  fill: currentColor;

}



.tripadvisor-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #00aa6c;

  font-weight: 500;

  text-decoration: none;

}



.tripadvisor-link svg {

  width: 22px;

  height: 22px;

  fill: currentColor;

  flex-shrink: 0;

}



.tripadvisor-link:hover {

  text-decoration: underline;

}



.footer-links {

  display: flex;

  gap: 24px;

  flex-wrap: wrap;

}



.footer-links a {

  color: rgba(255, 255, 255, 0.6);

  text-decoration: none;

  font-size: 13px;

  transition: color 0.15s;

}



.footer-links a:hover {

  color: #fff;

}



.footer-copy {

  border-top: 0;

  padding-top: 0;

  text-align: center;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.4);

  line-height: 1.6;

}



.footer-links a:hover {

  color: #fff;

}



.footer-copy {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-top: 24px;

  text-align: center;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.4);

}



/* Floats */

.whatsapp-float,

.tripadvisor-float {

  position: fixed;

  z-index: 90;

  width: 52px;

  height: 52px;

  border-radius: 50%;

  color: #fff;

  display: grid;

  place-items: center;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

  text-decoration: none;

}



.whatsapp-float {

  right: 20px;

  bottom: 20px;

  background: #25d366;

}



.tripadvisor-float {

  right: 20px;

  bottom: 84px;

  background: #34e0a1;

}



.whatsapp-float svg,

.tripadvisor-float svg {

  width: 26px;

  height: 26px;

  fill: currentColor;

}



.tripadvisor-float svg {

  width: 28px;

  height: 28px;

}



.scroll-top {

  position: fixed;

  right: 20px;

  bottom: 148px;

  z-index: 90;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: var(--navy);

  color: #fff;

  border: none;

  cursor: pointer;

  display: grid;

  place-items: center;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.25s, visibility 0.25s, background 0.2s;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);

}



.scroll-top.is-visible {

  opacity: 1;

  visibility: visible;

}



.scroll-top:hover {

  background: var(--accent);

}



.scroll-top svg {

  width: 18px;

  height: 18px;

  fill: currentColor;

}



/* Reveals */

.reveal,

.card,

.dt-card,

.pathway,

.impact-card,

.pop-card,

.testi-card,

.faq-item,

.itinerary-day {

  opacity: 0;

  transform: translateY(28px);

  transition:

    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),

    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);

}



.section-divider.reveal {

  opacity: 0;

  transform: scaleX(0.35);

  transform-origin: center;

  transition:

    opacity 0.7s ease,

    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);

}



.section-title.reveal {

  transform: translateY(18px);

}



.tours-home .card,

.daytrips-sec .dt-card,

.activities-sec .card,

.cards-animate .card,

.impact-card,

.pop-card,

.testi-card {

  transition-delay: calc(var(--i, 0) * 0.12s);

}



.tours-home .card {

  transform: translateY(36px) scale(0.97);

}



.tours-home .card.is-visible {

  transform: none;

}



.tours-home .card .card-ribbon {

  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;

}



.tours-home .card:not(.is-visible) .card-ribbon {

  transform: rotate(-45deg) translateY(-8px);

}



.tours-home .center-cta.reveal {

  transition-delay: 0.35s;

}



.reveal.is-visible,

.card.is-visible,

.dt-card.is-visible,

.pathway.is-visible,

.impact-card.is-visible,

.pop-card.is-visible,

.testi-card.is-visible,

.faq-item.is-visible,

.itinerary-day.is-visible {

  opacity: 1;

  transform: none;

}



.testi-card.is-visible {

  transform: rotate(var(--tilt, 0deg));

}



.section-divider.reveal.is-visible {

  opacity: 1;

  transform: scaleX(1);

}



@media (prefers-reduced-motion: reduce) {

  .reveal,

  .card,

  .dt-card,

  .pathway,

  .impact-card,

  .pop-card,

  .testi-card,

  .faq-item,

  .itinerary-day,

  .section-divider.reveal,

  .tours-home .card {

    opacity: 1;

    transform: none;

    transition: none;

  }



  .tours-home .card:not(.is-visible) .card-ribbon {

    transform: rotate(-45deg);

  }

}



/* ========== RESPONSIVE ========== */

@media (max-width: 1100px) {

  .cards-grid,

  .dt-grid,

  .page-listing .cards-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .popular-scroll {

    grid-template-columns: repeat(2, 1fr);

  }



  .pathways {

    grid-template-columns: 1fr;

  }



  .pathway {

    min-height: 360px;

    aspect-ratio: 4 / 3;

  }

}



@media (max-width: 1024px) {

  .intro-split {

    grid-template-columns: 1fr;

    min-height: 0;

  }



  .intro-photo {

    min-height: 400px;

    max-height: 58vh;

  }



  .intro-panel {

    padding: 40px 22px 56px;

  }



  .intro-panel h2 {

    max-width: none;

  }



  .journeys-inner,

  .morocco-story-inner,

  .intro-grid,

  .contact-grid,

  .how-grid,

  .tour-overview-grid,

  .inclusions-grid {

    grid-template-columns: 1fr;

  }



  .founder-inner {

    flex-direction: column;

    gap: 20px;

  }



  .footer-inner {

    grid-template-columns: 1.2fr 1fr 1fr;

    gap: 28px;

  }



  .footer-col--contact {

    grid-column: 1 / -1;

  }



  .journeys-photo {

    height: 440px;

    min-height: 440px;

  }



  .journeys-photo.journeys-video {

    height: min(600px, 75vh);

    min-height: 420px;

    order: -1;

  }



  .morocco-story-photo {

    min-height: min(70vw, 480px);

  }



  .morocco-story-photo::before {

    content: none;

    display: none;

  }



  .how-photo {

    max-height: none;

    aspect-ratio: auto;

  }



  .how-photo img {

    width: 100%;

    height: auto;

    min-height: 280px;

    max-height: 520px;

    object-fit: cover;

  }



  .founder-photo {

    width: 100%;

    max-width: none;

    flex: none;

    max-height: min(72vh, 680px);

    aspect-ratio: 3 / 4.5;

    order: -1;

  }



  .founder-copy {

    max-width: none;

  }



  .founder-inset {

    right: 14px;

    bottom: 16px;

    width: clamp(96px, 32%, 132px);

    transform: rotate(-2deg);

  }



  .founder-bg {

    display: none;

  }



  .has-compass-bg::before {

    width: min(78vw, 520px);

    opacity: 0.12;

    right: -8%;

  }



  .has-compass-bg.has-compass-bg--left::before {

    left: -8%;

    right: auto;

  }



  .founder-copy h2 {

    font-size: clamp(2.15rem, 7.5vw, 2.75rem);

  }



  .founder-copy > p {

    font-size: 16px;

  }



  .founder-quote p {

    font-size: clamp(1.2rem, 4.5vw, 1.45rem);

  }



  .testi-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .impact-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

  }



  .impact-card {

    min-height: 360px;

  }



  .impact-card-mark {

    width: 5.5rem;

    height: 5.5rem;

    padding: 0.55rem;

  }

}



@media (max-width: 768px) {

  .container {

    padding: 0 10px;

  }



  nav {

    padding: 0 14px 0 16px;

    gap: 12px;

  }



  .nav-links {

    display: none;

    position: fixed;

    top: var(--nav-h);

    left: 0;

    right: 0;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

    background: #fff;

    flex-direction: column;

    align-items: stretch;

    padding: 16px 24px;

    gap: 0;

    border-bottom: 1px solid var(--border);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    margin: 0;

    z-index: 101;

    overflow-x: hidden;

  }



  .nav-links.open {

    display: flex;

  }



  .nav-links li {

    border-bottom: 1px solid var(--border);

  }



  .nav-links a {

    display: block;

    padding: 14px 0;

  }



  .nav-cta {

    margin: 12px 0 4px;

    text-align: center;

  }



  .nav-ham {

    display: block;

    margin-left: auto;

    flex-shrink: 0;

    z-index: 102;

  }



  .hero,

  .intro,

  section {

    max-width: 100%;

  }



  .hero-content {

    padding: calc(var(--nav-h) + 8px) 20px 48px;

    max-width: 100%;

    justify-content: center;

  }



  .hero-logo-mark {

    width: min(88vw, 420px);

  }



  /* Mobile: 3 cards same line — no gaps, larger cards */

  .cards-grid,

  .dt-grid,

  .page-listing .cards-grid,

  .activities-sec .cards-grid,

  .sig-track {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    overflow: visible;

    scroll-snap-type: none;

    padding: 0;

    margin: 0;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

  }



  .tours-home .container,

  .daytrips-sec .container,

  .activities-sec .container,

  .page-listing .container {

    padding-left: 0;

    padding-right: 0;

  }



  .tours-home .section-title,

  .tours-home .section-sub,

  .tours-home .section-divider,

  .tours-home .center-cta,

  .daytrips-sec .section-title,

  .daytrips-sec .section-sub,

  .daytrips-sec .section-divider,

  .daytrips-sec .center-cta,

  .activities-sec .section-title,

  .activities-sec .section-sub,

  .activities-sec .section-divider,

  .activities-sec .center-cta {

    padding-left: 12px;

    padding-right: 12px;

  }



  .cards-grid > .card,

  .dt-grid > .dt-card,

  .page-listing .cards-grid > .card,

  .activities-sec .cards-grid > .card,

  .sig-track > .card,

  .sig-track > .dt-card {

    flex: none;

    width: 100%;

    max-width: none;

    min-width: 0;

    box-sizing: border-box;

    border-radius: 0;

    box-shadow: none;

    border-right: 1px solid var(--border);

  }



  .cards-grid > .card:nth-child(3),

  .dt-grid > .dt-card:nth-child(3),

  .cards-grid > .card:last-child,

  .dt-grid > .dt-card:last-child {

    border-right: 0;

  }



  .card-img-wrap {

    height: 280px;

  }



  .dt-card .card-img-wrap {

    height: auto;

    min-height: 300px;

    aspect-ratio: 2 / 3.4;

  }



  .card-body,

  .dt-body {

    padding: 12px 7px 14px;

    text-align: center;

  }



  .card-title,

  .dt-title {

    font-size: 12px;

    line-height: 1.3;

    margin-bottom: 6px;

    text-transform: uppercase;

    letter-spacing: 0.02em;

  }



  .card-desc,

  .dt-subtitle {

    font-size: 11px;

    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    overflow: hidden;

    max-width: none;

    margin-left: 0;

    margin-right: 0;

    margin-bottom: 10px;

  }



  .card-meta {

    font-size: 10px;

    margin-bottom: 4px;

    justify-content: center;

  }



  .card-rating,

  .dt-rating {

    justify-content: center;

    margin-bottom: 4px;

  }



  .stars,

  .dt-rating {

    font-size: 11px;

  }



  .rating-count {

    font-size: 9px;

  }



  .btn-sm,

  .card .btn,

  .dt-card .btn {

    display: inline-flex;

    justify-content: center;

    width: calc(100% - 8px);

    padding: 9px 6px;

    font-size: 10px;

    min-width: 0;

    letter-spacing: 0.04em;

  }



  .card-ribbon {

    font-size: 8px;

    width: 104px;

    top: 12px;

    left: -28px;

    padding: 5px 0;

    transform: rotate(-45deg);

  }



  /* Only 3 cards per homepage section on mobile */

  .tours-home .cards-grid > .card:nth-child(n + 4),

  .daytrips-sec .dt-grid > .dt-card:nth-child(n + 4),

  .activities-sec .cards-grid > .card:nth-child(n + 4) {

    display: none;

  }



  .popular-scroll {

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;

  }



  .pathways {

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    margin: 0 -10px;

    width: calc(100% + 20px);

  }



  .pathway {

    min-height: 290px;

    aspect-ratio: 2 / 3.4;

    border-radius: 0;

  }



  .pathway-copy h3 {

    font-size: 12px;

  }



  .pathway-copy p {

    font-size: 9px;

  }



  .testi-grid,

  .impact-grid {

    grid-template-columns: 1fr;

    gap: 10px;

  }



  .impact-card {

    min-height: 0;

    aspect-ratio: 4 / 5;

  }



  .impact-card-content {

    padding: 22px 16px 26px;

    gap: 12px;

  }



  .impact-card-title {

    font-size: 1rem;

    letter-spacing: 0.06em;

  }



  .footer-inner {

    grid-template-columns: 1fr;

    gap: 28px;

  }



  .footer-col--brand {

    grid-column: auto;

  }



  .footer-tagline {

    max-width: none;

  }



  .section-title {

    font-size: clamp(28px, 7vw, 40px);

    margin-bottom: 8px;

    font-weight: 400;

    letter-spacing: 0;

  }



  .section-title,

  .section-sub,

  .center-cta {

    text-align: center;

  }



  .section-divider {

    margin: 0 auto 10px;

  }



  .section-sub {

    max-width: 38ch;

    margin: 0 auto 14px;

    font-size: 13px;

    line-height: 1.5;

  }



  .center-cta {

    margin-top: 14px;

  }



  /* Tighter gaps between sections — mobile only */

  section {

    padding: 28px 0;

  }



  .intro-split {

    grid-template-columns: 1fr;

  }



  .intro-photo {

    height: min(54vh, 500px);

    min-height: 340px;

    max-height: 520px;

  }



  .intro-panel {

    padding: 22px 18px 28px;

  }



  .intro-panel h2 {

    font-size: clamp(1.55rem, 7vw, 1.95rem);

    max-width: none;

    text-align: left;

    margin-bottom: 0.75rem;

  }



  .intro-panel p,

  .intro-copy p {

    font-size: 16.5px;

    line-height: 1.8;

    margin-bottom: 0.9rem;

  }



  .journeys-inner {

    gap: 16px;

  }



  .journeys-text h2 {

    font-size: clamp(1.85rem, 7vw, 2.25rem);

    margin-bottom: 12px;

  }



  .journeys-text p {

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 1rem;

  }



  .journeys-text {

    min-height: 0;

    justify-content: flex-start;

    gap: 0;

    padding: 28px 0 36px;

  }



  .journeys-text .btn,

  .morocco-story-text > .btn {

    width: 100%;

    text-align: center;

    justify-content: center;

  }



  .morocco-story-sec,

  .journeys-sec,

  .impact-sec,

  .how-sec,

  .tours-home,

  .daytrips-sec,

  .activities-sec {

    padding: 28px 0;

  }



  .morocco-story-inner {

    gap: 14px;

  }



  .morocco-story-photo {

    min-height: min(72vw, 420px);

  }



  .morocco-story-photo::before {

    content: none;

    display: none;

  }



  .morocco-story-text h2 {

    font-size: clamp(1.4rem, 6vw, 1.75rem);

  }



  .morocco-story-text p {

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 0.7rem;

  }



  /* Shorter copy on phone — full text stays on desktop */

  .morocco-story-copy > p:nth-of-type(4),

  .morocco-story-copy > p:nth-of-type(5) {

    display: none;

  }



  .morocco-story-text > .btn {

    margin-top: 12px;

  }



  .journeys-photo {

    height: 300px;

    min-height: 300px;

  }



  .journeys-photo.journeys-video {

    height: min(620px, 76vh);

    min-height: 420px;

    order: -1;

  }



  .how-photo {

    max-height: none;

    aspect-ratio: auto;

  }



  .how-photo img {

    width: 100%;

    height: auto;

    min-height: 280px;

    max-height: 520px;

    object-fit: cover;

  }



  .whatsapp-float,

  .tripadvisor-float {

    right: 14px;

    width: 48px;

    height: 48px;

  }



  .tripadvisor-float {

    bottom: 78px;

  }



  .whatsapp-float {

    bottom: 16px;

  }

}