/* ==========================================================================
   Seacrest Search
   Palette and type are documented in docs/brand.md
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/sourceserif-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0E2E41;
  --navy-deep: #08202E;
  --teal: #1B7F8E;
  --teal-dark: #136570;
  --teal-light: #8FC7CE;
  --cream: #F7F2E8;
  --sand: #E8DFCE;
  --slate: #55697A;
  --white: #FFFFFF;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --measure: 68ch;
  --radius: 4px;

  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --step-4: clamp(2.1rem, 1.35rem + 2.6vw, 3.15rem);

  --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);
}

*, *::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(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

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

img, svg { max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.measure { max-width: var(--measure); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--cream);
  padding: .75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: .9rem;
}

.note {
  color: var(--slate);
  font-size: .95rem;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--navy-deep);
  color: var(--cream);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}

/* The client asked to keep the mark but go back to the set wordmark underneath
   it, so the lockup is assembled here rather than taken from logo.svg: the mark
   alone on the left, the two-line type block on the right. logo.svg carries its
   own traced wordmark, which would print the company name twice. */
.wordmark {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.6vw, .95rem);
  color: var(--cream);
  text-decoration: none;
  line-height: 1.1;
}

/* The wordmark is deliberately inert on hover. Without this, the global
   a:hover rule turns it navy against the navy header, dropping it to 1.18:1
   so the company name all but disappears. Keyboard users still get the
   global :focus-visible ring, which is what actually matters here. */
.wordmark:hover,
.wordmark:focus,
.wordmark:hover .wordmark-name,
.wordmark:focus .wordmark-name {
  color: var(--cream);
}

/* The mark is teal-light here because both grounds it sits on are navy-deep.
   The native blue mark for light grounds is /img/logo-mark.svg. Variants are
   documented in docs/brand.md. The width and height attributes carry the
   197:112 aspect ratio, so the header reserves the box before the SVG loads. */
.logo-mark {
  display: block;
  height: clamp(2.4rem, 4.6vw, 3rem);
  width: auto;
  flex-shrink: 0;
}

.wordmark-type { display: block; }

.wordmark-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wordmark-rule {
  display: block;
  width: 2.25rem;
  height: 2px;
  background: var(--teal-light);
  margin: .4rem 0 .35rem;
}

.wordmark-tag {
  display: block;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal-light);
}

.site-nav ul {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--teal-light); border-bottom-color: var(--teal-light); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid rgba(247, 242, 232, .35);
  border-radius: var(--radius);
  color: var(--cream);
  font: inherit;
  font-size: .9rem;
  padding: .45rem .75rem;
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  content: "";
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after { position: absolute; top: 6px; }

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

.hero {
  background: var(--navy-deep);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
}

.hero .eyebrow { color: var(--teal-light); }

.hero h1 {
  max-width: 20ch;
  margin-bottom: .5em;
}

.hero-lede {
  max-width: 54ch;
  font-size: var(--step-1);
  color: #D9E4E8;
}

/* "Global experience with a UK focus." is its own sentence in the client's copy
   but belongs to the paragraph above it, so it is set as a second line rather
   than a second paragraph. */
.hero-lede-tight { margin-top: -.55em; }

/* Hero image.
   Below 1000px it sits under the copy as a band. Above that it fills the right
   of the section, with a gradient blending it into the navy rather than leaving
   a hard seam. The copy is capped at 50% so it can never run under the image,
   which keeps the cream on navy contrast intact at every width. */

.hero-media {
  position: relative;
  height: clamp(190px, 42vw, 320px);
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 38%;
}

@media (min-width: 1000px) {
  .hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    height: auto;
  }

  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      var(--navy-deep) 0%,
      rgba(8, 32, 46, .72) 20%,
      rgba(8, 32, 46, .18) 58%,
      rgba(8, 32, 46, 0) 100%
    );
  }

  .hero-copy { max-width: 50%; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

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

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: .85rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white); }

.btn-ghost {
  background: transparent;
  border-color: var(--teal-light);
  color: var(--teal-light);
}
.btn-ghost:hover { background: var(--teal-light); color: var(--navy-deep); }

.btn-submit { width: 100%; margin-top: .5rem; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Sections ---------- */

.section { padding-block: var(--space-section); }
.section-sand { background: var(--sand); }

.section-dark {
  background: var(--navy);
  color: var(--cream);
}
.section-dark .eyebrow { color: var(--teal-light); }
.section-dark a { color: var(--teal-light); }
.section-dark a:hover { color: var(--white); }

/* ---------- Coverage ---------- */

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
}

.coverage-col h3 {
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--teal);
  margin-bottom: 1rem;
}

.role-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.role-list li {
  padding: .5rem 0 .5rem 1.25rem;
  border-bottom: 1px solid rgba(14, 46, 65, .12);
  position: relative;
}
.role-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: .45rem;
  height: .45rem;
  background: var(--teal);
  border-radius: 50%;
}

.assets-block { margin-top: clamp(2.5rem, 5vw, 4rem); }

.asset-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.asset-list li {
  background: var(--white);
  border: 1px solid rgba(14, 46, 65, .15);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-size: .95rem;
  font-weight: 500;
}

/* ---------- Forms ---------- */

.form-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .form-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.form-intro { max-width: 42ch; }

.panel {
  background: var(--white);
  border: 1px solid rgba(14, 46, 65, .14);
  border-radius: 6px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.panel-title {
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--teal);
}

.field { margin-bottom: 1.25rem; }

.field label {
  display: block;
  font-weight: 500;
  font-size: .95rem;
  margin-bottom: .4rem;
}

.req { color: var(--teal-dark); }
.optional { color: var(--slate); font-weight: 400; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  font: inherit;
  color: var(--navy);
  background: var(--white);
  border: 1px solid rgba(14, 46, 65, .3);
  border-radius: var(--radius);
  padding: .65rem .75rem;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
textarea:hover { border-color: rgba(14, 46, 65, .5); }

textarea { resize: vertical; min-height: 6rem; }

input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: .55rem;
  border: 1px dashed rgba(14, 46, 65, .35);
  border-radius: var(--radius);
  background: var(--cream);
}

input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 500;
  font-size: .9rem;
  margin-right: .75rem;
  padding: .45rem .9rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--teal-dark);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--teal); color: var(--white); }

.field-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
}
.field-check input { margin-top: .35rem; width: 1.05rem; height: 1.05rem; accent-color: var(--teal); }
.field-check label { font-weight: 400; font-size: .92rem; line-height: 1.5; margin-bottom: 0; }
.field-check .error { grid-column: 1 / -1; }

.hint {
  font-size: .85rem;
  color: var(--slate);
  margin: .35rem 0 0;
}

.error {
  font-size: .87rem;
  font-weight: 500;
  color: #A3272B;
  margin: .35rem 0 0;
}

.field-invalid input,
.field-invalid textarea { border-color: #A3272B; }

/* Honeypot, kept out of sight and out of the tab order */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 1rem 0 0;
  font-size: .95rem;
  font-weight: 500;
  min-height: 1.5rem;
}
.form-status.is-error { color: #A3272B; }
.form-status.is-success { color: var(--teal-dark); }

.form-done {
  border: 1px solid var(--teal);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  background: rgba(27, 127, 142, .07);
  padding: 1.25rem 1.4rem;
}
.form-done:focus { outline: none; }
.form-done h3 { margin-bottom: .4em; }
.form-done p { margin-bottom: 0; color: var(--navy); }

/* ---------- Contact ---------- */

.contact-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
}

.contact-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: .4rem;
}

.contact-value {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--cream);
  text-decoration: none;
}
a.contact-value:hover { color: var(--teal-light); text-decoration: underline; }
address.contact-value { font-style: normal; line-height: 1.4; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-deep);
  color: #C6D3D9;
  padding-block: clamp(2.5rem, 4vw, 4rem);
  font-size: .92rem;
}

.footer-inner { display: grid; gap: 2.5rem; }

@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 4rem;
  }
  .footer-legal { grid-column: 1 / -1; }
}

/* Same lockup as the header, one size down. The footer body colour is #C6D3D9,
   which is too quiet for the company name, so the name is pulled back to cream. */
.footer-brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  line-height: 1.1;
}
.logo-mark-footer { height: 2.6rem; }
.site-footer .wordmark-name {
  color: var(--cream);
  font-size: 1.15rem;
}

/* Same root cause as the wordmark: the global link colours are tuned for the
   cream page and are unreadable on the dark footer. Resting was 2.49:1 and
   hover was 1.18:1. These pass at 8.94:1 and 16.71:1. */
.site-footer a { color: var(--teal-light); }
.site-footer a:hover,
.site-footer a:focus { color: var(--white); }

.footer-privacy h2 {
  font-size: 1.05rem;
  color: var(--cream);
  margin-bottom: .8em;
}
.footer-privacy p { max-width: 62ch; }

.footer-legal {
  border-top: 1px solid rgba(247, 242, 232, .16);
  padding-top: 1.5rem;
  color: #9FB2BC;
  font-size: .85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem 2rem;
}
.footer-legal p { margin: 0; max-width: 72ch; }

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
}

/* ---------- Policy pages ---------- */

/* /privacy, /cookies and /terms share the header and footer of the main page
   and set the client's documents as long form text at a reading measure. */
.policy { padding-block: clamp(2.5rem, 2rem + 4vw, 5rem); }
.policy .wrap > * { max-width: var(--measure); }
.policy h1 { margin-bottom: .3em; }
.policy-updated { color: var(--slate); font-size: .95rem; margin-bottom: 2rem; }
.policy h2 {
  font-size: var(--step-1);
  font-weight: 600;
  margin: 2.2em 0 .6em;
}
.policy ul { padding-left: 1.25rem; margin: 0 0 1.1em; }
.policy li { margin-bottom: .45em; }

.table-scroll { overflow-x: auto; margin: 0 0 1.5em; }
.policy table {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  font-size: .92rem;
  line-height: 1.45;
}
.policy th,
.policy td {
  text-align: left;
  vertical-align: top;
  padding: .7rem .8rem;
  border-bottom: 1px solid rgba(14, 46, 65, .15);
}
.policy th { background: var(--sand); font-weight: 600; }
.policy code { font-size: .88em; white-space: nowrap; }

/* ---------- Small screens ---------- */

@media (max-width: 800px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    flex-basis: 100%;
    order: 3;
  }
  .site-nav.is-open { display: block; }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding-block: .5rem 1rem;
  }
  .site-nav li { border-top: 1px solid rgba(247, 242, 232, .14); }
  .site-nav a { display: block; padding: .85rem 0; border-bottom: none; }

  .header-inner { flex-wrap: wrap; }
}

/* The mark, the two-line wordmark, the gap and the Menu button overrun the
   usable width on a phone, so the button wraps onto a second row and doubles
   the height of a sticky header. Two tiers of trimming keep it on one line.
   The widest element is the tagline, not the company name: at .2em tracking
   ELEVATING REAL ESTATE TALENT sets wider than SEACREST SEARCH does. */
@media (max-width: 520px) {
  .header-inner { gap: 1rem; }
  .site-header .logo-mark { height: 2rem; }
  .site-header .wordmark-name { font-size: 1.02rem; letter-spacing: .04em; }
  .site-header .wordmark-rule { width: 1.6rem; margin: .3rem 0 .28rem; }
  .site-header .wordmark-tag { font-size: .55rem; letter-spacing: .14em; }
}

/* Below 380px even the trimmed lockup does not fit, so the header drops to the
   mark and the company name. The tagline is still on the page, in the footer.
   The Menu button goes icon only: its label is hidden visually rather than
   removed, so the button keeps "Menu" as its accessible name. */
@media (max-width: 380px) {
  .site-header .logo-mark { height: 1.75rem; }
  .site-header .wordmark-name { font-size: .85rem; }
  .site-header .wordmark-rule,
  .site-header .wordmark-tag { display: none; }

  .nav-toggle { gap: 0; padding-inline: .6rem; position: relative; }
  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}