/* ==========================================================================
   Outlaw House — Landing page
   Headings: Allegiance  ·  Body: Futura
   ========================================================================== */

@font-face {
  font-family: 'Allegiance';
  src: url('../fonts/Allegiance.woff2') format('woff2'),
       url('../fonts/Allegiance.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Body face is Futura PT, served by Adobe Fonts (kit ihd1mdk, loaded in
   index.html). System Futura on Apple devices is the first fallback. */

:root {
  --green: #45524B;
  --green-deep: #39443E;
  --beige: #D5CDBA;
  --beige-light: #EFE9DC;
  --teal: #41B2B9;
  --teal-dark: #37989E;
  --ink: #20241F;
  --white: #FFFFFF;

  --font-heading: 'Allegiance', Georgia, serif;
  --font-body: 'futura-pt', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;

  --container: 1440px;
  --gutter: 32px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500; /* Futura PT Medium — needs the 500 weight in the Adobe Fonts kit */
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

.container {
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* ---------- Type ---------- */

.heading {
  font-family: var(--font-heading);
  font-weight: normal;
  line-height: 1.12;
  margin: 0 0 28px;
  letter-spacing: 0.01em;
}

.heading--light { color: var(--white); }
.heading--dark  { color: var(--ink); }

.body-copy {
  margin: 0 0 36px;
  max-width: 440px;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.body-copy--light { color: var(--white); }
.body-copy--dark  { color: var(--ink); }

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 15px 28px;
  transition: background-color 0.2s ease;
}

.btn:hover,
.btn:focus-visible { background: var(--teal-dark); }

/* ==========================================================================
   Animation — hero entrance + scroll reveals
   ========================================================================== */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.hero__logo,
.hero__intro,
.hero > .hero__inner > .btn,
.countdown {
  opacity: 0;
  animation: hero-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.hero__logo { animation-delay: 0.15s; }
.hero__intro { animation-delay: 0.45s; }
.hero > .hero__inner > .btn { animation-delay: 0.7s; }
.countdown { animation-delay: 0.95s; }

/* scroll reveals — hidden state only applies when JS is running */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo,
  .hero__intro,
  .hero > .hero__inner > .btn,
  .countdown {
    animation: none;
    opacity: 1;
  }

  .js .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(69, 82, 75, 0.55) 0%,
      rgba(69, 82, 75, 0.45) 45%,
      rgba(69, 82, 75, 0.82) 82%,
      var(--green) 100%
    ),
    url('../images/hero-image.jpg') center / cover no-repeat;
  text-align: center;
  padding: clamp(80px, 12vh, 170px) 0 90px;
}

.hero__logo {
  width: clamp(240px, 24vw, 373px);
  margin: 0 auto 72px;
}

.hero__intro {
  max-width: 730px;
  margin: 0 auto 56px;
  color: var(--white);
  letter-spacing: 0.02em;
}

/* Opening announcement */
.countdown { margin-top: 50px; }

.countdown__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: 0.02em;
  color: var(--white);
  margin: 0;
}

/* ==========================================================================
   Green sections & cards
   ========================================================================== */

.section--green {
  background: var(--green);
  padding: 60px 0;
}

.section--green:first-of-type { padding-top: 110px; }
.section--last { padding-bottom: 150px; }

.card {
  box-shadow: 0 34px 44px -18px rgba(0, 0, 0, 0.38);
}

/* --- Nathan hero card --- */

.card--nathan {
  min-height: 498px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(115, 115, 115, 0.9) 0%, rgba(115, 115, 115, 0.55) 38%, rgba(115, 115, 115, 0) 62%),
    url('../images/nathan-kittiwake.jpg') center right / cover no-repeat;
}

.card--nathan__copy {
  padding: 60px clamp(32px, 8vw, 120px);
  max-width: 680px;
}

.card--nathan__copy .heading { font-size: clamp(34px, 3.4vw, 48px); }
.card--nathan__copy .body-copy { margin-bottom: 0; max-width: 400px; }

/* --- Split cards (image + beige panel) --- */

.card--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--beige);
  min-height: 498px;
}

.card--split__media { position: relative; }

.card--split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--split__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 4.5vw, 64px) clamp(32px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* faint topographic decoration */
.card--split__panel::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -30px;
  width: 380px;
  height: 240px;
  background: url('../images/contour-lines.svg') no-repeat center / contain;
  opacity: 0.8;
  pointer-events: none;
}

.card--split__panel > * { position: relative; z-index: 1; }

.card--split__panel .heading {
  font-size: clamp(32px, 3.4vw, 50px);
  max-width: 500px;
}

.card--split__panel .body-copy { max-width: 530px; }

/* Per-card contour art (clipped to the panel by its overflow: hidden) */
.card--contour-1 .card--split__panel::after {
  right: 0;
  bottom: 0;
  width: 474px;
  height: 222px;
  background-image: url('../images/card-contour1.svg');
  background-position: bottom right;
  opacity: 1;
}

.card--contour-2 .card--split__panel::after {
  right: 0;
  bottom: 0;
  width: 474px;
  height: 222px;
  background-image: url('../images/card-contour2.svg');
  background-position: bottom right;
  opacity: 1;
}

.card--contour-4 .card--split__panel::after {
  right: 0;
  bottom: 0;
  width: 474px;
  height: 222px;
  background-image: url('../images/card-contour4.svg');
  background-position: bottom right;
  opacity: 1;
}

/* Stay a while: contour anchored to the left and bottom of the tan card */
.card--split--reverse .card--split__panel::after {
  left: 0;
  right: auto;
  bottom: 0;
  width: 474px;
  height: 308px;
  background-image: url('../images/card-contour3.svg');
  background-position: bottom left;
  opacity: 1;
}

/* ==========================================================================
   Feature band — "Food that needs no explaining"
   ========================================================================== */

.feature-band {
  background:
    linear-gradient(90deg, rgba(213, 205, 186, 0.95) 0%, rgba(213, 205, 186, 0.78) 26%, rgba(213, 205, 186, 0) 55%),
    url('../images/pork-belly.jpg') center / cover no-repeat;
}

.feature-band__inner {
  min-height: 751px;
  display: flex;
  align-items: center;
}

.feature-band__copy { max-width: 460px; }

.feature-band__copy .heading { font-size: clamp(36px, 3.6vw, 54px); }
.feature-band__copy .body-copy { margin-bottom: 60px; }

/* ==========================================================================
   Register forms
   ========================================================================== */

.register {
  background: var(--white);
  padding: 110px 0 130px;
}

.register__heading {
  font-size: clamp(32px, 3.6vw, 54px);
  margin-bottom: 56px;
}

.register__heading--second { margin-top: 110px; }

.form-grid {
  display: grid;
  /* minmax(0,…) lets the native file input shrink instead of forcing the
     whole grid wider than its container on narrow screens */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 20px;
}

.register__form input,
.register__form textarea {
  width: 100%;
  background: #d5cdba52;
  border: none;
  padding: 18px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
}

.register__form ::placeholder {
  color: rgba(58, 55, 44, 0.85);
  opacity: 1;
}

.register__form input:focus,
.register__form textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

/* Attach CV field */
.form-file {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: #d5cdba52;
  padding: 18px 24px;
}

.form-file__label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.register__form input[type="file"] {
  width: auto;
  max-width: 100%;
  background: none;
  padding: 0;
  font-size: 15px;
  color: rgba(58, 55, 44, 0.9);
}

.register__form input[type="file"]::file-selector-button {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--white);
  background: var(--teal);
  border: none;
  padding: 12px 22px;
  margin-right: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.register__form input[type="file"]::file-selector-button:hover {
  background: var(--teal-dark);
}

.form-file__hint {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(58, 55, 44, 0.7);
}

.register__form textarea {
  resize: vertical;
  min-height: 172px;
}

.form-grid__full { grid-column: 1 / -1; }

.btn--submit { margin-top: 28px; }

.form-status {
  margin: 20px 0 0;
  min-height: 1em;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.form-status--ok { color: #2E7D32; }
.form-status--error { color: #B3261E; }

/* honeypot — hidden from humans */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  position: relative;
  display: grid;
  background: var(--green);
  overflow: hidden;
}

/* contour art, gradient scrim and content share one grid cell so they stack;
   the tallest sets the footer height (contours on desktop, content on mobile) */
.footer__contours,
.footer__scrim,
.footer__inner,
.footer__credit {
  grid-area: 1 / 1;
}

.footer__contours {
  align-self: start;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.2;
  z-index: 0;
}

/* footer base colour fading to transparent, keeping the logo + text legible */
.footer__scrim {
  align-self: stretch;
  z-index: 1;
  opacity: 0.95;
  background: linear-gradient(
    to bottom,
    var(--green) 0%,
    var(--green) 30%,
    rgba(69, 82, 75, 0) 66%
  );
  pointer-events: none;
}

.footer__inner {
  align-self: start;
  z-index: 2;
  padding-top: 130px;
  padding-bottom: 60px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px clamp(40px, 5vw, 84px);
}

.footer__logo { width: 235px; }

.footer__contact {
  color: var(--white);
  margin-top: 60px;
}

.footer__phone {
  display: inline-block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  text-decoration: none;
}

.footer__address {
  display: block;
  width: fit-content;
  margin: 12px 0 0;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.55;
  color: var(--white);
  text-decoration: none;
}

/* address stays on one line on desktop; the break kicks in on mobile */
.footer__addr-br { display: none; }

.footer__connect {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 20px;
}

.footer__social {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__social a {
  display: inline-flex;
  color: var(--white);
  transition: opacity 0.2s ease;
}

.footer__social a:hover,
.footer__social a:focus-visible { opacity: 0.7; }

.footer__social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}

.footer__email {
  display: inline-block;
  margin-top: 0;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--white);
  text-decoration: none;
}

.footer__phone:hover,
.footer__phone:focus-visible,
.footer__address:hover,
.footer__address:focus-visible,
.footer__email:hover,
.footer__email:focus-visible { text-decoration: underline; }

/* credit line, pinned to the bottom of the footer */
.footer__credit {
  align-self: end;
  z-index: 2;
  padding-bottom: 32px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}

.footer__credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer__credit a:hover,
.footer__credit a:focus-visible {
  color: var(--white);
  border-bottom-color: var(--white);
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .card--split,
  .card--split--reverse {
    grid-template-columns: 1fr;
  }

  .card--split__media { min-height: 300px; }

  /* keep media above panel when reversed */
  .card--split--reverse .card--split__media { order: -1; }

  .card--nathan {
    background:
      linear-gradient(180deg, rgba(115, 115, 115, 0.92) 0%, rgba(115, 115, 115, 0.6) 60%, rgba(115, 115, 115, 0.35) 100%),
      url('../images/nathan-kittiwake.jpg') 65% center / cover no-repeat;
  }

  .feature-band {
    background:
      linear-gradient(rgba(213, 205, 186, 0.9), rgba(213, 205, 186, 0.9)),
      url('../images/pork-belly.jpg') center / cover no-repeat;
  }

  .feature-band__inner { min-height: 0; padding: 80px 0; }

  /* the split-card contour art is a wide corner accent that overlaps the copy
     once the panel goes full width — hide it on phones for clean text */
  .card--split__panel::after { display: none; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }

  .register { padding: 80px 0; }
  .register__heading--second { margin-top: 80px; }

  /* footer stacks and centres on mobile */
  .footer__inner {
    padding-top: 80px;
    gap: 32px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__contact { margin-top: 0; width: 100%; }
  .footer__address { margin-inline: auto; }
  .footer__addr-br { display: inline; }
  .footer__connect { justify-content: center; }

  /* content drives footer height here, so reserve room for the pinned credit */
  .footer__inner { padding-bottom: 120px; }
  .footer__credit { text-align: center; }
}

/* ==========================================================================
   Thank-you page (post-application redirect)
   ========================================================================== */

.thanks {
  min-height: 100vh;
  background: var(--green);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.thanks__logo {
  width: clamp(200px, 40vw, 280px);
  margin-bottom: 40px;
}

.thanks__title {
  font-size: clamp(40px, 6vw, 72px);
  margin: 0 0 16px;
}

.thanks__text {
  max-width: 520px;
  margin: 0 0 40px;
  color: var(--white);
  letter-spacing: 0.02em;
}