/* =============================================
   NOI-NOI PAINTS — index.css
   Colors: White | Bright Teal (#20B2AA) | Silver (#C0C8C8)
   Fonts: EBGaramond (headings) | EBGaramond (body)
   ============================================= */

/* Regular font */
@font-face {
  font-family: 'EBGaramond';
  src: url('/assets/fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Italic font */
@font-face {
  font-family: 'EBGaramond';
  src: url('/assets/css/fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'EBGaramond';
}

:root {
  --teal:    #20B2AA;
  --teal-dk: #178a83;
  --silver:  #C0C8C8;
  --silver-lt: #e8ecec;
  --white:   #ffffff;
  --dark:    #2a2a2a;
  --mid:     #555;
  --radius:  8px;
  --shadow:  0 4px 18px rgba(0,0,0,0.08);
  --transition: 0.25s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'EBGaramond';
  font-weight: 400;
  color: var(--dark);
  background: var(--white);
  line-height: 1.7;
}

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

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dk); }

/* ---- TYPOGRAPHY ---- */
h1, h2, h3 { font-family: 'EBGaramond', serif; }

.section-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--dark);
  margin-bottom: 0.5rem;
  text-align: center;
}
.section-title.left { text-align: left; }

.section-subtitle {
  text-align: center;
  color: var(--mid);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
}

/* ---- LAYOUT ---- */
.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section { padding: 5rem 0; }
.section-alt { background: var(--silver-lt); }

/* ---- BUTTONS ---- */
.btn-primary {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-family: 'EBGaramond', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover {
  background: var(--teal-dk);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--teal);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid var(--teal);
  cursor: pointer;
  transition: all var(--transition);
}
.btn-secondary:hover {
  background: var(--teal);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-white {
  display: inline-block;
  background: var(--white);
  color: var(--teal);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}
.btn-white:hover { background: var(--silver-lt); }

/* =============================================
   HEADER
   ============================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 2px solid var(--silver);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand group — logo only, never shrinks */
.header-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ============================================= 
   WEBSITE LOGO — circular
   ============================================= */
.logo img {
  height: 52px;
  width: 52px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Site name — sits between logo and nav via flex order.
   padding: 0 1.5rem creates breathing room on both sides.
   Never hides on any screen size. */
.header-site-name {
  font-family: 'EBGaramond', serif;
  font-style: italic;
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0 1.25rem;
}

/* Nav — never shrinks, sits right of the name */
.main-nav {
  flex-shrink: 0;
}


.main-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.main-nav a {
  padding: 0.45rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dark);
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}
.main-nav a:hover { color: var(--teal); background: var(--silver-lt); }

.etsy-btn {
  background: var(--teal) !important;
  color: var(--white) !important;
  padding: 0.45rem 1rem !important;
}
.etsy-btn:hover { background: var(--teal-dk) !important; }

/* Hamburger */
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--dark);
  line-height: 1;
}

/* Mobile Nav */
.mobile-nav {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--silver);
}
.mobile-nav.open { display: block; }
.mobile-nav ul {
  list-style: none;
  padding: 0.5rem 0 1rem;
}
.mobile-nav li a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  color: var(--dark);
  transition: color var(--transition);
}
.mobile-nav li a:hover { color: var(--teal); }

/* =============================================
   HERO
   ============================================= */
.hero {
  min-height: 480px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dk) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
}

.hero-content h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--white);
  margin-bottom: 1rem;
}
.hero-content p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.hero-content .btn-primary {
  background: var(--white);
  color: var(--teal);
  font-size: 1rem;
}
.hero-content .btn-primary:hover {
  background: var(--silver-lt);
  color: var(--teal-dk);
}

/* =============================================
   GALLERY (original grid styles — kept intact)
   ============================================= */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.gallery-item {
  flex: 1 1 calc(33.333% - 1.25rem);
  min-width: 200px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--silver-lt);
}

.gallery-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.gallery-item:hover img { transform: scale(1.04); }

/* =============================================
   ABOUT
   ============================================= */
.about-flex {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  flex-wrap: wrap;
}

.about-image {
  flex: 0 0 340px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about-image img { 
  width: 100%; 
  height: 325px; 
  object-fit: cover;
  border-radius: 50%;
} 

.about-text {
  flex: 1 1 300px;
}
.about-text p { margin-bottom: 1rem; color: var(--mid); }
.about-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* =============================================
   FAQ
   ============================================= */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'EBGaramond', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.faq-question:hover { background: var(--silver-lt); color: var(--teal); }
.faq-item.open .faq-question { background: var(--teal); color: var(--white); }

.faq-icon {
  font-size: 1.3rem;
  font-weight: 300;
  transition: transform var(--transition);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 1.25rem;
}
.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 1rem 1.25rem;
}
.faq-answer p { color: var(--mid); }

/* =============================================
   TESTIMONIALS (original card styles — kept intact)
   ============================================= */
.testimonials-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.testimonial-card {
  flex: 1 1 calc(33.333% - 1.5rem);
  min-width: 220px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--teal);
}

.testimonial-text {
  font-style: italic;
  color: var(--mid);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.testimonial-author {
  font-weight: 700;
  color: var(--teal);
  font-size: 0.9rem;
}

/* contact-flex, contact-info, and contact-form layout
   is fully handled in the NEW STYLES section below */
.contact-label { font-weight: 700; color: var(--teal); min-width: 72px; }

.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.contact-list li { display: flex; align-items: center; gap: 0.5rem; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}
.form-group label { font-weight: 700; font-size: 0.88rem; color: var(--dark); }
.form-group input,
.form-group textarea {
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--silver);
  border-radius: var(--radius);
  font-family: 'EBGaramond', sans-serif;
  font-size: 0.95rem;
  background: var(--white);
  transition: border-color var(--transition);
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--teal);
}

/* =============================================
   NEWSLETTER BAR
   ============================================= */
.newsletter-bar {
  background: var(--teal);
  padding: 3rem 0;
}

.newsletter-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.newsletter-bar h3 {
  font-family: 'EBGaramond', serif;
  color: var(--white);
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
}
.newsletter-bar p { color: rgba(255,255,255,0.82); font-size: 0.95rem; }

.newsletter-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.newsletter-form input {
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius);
  border: none;
  font-size: 0.95rem;
  font-family: 'EBGaramond', sans-serif;
  min-width: 220px;
}
.newsletter-form input:focus { outline: 2px solid var(--white); }

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: var(--dark);
  color: var(--silver);
  padding: 3rem 0 2rem;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.footer-logo {
  font-family: 'EBGaramond', serif;
  font-size: 1.6rem;
  color: var(--white);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
.footer-nav a {
  color: var(--silver);
  font-size: 0.9rem;
  font-weight: 700;
  transition: color var(--transition);
}
.footer-nav a:hover { color: var(--teal); }

.footer-social {
  display: flex;
  gap: 1.25rem;
}
.footer-social a {
  color: var(--teal);
  font-weight: 700;
  font-size: 0.9rem;
}
.footer-social a:hover { color: var(--white); }

.footer-copy { font-size: 0.8rem; color: #888; }

/* =============================================
   RESPONSIVE (original)
   ============================================= */
/* Nav collapses to hamburger at 750px — approximately 50% of
   a standard 1500px desktop screen. Prevents any nav clipping. */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .hamburger { display: block; }

  .gallery-item { flex: 1 1 calc(50% - 1.25rem); }
  .testimonial-card { flex: 1 1 100%; }

  .about-flex { flex-direction: column; }
  .about-image { flex: none; width: 100%; }
  .about-image img { height: 280px; }

  .contact-flex { flex-direction: column; }

  .newsletter-flex { flex-direction: column; text-align: center; }
  .newsletter-form { justify-content: center; }
}

@media (max-width: 480px) {
  .gallery-item { flex: 1 1 100%; }
  .gallery-item img { height: 220px; }
}


/* ==============================================
   NEW STYLES — added per client evaluation notes
   ============================================== */


/* ----------------------------------------------
   FEATURED — MOBILE vs DESKTOP visibility
---------------------------------------------- */
.gallery-mobile  { display: flex; }
.gallery-desktop { display: none; }

@media (min-width: 769px) {
  .gallery-mobile  { display: none; }
  .gallery-desktop { display: block; }
}

/* Mobile gallery: single column on phones, 2-col on tablets.
   .gallery-item inherits flex: 1 1 calc(33.333%) from the base
   .gallery-item rule, which causes 3-column layout on wider phones.
   Override here to force sensible stacking at all mobile sizes. */
@media (max-width: 768px) {
  .gallery-mobile {
    flex-direction: column;
    gap: 1rem;
  }
  .gallery-mobile .gallery-item {
    flex: none;
    width: 100%;
    min-width: 0;
  }
  .gallery-mobile .gallery-item img {
    height: 280px;
    object-fit: cover;
  }
  .gallery-mobile .gallery-qr-card {
    background: var(--silver-lt);
    padding: 2rem 1rem;
  }
  .gallery-mobile .gallery-qr-card img {
    height: 220px !important;
    object-fit: contain;
  }
}


/* ----------------------------------------------
   QR CODE CARD — mobile stacked layout
---------------------------------------------- */
.gallery-qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  text-align: center;
}
.gallery-qr-card img {
  height: 280px !important;
  width: auto;
  object-fit: contain;
}
.qr-caption { margin-top: 0.75rem; }
.qr-caption p {
  font-weight: 700;
  color: var(--dark);
  font-size: 0.95rem;
  margin: 0 0 0.2rem;
}
.qr-caption small { color: var(--mid); font-size: 0.82rem; }


/* ----------------------------------------------
   DESKTOP GALLERY SLIDER

   .gallery-desktop-outer
     flex row: [arrow] [track-wrap] [arrow]
     This is NOT overflow:hidden, so arrows are
     fully visible and clickable on both sides.

   .gallery-track-wrap
     flex:1 — takes all space between the arrows.
     overflow:hidden — clips slides, not the arrows.

   .gallery-track
     flex row of slides, moved by translateX in JS.

   .gallery-arrow
     Normal flex children (not absolutely positioned),
     so they are always visible and receive click events.

   .gallery-dots
     Centered row below .gallery-desktop-outer.
---------------------------------------------- */

/* Outer flex row that holds [arrow] [image] [arrow] */
.gallery-desktop-outer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Image clip area — grows to fill space between arrows */
.gallery-track-wrap {
  flex: 1;           /* fills the space between the two arrows */
  overflow: hidden;  /* clips slides only — arrows are outside this */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;      /* prevents flex blowout */
}

/* Moving strip */
.gallery-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Individual slide — 100% of the clip container width */
.gallery-slide {
  min-width: 100%;
  background: #1a1a1a;    /* dark neutral — frames artwork cleanly */
  overflow: hidden;
  border-radius: var(--radius);
}
.gallery-slide img {
  width: 100%;
  height: 480px;          /* slightly taller to give portrait pieces more room */
  object-fit: contain;    /* show full artwork — no cropping */
  display: block;
}

/* QR slide — centered flex layout */
.gallery-slide-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 480px;
  background: var(--silver-lt);
  gap: 0.75rem;
  text-align: center;
}
.gallery-slide-qr > a {
  display: block;
}
.gallery-slide-qr img {
  height: 320px !important;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
  margin: 0 auto;
}
/* Split caption row: left text + right text */
.qr-caption-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.qr-caption-left {
  font-weight: 700;
  color: var(--dark);
  font-size: 0.9rem;
}
.qr-caption-right {
  color: var(--mid);
  font-size: 0.85rem;
}
.qr-caption-right a {
  color: var(--teal);
  text-decoration: none;
}
.qr-caption-right a:hover { text-decoration: underline; }

/* Arrow buttons — flex children of .gallery-desktop-outer,
   always visible, never clipped, always clickable */
.gallery-arrow {
  flex-shrink: 0;
  background: var(--white);
  border: 1.5px solid var(--silver);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background var(--transition), box-shadow var(--transition);
  color: var(--dark);
  z-index: 2;
}
.gallery-arrow:hover {
  background: var(--silver-lt);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

/* Dot row — centered below the outer flex row */
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0.85rem;
}

.gallery-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--silver);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.gallery-dot.active {
  background: var(--teal);
  transform: scale(1.3);
}


/* ----------------------------------------------
   ABOUT — BUTTON TOOLTIPS (unchanged)
---------------------------------------------- */
.btn-tooltip {
  position: relative;
  display: inline-block;
}
.btn-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  color: var(--white);
  font-size: 0.78rem;
  font-family: 'EBGaramond', sans-serif;
  padding: 0.35rem 0.8rem;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 20;
}
.btn-tooltip:hover::after { opacity: 1; }


/* ----------------------------------------------
   TESTIMONIALS
   Two completely separate implementations:
     Desktop (>750px): horizontal CSS scroll strip
     Mobile  (≤750px): crossfade — one card at a time

   HOW TO ADD A TESTIMONIAL:
     Desktop: copy a .testimonial-card into all 4 sets in HTML,
       update --t-set (card_count × 360px) and --t-dur (new_px ÷ 55).
     Mobile:  copy a .t-fade-card block in HTML, add a new
       @keyframes t-fade-N rule, update --tf-slot and --tf-total
       (see mobile section below).
---------------------------------------------- */

/* ── DESKTOP SCROLL ── */
:root {
  --t-set: 1080px;   /* 3 cards × (320px + 40px gap) */
  --t-dur: 19.6s;    /* 1080 ÷ 55px/s                */
}

.testimonials-runner {
  display: block;
  width: 100%;
  padding: 0.75rem 0 1.5rem;
}

.testimonials-mask {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%, black 8%, black 92%, transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%, black 8%, black 92%, transparent 100%
  );
}

.testimonials-track {
  display: flex;
  gap: 40px;
  animation: testimonialsScroll var(--t-dur) linear infinite;
  will-change: transform;
  pointer-events: none;
}

.testimonials-track .testimonial-card {
  flex: 0 0 320px;
}

@keyframes testimonialsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--t-set))); }
}

/* ── MOBILE FADE ── */
/*
   Cycle math for 3 cards, 15s total:
     --tf-slot  = time each card is "on stage" = 15s ÷ 3 = 5s
     --tf-total = full cycle duration = 15s

   Each card's keyframe:
     0%          → opacity 0  (invisible, waiting)
     fade-in  %  → opacity 1  (1s fade in  = 1/15 ≈ 6.67%)
     hold     %  → opacity 1  (3s hold     = ends at 4/15 ≈ 26.67%)
     fade-out %  → opacity 0  (1s fade out = ends at 5/15 ≈ 33.33%)
     100%        → opacity 0  (invisible for remaining cycle)

   Card offsets (animation-delay):
     Card 1: 0s   (starts immediately)
     Card 2: 5s   (starts after card 1's slot)
     Card 3: 10s  (starts after card 2's slot)

   HOW TO ADD A 4TH CARD:
     1. Add .t-fade-4 block in HTML.
     2. Change --tf-total to 20s, --tf-slot to 5s.
     3. Recalculate % values: 1/20=5%, 4/20=20%, 5/20=25%.
     4. Copy the @keyframes pattern for t-fade-4 with delay 15s.
*/
:root {
  --tf-total: 15s;
}

/* Hidden by default on desktop — shown only on mobile */
.testimonials-fade {
  display: none;
}

/* ── Show/hide by breakpoint ── */
@media (max-width: 960px) {
  .testimonials-runner { display: none; }  /* hide desktop scroller */
  .testimonials-fade {                      /* show mobile fader     */
    display: block;
    position: relative;
    width: 100%;
    /* height = tallest card; enough for 3 lines of text */
    height: 200px;
    margin: 0.75rem 0 1.5rem;
  }
}

/* Each fade card sits on top of each other */
.t-fade-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem;
  background: #fff;
  border-radius: 8px;
  border-top: 4px solid var(--teal);
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  opacity: 0;
  animation: var(--tf-total) linear infinite;
  will-change: opacity;
}

/* Card 1 — visible first, no delay */
.t-fade-1 {
  animation-name: t-fade-1;
  animation-delay: 0s;
}
/* Card 2 — starts after 5s */
.t-fade-2 {
  animation-name: t-fade-2;
  animation-delay: 5s;
}
/* Card 3 — starts after 10s */
.t-fade-3 {
  animation-name: t-fade-3;
  animation-delay: 10s;
}

/*
  Each keyframe: fade in over 1s, hold 3s, fade out over 1s,
  then stay invisible for the remaining 10s of the 15s cycle.
  Percentages: 0%=0s  6.67%=1s  26.67%=4s  33.33%=5s  100%=15s
*/
@keyframes t-fade-1 {
  0%      { opacity: 0; }
  6.67%   { opacity: 1; }
  26.67%  { opacity: 1; }
  33.33%  { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes t-fade-2 {
  0%      { opacity: 0; }
  6.67%   { opacity: 1; }
  26.67%  { opacity: 1; }
  33.33%  { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes t-fade-3 {
  0%      { opacity: 0; }
  6.67%   { opacity: 1; }
  26.67%  { opacity: 1; }
  33.33%  { opacity: 0; }
  100%    { opacity: 0; }
}


/* ----------------------------------------------
   CONTACT — layout

   Three boxes, two columns:
     Left column (.contact-left-col):
       Top:    .contact-info  (email/etsy/instagram links)
       Bottom: .promo-box     (coupon + promotions)
     Right column:
       Full height: .contact-form (Send a Message)

   Both columns are equal flex shares (flex: 1 1 0)
   so they stay the same width regardless of content.
---------------------------------------------- */
.contact-flex {
  display: flex;
  gap: 2rem;
  padding-top: 1rem;
}

/* LEFT COLUMN */
.contact-left-col {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* RIGHT COLUMN (FORM) */
.contact-form {
  width: 50%;
  background: var(--silver-lt);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.contact-form h3 {
  font-family: 'EBGaramond', serif;
  margin-bottom: 1.5rem;
  color: var(--dark);
}

/* CONTACT INFO BOX */
.contact-info {
  background: var(--silver-lt);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}

/* PROMO BOX */
.promo-box {
  background: var(--silver-lt);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}

.promo-box h3 {
  font-family: 'EBGaramond', serif;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.promo-desc {
  color: var(--mid);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* PROMO DISPLAY */
.promo-current {
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.promo-current-label {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--teal);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.promo-current-value {
  color: var(--mid);
  font-size: 0.88rem;
  font-style: italic;
}

/* ==============================================
   MOBILE (STACK CLEANLY)
   ============================================== */
@media (max-width: 768px) {
  .contact-flex {
    flex-direction: column;
  }

  .contact-left-col,
  .contact-form {
    width: 100%;
  }
}

/* ----------------------------------------------
   COUPON FIELD — inside Send a Message form
---------------------------------------------- */
.coupon-group {
  border-top: 1px solid var(--silver);
  padding-top: 1rem;
  margin-top: 0.25rem;
}

.coupon-optional {
  font-weight: 400;
  color: var(--mid);
  font-size: 0.82rem;
}

.coupon-input-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.35rem;
}
.coupon-input-row input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--silver);
  border-radius: var(--radius);
  font-family: 'EBGaramond', sans-serif;
  font-size: 0.9rem;
  background: var(--white);
  transition: border-color var(--transition);
}
.coupon-input-row input:focus  { outline: none; border-color: var(--teal); }
.coupon-input-row input:disabled {
  background: var(--silver-lt);
  color: var(--mid);
  cursor: not-allowed;
}
.coupon-apply-btn {
  white-space: nowrap;
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
}

.coupon-feedback {
  font-size: 0.84rem;
  margin-top: 0.4rem;
  min-height: 1.2em;
}
.coupon-success { color: #2e7d32; }
.coupon-error   { color: #c62828; }

.form-status.warning { color: #b45309; }

/* =============================================
   CONTACT FORM — field errors & status
   Add these rules to index.css (or they are
   already present if you used the full file).
   ============================================= */

/* Inline field error text — hidden by default, shown via JS */
.field-error {
  display: none;          /* hidden until JS adds .visible */
  color: #c62828;
  font-size: 0.82rem;
  margin-top: 0.2rem;
}
.field-error.visible {
  display: block;
}

/* Form status bar — shown after send attempt */
.form-status {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 700;
  display: none;          /* hidden until JS sets a type class */
}
.form-status.success {
  display: block;
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.form-status.error {
  display: block;
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}
.form-status.warning {
  display: block;
  background: #fff8e1;
  color: #b45309;
  border: 1px solid #ffe082;
}