/* ============================================================
   Main stylesheet — editorial modelling agency
   ============================================================ */

/* ---------- Base ---------- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

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

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* The artwork already reads "Model Agency / London", so it carries the
   whole lockup. Height-constrained with width:auto so the aspect ratio
   is never distorted, whatever the source image dimensions. */
.nav__logo-img {
  height: 46px;
  width: auto;
  display: block;
}

/* Portal navs append a role label beside the mark ("Admin") */
.nav__logo--tagged {
  gap: var(--space-4);
}

.nav__logo-tag {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.nav__links {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.nav__link {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition);
  position: relative;
}

.nav__link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-heading);
}

.nav__link:hover::after,
.nav__link--active::after {
  transform: scaleX(1);
}

/* "Get A Quote" CTA button in nav */
.nav__link--cta {
  border: 1px solid var(--color-accent);
  color: var(--color-accent) !important;
  padding: 0.3rem 0.9rem;
  letter-spacing: 0.08em;
}

.nav__link--cta::after {
  display: none;
}

.nav__link--cta:hover {
  background: var(--color-accent);
  color: var(--color-bg) !important;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}

/* ---------- Home page splash ---------- */
/* nav + hero + footer fill the viewport exactly: the hero absorbs whatever
   space is left over, so the footer sits on the bottom edge with no gap
   and no scrollbar, whatever height the footer wraps to.
   svh rather than vh so mobile browser chrome is accounted for. */
.page-home,
.page-login {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.page-home > main,
.page-login > main {
  flex: 1;
  display: flex;
}

.page-home .hero {
  flex: 1;
  min-height: 0;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: var(--nav-height) var(--space-6) var(--space-8);
}

/* The h1 wraps the logo, so it needs no type styling of its own */
.hero__heading {
  margin: 0;
  line-height: 0;
}

/* Width is the tightest of three constraints: a comfortable maximum, the
   viewport width, and whatever height is left once the nav and footer are
   accounted for (the artwork is 2.84:1, so height follows from width).
   That last term is what stops a landscape phone from scrolling. */
.hero__logo {
  width: max(220px, min(620px, 82vw, calc((100svh - var(--nav-height) - 140px) * 2.84)));
  height: auto;
  display: block;
}

/* Centre column */
.hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.btn--primary:hover {
  background: transparent;
  color: var(--color-accent);
}

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---------- Section headings ---------- */
.section-heading {
  margin-bottom: var(--space-16);
}

.section-heading--center {
  text-align: center;
}

.section-heading__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.section-heading__title {
  font-size: var(--text-3xl);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-heading);
  line-height: 1.1;
}

.section-heading__rule {
  width: 30px;
  height: 1px;
  background: var(--color-accent);
  margin-top: var(--space-6);
}

.section-heading--center .section-heading__rule {
  margin-inline: auto;
}

/* ---------- Services grid ---------- */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.service {
  background: var(--color-bg-card);
  padding: var(--space-12) var(--space-8);
  transition: background var(--transition);
}

.service:hover {
  background: var(--color-bg-alt);
}

.service__number {
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
}

.service__title {
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.service__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
  font-weight: 300;
}

/* ---------- About strip ---------- */
.about-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.about-strip__image {
  /* The source is a tall portrait (roughly 1:1.9). Framing it 3:4 and
     cropping gives a better composition than letting the section stretch
     to the full height of the photo. */
  aspect-ratio: 3/4;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 30%;   /* bias upward, keeps the subject in frame */
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

/* Home page has no photo, so the text runs the full width */
.about-strip--text-only {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

.service--center {
  text-align: center;
}

/* Two-up roster grid. The default .services auto-fit would give four
   narrow columns, which is too cramped for descriptions this long. */
.services--two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .services--two-up {
    grid-template-columns: minmax(0, 1fr);
  }
}

.about-strip__text p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.9;
  font-weight: 300;
  margin-bottom: var(--space-6);
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
  background: var(--color-bg);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__brand {
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.footer__copy {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.footer__link {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  transition: color var(--transition);
}

.footer__link:hover {
  color: var(--color-accent);
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding-top: calc(var(--nav-height) + var(--space-24));
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.page-hero__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.page-hero__title {
  font-size: var(--text-4xl);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-heading);
}

/* ---------- Contact form ---------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.form-group label {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-group input,
.form-group textarea {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-4);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  font-weight: 300;
  transition: border-color var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-dim);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

/* ---------- Skip link (keyboard + screen reader) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-6);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* Visible focus ring — the browser default was being lost on dark accents */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- Layout helpers ---------- */
/* Two-column page layout (contact, quote). Collapses on tablet — this
   was previously an inline `grid-template-columns: 1fr 1fr` with no
   breakpoint, so form fields stayed squashed side by side on phones. */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Paired form fields inside a single column */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.section--alt {
  background: var(--color-bg-alt);
}

/* First block on a page that has no page-hero above it, so it has to clear
   the fixed nav itself (about.html). */
.section--first {
  padding-top: calc(var(--nav-height) + var(--space-16));
}

/* Narrow centred column for single-column form pages (contact, apply) */
.container--narrow {
  max-width: 680px;
}

/* Compact label/value contact block */
.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  padding: var(--space-6) 0;
  margin-bottom: var(--space-12);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.contact-details dt {
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.contact-details dd {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-details a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-details a:hover {
  color: var(--color-accent);
}

.section--center {
  text-align: center;
}

.section--bordered {
  border-top: 1px solid var(--color-border);
}

/* ---------- Text helpers ---------- */
/* Small uppercase accent label, used above field groups and contact details */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.eyebrow--wide {
  letter-spacing: 0.3em;
  margin-bottom: var(--space-6);
}

.lede {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.9;
  margin-bottom: var(--space-8);
}

.detail-value {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.detail-value--last {
  margin-bottom: 0;
}

/* Inline links in body copy. The reset removes colour and underline, so
   without this the privacy-notice and mailto links are indistinguishable
   from the text around them. */
.lede a,
.detail-value a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lede a:hover,
.detail-value a:hover,
.prose a:hover {
  color: var(--color-heading);
}

.stat-figure {
  font-size: var(--text-3xl);
  color: var(--color-heading);
  letter-spacing: 0;
}

/* ---------- Form feedback ---------- */
.form-feedback {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  display: none;
}

.form-feedback--error   { color: #b91c1c; }
.form-feedback--success { color: var(--color-accent); }

.field-error {
  font-size: var(--text-xs);
  color: #b91c1c;
  margin-top: var(--space-2);
  display: none;
}

/* Spam honeypot. Positioned off-screen rather than display:none —
   bots commonly skip display:none fields, but fill this one in. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Native select styled to match the text inputs */
.select-input {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-4);
  font-family: var(--font-sans);
  width: 100%;
}

.file-input {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
  width: 100%;
  cursor: pointer;
}

.label-hint {
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Legal / prose pages ---------- */
.prose {
  max-width: 70ch;
}

/* Prose block inside a plain section, centred rather than left-hugging */
.section > .container > .prose {
  margin-inline: auto;
}

.prose h2 {
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.9;
  margin-bottom: var(--space-4);
}

.prose ul {
  list-style: disc;
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose__updated {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-8);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* The nav carries six items including a CTA, which overflows well
     before 640px — collapse to the hamburger here instead. */
  .nav__links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8);
    gap: var(--space-6);
  }

  .nav__links--open {
    display: flex;
  }

  .nav__toggle {
    display: flex;
  }

  .split-layout {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

@media (max-width: 768px) {
  .about-strip {
    grid-template-columns: 1fr;
  }

  .about-strip__image {
    aspect-ratio: 4/5;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 640px) {
  .nav__logo-img {
    height: 38px;
  }

  .container {
    padding-inline: var(--space-6);
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}