/* Mantello Lawyers - Homepage Mockup
   Sutera Sites, 2026-08-12

   The accent is the firm's own blue, sampled from the wordmark on their
   current site. The ink navy and cream around it are a proposal, since the
   only brand asset that exists is that one 270x80 logo.
*/

:root {
  /* Ink navy carries authority without the heaviness of pure black. */
  --ink:        #0E2233;
  --ink-deep:   #081724;
  --ink-line:   rgba(255, 255, 255, 0.14);

  /* The firm's own blue, sampled from the wordmark on their current site
     (#018ED6, 45% of the logo file).

     Text on blue is always white. The brand value itself cannot carry white
     at AA (3.59:1), so anything that is a blue background with text on it
     uses --accent-surface, the nearest darker step along the same hue that
     clears 4.5:1. --accent stays the pure brand reference for decoration
     that carries no text. */
  --accent:         #018ED6;  /* brand reference, no text on it */
  --accent-surface: #0179B7;  /* blue backgrounds carrying text, white 4.75:1 */
  --accent-hover:   #016CA2;  /* hover on those, white 5.73:1 */
  --accent-lift:    #3FA9E0;  /* accents on the dark navy cards, 6.15:1 */
  --accent-deep:    #01659A;  /* small text on light backgrounds */

  --paper:      #F7F5F1;
  --paper-warm: #F1EDE6;
  /* Warmer than --paper. Carries the navbar and the ground the hero card
     floats on, the pale band in the reference layout. */
  --cream:      #F0EDDC;
  --stone:      #E4DFD5;
  --stone-line: #D6D0C4;

  --text:       #1A1A1A;
  --text-mid:   #4A4F55;
  --muted:      #6B7078;
  --white:      #FFFFFF;

  --max: 1180px;
  /* 2rem floor: 20px hugs the viewport edge on phones. */
  --gutter: clamp(2rem, 4vw, 2.5rem);

  /* One display face across the page. The hero was on Figtree and the sections
     below on a serif; the serif is gone, so the geometric voice the reference
     established in the hero now carries the whole homepage. */
  --font-display: 'Figtree', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Softer than the original 3px/6px. The hero card set a generously rounded
     language and everything below now answers to it. */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: clamp(12px, 1.6vw, 20px);

  /* The gap between an inset section card and the viewport edge. Matches the
     hero card exactly, so the whole page reads as one stack. */
  --inset: clamp(0.75rem, 1.6vw, 1.4rem);

  /* Height of the sticky header, so the mobile drawer can hang off its bottom
     edge. Re-measured by script.js, since the wordmark wraps at some widths. */
  --header-offset: 82px;

  --shadow-md: 0 4px 12px rgba(14, 34, 51, 0.08), 0 16px 40px rgba(14, 34, 51, 0.09);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------- reset */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  /* Cream is the ground the whole stack of section cards floats on, the same
     colour as the navbar and the space around the hero card. */
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Heavier and tighter than before, to answer the hero. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 0.85rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------- structure */

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Every section is an inset rounded card on the cream ground, the same shape
   and inset as the hero card, so the page reads as one stack rather than a
   run of full-bleed bands. */
.section-card {
  margin: 0 var(--inset) var(--inset);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Section inners share a div with .container, so vertical spacing must use
   longhand. The padding shorthand would wipe the container's horizontal
   padding and let content run to the viewport edge. */
.section__inner {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.section-title {
  font-size: clamp(2rem, 4.6vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.05;
  max-width: 20ch;
}

.section-intro {
  margin-top: 1.35rem;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: var(--text-mid);
  max-width: 58ch;
}

/* On the dark and accent cards the heading goes cream, matching the hero
   headline rather than switching to pure white. */
.card--ink { background: var(--ink); color: var(--white); }
.card--ink h2, .card--ink h3 { color: var(--cream); }
.card--ink .section-intro { color: rgba(255, 255, 255, 0.78); }
/* The enquiry form is a white panel sitting on the ink card, so headings
   inside it have to come back to ink. Without this the rule above puts cream
   type on a white background. */
.card--ink .form-card h3 { color: var(--ink); }

.card--light { background: var(--white); }

/* White type, on the darker blue surface so it clears AA. Solid white rather
   than a faded white: at 4.75:1 there is no headroom to spend on alpha. */
.card--accent { background: var(--accent-surface); color: var(--white); }
.card--accent h2 { color: var(--white); }
.card--accent .section-intro { color: var(--white); }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn--accent {
  background: var(--accent-surface);
  color: var(--white);
}
/* Darkens on hover rather than lightening, which would drop white below AA. */
.btn--accent:hover { background: var(--accent-hover); }

.btn--ink {
  background: var(--ink);
  color: var(--white);
}
.btn--ink:hover { background: var(--ink-deep); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn--ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--stone-line);
}
.btn--outline:hover { border-color: var(--ink); background: var(--white); }

/* --------------------------------------------------- announcement bar */

/* Structure ported from the Greenboard reference: bright utility bar above a
   pale navbar, above a dark inset hero card. Their lime is a tech-brand
   colour, so Mantello's own blue carries it instead. */
.announce {
  background: var(--accent-surface);
  color: var(--white);
  /* Above the header layer, so the drawer's backdrop does not dim it and its
     own dismiss button stays tappable while the drawer is open. */
  position: relative;
  z-index: 101;
}
.announce[hidden] { display: none; }

.announce__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}
.announce__inner svg { width: 15px; height: 15px; flex: none; }
.announce strong { font-weight: 600; }
.announce a { text-decoration: underline; text-underline-offset: 2px; }
.announce a:hover { opacity: 0.75; }

.announce__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  border-radius: 50%;
  transition: background 0.18s var(--ease);
}
.announce__close:hover { background: rgba(255, 255, 255, 0.2); }
.announce__close svg { width: 17px; height: 17px; }

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

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 82px;
  /* Lifts the wordmark, the phone link, the drawer and the close button above
     the drawer's backdrop, which sits at z-index 1 in the same context. */
  position: relative;
  z-index: 2;
}

/* Shown only while the mobile drawer is open. The drawer stops short of the
   bottom of the screen, so the page below it is a tap-off target, the same
   as dismissing a sheet. Inside the header's stacking context, so it darkens
   the page without ever covering the close button. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(8, 23, 36, 0.45);
  opacity: 0;
  transition: opacity 0.24s var(--ease);
  /* Stops a drag that starts on the backdrop from scrolling the page under
     the open drawer. */
  touch-action: none;
  overscroll-behavior: contain;
}
.nav-backdrop[hidden] { display: none; }
.nav-backdrop.is-visible { opacity: 1; }

.brand { display: flex; flex-direction: column; line-height: 1.05; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.brand__rule {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 0.24rem;
}

/* Nav sits on the page centre line, as in the reference. */
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.nav__list { display: flex; align-items: center; gap: 2.25rem; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.5rem 0;
  transition: color 0.18s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--accent-deep); }
.nav__link .chev {
  width: 11px; height: 11px;
  transition: transform 0.22s var(--ease);
  flex: none;
}
.nav__item.is-open > .nav__link .chev { transform: rotate(180deg); }

/* dropdown */
.nav__menu {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.6rem;
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 20;
}
.nav__item.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__menu a {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius);
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.nav__menu a:hover { background: var(--paper-warm); color: var(--ink); }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  flex: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.header__phone svg { width: 15px; height: 15px; flex: none; }
.header__phone:hover { color: var(--accent-deep); }

/* Lives inside .nav so it appears in the mobile drawer. The desktop phone
   link is .header__phone, outside .nav, so this stays hidden until the
   drawer breakpoint. */
.nav__phone { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex: none;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

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

/* The hero is an inset rounded card floating on the same cream as the navbar,
   per the reference. */
.hero {
  background: var(--cream);
  padding: 0 var(--inset) var(--inset);
}

.hero__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--ink);
  color: var(--white);
  /* Capped at 680 rather than 780: the source photo is only 450px tall, so
     every extra pixel of card height is upscale the image cannot pay for. */
  min-height: clamp(500px, 68vh, 680px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 4.5vw, 4rem);
}

/* The firm's own banner image, lifted from their current homepage. It is only
   1200x450, so it upscales roughly 1.5x in this card and is noticeably soft on
   its own. The scrim below is doing real work here, not just setting mood.
   Replace with a photograph of the actual office when one exists. */
.hero__media {
  position: absolute;
  inset: 0;
  background-color: var(--ink);
  background-image: url('assets/hero/hero.webp');
  background-size: cover;
  /* The subject sits centre-left. `cover` crops the sides hard in a tall card,
     so bias left to keep the hands and document rather than the coffee cup. */
  background-position: 32% center;
}

/* Two layers, because the source photo is bright: a diagonal wash that carries
   the headline on the left, and a bottom fade for the caption sitting over the
   lighter right side of the frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(8, 23, 36, 0.62) 100%),
    linear-gradient(100deg, rgba(8, 23, 36, 0.90) 0%, rgba(8, 23, 36, 0.72) 42%, rgba(8, 23, 36, 0.44) 100%);
}

.hero__content { position: relative; z-index: 2; max-width: 54rem; }


/* Cream rather than white, as in the reference. On the scrimmed photo it reads
   warmer than white and ties the headline to the navbar the card sits on. */
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  font-weight: 800;
  color: var(--cream);
  letter-spacing: -0.035em;
  line-height: 1.0;
}

/* The reference subhead is much heavier and closer in size to the headline
   than a normal strapline: same family, bold, roughly half the headline. */
.hero__strap {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--cream);
  max-width: 26ch;
}
.hero__strap u {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* bottom row: caption left, action card right */
.hero__foot {
  position: relative;
  z-index: 2;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero__caption {
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--cream);
  max-width: 30ch;
}
/* The reference puts its product name on its own line in the brand colour.
   Same move here with the phrase that carries the firm's positioning. */
.hero__caption em {
  display: block;
  font-style: normal;
  color: var(--accent-lift);
}

.hero__action {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 0.7rem 0.7rem 0.7rem 1.6rem;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  min-width: min(100%, 30rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.hero__action-text { display: flex; flex-direction: column; line-height: 1.25; }
.hero__action-label {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.hero__action-phone {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 0.15rem;
  white-space: nowrap;
}
.hero__action-phone:hover { color: var(--accent-deep); }
.hero__action .btn { margin-left: auto; white-space: nowrap; }
/* -------------------------------------------------------- practice areas */

/* Ported from a booking-card reference James supplied. Each practice area is a
   full-width white row: a pale note strip across the top, the practice-area
   photograph filling the left edge, the copy in the middle, and a rail on the
   right divided off by a hairline, carrying the action. The section fill drops
   from white to warm paper so the rows themselves read as cards. */
.practice.card--light { background: var(--paper-warm); }

.practice__grid {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.practice-card {
  --card-pad: clamp(1.15rem, 2.2vw, 1.8rem);
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.practice-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(8, 23, 36, 0.11);
}

/* The strip names the same matters the paragraph below already names. It adds
   scanability, not new claims, which matters on a legal site where nothing can
   be asserted about the firm that is not already documented. */
.practice-card__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--stone);
  border-bottom: 1px solid var(--stone-line);
  padding: 0.62rem var(--card-pad);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text-mid);
}
/* A hairline rather than a bullet character, so nothing is read aloud. */
.practice-card__note li + li {
  margin-left: 0.8rem;
  padding-left: 0.8rem;
  border-left: 1px solid rgba(14, 34, 51, 0.22);
}

.practice-card__body {
  display: grid;
  grid-template-columns: 200px 1fr 254px;
  align-items: stretch;
}

/* A light ink wash unifies the colour temperature of six mediocre stock
   photographs. No text sits on them in this layout, so it stays gentle. */
.practice-card__media {
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  min-height: 172px;
}
.practice-card--family-law .practice-card__media {
  background-image: linear-gradient(180deg, rgba(8,23,36,0.30) 0%, rgba(8,23,36,0.14) 100%),
                    url('assets/practice/family-law.webp');
}
.practice-card--conveyancing .practice-card__media {
  background-image: linear-gradient(180deg, rgba(8,23,36,0.30) 0%, rgba(8,23,36,0.14) 100%),
                    url('assets/practice/conveyancing.webp');
}
.practice-card--wills-estates .practice-card__media {
  background-image: linear-gradient(180deg, rgba(8,23,36,0.30) 0%, rgba(8,23,36,0.14) 100%),
                    url('assets/practice/wills-estates.webp');
}
.practice-card--powers-of-attorney .practice-card__media {
  background-image: linear-gradient(180deg, rgba(8,23,36,0.30) 0%, rgba(8,23,36,0.14) 100%),
                    url('assets/practice/powers-of-attorney.webp');
}
.practice-card--commercial-business .practice-card__media {
  background-image: linear-gradient(180deg, rgba(8,23,36,0.30) 0%, rgba(8,23,36,0.14) 100%),
                    url('assets/practice/commercial-business.webp');
}
.practice-card--criminal-law .practice-card__media {
  background-image: linear-gradient(180deg, rgba(8,23,36,0.30) 0%, rgba(8,23,36,0.14) 100%),
                    url('assets/practice/criminal-law.webp');
}

.practice-card__main {
  padding: 1.5rem var(--card-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.practice-card__main h3 {
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.practice-card__main p {
  margin-top: 0.6rem;
  font-size: 0.94rem;
  color: var(--text-mid);
  line-height: 1.62;
  max-width: 48ch;
}

/* The divided rail is the signature of the reference layout. */
.practice-card__rail {
  border-left: 1px solid var(--stone-line);
  padding: 1.5rem var(--card-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
}
.practice-card__cta {
  width: 100%;
  padding: 0.82rem 1.2rem;
  font-size: 0.92rem;
}
.practice-card__cta svg { width: 15px; height: 15px; }
.practice-card:hover .practice-card__cta { background: var(--ink-deep); }

.practice-card__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-deep);
  transition: color 0.2s var(--ease);
}
.practice-card__tel svg { width: 14px; height: 14px; }
.practice-card__tel:hover { color: var(--ink); }

/* -------------------------------------------------------------- approach */

.approach__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.approach__lead {
  margin-top: 1.3rem;
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}

.approach__list { display: grid; gap: 1.6rem; }
.approach__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.15rem;
  align-items: start;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--ink-line);
}
.approach__item:last-child { border-bottom: none; padding-bottom: 0; }
.approach__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-lift);
  padding-top: 0.15rem;
  min-width: 1.6rem;
}
.approach__item h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.022em;
  margin-bottom: 0.4rem;
}
.approach__item p {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.62;
}

/* ----------------------------------------------------------- service area */

.areas__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
.areas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.area-tile {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.area-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(8, 23, 36, 0.16);
}
.area-tile svg { width: 16px; height: 16px; color: var(--accent-deep); flex: none; }
.area-tile span { font-size: 0.97rem; font-weight: 700; letter-spacing: -0.015em; }

/* ------------------------------------------------------------------- faq */

.faq__list {
  margin-top: 2.75rem;
  max-width: 52rem;
  border-top: 1px solid var(--stone-line);
}
.faq-item { border-bottom: 1px solid var(--stone-line); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.7vw, 1.22rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--ink);
  transition: color 0.18s var(--ease);
}
.faq-item__q:hover { color: var(--accent-deep); }
.faq-item__icon {
  flex: none;
  width: 20px; height: 20px;
  position: relative;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background: var(--accent-deep);
  transition: transform 0.26s var(--ease), opacity 0.26s var(--ease);
}
.faq-item__icon::before { top: 9px; left: 0; width: 20px; height: 2px; }
.faq-item__icon::after  { left: 9px; top: 0; width: 2px; height: 20px; }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { transform: scaleY(0); opacity: 0; }

.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s var(--ease);
}
.faq-item__a p {
  padding-bottom: 1.5rem;
  font-size: 0.98rem;
  color: var(--text-mid);
  line-height: 1.68;
  max-width: 60ch;
}

/* --------------------------------------------------------------- contact */

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
.contact__lead {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.02rem;
  line-height: 1.68;
  max-width: 46ch;
}

.contact__details { margin-top: 2.5rem; display: grid; gap: 1.4rem; }
.contact__row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.contact__row svg { width: 18px; height: 18px; color: var(--accent); margin-top: 0.28rem; flex: none; }
.contact__row dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.2rem;
}
.contact__row dd {
  margin: 0;
  font-size: 1rem;
  color: var(--white);
  line-height: 1.5;
}
.contact__row a:hover { color: var(--accent-lift); }

/* Keyless Google Maps embed (`output=embed`). Fine for a mockup, but the
   production build should move to the Maps Embed API with a referrer-restricted
   key: the keyless form is undocumented and Google can change it without
   notice. Same inset-and-rounded language as everything else on the page. */
.contact__map {
  margin-top: 2.2rem;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-deep);
}
.contact__map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  /* The map arrives bright white against an ink navy card. Pulling the
     saturation and brightness back a touch settles it into the section
     without costing the legibility of the street names. */
  filter: saturate(0.8) brightness(0.96);
}
.contact__map-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.15rem;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--white);
  border-top: 1px solid var(--ink-line);
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.contact__map-link:hover { color: var(--accent-lift); gap: 0.7rem; }
.contact__map-link svg { width: 14px; height: 14px; flex: none; }

/* form */
.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.form-card h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.028em; margin-bottom: 0.5rem; }
.form-card__note { font-size: 0.88rem; color: var(--muted); margin-bottom: 1.75rem; }

.form-grid { display: grid; gap: 1.15rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.field label .req { color: var(--accent-deep); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
}
.field input::placeholder, .field textarea::placeholder { color: #9AA0A7; }

.field__error {
  font-size: 0.8rem;
  color: #B3261E;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #B3261E; }
.field.is-invalid .field__error { opacity: 1; }

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.55;
}
.form-consent input { margin-top: 0.22rem; flex: none; width: 16px; height: 16px; accent-color: var(--accent-deep); }

.form-card .btn { width: 100%; padding: 1.05rem 1.6rem; }

.form-status {
  font-size: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-error { background: #FDECEA; color: #8C1D18; }
.form-status.is-success { background: #E9F4EC; color: #1E5631; }

/* Legal disclaimer sits under the form, not hidden in the footer. */
.form-disclaimer {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
}

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

.footer {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
}
.footer .brand__name { color: var(--cream); }
.footer__inner {
  padding-top: 3.5rem;
  padding-bottom: 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}
.footer h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.1rem;
}
.footer__brand .brand__name { font-size: 1.2rem; }
.footer__blurb { margin-top: 1rem; line-height: 1.65; max-width: 34ch; }
.footer__links { display: grid; gap: 0.65rem; }
.footer__links a:hover { color: var(--accent-lift); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
}
.footer__bottom a:hover { color: var(--accent-lift); }

/* ------------------------------------------------------------- reveal fx */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 1120px) {
  .nav__list { gap: 1.5rem; }
  .nav__link { font-size: 0.88rem; }
}

@media (max-width: 940px) {
  /* The rail drops under the row and turns horizontal, so the copy keeps
     a usable measure once the three columns stop fitting. */
  .practice-card__body { grid-template-columns: 160px 1fr; }
  .practice-card__rail {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--stone-line);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .practice-card__cta { width: auto; }
  .approach__inner,
  .areas__inner,
  .contact__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  /* The nav, the wordmark and the phone stop fitting one row here. */
  .nav-toggle { display: flex; }
  .header__phone { display: none; }

  .nav {
    position: fixed;
    inset: auto 0 auto 0;
    top: var(--header-offset, 82px);
    display: block;
    background: var(--cream);
    border-top: 1px solid var(--stone);
    border-bottom: 1px solid var(--stone);
    padding: 0.5rem var(--gutter) 1.5rem;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
    max-height: calc(100vh - var(--header-offset, 82px));
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__item { width: 100%; }
  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--stone);
  }

  /* Dropdowns become inline accordions rather than floating panels. */
  .nav__menu {
    position: static;
    transform: none;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__item.is-open .nav__menu {
    display: grid;
    transform: none;
    padding: 0.4rem 0 0.8rem 0.9rem;
  }
  .nav__menu a { padding: 0.6rem 0.5rem; }

  .nav__phone {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0.95rem 1.25rem;
    background: var(--ink);
    color: var(--white);
    border-radius: var(--radius);
    font-weight: 600;
  }
  .nav__phone:hover { background: var(--ink-deep); color: var(--white); }
}

@media (max-width: 780px) {
  .form-row { grid-template-columns: 1fr; }

  .hero__card { min-height: 0; padding-top: 3rem; padding-bottom: 1.75rem; }
  .hero__foot { align-items: stretch; }
  .hero__action {
    width: 100%;
    min-width: 0;
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .hero__action-text { align-items: center; text-align: center; }
  .hero__action .btn { margin-left: 0; width: 100%; }
  .announce__inner { padding-right: 2.5rem; }
}

@media (max-width: 560px) {
  .practice-card__body { grid-template-columns: 1fr; }
  .practice-card__media { min-height: 150px; }
  .practice-card__rail { flex-direction: column; align-items: stretch; }
  .practice-card__cta { width: 100%; }
  .areas__grid { grid-template-columns: 1fr; }
  .contact__map iframe { height: 240px; }
  .footer__inner { grid-template-columns: 1fr; }
  /* The strap and the caption both bottom out at their clamp floor well before
     phone widths (the vw term stops doing anything below 708px and 1045px
     respectively), so on a phone they sat at desktop's smallest size with none
     of desktop's room. Stepping down about 12% gives the headline above them
     the room to stay the thing you read first. */
  .hero__strap { font-size: 1rem; line-height: 1.32; }
  .hero__caption { font-size: 0.86rem; max-width: none; }
}