/* ==========================================================================
   The Purpose Restaurant Company — built from "The Purpose Restraunt Company.xd"
   Artboard: 1366 × 5142. Colours and spacing are taken from the XD swatches.
   ========================================================================== */

:root {
  /* XD colour swatches */
  --orange: #c98a62;
  --rust:   #a75a3c;
  --olive:  #6b6c3e;
  --sand:   #e7d9bf;
  --brown:  #2e241b;
  --cream:  #f5efe3;
  --white:  #ffffff;

  /* Typography. The Seasons (display) and Gotham (logo) load from the
     Adobe Fonts web project "Purpose Restaurant Company" (id wjb0ocy),
     linked in index.html. Montserrat (body) comes from Google Fonts. */
  --font-display: "the-seasons", "Times New Roman", serif;
  --font-logo:    "gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Layout: 1220px content column with 73px gutters at 1366 */
  --gutter: clamp(20px, 5.345vw, 73px);
  --max: 1220px;
  /* Distance from the content column to the viewport edge (used by edge-bleed cards) */
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2));
  --radius: 20px;

  /* 80px display size at 1366 wide */
  --h2: clamp(46px, 5.857vw, 80px);
  --h2-lh: 1.025;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--white);
  color: var(--brown);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }

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

/* Two-column layout used by several sections: 499 | 119 | 602 of 1220 */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 499fr) minmax(0, 602fr);
  column-gap: 9.75%;
  align-items: start;
}

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

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  letter-spacing: -0.005em;
  color: var(--brown);
}
.h2 > span { display: block; }
.h2__indent { padding-left: 1.09em; }          /* 87px @ 80px */
.h2__indent--wide { padding-left: 2.25em; }    /* 180px @ 80px */

.copy p + p { margin-top: 22px; }
.copy strong { font-weight: 600; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.cta--rust  { color: var(--rust); }
.cta--white { color: var(--white); }
.arrow { fill: currentColor; flex: none; transition: transform .25s ease; }
.cta:hover .arrow { transform: translateX(6px); }
.arrow--down { transform: rotate(90deg); }

/* --- Logo ------------------------------------------------------------- */

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: 245px;
  font-family: var(--font-logo);
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
}
.logo__the {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 11.7px;
  letter-spacing: 0.2em;
  height: 14px;
}
.logo__rule {
  flex: 1;
  display: flex;
  align-items: center;
  height: 7px;
}
.logo__rule::before {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.logo__rule svg { flex: none; margin-left: -1px; }
.logo__name {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 50.7px;
  line-height: 1;
  letter-spacing: 0.085em;
  text-align: center;
  white-space: nowrap;
}
.logo__sub {
  margin-top: 4px;
  font-weight: 300;
  font-size: 14.9px;
  letter-spacing: 0.15em;
  text-align: center;
  white-space: nowrap;
}

/* --- Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 768px;
  height: 100svh;
  max-height: 900px;
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: -12% 0 0;             /* headroom for the parallax drift */
  z-index: -2;
  will-change: transform;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(46,36,27,0) 55%, rgba(46,36,27,.55) 100%);
}

.nav {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 40px;
}
.nav__links {
  display: flex;
  gap: 34px;
  margin-top: 39px;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__links a { text-decoration: none; }
.nav__links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav__links--left  { flex: 1; }
.nav__links--right { flex: 1; justify-content: flex-end; }

.nav__toggle {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--white);
}
.nav__toggle span + span { margin-top: 7px; }

/* Full-screen menu (mobile) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--brown);
  color: var(--white);
  overflow-y: auto;
  animation: menu-in .35s var(--ease-out);
}
.menu[hidden] { display: none; }
@keyframes menu-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  flex: none;
}
.menu__close {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--white);
  -webkit-tap-highlight-color: transparent;
}
.menu__close span {
  position: absolute;
  left: 9px;
  top: 21px;
  width: 26px;
  height: 1.5px;
  background: currentColor;
}
.menu__close span:first-child { transform: rotate(45deg); }
.menu__close span:last-child  { transform: rotate(-45deg); }
.menu__nav {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 48px 0;
}
.menu__nav ul { display: grid; gap: 26px; }
.menu__nav a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 10vw, 44px);
  line-height: 1.05;
  color: var(--white);
  text-decoration: none;
  transition: opacity .3s var(--ease-out);
}
.menu__nav a:hover { opacity: .7; }
.menu__foot {
  flex: none;
  padding-bottom: 36px;
  font-size: 14px;
  line-height: 22px;
}
.menu__foot a { text-decoration: underline; text-underline-offset: 3px; }
/* Scaled logo for small screens: the transform doesn't affect layout, so pull
   the box in by the 20% the artwork shrank */
.menu .logo { --logo-h: 92px; }

.hero__title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.857vw, 124px);   /* 80px at 1366, scales with viewport */
  line-height: var(--h2-lh);
  font-weight: 300;
  color: var(--white);
}
.hero__line1,
.hero__line2 { display: block; white-space: nowrap; }
.hero__br { display: none; }
.hero__line2 { font-weight: 700; padding-left: 1.76em; }   /* 141px @ 80px */

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  color: var(--white);
  padding: 10px;
}
.hero__scroll .arrow { display: block; }

/* --- Purpose on a plate ---------------------------------------------- */

.plate {
  background: var(--cream);
  padding: 80px 0 84px;
}
.plate__img img {
  width: 100%;
  aspect-ratio: 499 / 604;
  object-fit: cover;
  object-position: 50% 42%;
}
.plate__body { padding-top: 24px; }
.plate__title { margin-left: -2.64em; margin-bottom: 56px; }   /* heading starts at 480, body column at 691 */
.plate .cta { margin-top: 42px; }

/* --- How we got here -------------------------------------------------- */

.here { padding: 101px 0 0; }

.here__head {
  display: grid;
  grid-template-columns: 293px 1fr 424px;
  column-gap: 0;
  align-items: start;
}
.here__portrait { width: 293px; }
.here__portrait img { width: 100%; aspect-ratio: 293 / 289; object-fit: cover; }
/* Heading and intro both end 81px above the portrait's bottom edge (XD) */
.here__title { margin-left: 52px; align-self: end; margin-bottom: 81px; }
.here__intro { align-self: end; margin-bottom: 88px; }   /* +7px puts its last baseline on the heading baseline */

.cards {
  display: grid;
  grid-template-columns: minmax(0, 602fr) minmax(0, 602fr);
  column-gap: 1.3%;
  margin-top: 92px;
  align-items: start;
}
.cards__col { display: grid; gap: 18px; }
.cards__col--raised { margin-top: -80px; }

.card {
  padding: 52px 54px 50px;
  border-radius: var(--radius);
  min-height: 266px;
}
.card--cream { background: var(--cream); color: var(--brown); }
.card--olive { background: var(--olive); color: var(--white); }
.card--bleed-left {
  margin-left: calc(-1 * var(--edge));
  padding-left: calc(var(--edge) + 53px);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.card--bleed-right {
  margin-right: calc(-1 * var(--edge));
  padding-right: calc(var(--edge) + 54px);
  border-radius: var(--radius) 0 0 var(--radius);
}
.card__title {
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.card p + p { margin-top: 22px; }

/* --- Our plan --------------------------------------------------------- */

.plan { padding: 84px 0 0; }
.plan__body { padding-top: 124px; max-width: 460px; }
.plan__body .h2 { margin-bottom: 58px; }
.plan__images {
  position: relative;
  aspect-ratio: 602 / 568;
}
.plan__img {
  position: absolute;
  width: 65.8%;
  object-fit: cover;
}
.plan__img--room {
  right: 0; top: 0;
  height: 100%;
  object-position: 62% 50%;
}
.plan__img--plate {
  left: 0; top: 13.6%;
  aspect-ratio: 396 / 415;
  object-position: 54% 50%;
}

/* --- They can also open doors ----------------------------------------- */

.doors {
  position: relative;
  padding: 114px 0 170px;
}
.doors__shape {
  position: absolute;
  left: 0; top: 0;
  bottom: -37px;
  width: 31.4%;
  background: var(--cream);
  border-top-right-radius: var(--radius);
}
.doors .wrap { position: relative; }
.doors__img img {
  width: 100%;
  aspect-ratio: 499 / 568;
  object-fit: cover;
}
.doors__body .h2 { margin-bottom: 53px; }

/* --- Contact + footer (shares the "PURPOSE" watermark) ---------------- */

.tail { position: relative; overflow: hidden; }

.watermark {
  position: absolute;
  z-index: 2;
  top: 62px;
  left: 84%;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(120px, 15.45vw, 211px);
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--white);
  opacity: .33;
  pointer-events: none;
  user-select: none;
}

.contact {
  position: relative;
  background: var(--orange);
  color: var(--white);
  padding: 44px 0 0;
  min-height: 809px;
}
/* Orange tab that rises 37px above the section on the left (Rectangle 29 in the XD) */
.contact::before {
  content: "";
  position: absolute;
  left: -48px;
  top: -37px;
  width: calc(59.45% + 48px);
  height: 80px;
  background: var(--orange);
  border-radius: var(--radius);
}
/* White notch cut into the top-right (Rectangle 28 in the XD) */
.contact__notch {
  position: absolute;
  right: 0; top: 0;
  width: 40.55%;
  height: 74px;
  background: var(--white);
  border-bottom-left-radius: var(--radius);
}
.contact .wrap { position: relative; z-index: 1; }
.contact__title { color: var(--white); }
.contact__intro {
  margin-top: 40px;
  font-weight: 600;
}
.contact__intro a { text-decoration: none; }
.contact__intro a:hover { text-decoration: underline; }

.form {
  width: min(100%, 808px);
  margin-top: 42px;
}
.form__row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field { display: block; margin-bottom: 22px; }
.field__label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
}
.field__input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 23px;
  border: 0;
  border-radius: 25px;
  background: var(--white);
  color: var(--brown);
  font: inherit;
  font-weight: 300;
  outline: none;
}
.field__input::placeholder { color: var(--brown); opacity: .55; }
.field__input:focus-visible { box-shadow: 0 0 0 2px var(--brown); }
.field__input--area {
  height: 122px;
  padding: 14px 23px;
  border-radius: var(--radius);
  resize: vertical;
}

.check {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  cursor: pointer;
}
.check input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.check__box {
  flex: none;
  width: 37px; height: 37px;
  border-radius: 9px;
  background: var(--white);
  position: relative;
}
.check__box::after {
  content: "";
  position: absolute;
  left: 13px; top: 8px;
  width: 8px; height: 14px;
  border: solid var(--brown);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.check input:checked + .check__box::after { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 2px var(--brown); }
.check__label a { text-decoration: underline; text-underline-offset: 3px; }

.form__status { min-height: 22px; margin-top: 16px; font-weight: 600; }
.form__status:empty { display: none; }
.form .cta { margin-top: 34px; margin-bottom: 78px; }

.footer {
  background: var(--brown);
  color: var(--white);
  padding: 77px 0 60px;
}
.footer__inner {
  display: flex;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 38px;
  font-size: 14px;
  line-height: 22px;
  padding-bottom: 2px;
}
.footer__links a { text-decoration: none; }
.footer__strong { font-weight: 600; }
.footer__email { text-decoration: underline !important; text-underline-offset: 3px; }

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1100px) {
  .here__head {
    grid-template-columns: 293px 1fr;
  }
  .here__intro { grid-column: 1 / -1; align-self: start; margin: 40px 0 0; max-width: 602px; }
}

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; row-gap: 48px; }
  .plate__title { margin-left: 0; margin-bottom: 36px; }
  .plate__body { padding-top: 0; }
  .plate__img img { max-height: 70vh; }
  .cards { grid-template-columns: 1fr; }
  .cards__col--raised { margin-top: 18px; }
  .card { min-height: 0; padding: 40px 32px; }
  .card--bleed-left  { padding-left:  calc(var(--edge) + 32px); }
  .card--bleed-right { padding-right: calc(var(--edge) + 32px); }
  .plan__body { padding-top: 0; }
  .plan__images { order: -1; }
  /* Small screens: the cream backdrop becomes a full-width band holding the photo */
  .doors { padding-top: 48px; }
  .doors__shape { display: none; }
  .doors__img {
    margin: 0 calc(-1 * var(--gutter));
    padding: 56px var(--gutter);
    background: var(--cream);
    border-top-right-radius: var(--radius);
  }
  .doors__body .h2 { margin-bottom: 36px; }
  .doors__img img { max-height: 70vh; }
  .footer__inner { align-items: flex-start; flex-direction: column; }
}

/* Mobile hero, in the spirit of the 519 × 1032 "Artboard – 1" in the XD:
   logo top-left with a hairline burger opposite, 65px centred headline on
   three lines, and the scroll arrow sitting beneath it. The header band is
   raised and the burger slimmed from the artboard for a more considered feel. */
@media (max-width: 767px) {
  :root {
    --hero-title-size: clamp(40px, 12.5vw, 65px);
    --hero-title-h: calc(3 * 1.03 * var(--hero-title-size));
  }
  .hero { max-height: none; min-height: 640px; height: 100svh; }
  .hero__media img { object-position: 64% 50%; }
  .nav {
    padding-top: 28px;
    align-items: center;
    justify-content: space-between;
  }
  .nav__links { display: none; }
  .nav .logo, .menu .logo {
    --logo-h: 92px;
    transform: scale(.8);
    transform-origin: left top;
    margin-bottom: calc(-0.2 * var(--logo-h));
    margin-right: calc(-0.2 * 245px);
  }
  .nav__toggle {
    display: block;
    position: static;
    margin-top: -10px;   /* optical centre on the PURPOSE word */
  }
  .hero__title {
    top: 48%;
    width: max-content;
    max-width: 94%;
    text-align: center;
    font-size: var(--hero-title-size);
    line-height: 1.03;
  }
  .hero__line1, .hero__line2 { display: inline; white-space: nowrap; }
  .hero__line2 { padding-left: 0; }
  .hero__br { display: inline; }
  .hero__scroll {
    bottom: auto;
    top: calc(48% + var(--hero-title-h) / 2 + 32px);
    transform: translateX(-50%);
  }

  .plate { padding: 56px 0 64px; }
  .here { padding-top: 64px; }
  .here__head { grid-template-columns: 1fr; }
  .here__portrait { width: min(293px, 70%); }
  .here__title { margin-left: 0; margin: 28px 0 0; }
  .here__intro { margin: 28px 0 0; }
  .cards { margin-top: 48px; }
  .h2__indent, .h2__indent--wide { padding-left: 0.6em; }
  .plan { padding-top: 64px; }
  .doors { padding: 48px 0 120px; }
  .contact { min-height: 0; }
  .contact::before { width: 62%; }
  .contact__notch { width: 38%; height: 56px; }
  .form__row--2 { grid-template-columns: 1fr; gap: 0; }
  .watermark { left: 78%; top: 40px; z-index: 1; opacity: .22; }   /* above the panel, below the form */
  .contact .wrap { z-index: 2; }
  .footer { padding: 56px 0 48px; }
}

/* --- Motion --------------------------------------------------------- */

:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-duration: 1.1s;
}

/* Scroll reveals (only when JS is running, so content is never hidden without it) */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform var(--reveal-duration) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Photos settle in from a soft zoom */
.js figure[data-reveal="img"] { overflow: hidden; transform: none; }
.js figure[data-reveal="img"] img,
.js img[data-reveal="img"] {
  transform: scale(1.08);
  transition: transform calc(var(--reveal-duration) * 1.5) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js figure[data-reveal="img"].is-visible img,
.js img[data-reveal="img"].is-visible { transform: none; }
.js img[data-reveal="img"] {
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform calc(var(--reveal-duration) * 1.5) var(--ease-out);
}

/* Overlapping photos (Our plan): wipe reveals instead of fades, so the
   front image never shows through the back one while it appears */
.js .plan__img[data-reveal="wipe"] {
  opacity: 1;
  will-change: clip-path, transform;
}
.js .plan__img--room[data-reveal="wipe"] {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.06);
  transition:
    clip-path 1.3s var(--ease-out),
    transform 1.8s var(--ease-out);
}
.js .plan__img--plate[data-reveal="wipe"] {
  clip-path: inset(0 100% 0 0);
  transform: translate3d(-32px, 0, 0);
  transition:
    clip-path 1.2s var(--ease-out),
    transform 1.4s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .plan__img[data-reveal="wipe"].is-visible {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* Hero entrance on load */
.js .hero__media img {
  transform: scale(1.06);
  transition: transform 2.2s var(--ease-out);
}
.js .hero.is-loaded .hero__media img { transform: none; }

.js .nav__links,
.js .nav .logo,
.js .nav__toggle,
.js .hero__scroll {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 0.25s;
}
.js .hero.is-loaded .nav__links,
.js .hero.is-loaded .nav .logo,
.js .hero.is-loaded .nav__toggle,
.js .hero.is-loaded .hero__scroll { opacity: 1; }

.js .hero__line1,
.js .hero__line2 {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 1.3s var(--ease-out),
    transform 1.3s var(--ease-out);
}
.js .hero__line1 { transition-delay: 0.35s; }
.js .hero__line2 { transition-delay: 0.55s; }
.js .hero.is-loaded .hero__line1,
.js .hero.is-loaded .hero__line2 { opacity: 1; transform: none; }

/* Gentle nudge on the scroll cue (the arrow is rotated 90deg, so X is down) */
@keyframes hero-scroll-nudge {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50%      { transform: rotate(90deg) translateX(6px); }
}
.js .hero.is-loaded .hero__scroll .arrow {
  animation: hero-scroll-nudge 2.6s ease-in-out 2s infinite;
}

/* CTA arrows ease out on hover */
.arrow { transition: transform .45s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .arrow, .nav__toggle span { transition: none; }
  .js [data-reveal],
  .js .plan__img[data-reveal="wipe"],
  .js figure[data-reveal="img"] img,
  .js img[data-reveal="img"],
  .js .hero__media img,
  .js .nav__links, .js .nav .logo, .js .nav__toggle, .js .hero__scroll,
  .js .hero__line1, .js .hero__line2 {
    opacity: 1; transform: none; transition: none; animation: none; clip-path: none;
  }
  .hero__media { transform: none !important; }
  .menu { animation: none; }
}