/* ============================================================
   OCE HOSPITALITY — additive layer
   ------------------------------------------------------------
   css/site.css is a VERBATIM copy of the Collective Edge design
   system and must stay that way, so the two sites cannot drift.
   Everything hospitality-specific lives here, and every value
   below resolves to a token from that file. No new colours, no
   new type families, no overrides of the token layer.

   The registers map onto the two halves of the offer:
     night  the events business, bars, festivals, evening production
     day    the food business, kitchens, office lunches, the farm
   ============================================================ */

/* ---------- hero ---------- */
.cover {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(150deg, var(--bg) 0%, var(--paper-2) 100%);
}
.cover-inner { padding: clamp(3rem, 8vw, 5rem) 0; }
.cover h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 16ch;
  margin-top: 1.4rem;
}
.cover h1 em { font-style: italic; color: var(--blueprint); }
.cover-sub {
  margin-top: 1.8rem;
  max-width: 54ch;
  font-size: 1.14rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.cover-actions { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; }
/* The two things a buyer weighs before enquiring: how fast someone replies,
   and whether this team has done it before. Both sat below the fold or on an
   error path. Put them under the buttons, where the decision is made. */
.cover-reply {
  margin: 1.4rem 0 0;
  max-width: 46ch;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.cover-foot {
  margin-top: clamp(2.6rem, 6vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* ---------- the three capabilities ---------- */
.triad-3 {
  margin-top: 2.8rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.capability {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  padding: 1.7rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  transition: transform .3s ease, border-color .3s ease;
}
.capability:hover { transform: translateY(-3px); border-color: var(--sensor); }
.capability .reg {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sensor);
}
.capability h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
}
.capability p { color: var(--ink-soft); line-height: 1.65; font-size: .98rem; }
.capability ul { list-style: none; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line-soft); }
.capability li {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
  padding: .3rem 0;
}

/* ---------- the client roster ---------- */
.roster {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.roster span {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .45rem .75rem;
  transition: border-color .2s, color .2s;
}
.roster span:hover { border-color: var(--sensor); color: var(--ink); }
.band-dark .roster span { color: rgba(233, 235, 232, .8); border-color: rgba(233, 235, 232, .22); }
.band-dark .roster span:hover { border-color: var(--living-lum); color: var(--fixed-light); }

/* ---------- bios ---------- */
/* Two columns once there's more than a principal to show — nine people
   stacked single-file made the team section read as a scroll, not a roster.
   .bio-lead (the founder/principal card) always spans both columns so it
   keeps its own weight above the grid. */
.bios { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.2rem 2.6rem; }
.bio { border-left: 2px solid var(--clay); padding-left: 1.6rem; max-width: 68ch; }
.bio.bio-lead { grid-column: 1 / -1; }
.bio h3 { font-family: var(--display); font-weight: 500; font-size: 1.65rem; line-height: 1.2; }
.bio .role {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sensor);
  margin-top: .4rem;
}
.bio p { margin-top: 1rem; color: var(--ink-soft); line-height: 1.75; }
.bio p + p { margin-top: .7rem; }

/* ---------- work / case entries ---------- */
.cases { margin-top: 2.6rem; display: grid; gap: 1.4rem; }
.case {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.6rem;
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: 1.6rem;
  align-items: start;
}
.case .who { font-family: var(--display); font-weight: 500; font-size: 1.35rem; line-height: 1.25; }
.case .meta {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sensor);
  margin-top: .5rem;
}
.case p { color: var(--ink-soft); line-height: 1.7; }

/* ---------- enquiry form ---------- */
.enquiry-grid {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.enquiry-form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sensor);
  box-shadow: 0 0 0 3px rgba(61, 169, 162, .18);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-status {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.enquiry-status.is-error { color: var(--clay); }
.enquiry-thanks {
  border: 1px solid var(--sensor);
  border-radius: 4px;
  padding: 1.6rem;
  background: var(--tint);
}
.enquiry-thanks h3 { font-family: var(--display); font-weight: 500; font-size: 1.4rem; }
.enquiry-thanks p { margin-top: .7rem; color: var(--ink-soft); line-height: 1.7; }

.enquiry-aside { border: 1px solid var(--line); border-radius: 4px; padding: 1.6rem; background: var(--paper); }
.enquiry-aside h3 {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sensor);
}
.enquiry-aside p { margin-top: .9rem; color: var(--ink-soft); line-height: 1.7; font-size: .96rem; }
.address-row { margin-top: 1.2rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.address-row a { font-family: var(--mono); font-size: .84rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.address-row a:hover { border-bottom-color: var(--sensor); }
.copy-btn {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .38rem .6rem;
  cursor: pointer;
  transition: all .2s;
}
.copy-btn:hover { border-color: var(--sensor); color: var(--ink); }

/* ---------- page hero for interior pages ---------- */
.page-head { padding: clamp(3.4rem, 8vw, 5.4rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.page-head h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  max-width: 20ch;
  margin-top: 1rem;
}
.page-head .lede { margin-top: 1.4rem; max-width: 62ch; font-size: 1.1rem; line-height: 1.72; color: var(--ink-soft); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .triad-3 { grid-template-columns: 1fr; }
  .enquiry-grid { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; gap: .9rem; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}