/* ============================================================
   HR Cafe — Main Stylesheet
   Palette & type locked to the brand brief.
   The page "warms up" as you scroll: dark espresso hero →
   warm cream content. Signature = ambient ember hero.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
   /* Brand palette */
   --espresso: #1e1610;
   --espresso-2: #2a1f16;
   --copper: #8b5e3c;
   --copper-deep: #6f4a2e;
   --ember: #e0a268;
   --olive: #6b7f3a;
   --olive-deep: #556530;
   --cream: #fbf7f2;
   --card: #f3ede5;
   --border: #e0d5c6;
   --text: #3d2e1e;
   --muted: #7a6854;
   --on-dark: #f0e6da;
   --on-dark-muted: #b8a794;

   /* Typography */
   --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
   --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

   /* Fluid type scale (mobile-first, clamps up) */
   --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
   --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
   --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
   --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
   --step-3: clamp(1.95rem, 1.6rem + 1.7vw, 2.9rem);
   --step-4: clamp(2.5rem, 1.9rem + 3vw, 4.2rem);
   --step-5: clamp(3.1rem, 2.1rem + 5vw, 6rem);

   /* Spacing rhythm */
   --space-section: clamp(4rem, 3rem + 6vw, 8rem);
   --gutter: clamp(1.25rem, 0.9rem + 2vw, 2.5rem);
   --maxw: 1200px;

   --radius: 14px;
   --radius-lg: 22px;
   --shadow-sm: 0 2px 10px rgba(30, 22, 16, 0.06);
   --shadow-md: 0 14px 40px -18px rgba(30, 22, 16, 0.4);
   --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset-ish base ---------- */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   margin: 0;
   font-family: var(--font-body);
   font-size: var(--step-0);
   line-height: 1.65;
   color: var(--text);
   background: var(--cream);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

img {
   max-width: 100%;
   display: block;
}

a {
   color: inherit;
   text-decoration: none;
}

h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   font-weight: 700;
   line-height: 1.08;
   margin: 0;
   color: var(--espresso);
   letter-spacing: -0.01em;
}

p {
   margin: 0;
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
   position: absolute;
   left: 1rem;
   top: -100px;
   z-index: 2000;
   background: var(--copper);
   color: #fff;
   padding: 0.7rem 1.1rem;
   border-radius: 8px;
   font-weight: 600;
   transition: top 0.2s var(--ease);
}
.skip-link:focus {
   top: 1rem;
}

/* ---------- Visible focus everywhere (a11y) ---------- */
:focus-visible {
   outline: 3px solid var(--ember);
   outline-offset: 3px;
   border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.container {
   width: 100%;
   max-width: var(--maxw);
   margin-inline: auto;
   padding-inline: var(--gutter);
}

.section {
   padding-block: var(--space-section);
}

.section--cream {
   background: var(--cream);
}
.section--card {
   background: var(--card);
}
.section--dark {
   background: var(--espresso);
   color: var(--on-dark);
}

/* ---------- Section header pattern ---------- */
.eyebrow {
   font-family: var(--font-body);
   font-size: var(--step--1);
   font-weight: 600;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: var(--copper);
   margin: 0 0 0.9rem;
   display: inline-flex;
   align-items: center;
   gap: 0.7rem;
}
.section--dark .eyebrow {
   color: var(--ember);
}
.eyebrow::before {
   content: '';
   width: 26px;
   height: 1px;
   background: currentColor;
   opacity: 0.6;
}

.section-title {
   font-size: var(--step-3);
   max-width: 20ch;
}
.section-head {
   margin-bottom: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
}
.section-head p {
   margin-top: 1rem;
   max-width: 52ch;
   color: var(--muted);
}
.section--dark .section-head p {
   color: var(--on-dark-muted);
}

/* Signature divider: thin copper rule with a center diamond */
.divider {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.9rem;
   margin: 0;
   color: var(--copper);
}
.divider::before,
.divider::after {
   content: '';
   height: 1px;
   width: min(90px, 12vw);
   background: linear-gradient(90deg, transparent, currentColor);
}
.divider::after {
   background: linear-gradient(90deg, currentColor, transparent);
}
.divider span {
   width: 8px;
   height: 8px;
   transform: rotate(45deg);
   background: currentColor;
   flex: none;
}

/* ---------- Buttons ---------- */
.btn {
   --btn-bg: var(--copper);
   --btn-fg: #fff;
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   background: var(--btn-bg);
   color: var(--btn-fg);
   font-family: var(--font-body);
   font-weight: 600;
   font-size: var(--step-0);
   line-height: 1;
   padding: 0.95em 1.6em;
   border-radius: 999px;
   border: 1.5px solid var(--btn-bg);
   cursor: pointer;
   transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
      background 0.25s var(--ease);
   box-shadow: 0 10px 24px -12px rgba(139, 94, 60, 0.9);
}
.btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 16px 30px -12px rgba(139, 94, 60, 1);
}
.btn:active {
   transform: translateY(0);
}
.btn--ghost {
   --btn-bg: transparent;
   --btn-fg: var(--on-dark);
   border-color: rgba(240, 230, 218, 0.35);
   box-shadow: none;
}
.btn--ghost:hover {
   background: rgba(240, 230, 218, 0.08);
   border-color: var(--ember);
   color: #fff;
}
.btn svg {
   width: 1.1em;
   height: 1.1em;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
   position: fixed;
   inset: 0 0 auto 0;
   z-index: 1000;
   transition: padding 0.35s var(--ease);
   padding-block: 1.1rem;
}
/* Scrolled background lives on a pseudo-element, not .nav itself —
   backdrop-filter on .nav would create a containing block for its
   position:fixed descendants (the mobile menu panel), shrinking it
   to the navbar's own height instead of the full viewport. */
.nav::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   transition: background 0.35s var(--ease), backdrop-filter 0.35s var(--ease),
      box-shadow 0.35s var(--ease);
}
.nav__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}
.nav__brand {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.5rem;
   letter-spacing: 0.02em;
   color: var(--on-dark);
   display: inline-flex;
   align-items: baseline;
   gap: 0.12em;
   transition: color 0.35s var(--ease);
}
.nav__brand .mark {
   color: var(--ember);
}
.nav__brand small {
   font-family: var(--font-body);
   font-size: 0.55rem;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   font-weight: 600;
   color: var(--on-dark-muted);
   margin-left: 0.4rem;
   transform: translateY(-0.15em);
}

.nav__links {
   display: flex;
   align-items: center;
   gap: clamp(1rem, 2vw, 2rem);
   list-style: none;
   margin: 0;
   padding: 0;
}
.nav__links a {
   font-size: 0.95rem;
   font-weight: 500;
   color: var(--on-dark);
   position: relative;
   padding-block: 0.3rem;
   transition: color 0.2s var(--ease);
}
.nav__links a::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   height: 2px;
   width: 0;
   background: var(--ember);
   transition: width 0.3s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current='page']::after {
   width: 100%;
}
.nav__links a[aria-current='page'] {
   color: var(--ember);
}

/* Scrolled state — nav becomes solid cream */
.nav.is-scrolled {
   padding-block: 0.7rem;
}
.nav.is-scrolled::before {
   background: rgba(251, 247, 242, 0.92);
   backdrop-filter: blur(12px);
   box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
}
.nav.is-scrolled .nav__brand {
   color: var(--espresso);
}
.nav.is-scrolled .nav__brand small {
   color: var(--muted);
}
.nav.is-scrolled .nav__links a {
   color: var(--text);
}
.nav.is-scrolled .nav__links a[aria-current='page'] {
   color: var(--copper);
}
.nav.is-scrolled .nav__links a::after {
   background: var(--copper);
}
.nav.is-scrolled .nav__toggle span {
   background: var(--espresso);
}

/* Hamburger */
.nav__toggle {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 44px;
   height: 44px;
   background: none;
   border: 0;
   cursor: pointer;
   padding: 0;
}
.nav__toggle span {
   display: block;
   width: 24px;
   height: 2px;
   margin-inline: auto;
   background: var(--on-dark);
   transition: transform 0.3s var(--ease), opacity 0.2s var(--ease),
      background 0.35s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}
.nav.is-open .nav__toggle span:nth-child(2) {
   opacity: 0;
}
.nav.is-open .nav__toggle span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   HERO — dark, moody, ambient embers (signature)
   ============================================================ */
.hero {
   position: relative;
   min-height: 100svh;
   display: flex;
   align-items: center;
   background: var(--espresso);
   color: var(--on-dark);
   overflow: hidden;
   isolation: isolate;
}
/* Warm copper glow + moody vignette. If a client photo is added
   to .hero__photo it layers beneath this wash. */
.hero__photo {
   position: absolute;
   inset: 0;
   z-index: -3;
   background: var(--espresso-2);
   background-size: cover;
   background-position: center;
}
.hero__wash {
   position: absolute;
   inset: 0;
   z-index: -2;
   background: radial-gradient(
         120% 90% at 78% 15%,
         rgba(224, 162, 104, 0.28),
         transparent 55%
      ),
      radial-gradient(
         100% 100% at 20% 100%,
         rgba(107, 127, 58, 0.14),
         transparent 60%
      ),
      linear-gradient(180deg, rgba(20, 15, 11, 0.55), rgba(20, 15, 11, 0.9));
}
/* Fine grain to keep the flat gradient from looking "digital" */
.hero__grain {
   position: absolute;
   inset: 0;
   z-index: -1;
   opacity: 0.05;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Ember canvas (JS-driven particles) */
.hero__embers {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
}

.hero__inner {
   position: relative;
   width: 100%;
   padding-block: clamp(7rem, 12vh, 10rem) clamp(3rem, 8vh, 6rem);
}
.hero__rating {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   background: rgba(240, 230, 218, 0.08);
   border: 1px solid rgba(240, 230, 218, 0.16);
   border-radius: 999px;
   padding: 0.4rem 0.9rem;
   font-size: 0.85rem;
   font-weight: 500;
   color: var(--on-dark);
   margin-bottom: 1.6rem;
}
.hero__rating .stars {
   color: var(--ember);
   letter-spacing: 0.1em;
}
.hero__rating strong {
   font-weight: 700;
}
.hero__rating span {
   color: var(--on-dark-muted);
}

.hero h1 {
   color: var(--on-dark);
   font-size: var(--step-5);
   font-weight: 800;
   max-width: 15ch;
   margin-bottom: 1.4rem;
}
.hero h1 em {
   font-style: italic;
   font-weight: 500;
   color: var(--ember);
   position: relative;
}
/* hand-drawn copper underline under the italic key word */
.hero h1 em::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: -0.08em;
   height: 0.14em;
   background: linear-gradient(90deg, var(--ember), transparent);
   border-radius: 2px;
   opacity: 0.8;
}
.hero__sub {
   font-size: var(--step-1);
   color: var(--on-dark-muted);
   max-width: 42ch;
   margin-bottom: 2.4rem;
   line-height: 1.5;
}
.hero__actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1rem;
   margin-bottom: 2.6rem;
}

/* Order-from chips (WhatsApp / Swiggy / Zomato) */
.order-links {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.7rem;
}
.order-links__label {
   font-size: 0.78rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--on-dark-muted);
   margin-right: 0.3rem;
}
.chip {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.6rem 1rem;
   border-radius: 999px;
   background: rgba(240, 230, 218, 0.07);
   border: 1px solid rgba(240, 230, 218, 0.16);
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--on-dark);
   transition: transform 0.2s var(--ease), background 0.2s var(--ease),
      border-color 0.2s var(--ease);
}
.chip:hover {
   transform: translateY(-2px);
   background: rgba(240, 230, 218, 0.13);
   border-color: var(--ember);
}
.chip svg {
   width: 18px;
   height: 18px;
}
.chip--whatsapp:hover {
   border-color: #25d366;
}

/* Scroll cue */
.hero__cue {
   position: absolute;
   left: 50%;
   bottom: 1.6rem;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.7rem;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: var(--on-dark-muted);
}
.hero__cue .line {
   width: 1px;
   height: 42px;
   background: linear-gradient(var(--ember), transparent);
}

/* ============================================================
   Reusable media placeholder (until client photos arrive)
   Any .media with a real photo just needs an <img> inside.
   ============================================================ */
.media {
   position: relative;
   background: linear-gradient(150deg, var(--espresso-2), var(--espresso));
   overflow: hidden;
   display: grid;
   place-items: center;
   color: var(--on-dark-muted);
   isolation: isolate;
}
.media::after {
   /* subtle warm sheen */
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(
      80% 60% at 50% 0%,
      rgba(224, 162, 104, 0.14),
      transparent 70%
   );
   z-index: 1;
   pointer-events: none;
}
.media img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 2;
}
.media__glyph {
   font-size: clamp(2.4rem, 6vw, 3.4rem);
   line-height: 1;
   filter: grayscale(0.2);
   opacity: 0.9;
}
.media__tag {
   position: absolute;
   left: 0.8rem;
   bottom: 0.8rem;
   z-index: 3;
   font-size: 0.62rem;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--on-dark-muted);
   background: rgba(20, 15, 11, 0.5);
   border: 1px solid rgba(240, 230, 218, 0.14);
   padding: 0.3rem 0.6rem;
   border-radius: 999px;
}

/* ============================================================
   SPECIALTIES
   ============================================================ */
.specialties-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
   gap: clamp(1.2rem, 1rem + 1vw, 1.8rem);
}
.dish {
   background: var(--cream);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
      border-color 0.4s var(--ease);
}
.dish:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md);
   border-color: var(--copper);
}
.dish .media {
   aspect-ratio: 4 / 3;
}
.dish__body {
   padding: 1.4rem 1.5rem 1.6rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   flex: 1;
}
.dish__head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
}
.dish__name {
   font-size: var(--step-1);
}
.dish__tag {
   flex: none;
   font-size: 0.68rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   font-weight: 600;
   color: #fff;
   background: var(--olive);
   padding: 0.3rem 0.6rem;
   border-radius: 999px;
}
.dish__desc {
   color: var(--muted);
   font-size: 0.96rem;
}

/* ============================================================
   GALLERY — responsive masonry-ish grid
   ============================================================ */
.gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 200px;
   gap: 0.9rem;
}
.gallery__item {
   position: relative;
   border-radius: var(--radius);
   overflow: hidden;
   cursor: pointer;
}
.gallery__item .media {
   position: absolute;
   inset: 0;
}
/* feature tiles to break the grid rhythm */
.gallery__item--tall {
   grid-row: span 2;
}
.gallery__item--wide {
   grid-column: span 2;
}
.gallery__item .caption {
   position: absolute;
   inset: auto 0 0 0;
   z-index: 4;
   padding: 1.4rem 1rem 0.9rem;
   font-size: 0.85rem;
   font-weight: 600;
   color: #fff;
   background: linear-gradient(transparent, rgba(20, 15, 11, 0.85));
   transform: translateY(8px);
   opacity: 0;
   transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.gallery__item:hover .caption,
.gallery__item:focus-within .caption {
   opacity: 1;
   transform: translateY(0);
}
.gallery__item .media__inner {
   position: absolute;
   inset: 0;
   transition: transform 0.6s var(--ease);
}
.gallery__item:hover .media__inner {
   transform: scale(1.07);
}

/* ============================================================
   TESTIMONIALS (Swiper)
   ============================================================ */
.testimonials {
   position: relative;
}
.testi-swiper {
   padding-bottom: 3.5rem !important;
}
.testi-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: 1.1rem;
   box-sizing: border-box;
}
.testi-card .stars {
   color: var(--ember);
   letter-spacing: 0.12em;
   font-size: 1.05rem;
}
.testi-card blockquote {
   margin: 0;
   font-family: var(--font-display);
   font-size: var(--step-1);
   font-style: italic;
   line-height: 1.45;
   color: var(--espresso);
}
.testi-card__person {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   margin-top: auto;
}
.testi-card__avatar {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   flex: none;
   display: grid;
   place-items: center;
   font-weight: 700;
   color: #fff;
   background: linear-gradient(135deg, var(--copper), var(--copper-deep));
   font-family: var(--font-display);
}
.testi-card__name {
   font-weight: 700;
   color: var(--text);
   line-height: 1.2;
}
.testi-card__meta {
   font-size: 0.8rem;
   color: var(--muted);
}

/* Swiper theming */
.testi-swiper .swiper-pagination-bullet {
   background: var(--copper);
   opacity: 0.3;
}
.testi-swiper .swiper-pagination-bullet-active {
   opacity: 1;
   width: 22px;
   border-radius: 4px;
}

/* ============================================================
   FAQ (GEO / structured content)
   ============================================================ */
.faq {
   max-width: 780px;
   margin-inline: auto;
   display: grid;
   gap: 0.8rem;
}
.faq details {
   background: var(--cream);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 0 1.4rem;
   overflow: hidden;
}
.faq summary {
   list-style: none;
   cursor: pointer;
   padding: 1.15rem 0;
   font-weight: 600;
   font-size: 1.05rem;
   color: var(--espresso);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
}
.faq summary::-webkit-details-marker {
   display: none;
}
.faq summary::after {
   content: '+';
   font-size: 1.5rem;
   color: var(--copper);
   font-weight: 400;
   transition: transform 0.3s var(--ease);
   flex: none;
}
.faq details[open] summary::after {
   transform: rotate(45deg);
}
.faq details p {
   padding-bottom: 1.2rem;
   color: var(--muted);
}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
   position: relative;
   text-align: center;
   overflow: hidden;
}
.cta-band .divider {
   color: var(--ember);
   margin-bottom: 1.6rem;
}
.cta-band h2 {
   color: var(--on-dark);
   font-size: var(--step-4);
   max-width: 18ch;
   margin-inline: auto;
}
.cta-band p {
   color: var(--on-dark-muted);
   max-width: 46ch;
   margin: 1rem auto 2rem;
}
.cta-band__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
   background: var(--espresso);
   color: var(--on-dark-muted);
   padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
}
.footer__grid {
   display: grid;
   grid-template-columns: 1.7fr 1fr 1fr 1fr;
   gap: 2.5rem;
}
.footer__brand {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.6rem;
   color: var(--on-dark);
   margin-bottom: 0.8rem;
}
.footer__brand .mark {
   color: var(--ember);
}
.footer p {
   line-height: 1.7;
   font-size: 0.95rem;
}
.footer h4 {
   color: var(--on-dark);
   font-family: var(--font-body);
   font-size: 0.78rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   margin-bottom: 1.1rem;
}
.footer__list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 0.6rem;
   font-size: 0.95rem;
}
.footer__list a {
   transition: color 0.2s var(--ease);
}
.footer__list a:hover {
   color: var(--ember);
}
.footer__socials {
   display: flex;
   gap: 0.7rem;
   margin-top: 1.2rem;
}
.footer__socials a {
   width: 42px;
   height: 42px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   border: 1px solid rgba(240, 230, 218, 0.16);
   color: var(--on-dark);
   transition: transform 0.2s var(--ease), background 0.2s var(--ease),
      border-color 0.2s var(--ease);
}
.footer__socials a:hover {
   transform: translateY(-3px);
   background: var(--copper);
   border-color: var(--copper);
   color: #fff;
}
.footer__socials svg {
   width: 20px;
   height: 20px;
}
.footer__bottom {
   margin-top: 3rem;
   padding-top: 1.6rem;
   border-top: 1px solid rgba(240, 230, 218, 0.12);
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem 1.5rem;
   justify-content: space-between;
   font-size: 0.82rem;
}

/* ============================================================
   Floating WhatsApp button
   ============================================================ */
.wa-float {
   position: fixed;
   right: clamp(1rem, 3vw, 2rem);
   bottom: clamp(1rem, 3vw, 2rem);
   z-index: 900;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   background: #25d366;
   color: #fff;
   display: grid;
   place-items: center;
   box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.7);
   transition: transform 0.25s var(--ease);
}
.wa-float:hover {
   transform: scale(1.08) translateY(-2px);
}
.wa-float svg {
   width: 30px;
   height: 30px;
}
.wa-float::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px solid #25d366;
   animation: waPulse 2.6s var(--ease) infinite;
}
@keyframes waPulse {
   0% {
      transform: scale(1);
      opacity: 0.7;
   }
   70%,
   100% {
      transform: scale(1.6);
      opacity: 0;
   }
}

/* ============================================================
   Inner-page hero (About / Contact)
   ============================================================ */
.page-hero {
   background: var(--espresso);
   color: var(--on-dark);
   padding-block: clamp(8rem, 14vh, 11rem) clamp(3.5rem, 8vh, 6rem);
   position: relative;
   overflow: hidden;
   isolation: isolate;
}
.page-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background: radial-gradient(
         100% 90% at 85% 10%,
         rgba(224, 162, 104, 0.22),
         transparent 55%
      ),
      linear-gradient(180deg, rgba(20, 15, 11, 0.4), var(--espresso));
}
.page-hero h1 {
   color: var(--on-dark);
   font-size: var(--step-4);
   max-width: 18ch;
}
.page-hero p {
   color: var(--on-dark-muted);
   max-width: 50ch;
   margin-top: 1rem;
   font-size: var(--step-1);
}

/* ============================================================
   ABOUT page
   ============================================================ */
.about-story {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: clamp(2rem, 1rem + 4vw, 4.5rem);
   align-items: center;
}
.about-story .media {
   aspect-ratio: 4 / 5;
   border-radius: var(--radius-lg);
}
.about-story__text p + p {
   margin-top: 1.2rem;
   color: var(--muted);
}
.about-story__text p:first-of-type {
   font-size: var(--step-1);
   color: var(--text);
   font-family: var(--font-display);
   font-style: italic;
   line-height: 1.5;
}

.values {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
   gap: 1.4rem;
}
.value-card {
   background: var(--cream);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 1.8rem;
}
.value-card .num {
   font-family: var(--font-display);
   font-size: 2rem;
   color: var(--copper);
   display: block;
   margin-bottom: 0.6rem;
}
.value-card h3 {
   font-size: var(--step-1);
   margin-bottom: 0.5rem;
}
.value-card p {
   color: var(--muted);
   font-size: 0.95rem;
}

/* ============================================================
   CONTACT page
   ============================================================ */
.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(2rem, 1rem + 4vw, 4rem);
   align-items: start;
}
.contact-info {
   display: grid;
   gap: 1.6rem;
}
.info-row {
   display: flex;
   gap: 1rem;
   align-items: flex-start;
}
.info-row__icon {
   flex: none;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: var(--card);
   border: 1px solid var(--border);
   color: var(--copper);
}
.info-row__icon svg {
   width: 22px;
   height: 22px;
}
.info-row h3 {
   font-family: var(--font-body);
   font-size: 0.78rem;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: 0.3rem;
   font-weight: 600;
}
.info-row p,
.info-row a {
   font-size: 1.05rem;
   color: var(--text);
   font-weight: 500;
}
.info-row a:hover {
   color: var(--copper);
}

/* Form */
.form {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
   display: grid;
   gap: 1.1rem;
}
.field {
   display: grid;
   gap: 0.45rem;
}
.field label {
   font-size: 0.82rem;
   font-weight: 600;
   letter-spacing: 0.04em;
   color: var(--text);
}
.field input,
.field textarea {
   font-family: inherit;
   font-size: 1rem;
   color: var(--text);
   background: var(--cream);
   border: 1.5px solid var(--border);
   border-radius: 10px;
   padding: 0.8rem 0.95rem;
   transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
   width: 100%;
}
.field textarea {
   resize: vertical;
   min-height: 130px;
}
.field input:focus,
.field textarea:focus {
   outline: none;
   border-color: var(--copper);
   box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15);
}
.form .btn {
   justify-self: start;
   margin-top: 0.3rem;
}
.form__note {
   font-size: 0.82rem;
   color: var(--muted);
}

.map-wrap {
   margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--border);
   line-height: 0;
}
.map-wrap iframe {
   width: 100%;
   height: clamp(300px, 45vh, 460px);
   border: 0;
   filter: saturate(0.9);
}