/* ==========================================================================
   MAIN — WNY RPM Solutions Inc.
   Mobile-first. Every value references tokens.css.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--callbar-h);           /* room for the sticky mobile call bar */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: var(--lh-head);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: -0.028em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.022em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: 700; }
p  { text-wrap: pretty; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow    { max-width: var(--container-narrow); margin-inline: auto; }
.section   { padding-block: var(--section-y); }
.section--tint  { background: var(--surface-2); }
.section--wash  { background: var(--brand-wash); }
.section--night { background: var(--night); color: var(--on-night-2); }
.section--night h2, .section--night h3, .section--night h4 { color: var(--on-night); }
.section--night a { color: var(--amber); }
.section--night strong { color: var(--on-night); }

.skip-link {
  position: absolute; left: var(--s-3); top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); color: #fff; }

/* ---------- Eyebrow / section head ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink);
  margin-bottom: var(--s-3);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--brand); border-radius: 2px; }
.section--night .eyebrow { color: var(--amber); }
.section-head { max-width: 44rem; margin-bottom: var(--s-7); }
.section-head p { font-size: var(--fs-md); margin-top: var(--s-4); }
.lede { font-size: var(--fs-md); color: var(--ink-2); }

/* ---------- Buttons (Rule 10 — copy is written per instance, never "Learn More") ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: var(--s-3) var(--s-6);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base);
  letter-spacing: .01em; text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-md); cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--amber); color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--brand-ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); color: var(--ink); }
.btn--on-night { background: var(--brand); color: var(--ink); }
.btn--on-night:hover { background: var(--amber); color: var(--ink); }
.btn--outline-night { background: transparent; color: var(--on-night); border-color: rgba(255,255,255,.32); }
.btn--outline-night:hover { border-color: var(--amber); color: var(--amber); }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-note { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s-3); }

/* ---------- Header ---------- */
.topbar {
  background: var(--ink); color: var(--on-night-2);
  font-size: var(--fs-xs); padding-block: var(--s-2);
}
.topbar .container { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: center; }
.topbar a { color: var(--amber); text-decoration: none; font-weight: 600; }
.topbar a:hover { color: #fff; text-decoration: underline; }
@media (min-width: 900px) { .topbar .container { justify-content: space-between; } }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.97); backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand img { width: 42px; height: 42px; }
.brand-name {
  font-family: var(--font-head); font-weight: 800; font-size: 1.0625rem;
  color: var(--ink); line-height: 1.05; letter-spacing: -.02em;
  white-space: nowrap;
}
.brand-name span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-ink); margin-top: 2px; }
.brand { flex: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: none; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); cursor: pointer;
}
.nav-toggle span { position: relative; width: 20px; height: 2px; background: var(--ink); display: block; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }

.site-nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md); padding: var(--s-4) 0 var(--s-5);
}
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; padding: 0 var(--gutter); margin: 0; }
.site-nav a {
  display: block; padding: var(--s-3) 0; min-height: 44px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md);
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brand-ink); }
.site-nav .nav-cta { margin-top: var(--s-4); padding-inline: var(--gutter); }
.header-call { display: none; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: block; position: static; background: none; border: 0; box-shadow: none; padding: 0;
    flex: 1;
  }
  .site-nav ul { display: flex; align-items: center; justify-content: flex-end;
    gap: clamp(0.75rem, 1.4vw, 1.5rem); padding: 0; }
  .site-nav a { border: 0; padding: var(--s-2) 0; font-size: var(--fs-sm); letter-spacing: -.005em;
    white-space: nowrap; }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brand); }
  .site-nav .nav-cta { display: none; }
  /* Nine nav items plus the brand plus this button is tight at 1280. Trim the
     button's horizontal padding and type so the row fits without wrapping. */
  .header-call {
    display: inline-flex; white-space: nowrap; flex: none;
    padding-inline: var(--s-4); font-size: var(--fs-sm);
  }
  .site-header .container { gap: var(--s-3); }
}

/* ---------- Sticky mobile call bar (Rule 14) ---------- */
.callbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  height: var(--callbar-h); border-top: 2px solid var(--ink);
  box-shadow: 0 -4px 16px rgba(22,24,28,.14);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none; color: var(--ink); background: var(--brand);
}
.callbar a + a { background: var(--surface); border-left: 1px solid var(--line); }
@media (min-width: 1024px) { .callbar { display: none; } body { padding-bottom: 0; } }

/* ---------- Breadcrumb ---------- */
.crumbs { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-3) 0; margin: 0; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); }
.crumbs a { color: var(--ink-3); }

/* ---------- Hero ----------
   No photograph. The client has real photos only of his own properties, so the
   heroes are built from brand colour and geometry instead of stock imagery.
   This is also the fastest possible LCP: there is no hero image to download. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-night-2);
  background:
    radial-gradient(120% 95% at 12% 0%, rgba(224,123,39,.26), transparent 58%),
    radial-gradient(95% 75% at 100% 100%, rgba(242,169,59,.14), transparent 55%),
    var(--night);
  border-bottom: 3px solid var(--brand);
}
/* Fine diagonal rule texture, echoing the scoring on the business card. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.030) 0 1px, transparent 1px 24px);
}
/* Corner mark: three bars, the same silhouette as the logo. Decorative only. */
.hero::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  right: clamp(-4rem, -2vw, -1rem); bottom: -2px; width: clamp(180px, 26vw, 340px); height: 62%;
  background:
    linear-gradient(to top, var(--brand) 0 100%) 0    100% / 17% 46% no-repeat,
    linear-gradient(to top, var(--amber) 0 100%) 27%  100% / 13% 74% no-repeat,
    linear-gradient(to top, var(--brand) 0 100%) 50%  100% / 20% 100% no-repeat,
    linear-gradient(to top, var(--amber) 0 100%) 78%  100% / 12% 58% no-repeat;
  opacity: .16;
}
@media (max-width: 700px) { .hero::before { opacity: .10; } }
.hero > .container { position: relative; z-index: 2; padding-block: clamp(3rem, 9vw, 6.5rem); }
.hero h1 { color: #fff; max-width: 17ch; }
.hero-sub { font-size: var(--fs-md); color: var(--on-night-2); max-width: 46ch; margin-top: var(--s-5); }
.hero .btn-row { margin-top: var(--s-6); }
.hero-tag {
  display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  background: rgba(240,169,59,.14); border: 1px solid rgba(242,169,59,.4);
  color: var(--amber); border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s-5);
}
.hero--compact > .container { padding-block: clamp(2.25rem, 6vw, 4rem); }
.hero--compact h1 { max-width: 20ch; }

/* ---------- Trust strip ---------- */
.trust {
  background: var(--ink); color: var(--on-night-2);
  border-top: 3px solid var(--brand); font-size: var(--fs-sm);
}
.trust ul { list-style: none; padding: var(--s-5) 0; margin: 0;
  display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.trust li { display: flex; gap: var(--s-3); align-items: flex-start; }
.trust b { color: #fff; font-family: var(--font-head); display: block; font-size: var(--fs-base); }
.trust .tick { color: var(--brand); font-weight: 800; flex: none; }
@media (min-width: 760px) { .trust ul { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

/* ---------- Answer block (Rule 8 — the 40–60 words LLMs lift) ---------- */
.answer {
  background: var(--brand-wash); border: 1px solid var(--brand-line);
  border-left: 5px solid var(--brand); border-radius: var(--r-md);
  padding: var(--s-5); margin-block: var(--s-6);
}
.answer h2, .answer h3 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.answer p { color: var(--ink-2); font-size: var(--fs-md); }
.answer p + p { margin-top: var(--s-3); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); }
                             .grid--3 { grid-template-columns: repeat(2, 1fr); }
                             .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { font-size: var(--fs-lg); }
.card p { font-size: var(--fs-sm); }
.card .card-link { margin-top: auto; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); }
.card-num {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm);
  color: var(--brand-ink); background: var(--brand-wash); border-radius: var(--r-sm);
  width: 34px; height: 34px; display: grid; place-items: center;
}
.card--flat:hover { transform: none; }
.card--night { background: var(--night-2); border-color: rgba(255,255,255,.1); color: var(--on-night-2); }
.card--night:hover { border-color: var(--amber); }

/* Door cards — the three-audience split. Typographic, no photograph. */
.door { position: relative; overflow: hidden; padding: 0; border-radius: var(--r-lg); }
.door-mark {
  position: relative; height: 108px; display: flex; align-items: flex-end;
  padding: var(--s-4) var(--s-5); overflow: hidden;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(224,123,39,.30), transparent 62%),
    var(--night);
  border-bottom: 3px solid var(--brand);
}
.door-mark b {
  font-family: var(--font-head); font-weight: 800; font-size: 2.75rem;
  line-height: .9; color: var(--amber); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.door-mark span {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-night-2);
  margin-left: var(--s-3); padding-bottom: .45rem;
}
.door-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.door-body h3 { font-size: var(--fs-xl); }

/* Property gallery — real photographs of properties under management. */
.pgrid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
.pgrid figure { margin: 0; }
.pgrid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); background: var(--surface-3);
}
.pgrid figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s-2); }

/* ---------- Service list rows ---------- */
.rows { display: grid; gap: var(--s-4); }
.row-item {
  display: grid; gap: var(--s-3); align-items: start;
  padding: var(--s-5); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
@media (min-width: 760px) { .row-item { grid-template-columns: 15rem 1fr; gap: var(--s-6); } }
.row-item h3 { font-size: var(--fs-lg); }

/* ---------- Pricing ---------- */
.tiers { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4);
}
.tier--feature { border: 2px solid var(--brand); box-shadow: var(--shadow-md); position: relative; }
.tier--feature::before {
  content: "Most common"; position: absolute; top: -13px; left: var(--s-5);
  background: var(--brand); color: var(--ink); font-family: var(--font-head);
  font-weight: 700; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
}
.tier h3 { font-size: var(--fs-lg); }
.tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.tier li { padding-left: 1.5rem; position: relative; }
.tier li::before { content: "+"; position: absolute; left: 0; color: var(--brand-ink); font-weight: 800; }
.tier .btn { margin-top: auto; }

.price {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-2xl);
  color: var(--ink); line-height: 1.1;
}
.price small { display: block; font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s-2); letter-spacing: 0; }

.price-note {
  font-size: var(--fs-sm); color: var(--brand-ink); font-weight: 600;
  background: var(--brand-wash); border: 1px solid var(--brand-line);
  border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); margin-top: calc(var(--s-2) * -1);
}

/* Rate tables: the number column reads as a column of numbers. */
td.rate {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.section--night td.rate { color: var(--amber); }

/* Honest missing-price placeholder (Rule 1 + Rule 9) */
.price--todo {
  font-size: var(--fs-lg); color: var(--todo); background: var(--todo-wash);
  border: 1px dashed var(--todo-line); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.price--todo small { color: var(--todo); }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--fs-sm); }
caption { text-align: left; padding: var(--s-4) var(--s-5); font-size: var(--fs-sm); color: var(--ink-3); }
th, td { padding: var(--s-4) var(--s-5); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--ink); color: #fff; font-family: var(--font-head);
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
tbody tr:nth-child(even) { background: var(--surface-2); }
tbody th { font-weight: 600; color: var(--ink); }
td .yes { color: var(--good); font-weight: 700; }
td .no  { color: var(--ink-3); }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--r-md); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s-2); }

/* ---------- Person / principal ---------- */
.principal { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 860px) { .principal { grid-template-columns: 300px 1fr; gap: var(--s-8); } }
.principal img { border-radius: var(--r-lg); width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--brand); }
.principal blockquote { margin: 0; font-size: var(--fs-lg); color: var(--ink);
  font-family: var(--font-head); font-weight: 700; line-height: 1.35; }
.principal cite { display: block; font-style: normal; font-size: var(--fs-sm);
  color: var(--ink-3); margin-top: var(--s-4); font-family: var(--font-body); font-weight: 400; }

/* ---------- Stats ---------- */
.stats { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat b { display: block; font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-2xl); color: var(--ink); line-height: 1.1; }
.section--night .stat b { color: var(--amber); }
.stat span { font-size: var(--fs-sm); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--s-3); }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.faq details[open] { border-color: var(--brand); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-4) var(--s-5);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md);
  color: var(--ink); display: flex; justify-content: space-between; gap: var(--s-4);
  min-height: 44px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand-ink); font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-a { padding: 0 var(--s-5) var(--s-5); font-size: var(--fs-sm); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-night-2);
  background:
    radial-gradient(85% 130% at 50% 0%, rgba(224,123,39,.24), transparent 60%),
    var(--ink);
  border-top: 3px solid var(--brand);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 24px);
}
.cta-band > .container { position: relative; z-index: 2; padding-block: var(--section-y); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 48ch; margin: var(--s-4) auto 0; font-size: var(--fs-md); }
.cta-band .btn-row { justify-content: center; margin-top: var(--s-6); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-4); }
.form-grid { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); font-size: var(--fs-base);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand-ink); outline: 3px solid rgba(224,123,39,.28); outline-offset: 0;
}
.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); box-shadow: var(--shadow-sm);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: var(--fs-sm); border-radius: var(--r-md); padding: var(--s-4); }
.form-status[data-state="ok"]  { background: var(--good-wash); color: var(--good); border: 1px solid var(--good); }
.form-status[data-state="err"] { background: var(--urgent-wash); color: var(--urgent); border: 1px solid var(--urgent); }
.form-status[hidden] { display: none; }

/* ---------- Video ----------
   Raqib shot these on his phone, selfie-style, so they are portrait 9:16.
   Presented as portrait rather than letterboxed into a 16:9 box: cropping
   would cut his head off and black bars look broken. Shown at phone
   proportions it reads as what it is, the owner talking straight to camera,
   which is the point.
   preload="none" means the file is not fetched until play is pressed. */
.video { margin: 0; display: flex; flex-direction: column; }
.video-el {
  width: 100%; aspect-ratio: 9 / 16; max-height: 76vh;
  display: block; background: var(--night);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  object-fit: cover;
}
.video-el:hover { border-color: var(--brand); }
.video-el:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 3px; }

.video figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); }
.video figcaption strong { display: block; color: var(--ink); font-family: var(--font-head);
  font-size: var(--fs-md); margin-bottom: var(--s-1); }
.section--night .video figcaption { color: var(--on-night-2); }
.section--night .video figcaption strong { color: var(--on-night); }

/* Portrait video is tall, so cap the column width or one clip fills the screen. */
.video-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
.video-grid > * { max-width: 380px; margin-inline: auto; width: 100%; }
@media (min-width: 700px)  { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .video-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* A single clip inside a text column sits left rather than centred. */
.video--inline { max-width: 340px; }

/* ---------- Contact band (replaces enquiry forms) ---------- */
.contact-big {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem); line-height: 1.25;
  color: var(--ink); word-break: break-word;
}
.contact-big a { color: var(--brand-ink); text-decoration: none; }
.contact-big a:hover { text-decoration: underline; }
.card--flat.center { align-items: center; }
.card--flat.center .btn { margin-top: auto; }

/* ---------- Callouts ---------- */
.note {
  border-left: 4px solid var(--line-strong); padding: var(--s-4) var(--s-5);
  background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-sm);
}
.note--urgent { border-left-color: var(--urgent); background: var(--urgent-wash); color: var(--urgent); }
.note--urgent strong { color: var(--urgent); }
.note--todo {
  border: 1px dashed var(--todo-line); border-left: 4px solid var(--todo-line);
  background: var(--todo-wash); color: var(--todo);
}

/* ---------- Bangla ---------- */
[lang="bn"] { font-family: var(--font-bn); line-height: 1.85; }
h1[lang="bn"], h2[lang="bn"], h3[lang="bn"] { font-family: var(--font-bn); font-weight: 700; letter-spacing: 0; }
.bn-panel {
  background: var(--night-2); color: var(--on-night); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5); border-top: 5px solid var(--brand);
}
.bn-panel h2, .bn-panel h3, .bn-panel h4 { color: var(--on-night); }
.bn-panel .eyebrow { color: var(--amber); }
.bn-panel strong { color: var(--on-night); }
.bn-panel p { color: var(--on-night-2); }
.bn-panel a { color: var(--amber); }
.bn-panel li { color: var(--on-night-2); }
/* The FAQ component is light by default; restate it for the dark Bangla panel. */
.bn-panel .faq details { background: var(--night); border-color: rgba(255,255,255,.14); }
.bn-panel .faq details[open] { border-color: var(--amber); }
.bn-panel .faq summary { color: var(--on-night); }
.bn-panel .faq summary::after { color: var(--amber); }
.bn-panel .faq .faq-a p { color: var(--on-night-2); }

/* ---------- Prose ---------- */
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.35rem; display: grid; gap: var(--s-2); }
.prose li { padding-left: var(--s-1); }
.prose strong { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--on-night-2); font-size: var(--fs-sm); }
.site-footer h2, .site-footer h3 { color: #fff; font-size: var(--fs-base);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer-grid { display: grid; gap: var(--s-7); padding-block: var(--s-8);
  grid-template-columns: 1fr; }
@media (min-width: 760px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1020px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.site-footer a { color: var(--on-night-2); text-decoration: none; }
.site-footer a:hover { color: var(--amber); text-decoration: underline; }
.site-footer address { font-style: normal; display: grid; gap: var(--s-2); }
.site-footer address a { color: var(--amber); font-weight: 600; }
.footer-brand img { width: 52px; height: 52px; margin-bottom: var(--s-4); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--s-5);
  display: grid; gap: var(--s-3); font-size: var(--fs-xs); color: var(--on-night-2); }
@media (min-width: 760px) { .footer-legal { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- 404 ---------- */
.err { text-align: center; padding-block: var(--s-10); }
.err .code { font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 18vw, 9rem);
  color: var(--brand); line-height: 1; }

/* ---------- Utility ---------- */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.center { text-align: center; }

/* A tier whose fee is genuinely not set yet. Reads as a normal price card,
   muted rather than alarming — the visitor is told to ask, not shown a gap. */
.price--quote { font-size: var(--fs-lg); color: var(--ink-2); }
.price--quote small { color: var(--ink-3); font-weight: 400; }