/* Arizona Translators. The look: crisp paper, ink, the company's red for action, Arizona copper for
   the seal and certification, and a court navy for the bands. Headings in Source Serif 4 (the voice of
   a document), text in Public Sans (made for US public-service sites). The certificate on the home page
   is the one bold piece; everything around it stays quiet. */
:root {
  --paper: #ffffff;
  --mist: #f3f5f8;
  --ink: #141821;
  --slate: #4a5263;
  --line: #dce1e8;
  --red: #c8102e;
  --red-dark: #9e0b23;
  --copper: #b4652a;
  --navy: #15213a;
  --navy-ink: #e8ecf3;
  --navy-muted: #aab4c6;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;  /* the logo's name only */
  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --sans: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wide: 74rem;
  --text: 40rem;
  --radius: 0.5rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); }
img, svg { display: block; max-width: 100%; }
a { color: var(--red-dark); text-underline-offset: 0.18em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 50; background: var(--ink); color: #fff; padding: 0.5rem 0.75rem; }
.skip:focus { left: 0.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Type */
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.6em; }
h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-variation-settings: "opsz" 60; }
h2 { font-size: clamp(1.625rem, 2.8vw, 2.25rem); font-variation-settings: "opsz" 48; }
h3 { font-size: 1.3125rem; font-weight: 600; font-variation-settings: "opsz" 24; line-height: 1.25; }
p { margin: 0 0 1rem; max-width: var(--text); }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--slate); max-width: 36rem; }
.muted { color: var(--slate); }
.small { font-size: 0.9375rem; }

/* Layout */
.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-mist { background: var(--mist); border-top: 0 !important; }
.section-head { max-width: 44rem; margin-bottom: 2.25rem; }
.section-head p { color: var(--slate); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); }
.top-inner { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--ink); flex: none; }
.brand .mark { width: 2.5rem; height: 2.5rem; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; font-variation-settings: "opsz" 24; }
.brand-light { color: #fff; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.menu ul { list-style: none; display: flex; gap: 0.25rem 1.1rem; margin: 0; padding: 0; }
.menu ul li { white-space: nowrap; }
.menu ul a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.96875rem; padding: 0.5rem 0; border-bottom: 2px solid transparent; }
.menu ul a:hover { border-bottom-color: var(--line); color: var(--ink); }
.menu ul a[aria-current="page"] { border-bottom-color: var(--red); }
.lang-switch { font-weight: 600; font-size: 0.9375rem; color: var(--slate); text-decoration: none; }
.lang-switch:hover { color: var(--ink); text-decoration: underline; }
.menu-button { display: none; margin-left: auto; font: 600 0.9375rem var(--sans); padding: 0.45rem 0.9rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: 600 1rem/1.2 var(--sans); padding: 0.85rem 1.35rem;
  border-radius: var(--radius); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn-light:hover { background: #fff; color: var(--navy); }
.btn-small { padding: 0.55rem 1rem; font-size: 0.9375rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; max-width: none; }

/* Hero */
.hero { padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5.5rem); }
.hero .split { align-items: center; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.hero h1 { max-width: 19ch; }
.facts { list-style: none; padding: 0; margin: 2.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; color: var(--slate); font-size: 0.96875rem; }
.facts li { padding-left: 1.1rem; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--copper); }
.facts strong { color: var(--ink); font-weight: 600; }
.page-hero { padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.page-hero h1 { max-width: 20ch; }

/* The certificate: a certified translation, drawn */
.cert { margin: 0; position: relative; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 0.375rem; padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -28px rgba(21, 33, 58, 0.45); }
.cert::before { content: ""; position: absolute; inset: 0.45rem; border: 1px solid rgba(180, 101, 42, 0.35); border-radius: 0.2rem; pointer-events: none; }
.cert-title { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; text-align: center; margin: 0.25rem auto 1.25rem; color: var(--ink); max-width: none; }
.cert-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; }
.cert-col { min-width: 0; }
.cert-lang { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--copper); margin-bottom: 0.2rem; }
.cert-doc { font-family: var(--display); font-weight: 600; font-size: 1rem; margin: 0 0 0.75rem; line-height: 1.25; }
.cert-line { display: block; height: 0.42rem; border-radius: 0.21rem; background: #e6e9ef; margin: 0 0 0.55rem; }
.cert-col.translated .cert-line { background: #cdd3dd; transform-origin: left center; }
.cert-arrow { width: 1.75rem; color: var(--copper); margin-top: 1.6rem; }
.w95 { width: 95%; } .w85 { width: 85%; } .w75 { width: 75%; } .w60 { width: 60%; } .w45 { width: 45%; }
.cert-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.cert-sign { font-size: 0.75rem; color: var(--slate); }
.cert-sign svg { width: 8.5rem; height: 2.4rem; color: var(--navy); margin-bottom: 0.15rem; }
.cert-sign span { display: block; border-top: 1px solid var(--slate); padding-top: 0.2rem; }
.seal { width: 6.75rem; height: 6.75rem; flex: none; transform: rotate(-8deg); }
.seal text { font-family: var(--sans); font-weight: 700; font-size: 7.4px; letter-spacing: 0.9px; fill: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .cert-col.translated .cert-line { animation: write 0.7s cubic-bezier(.2, .7, .2, 1) both; }
  .cert-col.translated .cert-line:nth-of-type(2) { animation-delay: 0.25s; }
  .cert-col.translated .cert-line:nth-of-type(3) { animation-delay: 0.4s; }
  .cert-col.translated .cert-line:nth-of-type(4) { animation-delay: 0.55s; }
  .cert-col.translated .cert-line:nth-of-type(5) { animation-delay: 0.7s; }
  .seal { animation: stamp 0.5s 1.25s cubic-bezier(.3, 1.4, .5, 1) both; }
}
@keyframes write { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.35); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.service { padding: 1.75rem 1.75rem 1.5rem 0; }
.service + .service { padding-left: 1.75rem; border-left: 1px solid var(--line); }
.service h3 a { color: var(--ink); text-decoration: none; }
.service h3 a:hover { color: var(--red); }
.service p { color: var(--slate); font-size: 1rem; }
.more { font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }

/* Lists of things */
.ticks { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2.5rem; }
.ticks li { break-inside: avoid; padding: 0.6rem 0 0.6rem 1.9rem; border-bottom: 1px solid var(--line); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0.15rem; top: 0.95rem; width: 0.95rem; height: 0.5rem; border-left: 2.5px solid var(--copper);
  border-bottom: 2.5px solid var(--copper); transform: rotate(-45deg); }
.ticks.one { columns: 1; }

/* The navy band: what you can count on */
.band { background: var(--navy); color: var(--navy-ink); }
.band h2, .band h3 { color: #fff; }
.band .section-head p { color: var(--navy-muted); }
.band a { color: #fff; }
.pledges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 3rem; margin: 0; }
.pledges div { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 1.1rem; }
.pledges dt { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: #fff; margin-bottom: 0.35rem; }
.pledges dd { margin: 0; color: var(--navy-muted); font-size: 1rem; }

/* Steps: a real sequence, so they're numbered */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid var(--red);
  color: var(--red); font: 700 1.0625rem var(--display); margin-bottom: 1rem; }
.steps p { color: var(--slate); font-size: 1rem; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; margin: 0 0 2rem; }
.review { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--red); }
.review blockquote { margin: 0 0 0.75rem; font-family: var(--display); font-size: 1.1875rem; line-height: 1.45; font-weight: 600; font-variation-settings: "opsz" 20; }
.review blockquote p { margin: 0; }
.review figcaption { font-size: 0.9375rem; color: var(--slate); }
.review figcaption b { color: var(--ink); font-weight: 600; }
.stars { color: var(--copper); letter-spacing: 0.1em; }

/* Languages */
.scripts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--ink); margin: 0 0 2rem;
  max-width: none; font-family: var(--display); }
.scripts span:nth-child(3n+2) { color: var(--red); }
.scripts span:nth-child(3n) { color: var(--copper); }
.langs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 2rem; }
.langs li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.langs .native { color: var(--slate); font-size: 0.96875rem; text-align: right; }

/* Questions */
.faqs { max-width: 46rem; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font-family: var(--display); font-weight: 600;
  font-size: 1.1875rem; font-variation-settings: "opsz" 20; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.4rem; top: 1.45rem; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate); transform: rotate(45deg); transition: transform 0.2s; }
.faq[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq p { color: var(--slate); padding-bottom: 0.5rem; }

/* Closing call to action */
.cta { background: var(--mist); }
.cta .split { align-items: center; }
.cta address { font-style: normal; color: var(--slate); }
.cta address strong { color: var(--ink); display: block; font-weight: 600; }

/* Small spacing helpers (no inline styles, so the security policy can stay strict) */
.section-flush { padding-top: 0; }
.after-list { margin-top: 1.5rem; }
.narrow { max-width: 32rem; }

/* Prose pages */
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.aside-box { background: var(--mist); border-radius: var(--radius); padding: 1.5rem 1.75rem; }
.aside-box h3 { margin-bottom: 0.4rem; }
.aside-box p:last-child { margin-bottom: 0; }

/* The quote form */
.quote-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.quote { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.96875rem; }
.field.full { grid-column: 1 / -1; }
.field span.hint { font-weight: 400; color: var(--slate); font-size: 0.875rem; }
.field input, .field select, .field textarea { font: 400 1rem var(--sans); color: var(--ink); background: var(--paper); border: 1px solid #b9c1cd; border-radius: var(--radius);
  padding: 0.7rem 0.8rem; width: 100%; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: 2px solid rgba(180, 101, 42, 0.45); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--red); }
.choice-row { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; }
.choice-row legend { font-weight: 600; font-size: 0.96875rem; margin-bottom: 0.5rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choices label { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid #b9c1cd; border-radius: 999px; padding: 0.5rem 0.95rem; cursor: pointer;
  font-weight: 500; font-size: 0.96875rem; }
.choices input { accent-color: var(--red); margin: 0; }
.choices label:has(input:checked) { border-color: var(--red); background: #fdf0f2; }
.notice { border: 2px solid var(--ink); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0 0; max-width: 44rem; }
.notice p { margin: 0 0 0.5rem; max-width: none; font-weight: 600; }
.notice p:last-child { margin-bottom: 0; }
.notice .notice-law { font-weight: 400; font-size: 0.9375rem; color: var(--slate); }
.service .notice { padding: 0.75rem 0.9rem; margin-top: 1rem; border-width: 1.5px; }
.service .notice p { font-size: 0.9375rem; }
.services.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services.four .service:nth-child(3) { padding-left: 0; border-left: 0; }
.services.four .service:nth-child(n+3) { border-top: 1px solid var(--line); }
.foot-notice { width: min(100% - 2.5rem, var(--wide)); margin: 0 auto; padding: 0 0 1.25rem; font-size: 1rem; color: #fff; max-width: none; }
.consent { grid-column: 1 / -1; display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9375rem; color: var(--slate); font-weight: 400; }
.consent input { margin-top: 0.3rem; accent-color: var(--red); }
.form-end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-note { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--slate); margin: 0; }
.form-status { grid-column: 1 / -1; border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0; max-width: none; }
.form-status.ok { background: #eef7f0; color: #14532d; }
.form-status.bad { background: #fdf0f2; color: var(--red-dark); }
[hidden] { display: none !important; }

/* Footer */
.foot { background: var(--navy); color: var(--navy-muted); font-size: 0.96875rem; }
.foot-inner { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem 3rem;
  padding: 3.5rem 0 2.5rem; }
.foot h2 { font-family: var(--sans); font-size: 0.875rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; margin: 0 0 0.75rem; }
.foot a { color: var(--navy-ink); }
.foot a:hover { color: #fff; }
.foot ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.foot li { margin: 0 0 0.35rem; }
.foot .brand .mark { color: #fff; }
.foot-brand p { margin-top: 1rem; max-width: 18rem; }
.foot .lang-switch { color: var(--navy-ink); }
.foot-legal { width: min(100% - 2.5rem, var(--wide)); margin: 0 auto; padding: 1.25rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.875rem;
  max-width: none; }

/* Below 1200px the menu folds into a button */
@media (max-width: 75rem) {
  .menu-button { display: inline-flex; }
  .menu ul li { white-space: normal; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.25rem 1.25rem; }
  .menu.open { display: flex; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu ul a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .menu ul a[aria-current="page"] { border-bottom-color: var(--line); color: var(--red-dark); }
  .lang-switch { padding: 0.85rem 0; }
  .menu .btn { margin-top: 0.5rem; }
  .top-inner { position: relative; }
}

/* Tablets and phones: one column */
@media (max-width: 62rem) {
  .split, .hero .split, .quote-grid { grid-template-columns: 1fr; }
  .services, .services.four { grid-template-columns: 1fr; }
  .services.four .service:nth-child(3) { padding-left: 0; }
  .service, .service + .service { padding: 1.5rem 0; border-left: 0; }
  .service + .service { border-top: 1px solid var(--line); }
  .pledges, .steps { grid-template-columns: 1fr 1fr; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .wrap, .top-inner, .foot-inner, .foot-legal { width: calc(100% - 2rem); }
  .ticks { columns: 1; }
  .pledges, .steps, .reviews { grid-template-columns: 1fr; }
  .quote { grid-template-columns: 1fr; }
  .cert { padding: 1.25rem 1.1rem 1.1rem; }
  .cert-cols { gap: 0.6rem; }
  .seal { width: 5.25rem; height: 5.25rem; }
  .foot-inner { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 100%; }
}

/* The refresh: a dark hero, the facts at a glance, bold service tiles, the map, a closing band */
.hero-dark { background: var(--navy); color: var(--navy-ink); }
.hero-dark h1 { color: #fff; font-size: clamp(2.25rem, 4.4vw, 3.4rem); }
.hero-dark .lede { color: var(--navy-muted); }
.hello { font: 700 1.0625rem/1 var(--display); color: #ffb3bf; margin: 0 0 1rem; min-height: 1.1em; }
.hello span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .hello span.swap { animation: hello 0.45s ease both; } }
@keyframes hello { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
.stats-bar { border-bottom: 1px solid var(--line); }
.stats { list-style: none; margin: 0; padding: 1.75rem 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; }
.stats li { display: flex; flex-direction: column; gap: 0.15rem; }
.stats b { font: 800 clamp(1.75rem, 3vw, 2.25rem)/1 var(--display); color: var(--red); letter-spacing: -0.02em; }
.stats span { color: var(--slate); font-size: 0.96875rem; }
.badges { list-style: none; margin: 0; padding: 0 0 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.badges li { font-size: 0.9375rem; font-weight: 600; padding: 0.35rem 0.85rem 0.35rem 2rem; border: 1px solid var(--line); border-radius: 999px; position: relative; }
.badges li::before { content: ""; position: absolute; left: 0.85rem; top: 0.72rem; width: 0.7rem; height: 0.38rem; border-left: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(-45deg); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.tile { display: flex; flex-direction: column; gap: 0.5rem; padding: 2rem 2rem 1.75rem; border-radius: 0.875rem; color: #fff; text-decoration: none; min-height: 15rem; position: relative; overflow: hidden; }
.tile svg { width: 3rem; height: 3rem; margin-bottom: 0.75rem; }
.tile h3 { color: #fff; font-size: 1.625rem; margin: 0; }
.tile p { color: rgba(255, 255, 255, 0.86); margin: 0; font-size: 1.0625rem; max-width: 26rem; }
.tile .tile-more { margin-top: auto; padding-top: 1rem; font-weight: 700; color: #fff; }
.tile .tile-more::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 0.5rem; vertical-align: 0.1em; }
.tile:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) { .tile { transition: transform 0.2s ease, box-shadow 0.2s ease; } .tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(21, 33, 58, 0.7); } }
.tile-navy { background: var(--navy); }
.tile-red { background: var(--red); }
.tile-green { background: #2f6d57; }
.tile-copper { background: #96501f; }
.steps.short h3 { margin-bottom: 0.25rem; }
.visit address { font-style: normal; font-size: 1.125rem; line-height: 1.6; margin-bottom: 0.5rem; }
.visit address strong { display: block; font-family: var(--display); font-size: 1.25rem; }
.visit .hours { color: var(--slate); }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--mist); aspect-ratio: 4 / 3; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.cta-band { background: var(--red); color: #ffe3e8; padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.btn-white { background: #fff; color: var(--red-dark); }
.btn-white:hover { background: #ffe9ec; color: var(--red-dark); }
.band .scripts { color: #fff; }
.band .scripts span:nth-child(3n+2) { color: #ff9fae; }
.band .scripts span:nth-child(3n) { color: #f2bb8c; }
.band .more { color: #fff; }
.cta-band h2 { color: #fff; margin-bottom: 0.35rem; }
.cta-band p { margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.cta-row .actions { margin: 0; }
.reviews.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews.three { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; padding: 1.5rem; }
}

/* Round two: Español beside the menu button, the documents we translate (a color for each kind), the quote
   form on the home page, the bar of actions on phones, and the choice of email */
.lang-top { display: none; }
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.doc-cat { --cat: var(--navy); background: var(--mist); border-top: 5px solid var(--cat); border-radius: 0 0 var(--radius) var(--radius); padding: 1.35rem 1.4rem 1.3rem; }
.doc-cat h3 { color: var(--cat); font-weight: 800; margin-bottom: 0.45rem; }
.doc-cat p { margin: 0; color: var(--slate); font-size: 1rem; }
.c-navy { --cat: var(--navy); }
.c-red { --cat: var(--red); }
.c-green { --cat: #2f6d57; }
.c-copper { --cat: #96501f; }
.c-blue { --cat: #2b5c8a; }
.c-plum { --cat: #6e3b5c; }
.quote-section { background: var(--mist); }
.section + .quote-section { border-top: 0; }
.quote-section .contact-card { background: var(--paper); }
.contact-card p { margin-bottom: 0.9rem; }
.contact-card .map { margin: 0.25rem 0 0.6rem; }
.action-bar { display: none; }
.mail-choice { border: 0; padding: 0; border-radius: 0.875rem; width: min(24rem, calc(100vw - 2rem)); color: var(--ink); background: var(--paper);
  box-shadow: 0 24px 60px -12px rgba(21, 33, 58, 0.45); }
.mail-choice::backdrop { background: rgba(21, 33, 58, 0.55); }
.mail-box { padding: 1.5rem; }
.mail-box h2 { font-size: 1.5rem; margin: 0 0 0.2rem; }
.mail-to { color: var(--slate); margin: 0 0 1.1rem; overflow-wrap: anywhere; }
.mail-options { display: grid; gap: 0.55rem; }
.mail-option { display: block; padding: 0.85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); font-weight: 700; color: var(--ink); text-decoration: none; }
.mail-option:hover, .mail-option:focus-visible { border-color: var(--red); color: var(--red-dark); }
.mail-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; }
.mail-foot button { font: 600 0.9375rem var(--sans); color: var(--slate); background: none; border: 0; padding: 0.4rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
.mail-foot button:hover { color: var(--ink); }
@media (max-width: 75rem) {
  .lang-top { display: inline-flex; margin-left: auto; padding: 0.5rem 0.25rem; }
  .lang-top + .menu-button { margin-left: 0; }
  .menu .lang-switch { display: none; }
}
@media (max-width: 62rem) {
  .doc-grid { grid-template-columns: 1fr 1fr; }
  .action-bar { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--line); }
  .action-bar .btn { padding: 0.8rem 0.75rem; }
  .foot { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  body:has(form :focus) .action-bar { display: none; }  /* out of the way of the keyboard while typing */
}
@media (max-width: 40rem) {
  .doc-grid { grid-template-columns: 1fr; }
  .top-inner { gap: 0.75rem; }
}
@media (max-width: 30rem) {
  .top .brand-name { width: min-content; font-size: 1.0625rem; line-height: 1.05; }  /* the name on two lines, so Español and Menu fit */
}