/* ==========================================================================
   TLI Underwriting — design tokens
   ========================================================================== */
:root {
  --navy: #0b0f1f;
  --slate: #4b5470;
  --blue: #0090cc;
  --blue-deep: #2e6aa6;
  --link-blue: #315f96;
  --yellow: #ffc20f;
  --white: #ffffff;
  --tint: #f4f6fa;
  --border: rgba(11, 15, 31, 0.12);
  --border-strong: rgba(11, 15, 31, 0.18);

  --gradient-brand: linear-gradient(90deg, #3f3f78 0%, #315f96 35%, #0090cc 70%, #00aabc 100%);
  --gradient-footer: linear-gradient(90deg, #2e2f5e 0%, #27497a 40%, #0b6f9e 75%, #0a8a9a 100%);
  --gradient-card: linear-gradient(160deg, #3f3f78 0%, #315f96 45%, #0090cc 100%);
  --gradient-icon: linear-gradient(135deg, #2e6aa6 0%, #0090cc 100%);
  --gradient-avatar: linear-gradient(160deg, #2b3f6e 0%, #24507c 100%);
  --gradient-overlay: linear-gradient(to bottom, rgba(46, 63, 110, 0) 50%, rgba(46, 63, 110, 0.6) 100%);

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-w: 1280px;
  --header-h: 76px;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 10px;

  --shadow-figure: 0 30px 60px -28px rgba(11, 15, 31, 0.5);
  --shadow-card: 0 2px 6px 0 rgba(11, 15, 31, 0.06), 0 18px 36px -18px rgba(11, 15, 31, 0.3);
  --shadow-glance: 0 24px 48px -20px rgba(11, 15, 31, 0.4);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 640px) {
  .container { padding: 0 40px; }
}
@media (min-width: 1360px) {
  .container { padding: 0; }
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.eyebrow {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 16px;
}
.eyebrow-light { color: #bfe3f0; }
.eyebrow-yellow { color: var(--yellow); }

h1 {
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 1.03;
  color: var(--white);
  margin: 0 0 24px;
}

h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.15rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 20px;
}

h3 {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0 0 8px;
}

.lead {
  font-size: 1.15rem;
  color: var(--slate);
  max-width: 640px;
  margin: 0;
}
.lead-light { color: rgba(255, 255, 255, 0.85); }

.section-head { margin-bottom: 56px; max-width: 780px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.99rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
  /* Brand buttons are slanted parallelograms in the Figma file (skewX(-12deg)
     on the button, skewX(12deg) on its contents to keep the label upright). */
  transform: skewX(-12deg);
}
.btn:hover { transform: skewX(-12deg) translateY(-2px); }
.btn > * {
  display: inline-flex;
  align-items: center;
  transform: skewX(12deg);
}
.btn img { flex-shrink: 0; }

.btn-yellow { background: var(--yellow); color: var(--navy); }
.btn-yellow:hover { box-shadow: 0 10px 24px -8px rgba(255, 194, 15, 0.6); }

.btn-outline-light {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.btn-outline-light:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); }

.btn-outline-dark {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}
.btn-outline-dark:hover { box-shadow: inset 0 0 0 1.5px var(--navy), 0 8px 20px -10px rgba(11,15,31,0.3); }

.btn-sm { padding: 11px 18px; font-size: 0.92rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--gradient-brand);
  box-shadow: 0 4px 20px -8px rgba(11, 15, 31, 0.35);
}
.header-inner {
  max-width: var(--container-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 640px) { .header-inner { padding: 0 40px; } }
@media (min-width: 1360px) { .header-inner { padding: 0; } }

.brand img { height: 42px; width: auto; }

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 8px;
}
.primary-nav a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.primary-nav a:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.header-phone {
  font-weight: 600;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .header-phone { display: none; }
  .header-actions { border-left: none; padding-left: 0; gap: 12px; }
}

@media (max-width: 780px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: #1a2340;
    padding: 12px 24px 28px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 20px 30px -20px rgba(0,0,0,0.4);
  }
  .primary-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .primary-nav a { padding: 14px 12px; border-radius: 10px; }
  .header-actions .btn-sm span { display: inline; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-brand);
  padding: 72px 0 96px;
  isolation: isolate;
}
.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  z-index: 0;
  clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 14% 100%);
}
.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #3f3f78 0%, rgba(49,95,150,0.9) 30%, rgba(0,144,204,0.45) 62%, rgba(0,170,188,0.2) 100%),
    linear-gradient(0deg, rgba(0,150,200,0.55) 0%, rgba(0,150,200,0) 30%);
  z-index: 1;
}

/* Diagonal accent wedges — geometry ported from the Figma masks (hero-vector1.svg /
   hero-vector2.svg), which were authored against the fixed 1440x900 desktop frame.
   The hero here renders shorter than 900px (content-driven height, not a fixed frame),
   so these are locked to that same 1440:900 ratio and bottom-anchored — matching the
   design's "xMaxYMax" anchor — rather than stretched with inset:0, which squished the
   percentage-based geometry into a sliver hugging the bottom edge. */
.hero-wedges,
.hero-wedge-white {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1440 / 900;
  pointer-events: none;
}
.hero-wedges { z-index: 2; }
/* The white wedge is a simple (non-self-intersecting) polygon built from the same
   Figma geometry — kept as a CSS clip-path rather than the raw SVG path, because the
   original path is a self-intersecting "bowtie" that relies on segments outside the
   visible box; nested inside this section's overflow:hidden, that off-canvas geometry
   gets miscomputed and the shape drops out. The plain polygon avoids the issue entirely. */
.hero-wedge-white {
  z-index: 3;
  background: var(--white);
  clip-path: polygon(100% 23.68%, 100% 100%, 67.17% 100%, 71.75% 98.03%, 75.1% 92.67%);
}
@media (max-width: 1100px) {
  .hero-wedges, .hero-wedge-white { display: none; }
  .hero-bg-image { clip-path: none; opacity: 0.45; }
}

.hero-content {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  padding-top: 40px;
}
@media (min-width: 1100px) {
  .hero-content { grid-template-columns: minmax(0, 1fr) 320px; padding-top: 90px; }
}

.hero-copy { max-width: 640px; }

.glance-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glance), inset 0 1px 0 1px rgba(255, 255, 255, 0.9);
  padding: 22px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.glance-row { display: flex; align-items: center; gap: 14px; }
.glance-row:not(:first-child) { padding-top: 18px; border-top: 1px solid rgba(11, 15, 31, 0.1); }
.glance-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gradient-icon);
  display: flex;
  align-items: center;
  justify-content: center;
}
.glance-stat { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--navy); }
.glance-label { font-size: 0.85rem; color: var(--slate); margin-top: 2px; }

/* ==========================================================================
   Sections (general)
   ========================================================================== */
.section { padding: 96px 0; }
.section-tint { background: var(--tint); }

/* ==========================================================================
   What we do — feature block
   ========================================================================== */
.feature-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (min-width: 960px) {
  .feature-block { grid-template-columns: 480px minmax(0, 1fr); gap: 72px; }
}

.feature-figure {
  position: relative;
  border-radius: var(--radius-md);
  overflow: visible;
  aspect-ratio: 1 / 1;
}
.feature-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-figure);
  position: relative;
  z-index: 1;
}
.figure-accent {
  position: absolute;
  left: 44%;
  bottom: -8px;
  transform: skewX(-12deg);
  width: 38%;
  height: 12px;
  background: var(--yellow);
  border-radius: 6px;
  z-index: 0;
}

.feature-copy h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.28; margin-bottom: 24px; }

.check-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 28px 0 0;
}
@media (min-width: 620px) {
  .check-list { grid-template-columns: 1fr 1fr; }
}
.check-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.35;
}
.check-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* ==========================================================================
   Why us
   ========================================================================== */
.why-us-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (min-width: 960px) {
  .why-us-grid { grid-template-columns: minmax(0, 1fr) 460px; }
}

.why-us-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.why-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
}
.why-card p { color: var(--slate); font-size: 0.95rem; margin-top: 6px; }
.why-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--gradient-icon);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-us-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
  aspect-ratio: 497 / 622;
  align-self: start;
}
@media (min-width: 960px) {
  .why-us-figure { position: sticky; top: calc(var(--header-h) + 32px); }
}
.why-us-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-figure);
  position: relative;
  z-index: 1;
}
.why-us-figure .figure-accent { left: 46%; width: 38%; }

/* ==========================================================================
   About the team
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 720px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.team-card { display: flex; flex-direction: column; }
.team-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--gradient-avatar);
  box-shadow: inset -4px 0 0 0 var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  /* Skewed parallelogram, matching the Figma file's team photo treatment. */
  transform: skewX(-12deg);

  /* The skew is applied to a square, and skewX(-12deg) about the box centre
     throws the bottom-left corner left by tan(12) / 2 x width and the top-right
     corner right by the same amount. A full-width square therefore PAINTS
     1 + tan(12) = 1.2126 x the column, and that painted overhang used to run
     past the left edge of the screen on narrow viewports.

     Sizing the box to 1 / (1 + tan(12)) = 82.4704% of the column, and giving
     back half of the difference (8.7648%) as a left margin, makes the painted
     parallelogram land exactly on the column edge to edge at every width - no
     overflow, and no overhang into the neighbouring card. */
  width: 82.4704%;
  margin-left: 8.7648%;
}
.team-photo span {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.28);
  transform: skewX(12deg);
}
.team-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.team-role { color: var(--slate); font-size: 0.95rem; margin-bottom: 14px; }
.team-link {
  display: block;
  font-size: 0.88rem;
  color: var(--link-blue);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  /* Email addresses offer no break opportunity, so at tablet widths the three
     team columns were narrower than the address and the page scrolled sideways.
     The markup places a <wbr> after the "@" so the address breaks cleanly there
     first; this is the safety net for anything that still cannot fit a line. */
  overflow-wrap: break-word;
}
.team-link:hover { color: var(--blue); }

/* ==========================================================================
   Downloads
   ========================================================================== */
.downloads-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 620px) { .downloads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .downloads-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.doc-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
/* Every card is identical at rest; hover lifts it and swaps the icon tile to yellow
   (with the glyph flipping to navy for contrast) — this was previously baked as a
   permanent "featured" look on one card, but in the Figma file that card was simply
   captured mid-hover, not a distinct variant. */
.doc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--border-strong);
}
.doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gradient-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  transition: background 0.15s ease;
}
.doc-card:hover .doc-icon { background: var(--yellow); }
.doc-icon-glyph {
  width: 20px;
  height: 20px;
  display: block;
  background: var(--white);
  /* Inlined as a data URI (not a file reference) because some browsers refuse to
     load an external SVG used as a mask source when the page is opened directly
     from disk (file:// — e.g. straight out of an unzipped folder), which made the
     icon disappear even though the coloured tile behind it still rendered. */
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3V13M5 9L10 14L15 9M4 17H16' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E");
  -webkit-mask: var(--icon-download) center / contain no-repeat;
  mask: var(--icon-download) center / contain no-repeat;
  transition: background 0.15s ease;
}
.doc-card:hover .doc-icon-glyph { background: var(--navy); }
.doc-card h3 { font-size: 1rem; margin-bottom: 8px; }
.doc-card p { font-size: 0.88rem; color: var(--slate); margin-bottom: 22px; line-height: 1.3; }
.doc-card:not(:has(p)) .doc-cta { margin-top: 22px; }
.doc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}
.doc-cta em { font-style: normal; color: var(--blue); }
.doc-cta img { width: 12px; height: 12px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 420px minmax(0, 1fr); }
}

.contact-info {
  background: var(--gradient-card);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--white);
  display: flex;
  flex-direction: column;
}
.contact-copy { color: rgba(255, 255, 255, 0.88); font-size: 1rem; margin-bottom: 8px; }
.contact-detail { margin-top: 24px; }
.contact-detail .eyebrow { margin-bottom: 8px; }
/* The enquiries address is wider than the dark card's content box below ~360px,
   where it used to spill past the card edge. The markup carries a <wbr> after
   the "@" so it breaks cleanly there; this is the fallback for longer values. */
.contact-value { font-size: 1rem; font-weight: 500; overflow-wrap: break-word; }
.contact-value a:hover { text-decoration: underline; }
.contact-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.contact-note p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.note-accent {
  flex-shrink: 0;
  width: 14px;
  height: 4px;
  margin-top: 9px;
  background: var(--yellow);
  transform: skewX(-12deg);
}

.contact-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid #b9c1d2;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 144, 204, 0.15);
}
.form-field textarea { resize: vertical; min-height: 120px; }

.form-note { font-size: 0.85rem; color: var(--slate); margin-top: 16px; }
.form-note.success { color: #157347; font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--gradient-footer);
  color: var(--white);
  padding-top: 72px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 48px;
}
@media (min-width: 780px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-brand .brand { display: inline-block; margin-bottom: 20px; }
.footer-brand p { color: rgba(255, 255, 255, 0.72); max-width: 320px; font-size: 0.95rem; }

.footer-nav ul { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.footer-nav a { color: var(--white); font-weight: 500; font-size: 0.95rem; }
.footer-nav a:hover { color: var(--yellow); }

.footer-contact p { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; margin-top: 14px; }
.footer-contact p:first-of-type { margin-top: 14px; }
.footer-contact a { color: var(--white); font-weight: 500; }
.footer-contact a:hover { color: var(--yellow); }

.footer-legal {
  /* These rows are `.container` elements, and the shorthand `padding: 24px 0`
     was wiping out .container's own horizontal gutter. On phones that left the
     small print flush against the screen edges with no margin at all, and on
     desktop it ran the divider rules past the rest of the footer's gutters.
     Setting only the vertical values lets .container keep supplying the
     horizontal padding, so these rows line up at every breakpoint. */
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-legal p { font-size: 0.83rem; color: rgba(255, 255, 255, 0.72); line-height: 1.5; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  /* Vertical only, for the same reason as .footer-legal above. */
  padding-top: 20px;
  padding-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.72);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-bottom a:hover { color: var(--yellow); }

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 64px; }
  .glance-card { max-width: none; }
  .contact-info, .contact-form { padding: 28px; }

  /* Mobile: stack the call-to-action buttons and let each one fill the column,
     horizontally centred. Desktop keeps the natural content-width left-aligned
     row, since the two buttons sit side by side there.

     The buttons are slanted parallelograms (skewX(-12deg) on .btn), so one laid
     out at the full column width paints a few pixels wider than its box. That
     overhang falls inside the container's 24px gutter, so nothing is clipped or
     causes sideways scrolling.

     Careful when measuring: the skew makes a full-width button's bounding box
     report about 103% of the column, because a transform widens the
     axis-aligned box. The layout width is still exactly 100%; the painted
     shape just leans slightly past it. Don't "correct" that number by
     shrinking the width. */
  .btn-row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .btn-row .btn,
  .contact-form .btn {
    width: 100%;
  }
}