/* ============================================================
   THE AURELION GROUP — STYLES
   Layout, components, header, footer. Design values come from
   tokens.css. No scroll/entrance animation (per brief); the only
   transitions are subtle hover affordances on interactive elements.
   ============================================================ */

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; transition: color var(--transition); }

/* ---- Typography ---- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

p { max-width: var(--maxw-content); }
p + p { margin-top: var(--space-2); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
  font-weight: var(--weight-body);
}

/* Small caps tracked label — the luxury "eyebrow" */
.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  display: block;
  margin-bottom: var(--space-2);
}

/* ---- Layout primitives ---- */
.container {
  width: 100%;
  max-width: var(--maxw-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-content); }
.container--wide   { max-width: var(--maxw-wide); }

.section { padding-block: var(--space-section); }
.section--alt { background: var(--color-bg-alt); }
.section__head { margin-bottom: var(--space-5); }

.divider {
  width: 56px; height: 1px; background: var(--color-accent);
  border: 0; margin: var(--space-3) 0;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  padding: 1.05rem 2.25rem;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-dark);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { background: transparent; color: var(--color-ink); }
.btn--ghost { background: transparent; color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-ink); color: var(--color-on-dark); }
.btn--on-dark { border-color: var(--color-on-dark); background: transparent; color: var(--color-on-dark); }
.btn--on-dark:hover { background: var(--color-on-dark); color: var(--color-ink); }

/* Inline text link with brass underline on hover */
.link-accent { color: var(--color-accent); border-bottom: 1px solid transparent; transition: border-color var(--transition); }
.link-accent:hover { border-color: var(--color-accent); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: var(--border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 120px;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-display);
  letter-spacing: 0.06em;
  color: var(--color-ink);
  line-height: 1;
}
.wordmark span { color: var(--color-accent); }

/* Logo image lockup (replaces text wordmark in the header).
   Source art is 1400x400 (high-res), so it stays crisp on Retina. */
.wordmark--logo { display: inline-flex; align-items: center; }
.wordmark--logo img { height: 76px; width: auto; display: block; }
@media (max-width: 860px) { .wordmark--logo img { height: 64px; } }

.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav a {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-ink); }
.nav a[aria-current="page"] { border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; font-weight: var(--weight-medium);
  color: var(--color-ink); padding: var(--space-1);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: min(82vh, 760px);
  display: flex; align-items: flex-start;
  background: var(--color-ink-soft); /* fallback behind image */
  background-size: cover; background-position: center;
  color: var(--color-on-dark);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  /* Two scrims: a strong bottom-up gradient for the headline area, plus a
     gentle left-side darkening so text reads even over a bright photo. */
  background:
    linear-gradient(to top, rgba(20,19,17,0.78) 0%, rgba(20,19,17,0.45) 34%, rgba(20,19,17,0) 70%),
    linear-gradient(to right, rgba(20,19,17,0.45) 0%, rgba(20,19,17,0) 55%);
}
.hero__inner { text-shadow: 0 1px 18px rgba(20,19,17,0.35); }
.hero__inner { position: relative; z-index: 1; padding-top: clamp(4rem, 18vh, 9rem); padding-bottom: clamp(2.5rem, 8vh, 5rem); }
.hero h1 { color: var(--color-on-dark); font-size: var(--fs-hero); max-width: 16ch; }
/* About hero: keep "Estate management" together on line one at EVERY screen
   size. The <br> sets where the line ends; the .nowrap span (below) makes the
   phrase itself unbreakable so a narrow viewport can't split it. To stop that
   unbreakable phrase overflowing on small screens, the font scales with the
   viewport width (vw) so it shrinks to fit instead of spilling. Widen the
   measure so the phrase isn't fighting the 16ch cap on larger screens. */
.page-about .hero h1 { max-width: 20ch; font-size: clamp(2rem, 9vw, 5rem); }
.nowrap { white-space: nowrap; }
.hero .label { color: var(--color-on-dark); opacity: 0.85; }
.hero__sub {
  color: var(--color-on-dark);
  font-size: var(--fs-lead); line-height: var(--lh-snug);
  max-width: 46ch; margin-top: var(--space-3); opacity: 0.95;
}
.hero__cta { margin-top: var(--space-4); }

/* Inner pages (About, Services, Contact) reuse the full-bleed photographic
   .hero above — same structure, left-aligned white text over a scrim. The
   former lighter text-only .page-banner has been retired. */

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Mission quote block */
.mission { text-align: center; }
.mission blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.45;
  color: var(--color-ink);
  max-width: 32ch; margin-inline: auto;
  font-style: italic;
}
.mission blockquote::before { content: "\201C"; color: var(--color-accent); }
.mission blockquote::after  { content: "\201D"; color: var(--color-accent); }

/* Pillars / feature grid */
.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Number + heading share one line (baseline-aligned); the paragraph, being a
   block, still drops below. Inline-level number sits before the inline heading. */
.pillar .pillar__num {
  font-family: var(--font-display);
  font-size: 1.5rem; color: var(--color-accent);
  display: inline; margin-right: 0.4em;
}
.pillar h3 { display: inline; font-weight: 600; }
.pillar p { color: var(--color-ink-soft); margin-top: var(--space-2); }

/* Services list (editorial rows) */
.service-row {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: var(--border);
}
.service-row:last-child { border-bottom: var(--border); }
.service-row__num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--color-accent);
  line-height: 1.2;
}
.service-row h3 { margin-bottom: var(--space-2); font-weight: 700; }
.service-row p { color: var(--color-ink-soft); margin: 0; }
.service-row__body {
  display: grid; grid-template-columns: minmax(0, 0.32fr) 1fr; gap: var(--space-4);
  align-items: center;
}
.service-row__img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;        /* slightly rounded (placeholder service imagery) */
  display: block;
}
.service-row--featured h3 { color: var(--color-ink); }
/* All service numbers are bold via the base .service-row__num rule (700, a
   weight services.html actually loads); no per-featured override needed. */

/* Numbered differentiators */
.diff-list { list-style: none; padding: 0; counter-reset: diff; max-width: var(--maxw-content); }
.diff-list li {
  counter-increment: diff;
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-top: var(--border); position: relative;
  color: var(--color-ink-soft);
}
.diff-list li::before {
  content: counter(diff, decimal-leading-zero);
  position: absolute; left: 0; top: var(--space-3);
  font-family: var(--font-display); color: var(--color-accent); font-size: 1.1rem;
}

/* Two-column media + text */
.media-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.media-text__img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: var(--color-bg-alt); }
/* Circular portrait variant */
.media-text__img--circle {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  object-position: center 30%;
}
/* Portrait + caption grouped as a figure.
   The caption is taken out of flow so the figure's height equals the
   image's height — that way the grid's align-items:center lines the text
   column up with the IMAGE's centre, not the image+caption centre. */
.media-text__figure { margin: 0; position: relative; }
.media-text__caption {
  text-align: center;
  margin-top: var(--space-3);
  margin-bottom: 0; /* override .label's default bottom margin */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

/* FAQ (GEO answer layer) */
.faq dl { max-width: var(--maxw-content); }
.faq__item { padding-block: var(--space-4); border-top: var(--border); }
.faq__item:last-child { border-bottom: var(--border); }
.faq dt { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.faq dd { margin: 0; color: var(--color-ink-soft); }

/* CTA band */
.cta-band { background: var(--color-ink); color: var(--color-on-dark); text-align: center; }
/* Sized to its own content so the line only wraps when the viewport
   is genuinely too narrow (not at an arbitrary ch cap). */
.cta-band h2 { color: var(--color-on-dark); width: max-content; max-width: 100%; margin-inline: auto; margin-bottom: 0; }
/* One deliberate single gap between heading and subheading (replaces the
   stacked browser-default h2-bottom + p-top margins that read as two spaces). */
.cta-band p { color: var(--color-on-dark); opacity: 0.85; margin-inline: auto; margin-top: var(--space-2); }
.cta-band .btn { margin-top: var(--space-4); }

/* Simple service preview chips */
/* Three columns of two, flowing top-to-bottom (grid-auto-flow:column).
   Track geometry (full width + --space-5 column gap) matches .grid--3 above so
   each pair of items sits directly under its corresponding "Why Aurelion" pillar. */
.preview-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: var(--space-2) var(--space-5); }
.preview-list li { color: var(--color-ink-soft); position: relative; padding-left: 1.1rem; }
.preview-list li::before { content: "•"; position: absolute; left: 0; color: var(--color-accent); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); align-items: start; }
.form-field { margin-bottom: var(--space-3); }
.form-field label {
  display: block; font-size: var(--fs-label); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-1);
}
.form-field input, .form-field textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--color-ink); background: var(--color-bg);
  border: var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem; transition: border-color var(--transition);
}
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--color-accent);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: var(--fs-small); color: var(--color-ink-muted); margin-top: var(--space-2); }
.form-status { margin-top: var(--space-3); font-size: var(--fs-small); }
.form-status[data-state="success"] { color: var(--color-accent-dark); }
.form-status[data-state="error"]   { color: #9b2c2c; }

.contact-aside h3 { margin-bottom: var(--space-2); }
.contact-aside a { color: var(--color-accent); }
.contact-aside a:hover { color: var(--color-accent-dark); }
.contact-aside dl dt { font-size: var(--fs-label); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-ink-muted); margin-top: var(--space-3); }
.contact-aside dl dd { margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-bg-alt); border-top: var(--border); padding-block: var(--space-6) var(--space-4); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.site-footer .wordmark { font-size: 1.3rem; margin-bottom: var(--space-2); }
.site-footer p { color: var(--color-ink-soft); font-size: var(--fs-small); max-width: 34ch; }
.footer-col h4 { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-2); font-family: var(--font-body); font-weight: var(--weight-medium); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.footer-col a { font-size: var(--fs-small); color: var(--color-ink-soft); }
.footer-col a:hover { color: var(--color-ink); }

/* On the contact page the footer's Contact column is redundant — hide it
   and collapse the grid to two tracks so no empty column remains. */
.page-contact .footer-col--contact { display: none; }
.page-contact .site-footer__grid { grid-template-columns: 1.5fr 1fr; }
.site-footer__bottom { border-top: var(--border); padding-top: var(--space-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.site-footer__bottom small { color: var(--color-ink-muted); font-size: var(--fs-small); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  /* Hero legibility on mobile: the desktop scrims darken the BOTTOM and LEFT,
     but on a tall narrow phone the text sits at the TOP over bright photo, so it
     gets lost. Add a "to bottom" scrim that darkens the top where the headline +
     sub live, layered over the existing two. Tuned for the bright-photo heroes
     (Contact pool, About wood) where text washed out: 0.70 fading to 0 by 50%,
     so the lower photo still reads. Firmer text-shadow as backup. */
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(20,19,17,0.70) 0%, rgba(20,19,17,0.35) 26%, rgba(20,19,17,0) 50%),
      linear-gradient(to top, rgba(20,19,17,0.78) 0%, rgba(20,19,17,0.45) 34%, rgba(20,19,17,0) 70%),
      linear-gradient(to right, rgba(20,19,17,0.45) 0%, rgba(20,19,17,0) 55%);
  }
  .hero__inner { text-shadow: 0 1px 16px rgba(20,19,17,0.6); }
  /* The sub-paragraph is small, thin and the lowest-opacity text in the hero,
     so it washes out first. Bring it to full opacity on mobile with its own
     firmer shadow. */
  .hero__sub { opacity: 1; text-shadow: 0 1px 14px rgba(20,19,17,0.7); }
  .grid--3, .grid--2 { grid-template-columns: 1fr; gap: var(--space-4); }
  .media-text { grid-template-columns: 1fr; gap: var(--space-4); }
  .media-text__img { aspect-ratio: 16 / 10; }
  .media-text__img--circle { aspect-ratio: 1 / 1; width: min(72%, 300px); }
  /* Stacked layout: return caption to normal flow so it doesn't overlap
     the text below it. */
  .media-text__caption { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  /* Mobile: no left number-column (which pushed content right). Stack the row
     in normal flow and float the number inline before the heading, so it reads
     "01  Heading" and the whole block sits flush to the gutter on both sides. */
  .service-row { display: block; }
  .service-row__num {
    float: left; margin-right: 0.4em; line-height: 1.3;
  }
  /* Image and paragraph clear the floated number so it only sits beside the
     heading's first line, not the content below it. */
  .service-row__body { grid-template-columns: 1fr; gap: var(--space-3); clear: left; }
  /* Full-width on mobile, the base 1/1 square dominated the viewport and read as
     cramped (the client's "images too big" note). A 3:2 landscape crop is shorter,
     so more heading/text/whitespace shows per screen — the Apple-like breathing
     room they referenced. Desktop keeps the base 1/1 (narrow side-column) on purpose. */
  .service-row__img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  /* Differentiators: bring the counter inline before the text (was absolutely
     positioned in a left indent column) so this section matches the service
     rows and also sits flush to the gutter. Use flex so wrapped lines (e.g. a
     long first bullet) stay aligned in the text column instead of falling back
     under the number — a float would let later lines clear it and jut left. */
  .diff-list li { padding-left: 0; display: flex; }
  .diff-list li::before { position: static; float: none; margin-right: 0.4em; top: auto; flex: 0 0 auto; }
  .preview-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  /* Mobile only: left-align the mission detail paragraph (the section is
     otherwise centered). Blockquote and desktop stay centered. */
  .mission__detail { text-align: left; }

  .nav-toggle { display: inline-block; }
  .nav {
    position: absolute; top: 120px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--color-bg); border-bottom: var(--border);
    padding: var(--space-2) var(--gutter);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { display: block; width: 100%; padding-block: var(--space-2); border-bottom: var(--border); }
  .nav a:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}