/* LL Rands Advisory: site styles
   Brand values come from CLIENT_WORKFILE.md v1 (COL-01, TYPE-01, LAYOUT-01).
   Do not add colours, fonts or effects that are not listed there. */

/* ---------- Tokens (LAYOUT-01 starter tokens + TYPE-01 + spacing) ---------- */
:root {
  --green: #0A6B3B;        /* Prairie green */
  --charcoal: #1C1C1E;     /* Charcoal */
  --field-green: #5FC48A;  /* Field green: accents on dark only, never text on light */
  --mist: #EEF2EF;         /* Mist */
  --slate: #4B544E;        /* Slate */
  --white: #FFFFFF;        /* White */
  --wordmark-on-dark: #C8CFCA; /* LOGO-02 "Advisory" on dark */
  --font: "Instrument Sans", system-ui, sans-serif;
  --radius-card: 12px;
  --radius-button: 999px;
  --max-width: 1200px;

  /* Spacing steps */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;

  --side-padding: 16px; /* phones */
}

@media (min-width: 768px) {
  :root { --side-padding: 24px; }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: 17px;          /* Body 17/28 Regular */
  line-height: 28px;
  font-weight: 400;
}

img, svg { display: block; max-width: 100%; }

/* ---------- Type styles (TYPE-01) ---------- */
.display {
  font-size: 40px; line-height: 44px;   /* phones */
  font-weight: 700; letter-spacing: -0.02em;
  margin: 0;
}
h1, .h1 {
  font-size: 32px; line-height: 40px;   /* phones */
  font-weight: 700; letter-spacing: -0.015em;
  margin: 0;
}
h2, .h2 {
  font-size: 28px; line-height: 36px;
  font-weight: 600; letter-spacing: -0.01em;
  margin: 0;
}
h3, .h3 {
  font-size: 20px; line-height: 28px;
  font-weight: 600; letter-spacing: 0;
  margin: 0;
}
p { margin: 0; }
.body-strong { font-weight: 500; }
.small { font-size: 14px; line-height: 22px; }
.label {
  font-size: 13px; line-height: 18px; font-weight: 600;
  color: var(--slate);
  margin: 0;
}
.secondary-text { color: var(--slate); }
.num { font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .display { font-size: 56px; line-height: 60px; }
  h1, .h1 { font-size: 40px; line-height: 48px; }
}

/* Key headings in Prairie green */
.heading-green { color: var(--green); }

/* Placeholder text awaiting Layla's content */
.placeholder { font-style: normal; }

/* ---------- Links (LAYOUT-01) ---------- */
a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { text-decoration-thickness: 3px; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.site-footer :focus-visible { outline-color: var(--white); }

/* ---------- Layout ---------- */
.container {
  max-width: calc(var(--max-width) + 2 * var(--side-padding));
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

main { display: block; padding: var(--s-32) 0 var(--s-64); }

.section + .section { margin-top: var(--s-32); }
@media (min-width: 768px) {
  main { padding-top: var(--s-48); }
  .section + .section { margin-top: var(--s-48); }
}

.stack > * + * { margin-top: var(--s-16); }
.stack-lg > * + * { margin-top: var(--s-24); }

.section-head { margin-bottom: var(--s-24); }
.section-head > * + * { margin-top: var(--s-8); }

/* Cards: white, 12 px corners, 24 px padding, no shadow */
.card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: var(--s-24);
}
.grid {
  display: grid;
  gap: var(--s-16);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid { gap: var(--s-24); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 > .service-wide { grid-column: 1 / -1; }
}

.measure { max-width: 680px; }

/* ---------- Buttons (LAYOUT-01; 44 px min height confirmed 2026-10-19) ---------- */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-top: var(--s-24);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  font-family: var(--font);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button-primary {
  background: var(--green);
  color: var(--white);
  border: 1.5px solid var(--green);
}
.button-secondary {
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green);
}
.button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header / nav ---------- */
.skip-link {
  position: absolute;
  left: var(--s-16);
  top: -100px;
  z-index: 10;
  background: var(--white);
  padding: var(--s-8) var(--s-16);
  border-radius: var(--radius-button);
}
.skip-link:focus { top: var(--s-12); }

.site-header {
  background: var(--white);
}
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8) var(--s-24);
  padding-top: var(--s-12);
  padding-bottom: var(--s-12);
}

/* LOGO-02 lockup: mark about 2x wordmark size, gap about 1/4 mark height */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;              /* 40 px mark / 4 */
  text-decoration: none;
  color: inherit;
  /* clear space: at least 2x inner L stroke (~9 px at 40 px) */
  padding: 10px 0;
}
.lockup:hover { text-decoration: none; }
.lockup-mark { width: 40px; height: 40px; flex: none; }
.wordmark {
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.wordmark-strong { font-weight: 700; color: var(--charcoal); }
.wordmark-medium { font-weight: 500; color: var(--slate); }

.lockup-dark .wordmark-strong { color: var(--white); }
.lockup-dark .wordmark-medium { color: var(--wordmark-on-dark); }

.nav-toggle {
  display: none;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  border: 1.5px solid var(--green);
  background: transparent;
  color: var(--green);
  font-family: var(--font);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  cursor: pointer;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--charcoal);
  font-weight: 600;
  text-decoration: none;
}
.nav-links a:hover { color: var(--green); text-decoration: underline; }
.nav-links a[aria-current="page"] {
  color: var(--green);
  text-decoration: underline;
}

/* Phones: collapse links into a menu (only when JS is running) */
@media (max-width: 767px) {
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .js .nav-links { display: none; width: 100%; }
  .js .nav-links.is-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: var(--s-8);
  }
  .nav-links.is-open a {
    width: 100%;
    font-size: 17px;
    border-top: 1px solid var(--mist);
  }
}

/* ---------- Colour panels (Charcoal / Prairie green sections) ----------
   Text on these is White only. Field green is used for labels on Charcoal
   only (accent on dark). Buttons stay in white cards. */
.panel {
  border-radius: var(--radius-card);
  padding: var(--s-24);
  color: var(--white);
}
@media (min-width: 768px) {
  .panel { padding: var(--s-48); }
}
.panel-charcoal { background: var(--charcoal); }
.panel-green { background: var(--green); }
.panel a { color: var(--white); }
.panel :focus-visible { outline-color: var(--white); }
.panel-charcoal .label { color: var(--field-green); }
.panel-green .label { color: var(--white); }

/* Panel with the logo mark as the graphic device (desktop only) */
.with-mark {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
  align-items: center;
}
.mark-graphic { display: none; }
@media (min-width: 768px) {
  .with-mark { grid-template-columns: 1fr auto; }
  .mark-graphic {
    display: block;
    /* clear space: 2x inner L stroke = ~37 px at 160 px */
    padding: var(--s-48);
  }
  .mark-graphic svg { width: 160px; height: 160px; }
}

/* Mark on a Mist tile (Primary on Mist variant) */
.mark-tile {
  background: var(--mist);
  border-radius: var(--radius-card);
}

/* ---------- Page pieces ---------- */
.hero .display { max-width: 860px; }
.hero .lead { margin-top: var(--s-16); max-width: 680px; }

.card .h3 + p,
.card h3 + p { margin-top: var(--s-8); }

.about-layout {
  display: grid;
  gap: var(--s-24);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .about-layout { grid-template-columns: 320px 1fr; gap: var(--s-48); }
}

/* Photo slot: replace with <img> when Layla supplies a photo */
.photo-slot {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius-card);
  border: 1.5px dashed var(--slate);
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-24);
  color: var(--slate);
  font-weight: 600;
}
.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.plain-list {
  margin: var(--s-8) 0 0;
  padding-left: var(--s-24);
}
.plain-list li + li { margin-top: var(--s-4); }

.detail-list {
  margin: 0;
  display: grid;
  gap: var(--s-16);
}
.detail-list dt { margin: 0; }
.detail-list dd { margin: var(--s-4) 0 0; }

/* ---------- Footer (Charcoal, reversed lockup) ---------- */
.site-footer {
  background: var(--charcoal);
  color: var(--white);
  padding: var(--s-48) 0;
}
.site-footer a { color: var(--white); }
.footer-inner {
  display: grid;
  gap: var(--s-24);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-meta { color: var(--white); }
@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* =====================================================================
   DRAFT, not in CLIENT_WORKFILE.md yet (2026-10-19): photo hero and motion.
   Kept in this one block so it can be removed cleanly if Layla says no.
   ===================================================================== */

/* ---------- Day/night tinted photo hero (Home) ----------
   The real photo keeps its full range of light and dark, so the bridge
   and mountains stay easy to read. A Prairie green "color" layer gives it
   the brand hue without flattening it. Text stays on the flat green side,
   never on the photo. */
.hero-duo {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--green);
  color: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.hero-duo .label { color: var(--white); }
.hero-duo .lead { margin-top: var(--s-16); max-width: 560px; }
.hero-duo-copy { padding: var(--s-32) var(--s-24); }
.hero-duo .button-primary {   /* DRAFT: white button for use on green */
  background: var(--white);
  color: var(--green);
  border-color: var(--white);
}
.hero-duo .button-secondary { color: var(--white); border-color: var(--white); }

.hero-duo-photo {
  position: relative;
  min-height: 280px;
  background: var(--charcoal);   /* shown until the photo loads */
  isolation: isolate;
}
.hero-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: url("../images/hero-day-900.jpg");
  filter: contrast(1.16) brightness(0.92);   /* tuned to match the About barn photo's tone */
}
.is-night .hero-photo-bg { filter: contrast(1.06) brightness(1.6); }
.hero-duo-photo::after {          /* brand tint: keeps the photo's light and dark */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  mix-blend-mode: color;
  opacity: 0.85;
}
.is-night .hero-photo-bg { background-image: url("../images/hero-night-900.jpg"); }
@media (min-width: 900px) {
  .hero-duo { grid-template-columns: 5fr 6fr; min-height: 540px; }
  .hero-duo-copy { padding: var(--s-48); align-self: center; }
  .hero-photo-bg { background-image: url("../images/hero-day-2000.jpg"); }
  .is-night .hero-photo-bg { background-image: url("../images/hero-night-2000.jpg"); }
}

/* ---------- Page headers: same tinted-photo panel, with a mountain photo ---------- */
.page-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: contrast(1.08) brightness(1.05);
}
.page-photo-services { background-image: url("../images/services-desk-900.jpg"); filter: contrast(1.45) brightness(0.66); }
.page-photo-about    { background-image: url("../images/about-prairie-900.jpg"); }
.page-photo-contact  { background-image: url("../images/contact-desk-900.jpg"); filter: contrast(1.45) brightness(0.68); }
.page-photo-head .hero-duo-photo { min-height: 220px; }
@media (min-width: 900px) {
  .page-photo-services { background-image: url("../images/services-desk-2000.jpg"); }
  .page-photo-about    { background-image: url("../images/about-prairie-2000.jpg"); }
  .page-photo-contact  { background-image: url("../images/contact-desk-2000.jpg"); }
  .hero-duo.page-photo-head { min-height: 380px; }
}

/* ---------- Motion: gentle, and off when the visitor asks for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo-bg {
    animation: hero-settle 1.6s ease-out both;
  }
  @keyframes hero-settle {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Sections rise in as they scroll into view (only once JS is running) */
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}