/* Agora brand layer. Loads after style.css and overrides template defaults. */

body {
  background-color: var(--agora-cream);
  color: var(--agora-ink);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.widget-title,
.tricker-text {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

.section-title {
  line-height: 1.08;
}

p, li, a, span, input, textarea, button, label, .btn-text {
  font-family: var(--ff-body);
}


.section-sub-title {
  font-family: var(--ff-body);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--fs-13);
  color: var(--agora-rust);
}

/* Widely spaced location line, per the identity */
.location-line {
  font-family: var(--ff-body);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--fs-12);
  font-weight: 500;
}

/* ---------- Hero video background ---------- */
.hero-three__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -2;
}

.hero-three__bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-three.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--agora-ink-rgb), 0.55) 0%,
    rgba(var(--agora-ink-rgb), 0.35) 45%,
    rgba(var(--agora-ink-rgb), 0.7) 100%
  );
  z-index: -1;
  pointer-events: none;
}

.hero-three__content .content-info .hero-title {
  color: var(--agora-cream);
}

.hero-three__content .content-info .hero-title span {
  color: var(--agora-sun);
}

.hero-three__tagline {
  font-family: var(--ff-body);
  color: var(--agora-cream);
  font-size: var(--fs-18);
  max-width: 44ch;
  margin-bottom: 32px;
  opacity: 0.92;
}

.hero-three__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--agora-cream);
  font-family: var(--ff-body);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-three__eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--agora-sun);
}

@media only screen and (max-width: 767.98px) {
  .hero-three__tagline {
    font-size: var(--fs-16);
  }
}

/* ---------- Buttons ---------- */
.common-button-three,
.common-button-three.v2,
.common-button-three.v3 {
  font-family: var(--ff-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-14);
}

.common-button-three:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--agora-sun);
  outline-offset: 3px;
}

/* ---------- Announcement popup ---------- */
.agora-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(var(--agora-ink-rgb), 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.agora-popup.is-open {
  opacity: 1;
  visibility: visible;
}

.agora-popup__dialog {
  position: relative;
  width: 100%;
  max-width: 880px;
  background: var(--agora-cream);
  border: 1px solid rgba(var(--agora-rust-rgb), 0.18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  transform: translateY(24px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.agora-popup.is-open .agora-popup__dialog {
  transform: translateY(0) scale(1);
}

.agora-popup__media {
  position: relative;
  min-height: 320px;
  background-color: var(--agora-rust);
  background-size: cover;
  background-position: center;
}

.agora-popup__body {
  padding: 48px 44px;
}

.agora-popup__eyebrow {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--agora-rust);
  margin-bottom: 16px;
}

.agora-popup__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  line-height: 1.12;
  color: var(--agora-ink);
  margin-bottom: 14px;
}

.agora-popup__text {
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--agora-ink);
  margin-bottom: 28px;
}

.agora-popup__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agora-popup__form input {
  height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(var(--agora-ink-rgb), 0.2);
  background: var(--color-white);
  font-size: var(--fs-15);
  color: var(--agora-ink);
}

.agora-popup__form input::placeholder {
  color: rgba(var(--agora-ink-rgb), 0.55);
}

.agora-popup__form button {
  height: 52px;
  border: 0;
  background: var(--agora-rust);
  color: var(--agora-cream);
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease;
}

.agora-popup__form button:hover {
  background: var(--agora-clay);
}

.agora-popup__note {
  margin-top: 16px;
  font-size: var(--fs-13);
  color: rgba(var(--agora-ink-rgb), 0.7);
}

.agora-popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--agora-ink-rgb), 0.2);
  background: var(--agora-cream);
  color: var(--agora-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.agora-popup__close:hover {
  background: var(--agora-rust);
  color: var(--agora-cream);
  border-color: var(--agora-rust);
}

@media only screen and (max-width: 767.98px) {
  .agora-popup__dialog {
    grid-template-columns: 1fr;
    max-height: 90vh;
    overflow-y: auto;
  }

  .agora-popup__media {
    min-height: 160px;
  }

  .agora-popup__body {
    padding: 32px 24px;
  }
}

/* ---------- Header / logo sizing ---------- */
.menu-logo-wrap img,
.hamburger_logo img,
.footer-widget .footer-logo img {
  height: 56px;
  width: auto;
}

@media only screen and (max-width: 767.98px) {
  .menu-logo-wrap img,
  .hamburger_logo img {
    height: 44px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-three__bg-video video {
    display: none;
  }

  .hero-three__bg-video {
    background: var(--agora-rust);
  }
}

/* ---------- Utilities and form states ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-error {
  margin-top: 8px;
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  color: var(--agora-rust);
}

[aria-invalid="true"] {
  border-color: var(--agora-rust) !important;
}

/* ---------- About intro paragraph ---------- */
.about-three__text {
  font-size: var(--fs-18);
  line-height: 1.65;
  color: var(--agora-ink);
  max-width: 58ch;
  margin-bottom: 32px;
}

@media only screen and (max-width: 767.98px) {
  .about-three__text {
    font-size: var(--fs-16);
  }
}

/* ---------- Custom icon set ---------- */
/* Inline SVGs from includes/icons.php. They inherit colour from their
   container, so they sit correctly on both cream and rust surfaces. */
.agora-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: inherit;
}

.agora-icon--star {
  color: var(--agora-sun);
}

.agora-icon--star.is-empty {
  color: rgba(var(--agora-ink-rgb), 0.22);
}

/* Feature icons sit in a soft rust tile */
.choose-us-three__item .item-icon,
.about-three__content .highlight-items .highlight-item .highlight-icon {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background-color: rgba(var(--agora-rust-rgb), 0.08);
  color: var(--agora-rust);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about-three__content .highlight-items .highlight-item .highlight-icon {
  width: 48px;
  height: 48px;
}

/* CTA corner ornaments */
.cta-three__wrapper .icon-1,
.cta-three__wrapper .icon-2,
.cta-three__wrapper .icon-3,
.cta-three__wrapper .icon-4 {
  color: rgba(var(--agora-cream-rgb), 0.35);
}

/* Section eyebrow mark */
.section-sub-title .icon {
  color: var(--agora-rust);
  display: inline-flex;
  align-items: center;
}

/* Footer marquee ornaments */
.footer-three__tricker .trackir-icon {
  color: rgba(var(--agora-cream-rgb), 0.45);
}

/* Quote marks */
.quote-icon {
  color: rgba(var(--agora-rust-rgb), 0.3);
}

/* Contact rows in the off-canvas panel */
.hamburger-area .hamburger-infos .contact-item .icon {
  color: var(--agora-rust);
}

/* Form field icons */
.input-wrap .agora-icon,
.contact-map__item .item-header .item-incon {
  color: var(--agora-rust);
}

/* ---------- Footer social buttons ---------- */
/* The template put rust tiles on a rust footer, which made them invisible. */
.footer-three__main .main-wrapper .footer-widget .widget-social .social-links li a {
  width: 38px;
  height: 38px;
  background-color: rgba(var(--agora-cream-rgb), 0.08);
  border: 1px solid rgba(var(--agora-cream-rgb), 0.28);
  color: var(--agora-cream);
}

.footer-three__main .main-wrapper .footer-widget .widget-social .social-links li a:hover,
.footer-three__main .main-wrapper .footer-widget .widget-social .social-links li a:focus-visible {
  background-color: var(--agora-cream);
  border-color: var(--agora-cream);
  color: var(--agora-rust);
}

.footer-three__top .footer-top-inner .social-text .icon {
  color: var(--agora-cream);
}

.footer-three__top .footer-top-inner .social-text:hover .icon {
  color: var(--agora-sun);
}

/* ---------- Hover colour ---------- */
/* The template hovered everything to Sunbaked Clay, which sat too close to
   Rust to register. Interactive states deepen to Charcoal Ink instead: it
   reads clearly against both Rust and Cream and keeps the palette warm. */
:root,
:root .agora-page {
  --hover-color: #362e29;
  --hover-color-rgb: 54, 46, 41;
  --hover-on-dark: #fbf3e8;
}

.mainmenu > ul > li > a:hover,
.mainmenu > ul > li.active > a,
.footer-three__main .main-wrapper .footer-widget .link-list li a:hover,
.footer-three__main .main-wrapper .footer-widget .widget-content a:hover,
.footer-three__bottom .bottom-werappe a:hover,
.breadcrumb-two__header nav .breadcrumb .breadcrumb-item a:hover {
  color: var(--hover-on-dark);
}

.menu-three__item .item-content .item-header .item-title a:hover,
.popular-dishes-three__item .item-content .item-title a:hover,
.team-three__item .item-content .item-info .item-title a:hover,
.contact-map__item .item-body a:hover,
.hamburger-area .hamburger-infos .contact-item .contact-text a:hover,
.about-three__content a:hover {
  color: var(--hover-color);
}

.cta-three__wrapper .buttons-group .contact-number:hover {
  color: var(--hover-on-dark);
}

/* ---------- Footer text on the rust ground ---------- */
/* The footer sits on Agora Rust, so everything in it reads in Warm Cream.
   Body copy drops to 82% opacity, labels and headings stay at full strength. */
.footer-three__main .main-wrapper .footer-widget .widget-content,
.footer-three__main .main-wrapper .footer-widget .widget-content p,
.footer-three__main .main-wrapper .footer-widget .widget-content li {
  color: rgba(var(--agora-cream-rgb), 0.82);
}

.footer-three__main .main-wrapper .footer-widget .widget-title,
.footer-three__main .main-wrapper .footer-widget .widget-social .title,
.footer-three__main .main-wrapper .footer-widget .widget-content .label {
  color: var(--agora-cream);
}

.footer-three__main .main-wrapper .footer-widget .widget-content a,
.footer-three__main .main-wrapper .footer-widget .link-list li a {
  color: rgba(var(--agora-cream-rgb), 0.82);
}

.footer-three__main .main-wrapper .footer-widget .widget-content a:hover,
.footer-three__main .main-wrapper .footer-widget .link-list li a:hover {
  color: var(--agora-cream);
}

.footer-three__bottom .bottom-werappe,
.footer-three__bottom .bottom-werappe p,
.footer-three__bottom .bottom-werappe .copyright {
  color: rgba(var(--agora-cream-rgb), 0.82);
}

.footer-three__bottom .bottom-werappe a,
.footer-three__bottom .bottom-werappe .copyright a {
  color: var(--agora-cream);
}

.footer-three__bottom .bottom-werappe a:hover {
  color: var(--agora-sun);
}

.footer-three__top .footer-top-inner .social-text,
.footer-three__top .footer-top-inner .social-text span {
  color: var(--agora-cream);
}

/* Same treatment wherever else cream text sits on a brand-coloured ground. */
.cta-three__wrapper,
.cta-three__wrapper p,
.hero-three__content p,
.breadcrumb-two__header,
.breadcrumb-two__header p {
  color: var(--agora-cream);
}

.breadcrumb-two__header nav .breadcrumb .breadcrumb-item,
.breadcrumb-two__header nav .breadcrumb .breadcrumb-item a,
.breadcrumb-two__header nav .breadcrumb .breadcrumb-item.active {
  color: rgba(var(--agora-cream-rgb), 0.85);
}

/* The section ground is Agora Rust, but the feature cards on it are white,
   so only the section heading goes cream. Card text stays Charcoal Ink. */
.choose-us-three.section,
.choose-us-three.section .section-title {
  color: var(--agora-cream);
}

.choose-us-three.section .section-sub-title {
  color: var(--agora-sun);
}

.choose-us-three__item .item-content .item-title {
  color: var(--agora-ink);
}

.choose-us-three__item .item-content .item-desc {
  color: rgba(var(--agora-ink-rgb), 0.75);
}

.choose-us-three__item .item-icon {
  background-color: rgba(var(--agora-rust-rgb), 0.08);
  color: var(--agora-rust);
}

.testimonial-three__item.active,
.testimonial-three__item.active .item-text,
.testimonial-three__item.active .author-name,
.testimonial-three__item.active .author-designation {
  color: var(--agora-cream);
}

.testimonial-three__item.active .quote-icon {
  color: rgba(var(--agora-cream-rgb), 0.4);
}

.reservation-three__thumb .thumb-info .left-block,
.reservation-three__thumb .thumb-info .left-block p,
.reservation-three__thumb .thumb-info .left-block .info-title {
  color: var(--agora-cream);
}

/* ================= Preloader ================= */
/* Rust ground, cream mark. The intro is pure CSS so it starts on the first
   paint, before main.js has parsed, and it only animates opacity and
   transform so every frame stays on the compositor. The exit is handed to
   GSAP in main.js. */
.preloader {
  background: var(--agora-rust);
  color: var(--agora-cream);
  will-change: opacity;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.preloader-mark {
  width: 96px;
  height: 96px;
  color: var(--agora-cream);
}

/* The supplied logo mark rises and settles, then holds on a slow breath.
   The artwork itself is untouched. */
.preloader-mark .agora-mark {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--agora-cream);
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: agora-mark-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) both,
             agora-mark-breathe 3.6s cubic-bezier(0.37, 0, 0.63, 1) 1.05s infinite;
}

@keyframes agora-mark-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.88); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Scale, not opacity: an opacity pulse on a mark this detailed reads as a
   flicker, and it repaints. A 1.5% scale breath stays on the compositor. */
@keyframes agora-mark-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, 0, 0) scale(1.015); }
}

.preloader-word {
  display: flex;
  margin: 0;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* balances the trailing letter-spacing */
  text-transform: uppercase;
  color: var(--agora-cream);
}

.preloader-word span {
  display: block;
  opacity: 0;
  transform: translate3d(0, 0.6em, 0);
  will-change: transform, opacity;
  /* --i is set per letter in includes/header.php */
  animation: agora-word-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.34s + var(--i, 0) * 0.055s);
}

@keyframes agora-word-in {
  from { opacity: 0; transform: translate3d(0, 0.6em, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.preloader-bar {
  position: relative;
  width: 132px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(var(--agora-cream-rgb), 0.18);
}

/* The fill is a full-width bar scaled down on the X axis, so the progress
   animates as a transform instead of a width (no layout per frame).
   agora-bar-fill eases towards 92% and waits there; main.js takes it to
   100% on load by clearing the animation and setting scaleX(1). */
.preloader-bar span {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--agora-cream);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  animation: agora-bar-fill 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes agora-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-mark .agora-mark,
  .preloader-word span,
  .preloader-bar span {
    animation: none;
  }
  .preloader-mark .agora-mark,
  .preloader-word span {
    opacity: 1;
    transform: none;
  }
  .preloader-bar span { transform: scaleX(1); }
}

/* ================= Back to top ================= */
/* The template drew this glyph from a Font Awesome font that is not loaded,
   so the button rendered empty. It is an inline SVG now. */
.progress-wrap::after {
  content: none;
}

.progress-wrap {
  background-color: var(--agora-rust);
  box-shadow: 0 6px 24px rgba(var(--agora-ink-rgb), 0.28);
}

.progress-arrow {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--agora-cream);
  z-index: 2;
  pointer-events: none;
}

.progress-arrow svg {
  width: 18px;
  height: 18px;
}

.progress-wrap:hover {
  background-color: var(--hover-color);
}

.progress-wrap .progress-circle path {
  stroke: var(--agora-sun);
  stroke-width: 4;
}

/* ================= Contact page ================= */
/* Three info cards across the top, then the form and the map side by side. */
.contact-map__items {
  gap: 24px;
}

@media only screen and (min-width: 1200px) {
  .contact-map__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.contact-map__item {
  border: 1px solid rgba(var(--agora-rust-rgb), 0.16);
  border-radius: 10px;
  background-color: var(--color-white);
  padding: 28px;
  height: 100%;
}

.contact-map__item .item-header {
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.contact-map__item .item-header .item-incon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: rgba(var(--agora-rust-rgb), 0.08);
  color: var(--agora-rust);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-map__item .item-header .item-title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  color: var(--agora-ink);
}

.contact-map__item .item-body p {
  margin-bottom: 8px;
  color: rgba(var(--agora-ink-rgb), 0.78);
}

.contact-map__item .item-body p:last-child {
  margin-bottom: 0;
}

.contact-map__item .item-body .label {
  color: var(--agora-ink);
  font-weight: 500;
}

.agora-contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

@media only screen and (min-width: 992px) {
  .agora-contact-split {
    grid-template-columns: 1fr 1fr;
  }
}

.agora-contact-split__form,
.agora-contact-split__map {
  border: 1px solid rgba(var(--agora-rust-rgb), 0.16);
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-white);
}

.agora-contact-split__form {
  padding: 32px;
}

.agora-contact-split__map {
  min-height: 460px;
  padding: 0;
}

.agora-contact-split__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
}

/* The form now sits in a half-width column, so its fields go full width. */
@media only screen and (min-width: 992px) {
  .agora-contact-split__form .contact-six__form .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.agora-contact-split__form .submit-wrap {
  text-align: left !important;
}

.agora-contact-thanks {
  padding: 8px 0;
}

/* Form field icons: the template positioned <i> tags, these are <svg>. */
.contact-six__form .form-group .input-wrap {
  position: relative;
}

.contact-six__form .form-group .input-wrap > .agora-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(var(--agora-rust-rgb), 0.55);
  pointer-events: none;
}

.contact-six__form .form-group .input-wrap textarea + .agora-icon {
  top: 22px;
  transform: none;
}

.contact-six__form .form-group label {
  color: var(--agora-ink);
  font-weight: 500;
}

.contact-six__form .form-group .input-wrap .form-control {
  color: var(--agora-ink);
  border-radius: 8px;
}

.contact-six__form .form-group .input-wrap .form-control:focus {
  border-color: var(--agora-rust);
}

/* ================= About page aside image ================= */
/* The template put a rotating badge here. On the cream ground it was cream on
   cream, so the column read as empty. It carries a photo instead. */
.about-main-two__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media only screen and (min-width: 992px) {
  .about-main-two__content {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
  }
}

.about-main-two__aside img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}

.about-main-two__content .main-content p {
  margin-bottom: 18px;
  line-height: 1.7;
  color: rgba(var(--agora-ink-rgb), 0.82);
}

.about-main-two__content .main-content .common-button-three {
  margin-top: 10px;
}

/* Stats row: even spacing, shared baseline. */
.about-main-two__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  border-top: 1px solid rgba(var(--agora-rust-rgb), 0.16);
  padding-top: 48px;
}

@media only screen and (min-width: 768px) {
  .about-main-two__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-main-two__stats .stat-item {
  text-align: center;
}

.about-main-two__stats .stat-item .stat-number {
  font-family: var(--ff-display);
  color: var(--agora-rust);
  line-height: 1;
  justify-content: center;
}

.about-main-two__stats .stat-item .stat-label {
  margin-top: 10px;
  color: rgba(var(--agora-ink-rgb), 0.75);
  font-size: var(--fs-15);
}

/* ================= Buttons ================= */
/* One system for every button on the site.
 *
 * The template had three variants that disagreed: the base hovered to Rust,
 * .v2 hovered to Clay, and .v3 inherited a Rust sweep under a white fill. The
 * rule below makes the behaviour consistent:
 *
 *   base  on light grounds - outlined, Rust text  -> fills Rust, cream text
 *   .v2   on light grounds - solid Rust           -> fills Charcoal Ink
 *   .v3   on dark / photo  - solid Cream          -> fills Charcoal Ink, cream text
 *
 * Every variant keeps the template's sweep-up ::before, with the sweep colour
 * matched to the variant so the fill never lands on a clashing background.
 */
.common-button-three,
.common-button-three.v2,
.common-button-three.v3,
.submit-btn,
.agora-popup__form button {
  font-family: var(--ff-body);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease,
              color 0.35s ease;
}

/* --- Base: outlined on cream or white --- */
.common-button-three {
  background-color: transparent;
  border: 1px solid rgba(var(--agora-rust-rgb), 0.35);
  color: var(--agora-rust);
}

.common-button-three::before {
  background-color: var(--agora-rust);
  border-radius: 0;
}

.common-button-three:hover,
.common-button-three:focus-visible {
  background-color: var(--agora-rust);
  border-color: var(--agora-rust);
  color: var(--agora-cream);
}

/* --- .v2: solid, the primary action on light grounds --- */
.common-button-three.v2 {
  background-color: var(--agora-rust);
  border-color: var(--agora-rust);
  color: var(--agora-cream);
}

.common-button-three.v2::before {
  background-color: var(--hover-color);
}

.common-button-three.v2:hover,
.common-button-three.v2:focus-visible {
  background-color: var(--hover-color);
  border-color: var(--hover-color);
  color: var(--agora-cream);
}

/* --- .v3: solid cream, sits on video, photos and the Rust CTA band --- */
.common-button-three.v3 {
  background-color: var(--agora-cream);
  border-color: var(--agora-cream);
  color: var(--agora-rust);
}

.common-button-three.v3::before {
  background-color: var(--hover-color);
}

.common-button-three.v3:hover,
.common-button-three.v3:focus-visible {
  background-color: var(--hover-color);
  border-color: var(--hover-color);
  color: var(--agora-cream);
}

/* --- Form submits follow .v2 --- */
.submit-btn,
.contact-six__form .submit-btn,
.agora-popup__form button,
.reservation-three__form .submit-btn {
  background-color: var(--agora-rust);
  border: 1px solid var(--agora-rust);
  color: var(--agora-cream);
}

.submit-btn::before,
.reservation-three__form .submit-btn::before {
  background-color: var(--hover-color);
}

.submit-btn:hover,
.submit-btn:focus-visible,
.contact-six__form .submit-btn:hover,
.agora-popup__form button:hover,
.agora-popup__form button:focus-visible,
.reservation-three__form .submit-btn:hover {
  background-color: var(--hover-color);
  border-color: var(--hover-color);
  color: var(--agora-cream);
}

/* The button label and icon always follow the button's own colour. */
.common-button-three .btn-text,
.common-button-three .btn-icon,
.common-button-three .btn-icon svg,
.submit-btn .text-wrap,
.submit-btn .icon-wrap {
  color: inherit;
}

/* --- Secondary text link beside a button (the CTA band) --- */
.cta-three__wrapper .buttons-group .contact-number {
  color: var(--agora-cream);
  border-bottom: 1px solid rgba(var(--agora-cream-rgb), 0.4);
  transition: color 0.35s ease, border-color 0.35s ease;
}

.cta-three__wrapper .buttons-group .contact-number:hover {
  color: var(--agora-sun);
  border-color: var(--agora-sun);
}

/* --- Off-canvas close button --- */
.hamburger-area .hamburger_close_btn {
  background-color: transparent;
  border: 1px solid rgba(var(--agora-ink-rgb), 0.2);
  border-radius: 4px;
  color: var(--agora-ink);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  transition: background-color 0.35s ease, border-color 0.35s ease,
              color 0.35s ease;
}

.hamburger-area .hamburger_close_btn:hover {
  background-color: var(--agora-rust);
  border-color: var(--agora-rust);
  color: var(--agora-cream);
}

/* --- Caption line in the about block, left after removing the avatars --- */
.about-three__caption {
  margin: 0 0 20px;
  font-family: var(--ff-body);
  font-size: var(--fs-15);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--agora-rust);
}

.about-three__content .about-info .info-left {
  gap: 0;
  align-items: flex-start;
}

/* ================= Button hover, hardened ================= */
/* The label and icon are separate elements with their own colour transition.
   Relying on inherit alone let them lag behind the fill, so the text read dark
   on a rust background mid-hover. They are now set explicitly. */
.common-button-three:hover .btn-text,
.common-button-three:hover .btn-icon,
.common-button-three:hover .btn-icon svg,
.common-button-three:focus-visible .btn-text,
.common-button-three:focus-visible .btn-icon,
.common-button-three:focus-visible .btn-icon svg {
  color: var(--agora-cream);
}

.common-button-three.v3:hover .btn-text,
.common-button-three.v3:hover .btn-icon,
.common-button-three.v3:hover .btn-icon svg {
  color: var(--agora-cream);
}

.submit-btn:hover .text-wrap,
.submit-btn:hover .icon-wrap,
.submit-btn:hover .icon-wrap svg {
  color: var(--agora-cream);
}

/* ================= Cloud-kitchen headings ================= */
/* These sections came from another demo and carry their own heading system. */
.cloud-ktchen__header .header-title {
  font-family: var(--ff-display);
  color: var(--agora-ink);
  text-transform: none;
}

.cloud-ktchen__header .header-title .top-tag,
.cloud-ktchen__header .header-title .bottom-tag {
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background-color: var(--agora-rust);
  color: var(--agora-cream);
}

.cloud-ktchen__header .header-title .header-highlight,
.cloud-ktchen__header .header-title .header-highlight.accent,
.cloud-ktchen__header .header-title .header-highlight.secondary {
  color: var(--agora-rust);
}

/* ================= Process section ================= */
.process-cloud-ktchen__item .item-content .item-title {
  font-family: var(--ff-display);
  color: var(--agora-ink);
  text-transform: none;
}

.process-cloud-ktchen__item .item-content .item-number {
  font-family: var(--ff-display);
  color: var(--agora-cream);
}

/* ================= CTA band ================= */
/* The artwork behind it is a photograph, so everything on it reads in cream
   over a rust scrim. */
.cta-cloud-ktchen.section {
  position: relative;
  background-color: var(--agora-rust);
}

.cta-cloud-ktchen.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--agora-ink-rgb), 0.55) 0%,
    rgba(var(--agora-rust-rgb), 0.75) 100%
  );
  pointer-events: none;
}

.cta-cloud-ktchen .container {
  position: relative;
  z-index: 2;
}

.cta-cloud-ktchen .cloud-ktchen__header .header-title {
  color: var(--agora-cream);
}

.cta-cloud-ktchen .cloud-ktchen__header .header-title .header-highlight,
.cta-cloud-ktchen .cloud-ktchen__header .header-title .header-highlight.secondary {
  color: var(--agora-sun);
}

.cta-cloud-ktchen .cloud-ktchen__header .header-title .top-tag,
.cta-cloud-ktchen .cloud-ktchen__header .header-title .bottom-tag {
  background-color: var(--agora-cream);
  color: var(--agora-rust);
}

.cta-cloud-ktchen .phone-btn {
  color: var(--agora-cream);
  border: 1px solid rgba(var(--agora-cream-rgb), 0.4);
  border-radius: 4px;
  transition: background-color 0.35s ease, border-color 0.35s ease,
              color 0.35s ease;
}

.cta-cloud-ktchen .phone-btn:hover {
  background-color: var(--agora-cream);
  border-color: var(--agora-cream);
  color: var(--agora-rust);
}

.cta-cloud-ktchen .submit-btn {
  background-color: var(--agora-cream);
  border-color: var(--agora-cream);
  color: var(--agora-rust);
}

.cta-cloud-ktchen .submit-btn:hover {
  background-color: var(--hover-color);
  border-color: var(--hover-color);
  color: var(--agora-cream);
}

.cta-cloud-ktchen .submit-btn:hover .text-wrap,
.cta-cloud-ktchen .submit-btn:hover .icon-wrap,
.cta-cloud-ktchen .submit-btn:hover .icon-wrap svg {
  color: var(--agora-cream);
}

/* ================= FAQ ================= */
.faq-two__accordion .accordion-item {
  border: 1px solid rgba(var(--agora-rust-rgb), 0.16);
  background-color: var(--color-white);
}

.faq-two__accordion .accordion-button {
  font-family: var(--ff-display);
  font-size: var(--fs-19);
  color: var(--agora-ink);
  background-color: transparent;
  box-shadow: none;
  text-transform: none;
}

.faq-two__accordion .accordion-button:not(.collapsed) {
  color: var(--agora-rust);
  background-color: transparent;
  box-shadow: none;
}

.faq-two__accordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.faq-two__accordion .accordion-body {
  font-family: var(--ff-body);
  color: rgba(var(--agora-ink-rgb), 0.78);
  line-height: 1.7;
}

.faq-two .cafe__header .section-sub-title {
  color: var(--agora-rust);
}

.faq-two .cafe__header .section-title {
  color: var(--agora-ink);
}

/* ================= Footer (cloud-kitchen layout) ================= */
/* Rust ground, so every line in it reads in Warm Cream. The demo used Clay
   here, which sat too close to the background to read. */
.footer-cloud-ktchen.section {
  background-color: var(--agora-kiln);
}

.footer-cloud-ktchen .footer-bg img {
  opacity: 0.06;
}

.footer-cloud-ktchen__top .footer-top-inner .social-text,
.footer-cloud-ktchen__top .footer-top-inner .social-text span {
  color: var(--agora-cream);
}

.footer-cloud-ktchen__top .footer-top-inner .social-text:hover,
.footer-cloud-ktchen__top .footer-top-inner .social-text:hover span {
  color: var(--agora-sun);
}

.footer-cloud-ktchen__tricker .tricker-text {
  font-family: var(--ff-display);
  color: var(--agora-cream);
  text-transform: none;
}

.footer-cloud-ktchen__tricker .tricker-text.no-fill {
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--agora-cream-rgb), 0.45);
}

.footer-cloud-ktchen__main .footer-widget .widget-title {
  font-family: var(--ff-display);
  font-size: var(--fs-22);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--agora-cream);
  text-transform: none;
}

@media only screen and (max-width: 991.98px) {
  .footer-cloud-ktchen__main .footer-widget .widget-title {
    font-size: var(--fs-20);
  }
}

.footer-cloud-ktchen__main .footer-widget .contact-list li,
.footer-cloud-ktchen__main .footer-widget .opening-list li {
  color: rgba(var(--agora-cream-rgb), 0.82);
}

.footer-cloud-ktchen__main .footer-widget .contact-list li span {
  color: var(--agora-cream);
  font-weight: 500;
}

.footer-cloud-ktchen__main .footer-widget .contact-list li a,
.footer-cloud-ktchen__main .footer-widget .link-list li a {
  color: rgba(var(--agora-cream-rgb), 0.82);
  transition: color 0.35s ease;
}

.footer-cloud-ktchen__main .footer-widget .contact-list li a:hover,
.footer-cloud-ktchen__main .footer-widget .link-list li a:hover {
  color: var(--agora-sun);
}

.footer-cloud-ktchen__bottom {
  border-top: 1px solid rgba(var(--agora-cream-rgb), 0.18);
}

.footer-cloud-ktchen__bottom .footer-bottom-inner .copyright,
.footer-cloud-ktchen__bottom .footer-bottom-inner .copyright a,
.footer-cloud-ktchen__bottom .footer-links a {
  color: rgba(var(--agora-cream-rgb), 0.82);
}

.footer-cloud-ktchen__bottom .footer-bottom-inner .copyright a {
  color: var(--agora-cream);
}

.footer-cloud-ktchen__bottom .footer-links a:hover,
.footer-cloud-ktchen__bottom .footer-bottom-inner .copyright a:hover {
  color: var(--agora-sun);
}

/* ================= FAQ spacing ================= */
/* The borrowed section only carried bottom padding, so it ran straight into
   whatever sits above it. */
.faq-two.section {
  padding-top: 120px;
}

@media only screen and (max-width: 991.98px) {
  .faq-two.section {
    padding-top: 80px;
  }
}

@media only screen and (max-width: 767.98px) {
  .faq-two.section {
    padding-top: 60px;
  }
}

/* ================= Header type sizes ================= */
/* Nav and the location line were set for a smaller lockup than Agora uses. */
@media only screen and (min-width: 992px) {
  .mainmenu li a {
    font-size: var(--fs-20);
  }
}

@media only screen and (min-width: 1200px) {
  .mainmenu li a {
    font-size: var(--fs-22);
    letter-spacing: 0.02em;
  }
}

.header-three .menu-info-item .menu-meta .phone-call,
.header-three .menu-info-item .menu-meta .location-line {
  font-family: var(--ff-body);
  font-size: var(--fs-14);
  letter-spacing: 0.2em;
  color: var(--agora-cream);
}

@media only screen and (min-width: 1200px) {
  .header-three .menu-info-item .menu-meta .phone-call,
  .header-three .menu-info-item .menu-meta .location-line {
    font-size: var(--fs-15);
  }
}

/* ================= Buttons in the borrowed sections ================= */
/* These carry the site's own button classes now. The only thing left is the
   outlined variant sitting on the CTA photograph, which flips to cream. */
.process-cloud-ktchen__buttons,
.cta-cloud-ktchen .action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.cta-cloud-ktchen .common-button-three:not(.v2):not(.v3) {
  border-color: rgba(var(--agora-cream-rgb), 0.5);
  color: var(--agora-cream);
}

.cta-cloud-ktchen .common-button-three:not(.v2):not(.v3)::before {
  background-color: var(--agora-cream);
}

.cta-cloud-ktchen .common-button-three:not(.v2):not(.v3):hover,
.cta-cloud-ktchen .common-button-three:not(.v2):not(.v3):focus-visible {
  background-color: var(--agora-cream);
  border-color: var(--agora-cream);
  color: var(--agora-rust);
}

.cta-cloud-ktchen .common-button-three:not(.v2):not(.v3):hover .btn-text,
.cta-cloud-ktchen .common-button-three:not(.v2):not(.v3):hover .btn-icon,
.cta-cloud-ktchen .common-button-three:not(.v2):not(.v3):hover .btn-icon svg {
  color: var(--agora-rust);
}

/* ================= Gallery edge fades ================= */
/* The template faded these strips to pure white. The page ground is Warm
   Cream, so the edges showed as pale panels either side of the strip. */
.instagram-three.section .gradient-overlay-left {
  background: linear-gradient(
    90deg,
    var(--agora-cream) 61.45%,
    rgba(var(--agora-cream-rgb), 0) 100%
  );
}

.instagram-three.section .gradient-overlay-right {
  background: linear-gradient(
    90deg,
    rgba(var(--agora-cream-rgb), 0) 0%,
    var(--agora-cream) 38.25%
  );
}

.instagram-three.section {
  background-color: var(--agora-cream);
}

.instagram-three__wrapper .instagram-brand-label {
  color: var(--agora-rust);
}

/* ================= Footer social buttons ================= */
/* Boxed icons under the opening hours, matching the set the previous footer
   carried. Cream outline on the rust ground, inverting on hover. */
.footer-cloud-ktchen__main .footer-widget .widget-social {
  margin-top: 32px;
}

.footer-cloud-ktchen__main .footer-widget .widget-social .title {
  font-family: var(--ff-body);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--agora-cream-rgb), 0.7);
  margin-bottom: 14px;
}

.footer-cloud-ktchen__main .footer-widget .widget-social .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-cloud-ktchen__main .footer-widget .widget-social .social-links li a {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background-color: rgba(var(--agora-cream-rgb), 0.08);
  border: 1px solid rgba(var(--agora-cream-rgb), 0.28);
  color: var(--agora-cream);
  transition: background-color 0.35s ease, border-color 0.35s ease,
              color 0.35s ease;
}

.footer-cloud-ktchen__main .footer-widget .widget-social .social-links li a:hover,
.footer-cloud-ktchen__main .footer-widget .widget-social .social-links li a:focus-visible {
  background-color: var(--agora-cream);
  border-color: var(--agora-cream);
  color: var(--agora-rust);
}

/* Breadcrumb banner: warm scrim so the heading holds against the photo. */
.breadcrumb-two.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--agora-ink-rgb), 0.55) 0%,
    rgba(var(--agora-rust-rgb), 0.6) 100%
  );
  pointer-events: none;
}

.breadcrumb-two__header {
  position: relative;
  z-index: 2;
}

/* Popup action: the waitlist form is hosted elsewhere, so this is a link
   rather than a form that would collect an address twice. */
.agora-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.agora-popup__actions .common-button-three {
  width: 100%;
  justify-content: center;
}

/* =====================================================================
   Brand book Edition 02 (2026) and the soft-launch pages.

   Agora Orange leads as a colour field and in large type. Cream on orange is
   only 4:1, so the brand book limits it to headings, buttons and text 24px and
   above. Small text therefore sits on Cream or Kiln Rust.
   ===================================================================== */
:root,
:root .agora-page {
  --agora-orange: #c8541f;
  --agora-kiln: #8e3f1f;
  --agora-kiln-rgb: 142, 63, 31;
  --agora-sand: #f3e6d3;
}

/* ---------- Labels: Cinzel capitals, wide tracking, short sun rule ---------- */
.section-sub-title,
.restaurant__header .section-sub-title,
.cafe__header .section-sub-title,
.faq-two .cafe__header .section-sub-title {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--agora-kiln);
  background: none;
  padding: 0;
  border: 0;
  margin-bottom: 18px;
}

.section-sub-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 12px;
  background: var(--agora-sun);
}

.text-center .section-sub-title::after {
  margin-left: auto;
  margin-right: auto;
}

.choose-us-three.section .section-sub-title {
  color: var(--agora-cream);
}

.section-title {
  font-size: clamp(30px, 4.4vw, 56px);
  color: var(--agora-orange);
}

.choose-us-three.section .section-title {
  color: var(--agora-cream);
}

.about-three__content .section-title {
  font-size: clamp(28px, 3.3vw, 44px);
}

.hero-three__content .content-info .hero-title {
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.05;
}

.hero-three__eyebrow {
  font-family: var(--ff-display);
  letter-spacing: 0.24em;
  font-size: var(--fs-14);
  flex-wrap: wrap;
}

.hero-three__tagline {
  font-weight: 300;
}

.preloader-word,
.preloader-word span {
  font-family: var(--ff-display);
}

.breadcrumb-two__header .header-title {
  font-size: clamp(38px, 6vw, 76px);
  color: var(--agora-cream);
}

/* ---------- Buttons: Cinzel capitals, per the brand book's email example ---------- */
.common-button-three,
.common-button-three.v2,
.common-button-three.v3,
.common-button-three .btn-text {
  font-family: var(--ff-display);
  letter-spacing: 0.16em;
  font-size: var(--fs-13);
  font-weight: 500;
}

.common-button-three {
  color: var(--agora-kiln);
  border-color: rgba(var(--agora-kiln-rgb), 0.45);
}

.common-button-three.v3 {
  color: var(--agora-kiln);
}

.agora-btn-on-dark.common-button-three {
  border-color: rgba(var(--agora-cream-rgb), 0.6);
  color: var(--agora-cream);
}

.agora-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Header ---------- */

@media only screen and (min-width: 992px) {
  .mainmenu li a,
  .mainmenu > ul > li > a {
    font-family: var(--ff-display);
    font-size: 16px;
    letter-spacing: 0.08em;
  }

  .header-three .header__right-hamburger {
    display: none;
  }
}

.header-three .agora-header-cta {
  padding: 13px 18px;
}

/* ---------- Hours list, used everywhere hours appear ---------- */
ul.agora-hours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

ul.agora-hours li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 18px;
  font-size: var(--fs-16);
  line-height: 1.4;
}

ul.agora-hours .hours-days {
  font-weight: 500;
}

.footer-cloud-ktchen__main ul.agora-hours li {
  display: block;
  margin-bottom: 8px;
}

.footer-cloud-ktchen__main ul.agora-hours .hours-days {
  display: block;
  color: var(--agora-cream);
}

.footer-launch {
  margin: 16px 0 0;
  font-size: var(--fs-15);
  color: var(--agora-sun);
}

/* ---------- Soft-launch strip ---------- */
.agora-launch.section {
  background: var(--agora-kiln);
  color: var(--agora-cream);
  padding: 40px 0;
}

.agora-launch__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.agora-launch__item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.agora-launch__item > div {
  flex: 1;
}

.agora-launch__item + .agora-launch__item {
  border-left: 1px solid rgba(var(--agora-cream-rgb), 0.22);
  padding-left: 32px;
}

.agora-launch__icon {
  color: var(--agora-sun);
  line-height: 0;
}

.agora-launch__title {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--agora-sun);
  margin: 2px 0 12px;
}

.agora-launch p {
  margin: 0;
  font-size: var(--fs-18);
  color: var(--agora-cream);
}

.agora-launch p.agora-launch__sub {
  font-size: var(--fs-15);
  font-weight: 300;
  margin-top: 4px;
}

.agora-launch__link {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-15);
  color: var(--agora-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agora-launch__link:hover {
  color: var(--agora-sun);
}

.agora-launch ul.agora-hours li {
  color: var(--agora-cream);
}

@media only screen and (max-width: 991.98px) {
  .agora-launch__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .agora-launch__item + .agora-launch__item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(var(--agora-cream-rgb), 0.22);
    padding-top: 24px;
  }
}

/* ---------- The Arch: frames photography, as the dome frames the sun ---------- */
.agora-arch,
.agora-arch img {
  border-radius: 999px 999px 0 0;
  overflow: hidden;
}

.agora-arch img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.about-three__thumb.agora-arch img {
  aspect-ratio: 4 / 5;
}

.choose-us-three__thumb.agora-arch img {
  aspect-ratio: 3 / 4;
  height: auto;
}

.about-main-two__aside.agora-arch img {
  min-height: 0;
  aspect-ratio: 4 / 5;
  height: auto;
}

/* ---------- Line illustrations, tinted through a mask ---------- */
.agora-illus {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--illus) center / contain no-repeat;
  mask: var(--illus) center / contain no-repeat;
}

.agora-illus--olive-branch { --illus: url("../images/agora/illustration/olive-branch.png"); }
.agora-illus--wine-glass { --illus: url("../images/agora/illustration/wine-glass.png"); }
.agora-illus--lemon { --illus: url("../images/agora/illustration/lemon.png"); }
.agora-illus--amphora { --illus: url("../images/agora/illustration/amphora.png"); }

/* ---------- Greek key divider ---------- */
.agora-meander {
  height: 20px;
  background: url("../images/agora/meander.svg") repeat-x center;
}

/* ---------- Menu cards on the home page ---------- */
.agora-menus__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.agora-menu-card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 36px;
  color: var(--agora-cream);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.agora-menu-card:hover {
  transform: translateY(-6px);
  color: var(--agora-cream);
}

.agora-menu-card--food { background: var(--agora-kiln); }
.agora-menu-card--drinks { background: var(--agora-ink); }
.agora-menu-card--dessert { background: var(--agora-olive); }

.agora-menu-card .agora-illus {
  height: 150px;
  width: 100%;
  -webkit-mask-position: left center;
  mask-position: left center;
  color: var(--agora-sun);
}

.agora-menu-card__title {
  font-size: 40px;
  color: var(--agora-cream);
  margin: 28px 0 10px;
}

.agora-menu-card p {
  color: var(--agora-cream);
  font-size: var(--fs-16);
  line-height: 1.55;
  margin-bottom: 22px;
}

.agora-menu-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-size: var(--fs-13);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--agora-cream);
  margin-top: auto;
}

@media only screen and (max-width: 991.98px) {
  .agora-menus__grid {
    grid-template-columns: 1fr;
  }

  .agora-menu-card {
    min-height: 0;
  }

  .agora-menu-card .agora-illus {
    height: 110px;
  }
}

/* ---------- What to expect ---------- */
.choose-us-three.section {
  background-color: var(--agora-orange);
}

.choose-us-three__item .item-content .item-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-18);
  letter-spacing: 0;
  line-height: 1.3;
}

.choose-us-three__item .item-icon {
  color: var(--agora-kiln);
  background-color: var(--agora-sand);
  border-radius: 50%;
}

/* ---------- FAQ ---------- */
.faq-two__accordion .accordion-button {
  font-size: var(--fs-18);
  line-height: 1.35;
}

.faq-two__accordion .accordion-button:not(.collapsed) {
  color: var(--agora-kiln);
}

.faq-two .section-title {
  color: var(--agora-orange);
}

/* ---------- Values ---------- */
.agora-values.section {
  background: var(--agora-sand);
}

.agora-values__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}

.agora-value__icon {
  display: inline-flex;
  color: var(--agora-orange);
  margin-bottom: 16px;
}

.agora-value__title {
  font-size: 24px;
  color: var(--agora-kiln);
  margin-bottom: 10px;
}

.agora-value p {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--agora-ink);
}

@media only screen and (max-width: 1199.98px) {
  .agora-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 575.98px) {
  .agora-values__grid {
    grid-template-columns: 1fr;
  }
}

.agora-photo-band.section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.agora-photo-band img {
  width: 100%;
  height: clamp(200px, 30vw, 440px);
  object-fit: cover;
  display: block;
}

/* ---------- Menu pages ---------- */
.agora-menu.section {
  padding: 72px 0 96px;
}

.menu-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--agora-sand);
  padding: 44px 48px;
}

.menu-intro__text {
  max-width: 660px;
}

.menu-intro__title {
  font-size: clamp(30px, 4vw, 52px);
  color: var(--agora-orange);
  line-height: 1.1;
  margin-bottom: 16px;
}

.menu-intro p {
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--agora-ink);
  margin-bottom: 10px;
}

.menu-intro__logo {
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

.menu-key {
  font-size: var(--fs-15) !important;
}

.menu-key strong {
  font-weight: 600;
  color: var(--agora-kiln);
  margin-left: 10px;
}

.menu-key strong:first-child {
  margin-left: 0;
}

.menu-allergen {
  font-size: var(--fs-15) !important;
  font-weight: 500;
  margin-bottom: 0 !important;
}

.menu-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 28px 0 0;
  border: 1px solid rgba(var(--agora-kiln-rgb), 0.3);
}

.menu-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  font-family: var(--ff-display);
  font-size: var(--fs-15);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--agora-kiln);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-tab + .menu-tab {
  border-left: 1px solid rgba(var(--agora-kiln-rgb), 0.3);
}

.menu-tab span {
  font-family: inherit;
}

.menu-tab:hover {
  background: var(--agora-sand);
  color: var(--agora-kiln);
}

.menu-tab.is-current {
  background: var(--agora-kiln);
  color: var(--agora-cream);
}

.menu-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 26px 0 8px;
}

.menu-jump a {
  font-size: var(--fs-15);
  color: var(--agora-kiln);
  text-decoration: underline;
  text-decoration-color: rgba(var(--agora-kiln-rgb), 0.35);
  text-underline-offset: 4px;
}

.menu-section {
  margin-top: 44px;
  scroll-margin-top: 110px;
}

.menu-band {
  margin: 0 0 26px;
  padding: 14px 20px;
  background: var(--agora-orange);
  color: var(--agora-cream);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

.menu-columns {
  columns: 2;
  column-gap: 64px;
}

.menu-columns--three {
  columns: 3;
}

.menu-group {
  break-inside: avoid;
  margin-bottom: 30px;
}

.menu-group__title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--agora-kiln);
  border-bottom: 2px solid var(--agora-sun);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.menu-note {
  margin: -6px 0 14px;
  font-size: var(--fs-15);
  font-style: italic;
  font-weight: 300;
  color: var(--agora-ink);
}

.menu-note--center {
  text-align: center;
  margin-top: 14px;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-row {
  margin-bottom: 16px;
  break-inside: avoid;
}

.menu-list--compact .menu-row {
  margin-bottom: 9px;
}

.menu-row__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.menu-row__name {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-18);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--agora-ink);
  min-width: 0;
}

.menu-list--compact .menu-row__name {
  font-size: var(--fs-16);
  font-weight: 400;
}

.menu-diet {
  margin-left: 8px;
  white-space: nowrap;
}

.menu-diet abbr {
  display: inline-block;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--agora-kiln);
  text-decoration: none;
  margin-right: 5px;
  cursor: help;
}

.menu-row__dots {
  flex: 1;
  min-width: 18px;
  border-bottom: 1px dotted rgba(var(--agora-ink-rgb), 0.4);
  transform: translateY(-4px);
}

.menu-row__price {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-17);
  color: var(--agora-kiln);
  font-variant-numeric: tabular-nums;
}

.menu-row__desc {
  margin: 3px 0 0;
  font-size: var(--fs-15);
  font-weight: 300;
  line-height: 1.5;
  color: var(--agora-ink);
  padding-right: 48px;
}

/* Wine: a size column per price, description on its own line. */
.wine-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 58px);
  align-items: baseline;
  gap: 2px 6px;
  margin-bottom: 15px;
}

.wine-table--two .wine-row {
  grid-template-columns: minmax(0, 1fr) repeat(2, 58px);
}

.wine-row--head {
  margin-bottom: 8px;
}

.wine-size {
  font-size: var(--fs-13);
  font-style: italic;
  text-align: right;
  color: var(--agora-ink);
}

.wine-name {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-17);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--agora-ink);
}

.wine-country {
  font-size: var(--fs-14);
  font-weight: 300;
  font-style: italic;
  color: var(--agora-kiln);
}

.wine-price {
  text-align: right;
  font-size: var(--fs-16);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--agora-kiln);
}

.wine-desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 300;
  line-height: 1.45;
  color: var(--agora-ink);
}

.signature-drink {
  border: 1px solid var(--agora-sun);
  padding: 26px;
  text-align: center;
  margin-bottom: 30px;
}

.signature-drink .section-sub-title {
  margin-bottom: 10px;
}

.signature-drink .section-sub-title::after {
  display: none;
}

.signature-drink__name {
  font-size: 32px;
  color: var(--agora-orange);
  margin-bottom: 8px;
}

.signature-drink p {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 300;
  font-style: italic;
  color: var(--agora-ink);
}

.drink-names {
  margin-bottom: 26px;
}

.drink-names__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.drink-names__title span {
  font-family: var(--ff-display);
}

.drink-names__title .menu-row__price {
  font-family: var(--ff-body);
  letter-spacing: 0;
  font-size: 20px;
}

.drink-names ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 20px;
}

.drink-names li {
  font-size: var(--fs-17);
  font-weight: 500;
  color: var(--agora-ink);
}

.menu-next {
  margin-top: 56px;
  text-align: center;
}

.menu-next p {
  font-family: var(--ff-display);
  font-size: clamp(24px, 3vw, 34px);
  color: var(--agora-orange);
  margin-bottom: 20px;
}

.menu-next__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

@media only screen and (max-width: 1199.98px) {
  .menu-columns--three {
    columns: 2;
  }

  .drink-names ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 767.98px) {
  .agora-menu.section {
    padding: 40px 0 64px;
  }

  .menu-intro {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 30px 24px;
    gap: 24px;
  }

  .menu-intro__logo {
    width: 150px;
  }

  .menu-tab {
    font-size: var(--fs-13);
    letter-spacing: 0.08em;
    flex-direction: column;
    gap: 4px;
    min-height: 66px;
  }

  .menu-columns,
  .menu-columns--three {
    columns: 1;
  }

  .menu-row__desc {
    padding-right: 0;
  }

  .menu-band {
    letter-spacing: 0.1em;
  }

  .wine-row {
    grid-template-columns: minmax(0, 1fr) repeat(3, 50px);
  }

  .wine-table--two .wine-row {
    grid-template-columns: minmax(0, 1fr) repeat(2, 54px);
  }

}

/* ---------- Contact ---------- */
.contact-map__item .item-body a {
  color: var(--agora-kiln);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Legal pages ---------- */
.agora-legal__body {
  max-width: 760px;
  margin: 0 auto;
}

.agora-legal__lead {
  font-size: var(--fs-20);
  font-weight: 300;
  line-height: 1.55;
}

.agora-legal__body h2 {
  font-size: 26px;
  color: var(--agora-kiln);
  margin: 36px 0 12px;
}

.agora-legal__body p,
.agora-legal__body li {
  font-size: var(--fs-17);
  line-height: 1.65;
  color: var(--agora-ink);
}

.agora-legal__body ul {
  padding-left: 20px;
  list-style: disc;
}

.agora-legal__body li {
  margin-bottom: 8px;
}

.agora-legal__body a {
  color: var(--agora-kiln);
  text-decoration: underline;
}

.agora-legal__updated {
  margin-top: 36px;
  font-size: var(--fs-15) !important;
  font-style: italic;
}

/* ---------- Small text that must clear AA on cream ---------- */
.about-three__caption,
.agora-popup__eyebrow,
.form-error {
  color: var(--agora-kiln);
}

.agora-popup__eyebrow {
  font-family: var(--ff-display);
  letter-spacing: 0.28em;
}

.agora-popup__title {
  color: var(--agora-orange);
}

.agora-popup__note a {
  color: var(--agora-kiln);
  text-decoration: underline;
}

.hamburger-area .hamburger-infos .contact-item .icon {
  color: var(--agora-kiln);
}

.hamburger-area ul.agora-hours {
  min-width: 220px;
  color: var(--agora-ink);
}

/* ---------- Review fixes ---------- */
/* Commissioner carries running text, in Regular unless a rule says otherwise. */
body p {
  font-weight: 400;
}

/* The global span rule must not reach headline words or split-text spans. */
.hero-title span,
.section-title span,
.section-title div,
.header-title span {
  font-family: var(--ff-display);
}

@media only screen and (min-width: 992px) {
  .text-lg-start .section-sub-title::after {
    margin-left: 0;
  }
}

.faq-two .cafe__header .section-title {
  color: var(--agora-orange);
}

.contact-map__item .item-body p a,
.contact-map__item .item-body p a:hover {
  color: var(--agora-kiln);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-map__item .item-body ul.agora-hours li {
  color: var(--agora-ink);
}

.footer-cloud-ktchen__main .footer-widget.contact-info {
  border: 0;
  padding: 0;
  margin: 0;
}

.footer-cloud-ktchen__main .contact-list li {
  line-height: 1.5;
}

/* The brand book sets a 48px minimum for the submark. */
.rotating-badge .badge-icon {
  width: 48px;
  height: auto;
}

.rotating-badge svg.badge-text {
  display: block;
  width: 100%;
  height: 100%;
}

/* Stacked logo on desktop, side logo from tablet down. */
.menu-area .menu-logo-wrap img {
  height: 78px;
  width: auto;
  max-width: none;
}

.hamburger-area .hamburger_logo img {
  height: 46px;
  width: auto;
  max-width: none;
}

@media only screen and (max-width: 991.98px) {
  .menu-area .menu-logo-wrap img {
    height: 46px;
  }
}

/* Spam trap on the contact form: off-screen for people, tempting for bots. */
.agora-hp {
  position: absolute;
  left: -9999px;
}

/* reCAPTCHA checkbox: Google draws it at a fixed 304px, so it is scaled on
   narrow phones to stay inside the form. */
.agora-recaptcha {
  margin-bottom: 20px;
}

@media only screen and (max-width: 420px) {
  .agora-recaptcha .g-recaptcha {
    transform: scale(0.88);
    transform-origin: 0 0;
    height: 68px;
  }
}

.contact-six__form button[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- Thank-you page ---------- */
.agora-thanks {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.agora-thanks__icon {
  display: inline-flex;
  color: var(--agora-orange);
  margin-bottom: 18px;
}

.agora-thanks .section-title {
  margin-bottom: 18px;
}

.agora-thanks p {
  font-size: var(--fs-18);
  line-height: 1.6;
  color: var(--agora-ink);
  margin-bottom: 30px;
}

.agora-thanks .agora-actions {
  justify-content: center;
}

/* ---------- Footer contact rows with icons ---------- */
.footer-cloud-ktchen__main .footer-widget .agora-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  line-height: 1.55;
}

.agora-footer-contact__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--agora-cream-rgb), 0.3);
  border-radius: 50%;
  color: var(--agora-sun);
}

.agora-footer-contact__text {
  padding-top: 5px;
}

/* ---------- Footer bottom links ---------- */
/* The template hovered these to Kiln Rust, the footer's own colour, so they
   vanished. They now go to Mediterranean Sun with an underline. */
.footer-cloud-ktchen__bottom .footer-bottom-inner .footer-links a,
.footer-cloud-ktchen__bottom .footer-bottom-inner .copyright a {
  color: var(--agora-cream);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}

.footer-cloud-ktchen__bottom .footer-bottom-inner .footer-links a:hover,
.footer-cloud-ktchen__bottom .footer-bottom-inner .footer-links a:focus-visible,
.footer-cloud-ktchen__bottom .footer-bottom-inner .copyright a:hover,
.footer-cloud-ktchen__bottom .footer-bottom-inner .copyright a:focus-visible {
  color: var(--agora-sun);
  text-decoration: underline;
}

.footer-cloud-ktchen__main .footer-widget .agora-footer-contact .agora-footer-contact__icon {
  color: var(--agora-sun);
}