/* ===============================
   Hero
=============================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.hero .hero-gif { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-content { position:relative; text-align:center; z-index:5; padding:1rem; }

.cta{
  background:#f5f5f7; color:#000;
  padding:1.25rem 2.5rem; border:0; border-radius:0;
  text-transform:uppercase; font-weight:bold; font-size:1.5rem;
  text-decoration:none; display:inline-block;
  transition: background-color .25s ease, color .25s ease;
}
@media (hover: hover) and (pointer: fine){
  .cta:hover{ background:#c4a000; color:#fff; }
}
@media (hover: none), (pointer: coarse){
  .cta{ -webkit-tap-highlight-color: transparent; }
  .cta:hover{ background:#fff; color:#000; }
  .cta:active{ background:#c4a000; color:#fff; }
}
.cta:focus-visible{ outline:2px solid #c4a000; outline-offset:2px; }
.cta:visited{ background:#f5f5f7; color:#000; }
.cta:focus{ outline:none; }
.cta:active{ transform: translateY(1px); }

@media (max-width:900px){ .hero{ min-height:100vh; } }

/* Video fill + color treatment */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 45%;
  pointer-events:none;
  filter: contrast(1.08) brightness(.92) saturate(1.25) sepia(2.0) hue-rotate(12deg);
  transform: translateZ(0);
  opacity:0; transition:opacity .4s ease;
}
.hero-video.is-ready{ opacity:1; }
@keyframes heroFailSafe { to { opacity:1; } }
.hero-video{ animation: heroFailSafe 2s ease 2s forwards; }

/* Orange wash + vignette */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:#ecaf2a; opacity:.8; mix-blend-mode:overlay;
  pointer-events:none; z-index:1;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 50% 60%, #B5651D 0%, #B5651D 60%, #B5651D 100%);
  opacity:.28; mix-blend-mode:soft-light; z-index:2; pointer-events:none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-video { animation:none; filter:none; }
}

/* ===============================
   Intro
=============================== */
section{ padding:4rem 0; text-align:center; }

.intro{
  background:#f5f5f7; color:#000; text-align:center; padding:6rem 2rem;
}
.intro h2{
  font-family:var(--font-heading); text-transform:uppercase;
  letter-spacing:1px; font-size:2.5rem; font-weight:600; margin-bottom:1.5rem;
}
.intro p{ font-size:1.15rem; line-height:1.8; max-width:1100px; margin:0 auto; }
@media (min-width:1024px){
  .intro h2{ font-size:3.5rem; }
  .intro p{ font-size:1.25rem; max-width:1200px; }
}
/* Hide the decorative comma on small screens */
@media (max-width:640px){
  .mobile-hide-comma{ display:none; }
}

/* ===============================
   Products
=============================== */
.product-section{
  display:flex; align-items:center; justify-content:center;
  gap:40px; margin-bottom:80px;
}
.product-section img{ max-width:300px; height:auto; }
.product-text{ max-width:500px; text-align:center; }
.product-text h2{
  font-family:var(--font-heading); text-transform:uppercase;
  letter-spacing:1px; font-size:2rem; margin-bottom:15px;
}
.product-text p{ font-size:1rem; line-height:1.6; }
.product-section.reverse{ flex-direction:row-reverse; }

@media (min-width:1024px){
  .product-section img{ max-width:450px; }
  .product-text{ max-width:650px; }
  .product-text h2{ font-size:3rem; }
  .product-text p{ font-size:1.25rem; line-height:1.9; }
}

.flower-img{ max-width:420px; }
@media (min-width:1024px){ .flower-img{ max-width:520px; } }
@media (max-width:768px){ .flower-img{ max-width:80vw; } }

/* --- Mobile layout: Title → Image → Body --- */
@media (max-width:768px){
  .product-section, .product-section.reverse{
    display:grid; grid-template-columns:1fr;
    grid-template-areas: "title" "image" "body";
    gap:12px; justify-items:center; text-align:center;
  }
  .product-section .product-text{ display:contents; }
  .product-section .product-text h2{ grid-area:title; margin:0 0 .25rem; }
  .product-section img{ grid-area:image; max-width:min(80vw, 520px); height:auto; }
  .product-section .product-text p{ grid-area:body; margin:0; }
}

/* ===============================
   Grid / Tiles
=============================== */
.grid-container{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:0; width:100%; height:100vh;
  background:#000; color:#000;
}
.tile{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; margin:0; padding:0; line-height:0;
  opacity:0; transform:translateY(30px);
  transition:opacity .6s ease, transform .6s ease;
}
.tile.visible{ opacity:1; transform:translateY(0); }

.tile img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transition: transform .45s ease, box-shadow .45s ease, filter .45s ease;
  will-change: transform;
}
.tile:hover img{ transform:scale(1.02); box-shadow:0 8px 20px rgba(0,0,0,.25); }

.tile .image-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); z-index:1; }
.tile .overlay-text{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#f5f5f7; font-family:var(--font-heading);
  font-size:clamp(1rem,4.8vw,2rem); line-height:1.12; letter-spacing:.06em;
  font-variant-ligatures:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  text-transform:uppercase; text-shadow:2px 2px 8px rgba(0,0,0,.8);
  z-index:2; opacity:1; max-width:90vw; white-space:normal; text-align:center;
}
@media (min-width:1024px){ .tile .overlay-text{ font-size:3rem; } }

.tile-1{ grid-column:1; grid-row:1; }
.tile-2{ grid-column:2; grid-row:1; }
.tile-5{ grid-column:3; grid-row:1 / span 2; }
.tile-3{ grid-column:1; grid-row:2; }
.tile-4{ grid-column:2; grid-row:2; }

/* Gold-outline captions (transparent fill) */
.tile-1 .overlay-text,
.tile-4 .overlay-text{
  color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.75px #ffcd2b;
  text-shadow:none; paint-order:stroke fill;
}
@media (min-width:1024px){
  .tile-1 .overlay-text, .tile-4 .overlay-text{ -webkit-text-stroke-width:2px; }
}
@supports not (-webkit-text-stroke: 1px #000){
  .tile-1 .overlay-text, .tile-4 .overlay-text{
    color:transparent;
    text-shadow:
      1px 0 0 #ac860a,-1px 0 0 #ac860a,0 1px 0 #ac860a,0 -1px 0 #ac860a,
      1px 1px 0 #ac860a,-1px 1px 0 #ac860a,1px -1px 0 #ac860a,-1px -1px 0 #ac860a,
      2px 0 0 #ac860a,-2px 0 0 #ac860a,0 2px 0 #ac860a,0 -2px 0 #ac860a;
  }
}

/* Show more of original photo on specific tiles */
.tile-5 img,
.tile-3 img{ object-fit:cover; object-position:50% 20%; background:#000; }

/* Stronger hover on tile-2 and tile-3 */
.tile-2:hover img,
.tile-3:hover img{
  transform:scale(1.08);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  filter:brightness(1.03);
}

/* Prevent odd hover on touch */
@media (hover:none){
  .tile:hover img, .tile-2:hover img, .tile-3:hover img{
    transform:none; box-shadow:none; filter:none;
  }
}

/* Tablet & down: 2 columns, tile-5 spans full row */
@media (max-width:1024px){
  .grid-container{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "t1 t2"
      "t5 t5"
      "t3 t4";
    gap:0; height:auto; grid-auto-rows:40vw;
  }
  .tile{ aspect-ratio:1/1; overflow:hidden; }
  .tile-5{ aspect-ratio:16/9; }

  .tile-1{ grid-area:t1 !important; }
  .tile-2{ grid-area:t2 !important; }
  .tile-5{ grid-area:t5 !important; }
  .tile-3{ grid-area:t3 !important; }
  .tile-4{ grid-area:t4 !important; }

  .tile img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
}

/* Phones: one-column. Hide tiles 1 & 4. Order: 2 → 3 → 5 (bottom) */
@media (max-width:600px){
  .tile-1, .tile-4{ display:none !important; }

  .grid-container{
    display:grid !important;
    grid-template-columns:1fr;
    grid-template-areas:"t2" "t3" "t5";
    grid-auto-rows:auto; gap:0; height:auto;
  }
  .tile-2{ grid-area:t2 !important; }
  .tile-3{ grid-area:t3 !important; }
  .tile-5{ grid-area:t5 !important; aspect-ratio:16/9; }

  .tile{ aspect-ratio:auto; }
  .tile img{ width:100%; height:auto; object-fit:cover; display:block; }
}

/* === Tile-2: blurred backfill (removes black bars) === */
.tile-2{
  position: relative;
  overflow: hidden;
  /* IMPORTANT: match the image used inside tile-2 */
  --tile2-bg: url("../media/images/top-image.jpg");
}
.tile-2::before{
  content:"";
  position:absolute; inset:-12%;
  background: center / cover no-repeat var(--tile2-bg);
  filter: blur(28px);
  transform: scale(1.08);
  opacity:.55;
  z-index:0; pointer-events:none;
}
.tile-2 img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  display:block;
}
/* On phones, show the whole photo with blurred fill behind */
@media (max-width:600px){
  .tile-2 img{ height:auto; object-fit:contain; }
}

/* ===============================
   Footer & Contact spacing
=============================== */
.contact-footer-wrap{ margin-top:35rem; }

/* Match the select to the "underline" inputs */
.contact select{
  width: 100%;
  border: 0;
  border-bottom: 1px solid #fff;
  background: transparent;
  color: #fff;
  font: inherit;
  line-height: 2.25rem;   /* same visual height as inputs */
  height: 2.25rem;
  padding: 0 1.75rem 0 0; /* room for custom caret on the right */
  appearance: none;       /* remove native arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Custom caret (white chevron) */
.contact select{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'>\
    <path d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>");
  background-repeat: no-repeat;
  background-position: right .35rem center;
  background-size: 12px 8px;
}

/* Focus state to match the inputs */
.contact input:focus,
.contact textarea:focus,
.contact select:focus{
  outline: none;
  border-bottom-color: #c4a000;
}

/* Make sure dropdown menu items are readable */
.contact select option{
  color: #fff;            /* the dropdown list itself */
  background: #000;
}

/* Optional: style the disabled placeholder option */
.contact select option[disabled]{
  color: #999;
}


/* ===============================
   Typographic roles (consistency)
=============================== */
html, body,
nav a, .cta, button, input, select, textarea, label,
footer, .product-text p, .modal, .btn{
  font-family:var(--font-body) !important;
}
h1, h2, h3,
.hero-content,
.intro h2,
.product-text h2,
.tile .overlay-text,
.contact h2,
footer strong,
.modal h2{
  font-family:var(--font-heading) !important;
}

/* ===== Footer social: stacked + centered (match About) ===== */
footer{ text-align:center; }
footer p{ margin:0; }
footer p:first-of-type{ margin-top:-1rem; margin-bottom:-1rem; }
footer p:first-of-type strong{
  display:inline-flex; flex-direction:column; align-items:center; gap:0;
  font-family:var(--font-heading) !important;
  font-size:clamp(1rem, 1vw, 1rem);
  letter-spacing:.10em; line-height:1.05;
}
footer .instagram-icon{
  width:clamp(20px, 2.2vw, 24px); height:auto;
  margin:0; vertical-align:middle; transform:translateY(1px);
  filter:brightness(0) invert(1);
}
footer p:first-of-type strong a:hover{ color:#c4a000; }
footer p:first-of-type strong a:hover .instagram-icon{ transform:translateY(1px) scale(1.05); }
footer p:last-of-type{ margin-top:.75rem; font-size:clamp(.85rem, 1.2vw, .95rem); line-height:1.35; }