/* Basic resets. Most styling is inline in the page templates. */
body { margin: 0; }
a:hover { opacity: 0.85; }
input, textarea, button { font-family: inherit; }
input:focus, textarea:focus { outline: 2px solid #006B45; outline-offset: 1px; }

/* Header menu button: hidden on larger screens, and when JavaScript is off */
.hd-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: #FFFFFF; border: 1px solid rgba(8,44,80,0.25); cursor: pointer; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 720px) {
  /* Header: logo left, quote button and menu button right, links drop down */
  .hd { padding: 12px 20px !important; gap: 10px 12px !important; }
  .hd-logo img { height: 36px !important; }
  .hd-right { margin-left: auto; gap: 10px !important; flex-wrap: nowrap !important; }
  .hd-cta { min-height: 44px !important; padding: 0 16px !important; font-size: 11px !important; letter-spacing: 0.14em !important; }
  html.js .hd-toggle { display: inline-flex; }
  html.js .hd-nav { display: none !important; order: 3; width: 100%; flex-direction: column; gap: 0 !important; border-top: 1px solid rgba(8,44,80,0.14); }
  html.js .hd-nav.open { display: flex !important; }
  .hd-nav a { padding: 15px 0 !important; font-size: 16px !important; letter-spacing: 0.04em !important; opacity: 1 !important; border-bottom: 1px solid rgba(8,44,80,0.1); }
  html:not(.js) .hd-nav { gap: 6px 22px !important; }

  /* Section spacing */
  [style*="padding: 72px 24px"], [style*="padding: 88px 24px"], [style*="padding: 96px 24px"],
  [style*="padding: 104px 24px"], [style*="padding: 112px 24px"], [style*="padding: 120px 24px"] { padding: 44px 20px !important; }
  [style*="padding: 72px 24px 40px"] { padding: 48px 20px 28px !important; }
  [style*="padding: 24px 24px 36px"] { padding: 20px 20px 28px !important; }
  [style*="gap: 72px"], [style*="gap: 64px"], [style*="gap: 56px"] { gap: 28px !important; }

  /* Headings */
  h1[style] { font-size: 34px !important; line-height: 1.12 !important; }
  h2[style*="font-size: 44px"], h2[style*="font-size: 50px"], h2[style*="font-size: 40px"], h2[style*="font-size: 36px"] { font-size: 28px !important; line-height: 1.15 !important; }
  h3[style*="font-size: 24px"] { font-size: 20px !important; }
  [style*="font-size: 18px; line-height: 1.75"] { font-size: 17px !important; }

  /* Hero image */
  img[style*="height:460px"] { height: 230px !important; }

  /* Photo strip becomes a swipeable row */
  .photo-strip { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; -webkit-overflow-scrolling: touch; padding-bottom: 8px !important; }
  .photo-strip img { flex: 0 0 82%; height: 210px !important; scroll-snap-align: center; }

  /* Cards */
  [style*="padding: 40px 36px"] { padding: 24px 22px !important; gap: 12px !important; }
  [style*="font-size: 64px"] { font-size: 40px !important; }
  [style*="font-size: 15px"] { font-size: 16px !important; }

  /* Buttons and form fields */
  a[style*="min-height: 52px"]:not(.hd-cta) { width: 100%; box-sizing: border-box; }
  input, textarea, select { font-size: 16px !important; }

  /* Steps on the How it works page */
  [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] { gap: 28px !important; }

  /* Footer: two columns, easier to tap */
  [style*="repeat(auto-fit, minmax(180px, 1fr))"] { grid-template-columns: 1fr 1fr !important; gap: 32px 20px !important; }
  [style*="repeat(auto-fit, minmax(180px, 1fr))"] > :first-child { grid-column: 1 / -1; }
  [style*="repeat(auto-fit, minmax(180px, 1fr))"] a { padding: 6px 0; }
}
@media (max-width: 720px) { [style*="padding: 28px 24px"] { padding: 22px 20px !important; } }
[hidden] { display: none !important; }

/* Footer */
.ft-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ft-col p { margin: 0; font-weight: 300; font-size: 14px; line-height: 1.7; color: #E6EBEF; }
.ft-h { margin: 0 0 4px; font-weight: 600; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #D1D5D8; }
.ft-link { color: #E6EBEF; text-decoration: none; font-weight: 300; font-size: 14px; line-height: 1.7; }
.ft-link:hover { color: #FFFFFF; text-decoration: underline; }
.ft-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.ft-legal .ft-link { font-size: 12px; }
.ft-text { font-weight: 300; font-size: 14px; line-height: 1.7; color: #E6EBEF; cursor: default; }
@media (max-width: 720px) { .ft-cols { grid-template-columns: 1fr !important; gap: 32px !important; padding-top: 40px !important; } }