/* ==========================================================================
   Emma Logistics — emmapros.com
   Rebuilt from the GoDaddy Website Builder original. Design tokens below were
   read off the live site's computed styles, so the look matches on purpose.
   Change these first when you redesign — most of the page follows from them.
   ========================================================================== */

:root {
  /* Palette */
  --ink:          #000000;   /* contact section + footer background */
  --paper:        #ffffff;
  --muted:        #969696;   /* section titles, footer copy */
  --muted-soft:   #ababab;   /* form labels */
  --muted-bright: #e2e2e2;   /* nav links */
  --line:         #3a3a3a;   /* hairlines on dark */
  --field:        #141414;
  --field-line:   #4a4a4a;

  /* Type */
  --font-display: "Playfair Display", Georgia, serif;
  --font-brand:   "Montserrat", system-ui, sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;

  /* Scale */
  --h1:           clamp(2.25rem, 7.5vw, 3.875rem);  /* 62px cap, matches original */
  --h2:           clamp(1.875rem, 5vw, 2.75rem);    /* 44px cap */
  --wordmark:     clamp(1.375rem, 3.2vw, 2.1875rem);/* 26 → 35px */

  /* Layout */
  --shell:        640px;
  --gutter:       clamp(1.25rem, 5vw, 2.5rem);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.shell { width: min(var(--shell), 100%); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--paper); color: var(--ink);
  padding: .75rem 1.25rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  isolation: isolate;
  overflow: hidden;
}

/* HERO IMAGE SLOT
   The original used a Getty photo licensed through the GoDaddy subscription —
   that licence does NOT transfer to self-hosting, so it is deliberately not
   copied here. Drop your own photo at site-assets/hero.jpg and the rule below
   picks it up; until then the gradient stands in. See README.md. */
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  background-color: #2a2724;
  background-image:
    linear-gradient(115deg, rgba(120,108,92,.55) 0%, rgba(38,35,32,.9) 55%, rgba(20,18,16,1) 100%),
    url("/site-assets/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.55) 100%);
}

/* nav */
.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  padding: 1.75rem var(--gutter) 0;
}

.wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--wordmark);
  letter-spacing: .25em;              /* 4px @ 26px, scales with size */
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  text-align: center;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}

.nav__links { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }

.nav__links a {
  font-size: .875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-bright);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.nav__links a:hover { color: var(--paper); border-bottom-color: currentColor; }

/* headline */
.hero__body {
  display: grid;
  place-items: center;
  padding: 2rem var(--gutter) 6rem;
}

.hero__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h1);
  line-height: 1.12;
  text-align: center;
  color: var(--paper);
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------ contact */
.contact {
  background: var(--ink);
  padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(3rem, 7vw, 4.5rem);
  text-align: center;
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.2;
  color: var(--muted);
}

.rule {
  width: 56px;
  margin: 1.5rem auto 2rem;
  border: 0;
  border-top: 1px solid var(--line);
}

.lede { margin: 0 0 2rem; color: var(--paper); font-size: 1.0625rem; }

/* form */
.form { display: grid; gap: 1.25rem; text-align: left; }

.field { display: grid; gap: .4rem; }

.field label { font-size: 1rem; color: var(--muted-soft); }

.field input,
.field textarea {
  font: inherit;
  color: var(--paper);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 2px;
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color .18s ease, background .18s ease;
}
.field textarea { resize: vertical; min-height: 7rem; }

.field input:hover, .field textarea:hover { border-color: #6a6a6a; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--paper); background: #1b1b1b; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  color: var(--muted-soft);
  cursor: pointer;
}
.check input { margin-top: .3rem; flex: none; accent-color: var(--paper); }

.btn {
  justify-self: start;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper);
  border-radius: 2px;
  padding: .75rem 2.25rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: transparent; color: var(--paper); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.form__status { margin: 0; min-height: 1.4em; font-size: .9375rem; color: var(--muted-soft); }
.form__status[data-state="error"] { color: #ff9b9b; }
.form__status[data-state="ok"]    { color: #9bffb1; }

/* ------------------------------------------------------------- footer */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 2rem 0 2.5rem;
  text-align: center;
}

.copyright { margin: 0; font-size: .875rem; color: var(--muted); }