:root {
  --green: #50b748;
  --green-soft: #f2faf1;
  --blue: #1e3a8a;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --orange: #f16b22;
  --white: #ffffff;
  --shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

* { box-sizing: border-box; }

html,
body { min-height: 100%; }

body {
  margin: 0;
  background: var(--green-soft);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.coming-soon {
  align-items: center;
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(20px, 5vw, 64px);
  position: relative;
}

.hero-image,
.hero-overlay {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.hero-image { object-fit: cover; }

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(242, 250, 241, 0.98) 0%, rgba(242, 250, 241, 0.9) 42%, rgba(39, 132, 58, 0.66) 100%),
    rgba(80, 183, 72, 0.36);
}

.launch-panel {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-width: 680px;
  padding: clamp(28px, 5vw, 56px);
  position: relative;
  width: min(100%, 680px);
  z-index: 1;
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  margin-bottom: clamp(36px, 7vw, 72px);
}

.brand-mark {
  border-radius: 8px;
  height: 50px;
  object-fit: contain;
  width: 41px;
}

.brand strong,
h1,
.eyebrow,
.notify-form button { font-family: "Outfit", Arial, sans-serif; }

.brand strong {
  color: var(--blue);
  display: block;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 900;
  line-height: 1.05;
}

.brand small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  margin-top: 3px;
  text-transform: uppercase;
}

.eyebrow {
  background: var(--orange);
  border-radius: 6px;
  color: var(--white);
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 20px;
  padding: 8px 14px;
  text-transform: uppercase;
}

h1 {
  color: var(--blue);
  font-size: clamp(44px, 7vw, 76px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0;
  max-width: 620px;
}

.intro {
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  margin: 24px 0 32px;
  max-width: 590px;
}

.notify-form {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.notify-form label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.notify-form div {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 6px;
}

.notify-form input {
  border: 0;
  color: var(--ink);
  font: inherit;
  min-height: 48px;
  min-width: 0;
  outline: 0;
  padding: 0 12px;
}

.notify-form button {
  background: var(--green);
  border: 0;
  border-radius: 6px;
  color: var(--white);
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  min-height: 48px;
  padding: 0 22px;
}

.quick-info { display: grid; gap: 12px; }

.quick-info a,
.quick-info span {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 14px;
  gap: 10px;
  min-width: 0;
}

.quick-info img {
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.copyright-mark {
  align-items: center;
  color: var(--blue);
  display: inline-flex;
  flex: 0 0 18px;
  font-size: 14px;
  font-weight: 500;
  height: 18px;
  justify-content: center;
  line-height: 1;
  width: 18px;
}

.launch-footer {
  align-items: center;
  bottom: clamp(20px, 5vw, 40px);
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  left: clamp(20px, 5vw, 64px);
  position: absolute;
  right: clamp(20px, 5vw, 64px);
  z-index: 1;
}

.launch-footer p {
  font-size: 13px;
  margin: 0;
}

.launch-footer nav {
  display: flex;
  gap: 12px;
}

.launch-footer a {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.launch-footer img {
  height: 20px;
  width: 20px;
}

@media (max-width: 760px) {
  .coming-soon {
    align-items: start;
    padding-bottom: 140px;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(242, 250, 241, 0.98) 0%, rgba(242, 250, 241, 0.92) 56%, rgba(39, 132, 58, 0.78) 100%),
      rgba(80, 183, 72, 0.36);
  }

  .launch-panel { margin-top: 16px; }
  .notify-form div { grid-template-columns: 1fr; }
  .notify-form button { width: 100%; }

  .launch-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}





.page-header {
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 64px);
}

.page-header .brand {
  margin-bottom: 0;
}

.page-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.page-nav a {
  border-radius: 6px;
  color: var(--muted);
  font-family: "Outfit", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  padding: 11px 16px;
}

.page-nav a.active,
.page-nav a:hover {
  background: var(--green);
  color: var(--white);
}

.page-footer {
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
  padding: 24px clamp(20px, 5vw, 64px);
}

.page-footer .quick-info {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.figma-locations-page {
  background: var(--green-soft);
  min-height: 100vh;
}

.figma-locations-grid-section {
  background: var(--green-soft);
  padding: 80px clamp(20px, 5vw, 80px);
}

.figma-locations-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 410px);
  justify-content: center;
}

.figma-location-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 12px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  width: 410px;
}

.figma-location-photo {
  border-radius: 10px;
  height: 180px;
  object-fit: cover;
  width: 100%;
}

.figma-location-body {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 100px;
  min-width: 0;
  width: 100%;
}

.figma-location-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.figma-location-qr {
  align-items: center;
  align-self: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  height: 92px;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
  width: 100px;
}

.figma-location-qr img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.figma-location-card h1 {
  color: var(--ink);
  font-family: "Outfit", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.figma-location-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.figma-location-details p {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: 8px;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
}

.figma-location-details img {
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
}

.figma-location-details p:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-directions-button {
  align-items: center;
  background: var(--orange);
  border-radius: 8px;
  color: var(--white);
  display: flex;
  font-family: "Outfit", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  min-height: 42px;
  padding: 12px 16px;
  width: 100%;
}

@media (max-width: 1399px) {
  .figma-locations-grid-section {
    padding: 64px 32px;
  }

  .figma-locations-grid {
    grid-template-columns: repeat(2, 410px);
  }
}

@media (max-width: 900px) {
  .figma-locations-grid-section {
    padding: 40px 20px;
  }

  .figma-locations-grid {
    grid-template-columns: minmax(0, 410px);
  }

  .figma-location-card {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-nav {
    justify-content: flex-start;
  }

  .page-footer .quick-info {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 460px) {
  .figma-location-body {
    grid-template-columns: 1fr;
  }

  .figma-location-qr {
    width: 100px;
  }
}


.figma-home-page { background: var(--green-soft); color: var(--ink); }
.figma-container { max-width: 1280px; margin: 0 auto; width: 100%; }
.figma-home-header { background: var(--white); border-bottom: 1px solid #e5f5e4; }
.figma-top-bar { align-items: center; background: var(--green); color: var(--white); display: flex; font-size: 13px; justify-content: space-between; min-height: 37px; padding: 10px clamp(20px, 5.5vw, 80px); }
.figma-top-bar a { align-items: center; display: flex; gap: 6px; }
.figma-top-bar img { height: 16px; width: 16px; }
.figma-main-header { align-items: center; display: flex; min-height: 90px; padding: 20px clamp(20px, 5.5vw, 80px); }
.figma-brand { align-items: center; display: inline-flex; gap: 8px; }
.figma-brand > img { border-radius: 8px; height: 50px; object-fit: contain; width: 41px; }
.figma-brand b { color: var(--blue); display: block; font-family: "Outfit", Arial, sans-serif; font-size: 28px; font-weight: 900; line-height: 1.05; }
.figma-brand small { color: var(--muted); display: block; font-size: 10px; font-weight: 700; line-height: 1.2; margin-top: 2px; text-transform: uppercase; }
.figma-nav { background: var(--green-soft); border-bottom: 1px solid #e5f5e4; display: flex; overflow-x: auto; padding: 0 clamp(20px, 5.5vw, 80px); }
.figma-nav a { border-bottom: 3px solid transparent; color: var(--ink); flex: 0 0 auto; font-size: 14px; font-weight: 500; padding: 16px 20px 13px; }
.figma-nav a.active, .figma-nav a:hover { border-color: var(--green); color: var(--green); font-weight: 700; }
.figma-hero { min-height: 625px; overflow: hidden; padding: 80px clamp(20px, 5.5vw, 80px); position: relative; }
.figma-hero > img, .figma-hero-overlay { height: 100%; inset: 0; position: absolute; width: 100%; }
.figma-hero > img { object-fit: cover; }
.figma-hero-overlay { background: rgba(80, 183, 72, 0.65); }
.figma-hero-content { color: var(--white); max-width: 626px; position: relative; z-index: 1; }
.figma-hero-content > span, .figma-left-heading > span { background: var(--orange); border-radius: 6px; color: var(--white); display: inline-flex; font-family: "Outfit", Arial, sans-serif; font-size: 14px; font-weight: 800; line-height: 1; margin-bottom: 24px; padding: 8px 14px; text-transform: uppercase; }
.figma-hero h1 { color: var(--white); font-family: "Outfit", Arial, sans-serif; font-size: clamp(44px, 5vw, 56px); font-weight: 900; line-height: 1.1; margin: 0 0 24px; max-width: 626px; }
.figma-hero p { font-size: 18px; line-height: 1.5; margin: 0; opacity: .9; }
.figma-hero-content div { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.figma-hero-content a { border-radius: 8px; font-family: "Outfit", Arial, sans-serif; font-size: 16px; font-weight: 700; padding: 16px 28px; }
.figma-hero-content a.orange { background: var(--orange); color: var(--blue); }
.figma-hero-content a.green { background: var(--green); color: var(--white); }
.figma-stats { background: var(--green); color: var(--white); display: grid; grid-template-columns: repeat(3, 1fr); padding: 48px clamp(20px, 5.5vw, 80px); text-align: center; }
.figma-stats b { color: #f59e42; display: block; font-family: "Outfit", Arial, sans-serif; font-size: 48px; font-weight: 900; line-height: 1.1; }
.figma-stats span { font-size: 14px; font-weight: 700; text-transform: uppercase; }
.figma-section { padding: 80px clamp(20px, 5.5vw, 80px); }
.chairman-layout { align-items: start; display: grid; gap: 48px; grid-template-columns: minmax(0, 712px) 520px; }
.figma-chairman h2, .figma-heading h2, .figma-left-heading h2 { color: var(--blue); font-family: "Outfit", Arial, sans-serif; font-size: 40px; font-weight: 900; line-height: 1.1; margin: 0 0 20px; }
.figma-chairman p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 20px; }
.figma-signature b { color: var(--blue); display: block; font-family: "Outfit", Arial, sans-serif; font-size: 20px; }
.figma-signature span { color: #2563eb; display: block; font-size: 14px; font-weight: 700; margin-top: 4px; }
.chairman-layout > img { border-radius: 16px; height: 520px; object-fit: cover; width: 520px; }
.figma-heading { margin: 0 auto 40px; max-width: 900px; text-align: center; }
.figma-heading h2 { color: var(--ink); font-size: 32px; margin-bottom: 8px; }
.figma-heading p, .figma-left-heading p { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0; }
.figma-leaders { display: grid; gap: 24px; grid-template-columns: repeat(6, 1fr); }
.figma-leaders article { background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.figma-leaders img { height: 260px; object-fit: cover; width: 100%; }
.figma-leaders div { padding: 20px; }
.figma-leaders h3 { color: var(--ink); font-family: "Outfit", Arial, sans-serif; font-size: 18px; line-height: 1.25; margin: 0 0 4px; }
.figma-leaders p { color: #2563eb; font-size: 13px; margin: 0; }
.figma-brands { display: grid; gap: 24px; grid-template-columns: repeat(6, 1fr); }
.figma-brands img { border-radius: 8px; height: 180px; object-fit: cover; width: 100%; }
.figma-brands img:nth-child(n+7) { grid-column: span 1; }
.figma-journey { padding-top: 0; }
.figma-timeline { margin: 0 auto; max-width: 1232px; position: relative; }
.figma-timeline::before { background: var(--green); content: ""; height: 100%; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 2px; }
.figma-timeline article { align-items: center; display: grid; gap: 24px; grid-template-columns: 1fr 120px 1fr; margin-bottom: 24px; min-height: 100px; position: relative; }
.figma-timeline article.left div { grid-column: 1; grid-row: 1; } .figma-timeline article.left span { grid-column: 2; grid-row: 1; } .figma-timeline article.right span { grid-column: 2; } .figma-timeline article.right div { grid-column: 3; }
.figma-timeline span { align-items: center; background: #f59e42; border: 6px solid var(--green-soft); border-radius: 999px; color: var(--white); display: flex; font-family: "Outfit", Arial, sans-serif; font-size: 14px; font-weight: 800; height: 68px; justify-content: center; margin: 0 auto; position: relative; width: 68px; z-index: 1; }
.figma-timeline div { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.figma-timeline h3 { color: var(--ink); font-family: "Outfit", Arial, sans-serif; font-size: 18px; margin: 0 0 8px; }
.figma-timeline p { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0; }
.figma-left-heading { margin-bottom: 40px; }
.figma-store-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.figma-store-grid article { background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 12px rgba(15,23,42,.07); padding: 16px; }
.figma-store-grid .photo { border-radius: 10px; height: 160px; object-fit: cover; width: 100%; }
.figma-store-grid h3 { color: var(--ink); font-family: "Outfit", Arial, sans-serif; font-size: 18px; line-height: 1.25; margin: 14px 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.figma-store-grid p { align-items: center; color: var(--muted); display: flex; font-size: 13px; gap: 8px; margin: 8px 0 0; min-width: 0; }
.figma-store-grid p img { height: 16px; width: 16px; }
.figma-store-grid a { align-items: center; background: var(--orange); border-radius: 8px; color: var(--white); display: flex; font-family: "Outfit", Arial, sans-serif; font-size: 13px; font-weight: 700; justify-content: center; margin-top: 16px; min-height: 44px; }
.figma-contact-grid { align-items: start; display: grid; gap: 40px; grid-template-columns: 620px 420px; }
.figma-contact form, .figma-contact aside { background: var(--white); border: 1px solid #e5f5e4; border-radius: 16px; display: grid; gap: 14px; padding: 32px; }
.figma-contact h3 { color: var(--blue); font-family: "Outfit", Arial, sans-serif; font-size: 20px; margin: 0 0 2px; }
.figma-contact label { display: grid; font-size: 13px; font-weight: 700; gap: 8px; }
.figma-contact input, .figma-contact select, .figma-contact textarea { background: var(--green-soft); border: 1px solid var(--line); border-radius: 8px; font: inherit; min-height: 46px; padding: 12px 14px; width: 100%; }
.figma-contact textarea { min-height: 140px; resize: vertical; }
.figma-contact button { background: var(--orange); border: 0; border-radius: 8px; color: var(--blue); font-family: "Outfit", Arial, sans-serif; font-size: 15px; font-weight: 700; min-height: 47px; }
.figma-contact small { color: var(--muted); font-size: 13px; }
.figma-contact aside a, .figma-contact aside p { color: var(--muted); display: grid; font-size: 14px; gap: 2px 12px; grid-template-columns: 40px 1fr; margin: 0; }
.figma-contact i { align-items: center; background: var(--green-soft); border-radius: 10px; display: flex; grid-row: span 2; height: 40px; justify-content: center; width: 40px; }
.figma-contact i img { height: 20px; width: 20px; }
.figma-contact b { color: var(--ink); font-size: 13px; }
.figma-footer { background: var(--green); color: var(--white); padding: 80px clamp(20px,5.5vw,80px) 40px; }
.footer-layout { display: grid; gap: 48px; grid-template-columns: 340px 200px 280px; justify-content: space-between; }
.figma-footer p, .figma-footer a { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.6; }
.figma-footer nav { display: grid; gap: 12px; }
.figma-footer h2 { font-family: "Outfit", Arial, sans-serif; font-size: 16px; margin: 0 0 8px; text-transform: uppercase; }
@media (max-width: 1180px) { .chairman-layout, .figma-contact-grid, .footer-layout { grid-template-columns: 1fr; } .chairman-layout > img { height: auto; max-width: 520px; width: 100%; } .figma-leaders, .figma-brands {
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 220px));
  justify-content: center;
} .figma-store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .figma-top-bar { align-items: flex-start; flex-direction: column; } .figma-main-header { min-height: 76px; } .figma-brand b { font-size: 22px; } .figma-stats, .figma-store-grid { grid-template-columns: 1fr; } .figma-section, .figma-hero { padding: 56px 20px; } .figma-leaders, .figma-brands { grid-template-columns: repeat(2, 1fr); } .figma-timeline::before { left: 34px; } .figma-timeline article { grid-template-columns: 68px 1fr; } .figma-timeline article.left span, .figma-timeline article.right span { grid-column: 1; grid-row: 1; } .figma-timeline article.left div, .figma-timeline article.right div { grid-column: 2; grid-row: 1; } }
@media (max-width: 520px) { .figma-leaders, .figma-brands { grid-template-columns: 1fr; } .figma-hero-content a { text-align: center; width: 100%; } }
/* end figma home */

/* refreshed Figma home import */
.figma-home-page {
  background: #f7fff6;
}

.figma-home-header {
  box-shadow: 0 1px 0 rgba(80, 183, 72, 0.14);
  position: relative;
  z-index: 5;
}

.figma-top-bar {
  font-weight: 700;
}

.figma-top-bar strong {
  color: #fff6e7;
  font-size: 13px;
}

.figma-main-header {
  justify-content: center;
}

.figma-brand {
  gap: 12px;
}

.figma-brand > img {
  height: 62px;
  width: 51px;
}

.figma-brand b {
  font-size: clamp(26px, 3vw, 34px);
}

.figma-brand small {
  color: #64748b;
  font-size: 11px;
  letter-spacing: .02em;
}

.figma-nav {
  justify-content: center;
}

.figma-nav a {
  min-width: 118px;
  text-align: center;
}

.figma-hero {
  align-items: center;
  display: flex;
  min-height: 650px;
}

.figma-hero-overlay {
  background:
    linear-gradient(90deg, rgba(29, 91, 43, .86) 0%, rgba(48, 143, 61, .7) 47%, rgba(80, 183, 72, .36) 100%),
    rgba(15, 23, 42, .12);
}

.figma-hero-content > span,
.figma-left-heading > span {
  box-shadow: 0 12px 24px rgba(241, 107, 34, .22);
}

.figma-hero h1 {
  font-size: clamp(48px, 6vw, 72px);
  max-width: 720px;
}

.figma-hero p {
  font-size: 20px;
  max-width: 640px;
}

.figma-hero-content a.orange,
.figma-contact button {
  color: var(--white);
}

.figma-stats {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.figma-section {
  background: #f7fff6;
}

.figma-section:nth-of-type(even) {
  background: var(--white);
}

.figma-chairman {
  background: var(--green-soft);
}

.chairman-layout article {
  padding-top: 18px;
}

.chairman-layout > img {
  box-shadow: 0 24px 70px rgba(15, 23, 42, .13);
}

.figma-leaders article,
.figma-store-grid article,
.figma-contact form,
.figma-contact aside,
.figma-timeline div {
  box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

.figma-leaders article,
.figma-brands img,
.figma-store-grid article {
  transition: transform .18s ease, box-shadow .18s ease;
}

.figma-leaders article:hover,
.figma-brands img:hover,
.figma-store-grid article:hover {
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
  transform: translateY(-3px);
}

.figma-brands {
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 220px));
  justify-content: center;
}

.figma-brands img {
  height: 150px;
}

.figma-left-heading {
  max-width: 720px;
}

.figma-contact {
  background: var(--green-soft);
}

.figma-contact-grid {
  justify-content: space-between;
}

.figma-contact aside {
  gap: 24px;
}

.figma-contact .copyright-mark {
  color: var(--orange);
  font-size: 22px;
  font-weight: 800;
}

.figma-footer {
  margin-top: 0;
}

.footer-logo {
  align-items: center;
  color: var(--white);
  display: inline-flex;
  font-family: "Outfit", Arial, sans-serif;
  font-size: 20px;
  font-weight: 900;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-logo span {
  align-items: center;
  background: var(--orange);
  border-radius: 8px;
  color: var(--white);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

@media (max-width: 760px) {
  .figma-main-header,
  .figma-nav {
    justify-content: flex-start;
  }

  .figma-nav a {
    min-width: auto;
  }

  .figma-hero {
    min-height: 580px;
  }

  .figma-hero p {
    font-size: 17px;
  }

  .figma-brands {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .figma-brands {
    grid-template-columns: 1fr;
  }
}


/* brand image fit refinement */
.figma-brands img {
  background: var(--white);
  border: 1px solid var(--line);
  object-fit: contain;
  padding: 10px;
}

/* contact form status messages */
.contact-alert {
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  padding: 12px 14px;
}

.contact-alert.success {
  background: #eaf8e8;
  border: 1px solid rgba(80, 183, 72, .35);
  color: #23751f;
}

.contact-alert.error {
  background: #fff1eb;
  border: 1px solid rgba(241, 107, 34, .35);
  color: #b94612;
}
/* journey artwork section */
.journey-artwork-grid {
  display: grid;
  gap: 24px;
}

.journey-artwork-grid img {
  background: var(--white);
  border: 1px solid rgba(80, 183, 72, .22);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
  height: auto;
  object-fit: contain;
  width: 100%;
}
/* expanded footer columns */
.footer-layout {
  grid-template-columns: minmax(260px, 360px) 170px 190px 280px;
}

@media (max-width: 1180px) {
  .footer-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .footer-layout {
    grid-template-columns: 1fr;
  }
}
/* heritage footer reference design */
.heritage-footer {
  background: #935f2b;
  color: var(--white);
  overflow: hidden;
  padding: 0;
  text-align: center;
}

.heritage-footer-top {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .42), transparent 44%),
    linear-gradient(90deg, #f9e8c5 0%, #fff1d2 50%, #f7e0af 100%);
  color: #a67440;
  padding: 14px 20px 58px;
  position: relative;
}

.heritage-footer-top::after {
  background: #8c5a29;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  bottom: -1px;
  content: "";
  height: 64px;
  left: -5%;
  position: absolute;
  right: -5%;
}

.heritage-footer-logos {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.heritage-logo.saudia img {
  height: 42px;
  object-fit: contain;
  width: 150px;
}

.heritage-divider {
  background: #50b748;
  height: 36px;
  width: 2px;
}

.heritage-logo.kenz {
  color: #50b748;
  display: grid;
  line-height: 1;
  text-align: left;
}

.heritage-logo.kenz strong {
  font-family: "Outfit", Arial, sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
}

.heritage-logo.kenz small {
  color: #f16b22;
  font-size: 9px;
  font-weight: 800;
}

.heritage-arabic {
  color: #a67440;
  font-family: "Outfit", Arial, sans-serif;
  font-size: clamp(20px, 2.7vw, 32px);
  font-weight: 500;
  letter-spacing: .05em;
  margin: 0 0 4px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.heritage-category {
  color: #a67440;
  font-family: "Outfit", Arial, sans-serif;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.heritage-office {
  background: #8c5a29;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  padding: 0 20px 24px;
}

.heritage-office p {
  color: var(--white);
  font-size: 15px;
  line-height: 1.25;
  margin: 0 auto;
  max-width: 760px;
}

.heritage-bottom {
  align-items: center;
  background: #895827;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  justify-content: center;
  padding: 22px 20px;
}

.heritage-bottom a {
  align-items: center;
  color: var(--white);
  display: inline-flex;
  font-size: 15px;
  gap: 6px;
  line-height: 1;
}

.heritage-bottom img {
  height: 18px;
  width: 18px;
}

@media (max-width: 680px) {
  .heritage-footer-top {
    padding-bottom: 46px;
  }

  .heritage-footer-logos,
  .heritage-bottom {
    gap: 12px 18px;
  }

  .heritage-logo.saudia img {
    width: 128px;
  }

  .heritage-logo.kenz strong {
    font-size: 22px;
  }

  .heritage-office p,
  .heritage-bottom a {
    font-size: 13px;
  }
}
/* heritage footer logo correction */
.heritage-footer-top {
  padding-top: 24px;
  padding-bottom: 64px;
}

.heritage-footer-logos {
  gap: 20px;
  margin-bottom: 18px;
}

.heritage-logo.saudia {
  align-items: center;
  color: #f16b22;
  display: inline-flex;
  gap: 8px;
  text-align: left;
}

.heritage-logo.saudia img {
  height: 40px;
  object-fit: contain;
  width: 34px;
}

.heritage-logo.saudia span {
  display: grid;
  line-height: 1;
}

.heritage-logo.saudia strong {
  color: #f16b22;
  font-family: "Outfit", Arial, sans-serif;
  font-size: 25px;
  font-weight: 900;
}

.heritage-logo.saudia small {
  color: #16833a;
  font-size: 10px;
  font-weight: 900;
}

.heritage-category {
  color: #a7743d;
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 700;
}

.heritage-office {
  padding-top: 6px;
}

@media (max-width: 680px) {
  .heritage-footer-logos {
    align-items: center;
    flex-direction: column;
  }

  .heritage-divider {
    height: 2px;
    width: 90px;
  }
}
/* footer category visibility fix */
.heritage-category {
  color: #6f421d;
  display: block;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.25;
  margin: 8px auto 0;
  max-width: 900px;
  position: relative;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  z-index: 2;
}
/* footer category requested brown color */
.heritage-category {
  color: #956126;
  text-shadow: none;
}
/* force requested footer category color over generic footer paragraph rule */
.figma-footer .heritage-category {
  color: #956126;
}
/* floating go-to-top button */
.go-top {
  align-items: center;
  background: var(--orange);
  border: 2px solid var(--white);
  border-radius: 999px;
  bottom: 24px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
  color: var(--white);
  display: flex;
  font-family: "Outfit", Arial, sans-serif;
  font-size: 28px;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  line-height: 1;
  position: fixed;
  right: 24px;
  width: 48px;
  z-index: 30;
}

.go-top:hover {
  background: var(--green);
  transform: translateY(-2px);
}

.go-top span {
  margin-top: -3px;
}

@media (max-width: 680px) {
  .go-top {
    bottom: 16px;
    height: 44px;
    right: 16px;
    width: 44px;
  }
}
/* top header logo image */
.figma-brand > img {
  border-radius: 0;
  height: 70px;
  object-fit: contain;
  width: 220px;
}

@media (max-width: 680px) {
  .figma-brand > img {
    height: 54px;
    width: 170px;
  }
}
/* standard header logo size */
.figma-brand > img {
  height: 56px;
  width: 176px;
}

@media (max-width: 680px) {
  .figma-brand > img {
    height: 46px;
    width: 145px;
  }
}
/* doubled header logo size */
.figma-brand > img {
  height: 112px;
  width: 352px;
}

@media (max-width: 680px) {
  .figma-brand > img {
    height: 92px;
    width: 290px;
  }
}
/* doubled header logo size again */
.figma-brand > img {
  height: 224px;
  width: 704px;
}

@media (max-width: 680px) {
  .figma-brand > img {
    height: 184px;
    width: 580px;
    max-width: calc(100vw - 40px);
  }
}
/* header logo at 75 percent of previous size */
.figma-brand > img {
  height: 168px;
  width: 528px;
}

@media (max-width: 680px) {
  .figma-brand > img {
    height: 138px;
    width: 435px;
    max-width: calc(100vw - 40px);
  }
}
/* remove extra space before and after header logo */
.figma-main-header {
  min-height: 0;
  padding-bottom: 0;
  padding-top: 0;
}

.figma-brand {
  line-height: 0;
}

.figma-brand > img {
  display: block;
}
/* remove internal logo box whitespace by preserving real image ratio */
.figma-brand > img {
  height: auto;
  max-height: none;
  width: 528px;
}

.figma-main-header {
  line-height: 0;
}

@media (max-width: 680px) {
  .figma-brand > img {
    height: auto;
    max-width: calc(100vw - 40px);
    width: 435px;
  }
}
/* header logo 90 percent with light breathing room */
.figma-main-header {
  min-height: 0;
  padding-bottom: 6px;
  padding-top: 6px;
}

.figma-brand > img {
  height: auto;
  width: 475px;
}

@media (max-width: 680px) {
  .figma-main-header {
    padding-bottom: 5px;
    padding-top: 5px;
  }

  .figma-brand > img {
    height: auto;
    max-width: calc(100vw - 40px);
    width: 392px;
  }
}
/* compact left-logo header layout */
.compact-header-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  line-height: 1;
  padding: 8px clamp(24px, 5.5vw, 80px);
}

.compact-header-row .figma-brand > img {
  height: auto;
  width: 428px;
}

.compact-header-row .figma-nav {
  background: transparent;
  border-bottom: 0;
  flex: 0 1 auto;
  justify-content: flex-end;
  overflow: visible;
  padding: 0;
}

.compact-header-row .figma-nav a {
  border-bottom-width: 2px;
  min-width: auto;
  padding: 18px 15px 14px;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .compact-header-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .compact-header-row .figma-brand > img {
    max-width: calc(100vw - 48px);
    width: 380px;
  }

  .compact-header-row .figma-nav {
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
  }
}

@media (max-width: 680px) {
  .compact-header-row {
    padding: 8px 20px;
  }

  .compact-header-row .figma-brand > img {
    max-width: calc(100vw - 40px);
    width: 320px;
  }

  .compact-header-row .figma-nav a {
    padding: 14px 12px 11px;
  }
}
/* separate logo and navigation rows */
.separate-logo-row {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  line-height: 0;
  min-height: 0;
  padding: 8px clamp(24px, 5.5vw, 80px);
}

.separate-logo-row .figma-brand > img {
  height: auto;
  width: 428px;
}

.separate-nav-row {
  background: var(--green-soft);
  border-bottom: 1px solid #dff2de;
  border-top: 1px solid #e8f6e7;
  justify-content: center;
  padding: 0 clamp(24px, 5.5vw, 80px);
}

.separate-nav-row a {
  min-width: 118px;
  padding: 16px 20px 13px;
  text-align: center;
}

@media (max-width: 680px) {
  .separate-logo-row {
    padding: 8px 20px;
  }

  .separate-logo-row .figma-brand > img {
    max-width: calc(100vw - 40px);
    width: 320px;
  }

  .separate-nav-row {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 20px;
  }

  .separate-nav-row a {
    min-width: auto;
    padding: 14px 12px 11px;
  }
}
/* top customer care aligned right */
.figma-top-bar {
  justify-content: flex-end;
}

.figma-top-bar a {
  margin-left: auto;
}
/* center logo in separate header row */
.separate-logo-row {
  justify-content: center;
}
/* store working hours */
.figma-store-grid p img[src$="clock.svg"],
.figma-location-details p img[src$="clock.svg"] {
  opacity: .85;
}

.figma-store-grid p,
.figma-location-details p {
  align-items: flex-start;
}
/* mobile hamburger navigation */
.mobile-menu-toggle {
  align-items: center;
  background: var(--green);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: none;
  height: 42px;
  justify-content: center;
  margin: 0 20px 10px auto;
  padding: 0;
  width: 46px;
}

.mobile-menu-toggle span {
  background: var(--white);
  border-radius: 999px;
  display: block;
  height: 3px;
  position: absolute;
  transition: transform .18s ease, opacity .18s ease;
  width: 22px;
}

.mobile-menu-toggle span:nth-child(1) {
  transform: translateY(-7px);
}

.mobile-menu-toggle span:nth-child(3) {
  transform: translateY(7px);
}

.mobile-menu-toggle.is-open span:nth-child(1) {
  transform: rotate(45deg);
}

.mobile-menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.is-open span:nth-child(3) {
  transform: rotate(-45deg);
}

@media (max-width: 760px) {
  .mobile-menu-toggle {
    display: flex;
    position: relative;
  }

  .separate-nav-row {
    display: none;
    flex-direction: column;
    padding: 0 20px 14px;
  }

  .separate-nav-row.is-open {
    display: flex;
  }

  .separate-nav-row a {
    border-bottom: 1px solid #dff2de;
    padding: 14px 0;
    text-align: left;
    width: 100%;
  }
}