/* 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. */
  /* One face for everything, as the Firm asked: Palatino Linotype ships with
     Windows; Book Antiqua and Palatino are its Office and Apple equivalents. */
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --sans:  var(--serif);
  /* One size for every small uppercase label, button and menu link, so they
     match across pages. 11px is the smallest that stays readable; 12px reads easier. */
  --label: 12px;

  --measure: 1200px;
}

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

/* One step up from the browser's 16px, so every rem size on the site grows
   by the same slight amount. */
html { font-size: 106.25%; }

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

/* The Firm's e-mail addresses are one long word. Our People breaks them after
   the @ (<wbr>); anywhere else they may break mid-word on a phone
   instead of pushing the page sideways. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

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: var(--label);
  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: 24px; 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: var(--label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.brand__est {
  display: block;
  font-family: var(--sans); font-size: var(--label); letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin-top: 3px;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nav a {
  font-family: var(--sans);
  font-size: var(--label);
  letter-spacing: .12em;
  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); }
/* .nav a outranks .btn, so the header button has to reclaim its padding and bottom edge. */
.nav .btn { padding: 12px 18px; border-bottom-color: var(--gold); }
.nav .btn:hover { color: var(--navy); }

/* Menu button: phones only, and only once nav.js has unhidden it. */
.nav-toggle { display: none; }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--label);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: none;
  cursor: pointer;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .3s;
}
/* Hover fill sweeps in from the left. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.btn:hover { color: var(--navy); }
.btn:hover::before { transform: scaleX(1); }
.btn--solid { background: var(--gold); color: var(--navy); }
.btn--solid::before { background: var(--gold-dim); }
.btn--solid:hover { 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; }
/* Photo sits behind the copy, dimmed against the navy so ivory text stays readable. */
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; z-index: 0; }

/* 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: var(--label); 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: var(--label); 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);
}


/* ---------- 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: var(--label);
  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; }
/* A real photo in a placeholder's slot: keeps the slot's ph--* shape and crops to fill it. */
.photo { display: block; width: 100%; object-fit: cover; }
/* 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: var(--label); letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-dim); margin-bottom: .8rem;
}
/* Direct e-mail, tucked under the role line. */
.lawyer__email { margin: -.4rem 0 1.2rem; }
/* Lawyer profile: a modest portrait that stays in view while the long bio
   scrolls past it. Only the bio sits on the white card. */
.lawyer { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.lawyer__portrait { position: sticky; top: 24px; max-height: none; width: 100%; height: auto; display: block; }
.people__heading { margin: 48px 0 24px; }
.people__heading:first-child { margin-top: 0; }
.lawyer .card__body { background: #fff; border: 1px solid var(--ivory-dim); padding: 40px; }
.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: var(--label); 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); }

/* Result of sending a form: the handler redirects to #sent, #form-error or
   #send-failed, and only the targeted message shows. */
.form-status { display: none; padding: 14px 16px; margin-bottom: 20px; border-left: 3px solid var(--gold); background: #fff; }
.form-status:target { display: block; }
.form-status--error { border-left-color: #a33; }
/* Once sent, the confirmation replaces the form; its link brings the form back. */
.form-status--sent { font-size: 1.1rem; padding: 24px; }
.form-status--sent strong { display: block; font-size: 1.3rem; margin-bottom: 6px; }
.form-status--sent a { display: inline-block; margin-top: 10px; }
#sent:target ~ form { display: none; }

/* Category bar above the Insights grid. */
.filterbar {
  display: flex; align-items: center; gap: 0;
  border-top: 1px solid #d8cdb6; border-bottom: 1px solid #d8cdb6;
  margin-bottom: 40px;
  /* One row; on narrow screens the tabs swipe sideways instead of wrapping. */
  overflow-x: auto; scrollbar-width: none;
}
.filterbar::-webkit-scrollbar { display: none; }
.filterbar a {
  font-family: var(--sans); font-size: var(--label); letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  padding: 16px 22px; border-right: 1px solid #d8cdb6;
  flex: none; white-space: nowrap;
}
.filterbar a:first-child { padding-left: 0; }
.filterbar a:hover { color: var(--gold-dim); }
.filterbar a[aria-current="true"] { color: var(--gold-dim); }

/* 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: var(--label); 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: var(--label); 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); }
.socials { display: flex; gap: 14px; margin-top: 18px; }
.site-footer .socials a { padding: 0; }
/* The footer link rule above would flatten the button into a bare full-width
   line; give it back its own shape and padding. */
.site-footer .btn { display: inline-block; padding: 12px 22px; margin-top: 6px; }
.site-footer .btn:hover { color: var(--navy); }
.icon-row .socials { margin-top: 8px; }
.icon-row .socials a { color: var(--gold-dim); }
.icon-row .socials 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: var(--label); color: #7d8ba3;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- privacy notice ---------- */

/* Language switch: English shows unless #ms is targeted. */
.legal #ms { display: none; }
.legal #ms:target { display: block; }
.legal:has(#ms:target) #en { display: none; }
.legal__switch { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.legal h2 { font-size: 1.35rem; margin-top: 1.8em; }
.legal h2.legal__title { font-size: 2.1rem; margin-top: 0; }

/* ---------- 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; }
  .nav-toggle:not([hidden]) {
    display: block; margin-left: auto; padding: 8px;
    background: none; border: 1px solid var(--navy-line); color: var(--ivory); cursor: pointer;
  }
  /* The open menu drops over the page from under the header instead of pushing it down. */
  .site-header { position: relative; z-index: 10; }
  .nav-toggle:not([hidden]) + .nav {
    flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0; width: auto;
    background: var(--navy); padding: 8px 20px 24px;
    border-bottom: 1px solid var(--navy-line); box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
  }
  .nav-toggle:not([hidden]) + .nav a { padding: 10px 0; }
  .nav-toggle:not([hidden]) + .nav .btn { margin-top: 8px; padding: 12px 22px; }
  .nav-toggle[aria-expanded="false"] + .nav { display: none; }
  .grid--2, .grid--3, .grid--4, .grid--split,
  .pillars .wrap, .timeline, .values, .field--half, .lawyer { grid-template-columns: 1fr; }
  .lawyer__portrait { position: static; }
  .lawyer .card__body { padding: 28px 24px; }
  .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; }
}