*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; color: #16252b; background: #fff; -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: inherit; }
input, textarea, button, select { font: inherit; }

@keyframes homat-spin { to { transform: rotate(360deg); } }
@keyframes homat-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes homat-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid #eceef0;
}
.header-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.logo-link { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo-wordmark {
  display: flex; flex-direction: column; line-height: 1;
}
.logo-text {
  display: flex; align-items: center;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 27px;
  color: #1A6E96; letter-spacing: -0.01em;
}
.logo-sub {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 9px; letter-spacing: 0.07em;
  color: #8a929a; margin-top: 3px;
}
.nav-desktop { display: flex; align-items: center; gap: 2px; }
.nav-link {
  text-decoration: none; color: #5d6b70; font-weight: 600;
  font-size: 0.92rem; padding: 9px 12px; white-space: nowrap;
  transition: color 0.15s;
}
.nav-link:hover, .nav-link.active { color: #1A6E96; }
.nav-link.active { color: #0B252F; }
.nav-cta {
  text-decoration: none; color: #fff; font-weight: 600;
  font-size: 0.9rem; padding: 11px 20px; border-radius: 5px;
  background: #0B252F; margin-left: 8px; white-space: nowrap;
  transition: background 0.15s;
}
.nav-cta:hover { background: #1A6E96; }
.nav-cta.active { background: #1A6E96; }
.burger-btn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid #e2e6e9;
  border-radius: 8px; background: #fff; cursor: pointer; padding: 0;
}
.mobile-panel {
  display: none; flex-direction: column; gap: 2px;
  padding: 8px 16px 18px; background: #fff;
  border-top: 1px solid #eceef0;
}
.mobile-panel.is-open { display: flex; }
.mobile-nav-link {
  text-decoration: none; color: #5d6b70; font-weight: 600;
  font-size: 1.02rem; padding: 13px 8px;
  border-bottom: 1px solid #f1f3f4;
}
.mobile-nav-link.active { color: #0B252F; }
.mobile-cta {
  text-decoration: none; text-align: center; color: #fff;
  font-weight: 600; font-size: 1rem; padding: 14px;
  border-radius: 6px; background: #0B252F; margin-top: 12px;
}

@media (max-width: 860px) {
  .nav-desktop { display: none !important; }
  .burger-btn { display: inline-flex !important; }
}

/* Scroll reveal — the .reveal class is applied by main.js, so content
   stays visible if JS fails or is disabled. */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.7,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Cards & common */
.card {
  border: 1px solid #e5e8ea; border-radius: 16px;
  background: #fff; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.card:hover {
  box-shadow: 0 22px 44px -32px rgba(11,37,47,0.4);
  border-color: #cfd5da;
  transform: translateY(-4px);
}

/* Lift on hover for the inline-styled panels (values, mission, vision) */
.lift {
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lift:hover {
  box-shadow: 0 24px 46px -34px rgba(11,37,47,0.45);
  border-color: #cfd5da;
  transform: translateY(-4px);
}
.director-card { transition: transform 0.3s ease; }
.director-card:hover { transform: translateY(-5px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .lift, .director-card { transition: none; }
  .card:hover, .lift:hover, .director-card:hover { transform: none; }
}

/* Board of directors */
.director-grid {
  display: grid; gap: clamp(18px,2.6vw,30px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Two directors, so the row is capped rather than stretched — four
   full-width columns would blow the portraits up out of proportion. */
@media (min-width: 880px) {
  .director-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
}
/* Cards stretch to the grid row height and the name block absorbs the slack,
   so roles line up across a row no matter how many lines each name takes. */
.director-card { margin: 0; display: flex; flex-direction: column; height: 100%; }
.director-card figcaption { display: flex; flex-direction: column; flex: 1; }
.director-photo {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border-radius: 14px; background: #eceff1;
  border: 1px solid #e5e8ea;
  box-shadow: 0 20px 42px -30px rgba(11,37,47,0.55);
}
.director-photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* Source photos vary widely in setting and lighting; grayscale unifies them. */
  filter: grayscale(1) contrast(1.06);
  transition: transform 0.55s cubic-bezier(0.2,0.7,0.3,1), filter 0.4s ease;
}
.director-card:hover .director-photo img { filter: grayscale(0) contrast(1); }
.director-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,37,47,0) 58%, rgba(11,37,47,0.20) 100%);
}
.director-card:hover .director-photo img { transform: scale(1.045); }
.director-name {
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem); line-height: 1.3;
  letter-spacing: -0.01em; color: #0B252F;
  margin: 18px 0 7px;
  flex: 1;
}
.director-role {
  font-family: 'Roboto Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #5d6b70; line-height: 1.45;
  /* Reserve two lines so a wrapping title doesn't shift its row out of line. */
  min-height: 2.9em;
}
.director-role.lead { color: #E0532E; }

@media (prefers-reduced-motion: reduce) {
  .director-photo img { transition: none; }
  .director-card:hover .director-photo img { transform: none; filter: grayscale(0) contrast(1); }
}

/* Buttons */
.btn-primary {
  text-decoration: none; background: #E0532E; color: #fff;
  font-weight: 600; font-size: 1.02rem;
  padding: 16px 34px; border-radius: 5px;
  transition: background 0.15s; display: inline-block;
}
.btn-primary:hover { background: #cc4423; }
.btn-secondary {
  text-decoration: none; background: transparent; color: #F4F7F8;
  font-weight: 600; font-size: 1.02rem;
  padding: 16px 30px; border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.3);
  transition: border-color 0.15s, background 0.15s;
  display: inline-block;
}
.btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* Section label */
.section-label {
  font-family: 'Roboto Mono', monospace; font-size: 0.76rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* Footer */
.site-footer { background: #071A22; color: #86a0aa; }
.footer-inner {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(48px,6vw,76px) 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 40px;
}
.footer-logo {
  display: flex; align-items: center;
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 26px; color: #F4F7F8; letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.footer-heading {
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: 1rem; color: #F4F7F8; margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 0.94rem; }
.footer-link {
  text-decoration: none; color: #86a0aa;
  transition: color 0.15s;
}
.footer-link:hover { color: #fff; }
.footer-bottom {
  margin-top: clamp(36px,5vw,56px);
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.82rem; color: #5e7984;
}

/* Hero animations */
.hero-badge { animation: homat-rise 0.7s cubic-bezier(0.2,0.7,0.2,1) both; }
.hero-h1 { animation: homat-rise 0.8s cubic-bezier(0.2,0.7,0.2,1) both; animation-delay: 0.08s; }
.hero-p { animation: homat-rise 0.8s cubic-bezier(0.2,0.7,0.2,1) both; animation-delay: 0.2s; }
.hero-btns { animation: homat-rise 0.8s cubic-bezier(0.2,0.7,0.2,1) both; animation-delay: 0.32s; }

/* Form */
.form-label {
  display: flex; flex-direction: column; gap: 8px;
  font-family: 'Roboto Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #7a858c;
}
.form-input {
  padding: 14px 16px; border: 1px solid #d9dde1;
  border-radius: 9px; background: #f8f9fa;
  font-size: 1rem; color: #16252b;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s, background 0.15s;
  outline: none;
}
.form-input:focus { border-color: #1A6E96; background: #fff; }

/* Warehouse stock gallery — a scroll-snapping strip on narrow screens
   that settles into a four-across row once there is room. */
.stock-gallery {
  max-width: 1240px; margin: 0 auto;
  padding: 0 28px clamp(56px, 8vw, 104px);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(255px, 1fr);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.stock-shot { margin: 0; scroll-snap-align: start; }
/* height:auto is load-bearing — the width/height attributes on the img are
   presentation hints, and without this they win over aspect-ratio. */
.stock-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 4/3;
  object-fit: cover; background: #eceff1;
  border: 1px solid #e5e8ea; border-radius: 14px;
}
.stock-shot figcaption {
  font-size: 0.88rem; line-height: 1.5;
  color: #5d6b70; margin-top: 11px;
}

/* HOMATBLISS is a long wordmark — ease it down on small screens so the
   header never collides with the burger. */
@media (max-width: 400px) {
  .logo-text { font-size: 23px; }
  .logo-sub { font-size: 8px; letter-spacing: 0.05em; }
  .header-inner { padding: 14px 18px; }
}