/* ============================================================
   Azeta Design LLC — Site Stylesheet
   European kitchen & bath cabinetry · Mesa, AZ
   ============================================================ */

:root {
  --cream:      #F7F4EF;
  --cream-2:    #EFEAE1;
  --charcoal:   #1C1B18;
  --ink:        #2B2926;
  --muted:      #6B6560;
  --line:       #DED7CC;
  --greige:     #B7A99A;
  --brass:      #A97C50;
  --brass-dk:   #8A6540;
  --white:      #FFFFFF;

  --serif: "Cormorant Garamond", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 18px;
}

.lead { font-size: 20px; color: var(--muted); font-weight: 400; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--cream);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: transparent; color: var(--charcoal); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--charcoal); }
.btn--ghost:hover { background: var(--charcoal); color: var(--cream); }
.btn--light { border-color: var(--cream); background: var(--cream); color: var(--charcoal); }
.btn--light:hover { background: transparent; color: var(--cream); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,244,239,0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand__mark {
  font-family: var(--serif);
  font-size: 27px;
  letter-spacing: 0.32em;
  font-weight: 600;
  color: var(--charcoal);
  padding-left: 0.32em;
}
.brand__sub {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
}
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links a {
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink);
  position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--brass); transition: width .3s var(--ease);
}
.nav__links a:hover::after, .nav__links a.active::after { width: 100%; }
.nav__links a.active { color: var(--charcoal); }
.nav__cta { margin-left: 6px; }
.nav__cta .btn { padding: 11px 22px; }

.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 34px; height: 34px; padding: 0;
}
.nav__toggle span { display: block; height: 1.6px; background: var(--charcoal); margin: 6px 0; transition: .3s var(--ease); }

/* ---------- Hero ----------
   Headline block, then the photograph full-bleed across the viewport
   at its own proportions. The picture carries the page. */
.hero { position: relative; background: var(--cream); padding-top: 40px; }
.hero__intro { max-width: 860px; padding: 60px 0 64px; }
/* Full-bleed hero band. Anchored low so the ceiling and spotlights fall
   out of shot and the cabinet run fills the width. Adjust object-position
   if you swap the photo: lower % = more ceiling, higher % = more floor. */
.hero__full {
  position: relative; margin: 0;
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
  aspect-ratio: 21 / 9; max-height: 76vh; overflow: hidden;
}
.hero__full img { width: 100%; height: 100%; object-fit: cover; object-position: center 66%; display: block; }
.hero__grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  align-items: center; gap: 50px; width: 100%;
}
.hero__content { padding: 90px 0; max-width: 560px; }
.hero h1 { font-size: clamp(44px, 6vw, 82px); margin-bottom: 24px; }
.hero h1 em { font-style: italic; color: var(--brass); }
.hero__content .lead { max-width: 480px; margin-bottom: 34px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__visual { position: relative; height: auto; border-radius: 2px; }
.hero__visual .figure { width: 100%; height: auto; }

/* ── Photography ──────────────────────────────────────────────────
   3:2 matches the source files exactly, so the split images are not
   cropped at all. */
.split__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 62%;
}
/* Cards are the one exception — a 3-up row needs matching heights,
   so these crop to a gentle landscape band. */
.card__media { height: 260px; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Decorative photographic panels built from gradients (swap for real photos) */
.photo {
  position: relative; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  background-color: var(--cream-2);
}
.photo--kitchen  { background-image: var(--img-kitchen); }
.photo--bath     { background-image: var(--img-bath); }
.photo--detail   { background-image: var(--img-detail); }
.photo--factory  { background-image: var(--img-factory); }
.photo--wood     { background-image: var(--img-wood); }

/* Gradient stand-ins so the site looks finished with zero external assets.
   Replace the url() values in the :root-level custom props below with photos. */
:root {
  --img-kitchen: linear-gradient(135deg,#3a3833 0%,#57534b 45%,#8c8375 100%);
  --img-bath:    linear-gradient(140deg,#2f3033 0%,#4a4c50 50%,#9aa0a3 100%);
  --img-detail:  linear-gradient(120deg,#5b4a38 0%,#8a6c4c 55%,#c2a887 100%);
  --img-factory: linear-gradient(135deg,#26251f 0%,#3f3d35 60%,#6f695c 100%);
  --img-wood:    linear-gradient(115deg,#6d5334 0%,#93714a 50%,#b89768 100%);
}

/* Thin brass frame accent used over hero visual */
/* Sits on the full-bleed hero band but lines up with the text column above it. */
.hero__badge {
  position: absolute; bottom: 32px;
  left: max(28px, calc((100vw - var(--wrap)) / 2 + 28px));
  background: rgba(28,27,24,0.72); color: var(--cream);
  backdrop-filter: blur(4px);
  padding: 18px 22px; max-width: 260px;
}
.hero__badge strong { font-family: var(--serif); font-size: 30px; display: block; line-height: 1; }
.hero__badge span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--greige); }

/* ---------- Marquee / trust strip ---------- */
.strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--cream-2);
}
.strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; padding: 26px 0; flex-wrap: wrap;
}
.strip__item { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.strip__item svg { width: 22px; height: 22px; stroke: var(--brass); fill: none; stroke-width: 1.4; }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 110px 0; }
.section--tight { padding: 84px 0; }
.section--dark { background: var(--charcoal); color: var(--cream); }
.section--dark h1,.section--dark h2,.section--dark h3 { color: var(--cream); }
.section--dark .lead,.section--dark p { color: #C9C3B8; }
.section--alt { background: var(--cream-2); }

.section__head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.section__head.left { margin-left: 0; text-align: left; }
.section__head h2 { font-size: clamp(34px, 4.4vw, 54px); }

/* Two-column feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; }
.split__body h2 { font-size: clamp(30px, 3.6vw, 46px); }
.stat-row { display: flex; gap: 46px; margin-top: 30px; flex-wrap: wrap; }
.stat b { font-family: var(--serif); font-size: 44px; color: var(--brass); display: block; line-height: 1; }
.stat span { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card {
  background: var(--white); border: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -28px rgba(28,27,24,.4); }
.card__media { height: 260px; }
.card__body { padding: 30px 28px 34px; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { font-size: 27px; }
.card__body p { color: var(--muted); font-size: 15.5px; flex: 1; }
.card__link {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brass); display: inline-flex; gap: 8px; align-items: center;
  margin-top: 12px;
}
.card__link span { transition: transform .3s var(--ease); }
.card:hover .card__link span { transform: translateX(5px); }

/* ---------- Values grid ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.value { background: var(--cream); padding: 40px 34px; }
.section--dark .values { background: #34322c; border-color:#34322c; }
.section--dark .value { background: var(--charcoal); }
.value__num { font-family: var(--serif); font-size: 15px; color: var(--brass); letter-spacing: .1em; }
.value h3 { font-size: 23px; margin: 14px 0 10px; }
.value p { font-size: 15px; color: var(--muted); margin: 0; }
.section--dark .value p { color:#C9C3B8; }

/* ---------- Service area ---------- */
.areas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.chip {
  border: 1px solid var(--greige); color: var(--ink);
  padding: 10px 20px; border-radius: 40px; font-size: 14px; letter-spacing: .02em;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.section--dark .chip { border-color:#4a4740; color: var(--cream); }

/* ---------- CTA band ---------- */
.cta {
  background: var(--charcoal); color: var(--cream);
  padding: 96px 0; text-align: center;
}
.cta h2 { color: var(--cream); font-size: clamp(34px, 4.6vw, 58px); }
.cta p { color:#C9C3B8; max-width: 560px; margin: 0 auto 34px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.info-list { list-style: none; padding: 0; margin: 28px 0 0; }
.info-list li { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 1px solid var(--line); }
.info-list svg { width: 22px; height: 22px; stroke: var(--brass); fill: none; stroke-width: 1.4; flex: none; margin-top: 3px; }
.info-list b { display: block; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.info-list a, .info-list p { color: var(--ink); margin: 0; }

form.enquiry { background: var(--white); border: 1px solid var(--line); padding: 40px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--line); background: var(--cream);
  border-radius: 2px; transition: border-color .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); }
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- Map placeholder ---------- */
.map {
  /* Must be block: it's an <a>, and inline elements ignore height,
     which let the pin and label overflow onto the list above. */
  display: block;
  margin-top: 26px; height: 260px; border: 1px solid var(--line);
  background:
    linear-gradient(0deg, rgba(169,124,80,.05), rgba(169,124,80,.05)),
    repeating-linear-gradient(0deg, var(--cream-2) 0 39px, var(--line) 39px 40px),
    repeating-linear-gradient(90deg, var(--cream-2) 0 39px, var(--line) 39px 40px);
  position: relative; overflow: hidden;
}
.map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%); color: var(--brass); }
.map__pin svg { width: 34px; height: 34px; }
.map__label { position: absolute; left: 18px; bottom: 16px; background: var(--white); border: 1px solid var(--line); padding: 8px 14px; font-size: 13px; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero { padding: 92px 0 70px; border-bottom: 1px solid var(--line); background: var(--cream-2); }
.page-hero h1 { font-size: clamp(40px, 5.5vw, 72px); }
.page-hero .lead { max-width: 620px; }
.crumbs { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }

/* Full-bleed banner photo beneath a page hero */
.page-banner { height: 46vh; min-height: 300px; max-height: 560px; overflow: hidden; }
.page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crumbs a:hover { color: var(--brass); }

/* ---------- Gallery ---------- */
/* ── Gallery ──────────────────────────────────────────────────────
   Breaks out of the 1180px text column and runs wide, because the
   cabinetry is the product. Every frame is landscape and anchored
   low so ceilings and spotlights fall out of shot and the cabinet
   run fills the width. */
.gallery {
  width: min(1680px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.gallery > div { overflow: hidden; border-radius: 2px; background: var(--cream-2); }
.gallery > div img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 62%;
  transition: transform 1.1s var(--ease);
}
.gallery > div:hover img { transform: scale(1.03); }

/* One statement frame across the full width, the rest paired. */
.g-wide  { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.g-half,
.g-third { grid-column: span 1; aspect-ratio: 3 / 2; }
/* Portrait slot — for upright shots like a wardrobe or a narrow walk-in. */
.g-tall  { grid-column: span 1; aspect-ratio: 3 / 4; }

/* ---------- Spec list ---------- */
.specs { columns: 2; column-gap: 50px; margin-top: 10px; }
.specs li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--line); list-style: none; display: flex; gap: 12px; }
.specs { padding: 0; }
.specs li svg { width: 18px; height: 18px; stroke: var(--brass); fill:none; stroke-width:1.6; flex:none; margin-top:5px; }

/* ---------- Footer ---------- */
.site-footer { background: #16150F; color: #B7B0A4; padding: 74px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 { color: var(--cream); font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; }
.site-footer .brand__mark { color: var(--cream); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 12px; font-size: 14.5px; }
.site-footer a:hover { color: var(--brass); }
.footer-about p { font-size: 14.5px; max-width: 300px; margin-top: 18px; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  border-top: 1px solid #2c2a22; margin-top: 54px; padding-top: 26px; font-size: 13px; color: #78716A;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__content { padding: 70px 0 40px; }
  .hero__visual { margin-bottom: 40px; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split__media { order: 0; }
  .split__media { height: auto; }
  .cards, .values { grid-template-columns: 1fr; }
  .values { gap: 1px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .specs { columns: 1; }
}
@media (max-width: 700px) {
  /* One photo per row, each a wide cabinet band. */
  .gallery { grid-template-columns: 1fr; gap: 12px; }
  .g-wide, .g-half, .g-third, .g-tall { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .hero__full { aspect-ratio: 4 / 3; max-height: none; }
  .split__media { aspect-ratio: 3 / 2; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .site-header.open .nav__links {
    display: flex; position: absolute; top: 78px; left: 0; right: 0; flex-direction: column;
    background: var(--cream); border-bottom: 1px solid var(--line); padding: 20px 28px; gap: 18px;
  }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 76px 0; }
}