/* Cross Associate & Solicitors — single stylesheet.
   Palette and type are taken from the approved mockups:
   deep navy, ivory, antique gold, serif headings. */

:root {
  --navy:        #0e1c33;
  --navy-deep:   #091426;
  --navy-line:   #1e3355;
  --ivory:       #f7f3ea;
  --ivory-dim:   #ebe4d6;
  --gold:        #c0a062;
  --gold-dim:    #8d7442;
  --ink:         #1a1a1a;
  --ink-soft:    #5a5347;

  /* ponytail: system serif stack, no webfont. Swap in the licensed firm
     typeface here once it is bought — nothing else needs to change. */
  --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --sans:  "Helvetica Neue", Arial, sans-serif;

  --measure: 1200px;
}

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

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 3rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1.1em; }
a  { color: var(--gold-dim); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 32px; }

/* ---------- icons ----------
   Line icons live in assets/icons.svg and are pulled in with <use>. They
   inherit colour from the text around them, so there is nothing to restyle
   per placement. An external sprite needs the page served over http, which
   is why the README tells you to run a local server. */

.icon { width: 28px; height: 28px; display: block; stroke: currentColor; fill: none; }
.icon--lg { width: 40px; height: 40px; }
.icon--sm { width: 20px; height: 20px; }

/* Gold disc an icon sits inside on the practice-area cards. */
.icon-badge {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); flex: none;
}

/* Icon and text side by side, used in the careers "why join us" list. */
.icon-row { display: flex; gap: 18px; align-items: flex-start; }
.icon-row h3 { margin-bottom: .2rem; }
.icon-row p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* Small gold uppercase label that sits above most headings in the mockups. */
.eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.eyebrow--dark { color: var(--gold-dim); }

/* ---------- header ---------- */

.site-header { background: var(--navy); border-bottom: 1px solid var(--navy-line); }
.site-header .wrap { display: flex; align-items: center; gap: 32px; min-height: 76px; flex-wrap: wrap; }

.brand { color: var(--ivory); text-decoration: none; line-height: 1.1; text-align: center; }
.brand__name {
  font-size: 1.45rem; letter-spacing: .28em; display: block;
  padding-bottom: 5px; border-bottom: 1px solid var(--gold);
}
.brand__sub {
  display: block; padding-top: 5px;
  font-family: var(--sans);
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.brand__est {
  display: block;
  font-family: var(--sans); font-size: .5rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin-top: 3px;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav a {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: none;
  cursor: pointer;
}
.btn:hover { background: var(--gold); color: var(--navy); }
.btn--solid { background: var(--gold); color: var(--navy); }
.btn--solid:hover { background: var(--gold-dim); border-color: var(--gold-dim); color: #fff; }

/* ---------- hero ---------- */

.hero { background: var(--navy-deep); color: var(--ivory); position: relative; }
.hero .wrap { padding-top: 96px; padding-bottom: 96px; position: relative; z-index: 1; }
.hero h1 { color: var(--ivory); max-width: 16ch; }
.hero p { color: var(--ivory-dim); max-width: 52ch; }
.hero .eyebrow { max-width: none; }
.hero--image .wrap { min-height: 420px; display: flex; flex-direction: column; justify-content: center; }

/* Row of four value props under the hero. */
.pillars { background: var(--navy); border-top: 1px solid var(--navy-line); }
.pillars .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 34px; padding-bottom: 34px; }
.pillar { text-align: center; color: var(--ivory-dim); position: relative; }
.pillar .icon { margin: 0 auto 14px; color: var(--gold); }
.pillar h3 {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .5rem;
}
.pillar p { font-size: .88rem; margin: 0; }
/* Hairline between pillars, as in the mockup. */
.pillar + .pillar::before {
  content: ""; position: absolute; left: -16px; top: 6px; bottom: 6px;
  border-left: 1px solid var(--navy-line);
}

/* Five-across value row on About, gold icon above each label. */
.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; text-align: center; }
.values > div { position: relative; padding: 0 12px; }
.values .icon { margin: 0 auto 14px; color: var(--gold-dim); }
.values h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.values p { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.values > div + div::before {
  content: ""; position: absolute; left: -14px; top: 4px; bottom: 4px;
  border-left: 1px solid #d8cdb6;
}

/* ---------- sections ---------- */

.section { padding: 84px 0; }
.section--tint { background: var(--ivory-dim); }
.section--navy { background: var(--navy); color: var(--ivory); }
.section--navy h2 { color: var(--ivory); }
.section--navy p { color: var(--ivory-dim); }
.section__head { max-width: 62ch; margin-bottom: 48px; }

.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.card { background: #fff; border: 1px solid var(--ivory-dim); padding: 28px; }
.card h3 { margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.card__meta {
  font-family: var(--sans); font-size: .65rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-dim); margin-bottom: .8rem;
}
.card--flush { padding: 0; }
.card--flush .card__body { padding: 24px 28px 28px; }

/* Practice-area card: navy body, gold icon disc straddling the image edge. */
.card--area { position: relative; background: var(--navy); border-color: var(--navy); color: var(--ivory-dim); }
.card--area h3 {
  color: var(--ivory);
  font-family: var(--sans); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: .7rem;
}
.card--area p { font-size: .88rem; }
/* The disc straddles the seam between the image and the navy body, so it is
   positioned against the body rather than the whole card. */
.card--area .card__body { padding: 40px 24px 26px; position: relative; }
.card--area .icon-badge {
  position: absolute; left: 24px; top: 0; transform: translateY(-50%);
  background: var(--navy);
}

/* Numbered plain list, used for the panel and client rosters. */
.roster { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.roster li {
  counter-increment: r;
  display: flex; gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--ivory-dim);
  font-size: .94rem;
}
.roster li::before {
  content: counter(r, decimal-leading-zero);
  font-family: var(--sans); font-size: .68rem; letter-spacing: .1em;
  color: var(--gold-dim); flex: none; width: 22px;
}
.section--navy .roster li { border-bottom-color: var(--navy-line); }
.section--navy .roster li::before { color: var(--gold); }

/* ---------- image placeholders ----------
   Every photograph in the mockups is a placeholder until the firm supplies
   real assets. The label names what belongs there, so nothing ships blank
   by accident. */

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: repeating-linear-gradient(45deg, #dfd6c2 0 10px, #d6ccb5 10px 20px);
  color: #6b6350;
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid #cdc2a9;
}
.ph--wide   { aspect-ratio: 16 / 9; }
.ph--tall   { aspect-ratio: 3 / 4; max-height: 420px; }
.ph--square { aspect-ratio: 1 / 1; }
/* Hero placeholders sit behind the copy, so their label goes to the bottom
   corner rather than the middle where it would collide with the headline. */
.ph--hero {
  position: absolute; inset: 0; border: 0; opacity: .28; z-index: 0;
  align-items: flex-end; justify-content: flex-end; padding: 20px 28px;
}

/* ---------- timeline (About) ---------- */

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--navy-line); padding-top: 32px; }
.timeline__year { font-size: 1.6rem; color: var(--gold); margin-bottom: .3rem; }
.timeline p { font-size: .86rem; color: var(--ivory-dim); margin: 0; }

/* ---------- lawyers ---------- */

.lawyer__role {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-dim); margin-bottom: .8rem;
}
.lawyer__creds { list-style: none; padding: 0; margin: 0 0 1em; font-size: .9rem; color: var(--ink-soft); }

/* ---------- forms ---------- */

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--sans); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 11px 13px;
  border: 1px solid #cdc2a9;
  background: #fff;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold); outline-offset: -1px;
}
.field--half { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field--check { display: flex; gap: 10px; align-items: flex-start; }
.field--check input { width: auto; margin-top: 4px; }
.field--check label { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.hint { font-family: var(--sans); font-size: .72rem; color: var(--ink-soft); }

/* Category bar above the Insights grid. */
.filterbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  border-top: 1px solid #d8cdb6; border-bottom: 1px solid #d8cdb6;
  margin-bottom: 40px;
}
.filterbar a {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  padding: 16px 22px; border-right: 1px solid #d8cdb6;
}
.filterbar a:first-child { padding-left: 0; }
.filterbar a:hover { color: var(--gold-dim); }
.filterbar a[aria-current="true"] { color: var(--gold-dim); }
.filterbar form { margin-left: auto; padding: 8px 0 8px 22px; }
.filterbar input { border: 1px solid #cdc2a9; padding: 9px 12px; font-family: var(--serif); background: #fff; }

/* Upload field styled as a drop area, matching the mockup. */
.dropzone {
  border: 1px dashed #c3b696; background: #fdfbf6;
  padding: 20px; display: flex; gap: 14px; align-items: center;
}
.dropzone .icon { color: var(--gold-dim); flex: none; }
.dropzone input[type=file] { border: 0; padding: 0; background: none; font-size: .85rem; }
.dropzone p { margin: 0 0 6px; font-size: .9rem; }

/* Horizontal radio set, as on the careers form. */
.radios { display: flex; flex-wrap: wrap; gap: 22px; }
.radios label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-size: .95rem; letter-spacing: 0;
  text-transform: none; color: var(--ink); margin: 0;
}
.radios input { width: auto; }

.notice {
  border-left: 3px solid var(--gold);
  background: #fff;
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

/* ---------- pull quote ---------- */

.quote { background: var(--navy-deep); color: var(--ivory); text-align: center; padding: 56px 0; }
.quote blockquote { margin: 0 auto; max-width: 60ch; font-size: 1.35rem; font-style: italic; }
.quote cite {
  display: block; margin-top: 16px;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; font-style: normal; color: var(--gold);
}

/* ---------- footer ---------- */

.site-footer { background: var(--navy-deep); color: var(--ivory-dim); padding: 56px 0 28px; font-size: .88rem; }
.site-footer h4 {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.site-footer .grid { gap: 40px; }
.site-footer a { color: var(--ivory-dim); text-decoration: none; display: block; padding: 3px 0; }
.site-footer a:hover { color: var(--gold); }
.site-footer__bar {
  border-top: 1px solid var(--navy-line);
  margin-top: 40px; padding-top: 20px;
  font-family: var(--sans); font-size: .7rem; color: #7d8ba3;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
  .site-header .wrap { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  .nav { margin-left: 0; width: 100%; gap: 16px; }
  .grid--2, .grid--3, .grid--4, .grid--split,
  .pillars .wrap, .timeline, .values, .field--half { grid-template-columns: 1fr; }
  .pillar + .pillar::before, .values > div + div::before { display: none; }
  .wrap { padding: 0 20px; }
  .hero .wrap { padding-top: 56px; padding-bottom: 56px; }
  .section { padding: 56px 0; }
}