picture { display: contents; }
/* ============================================================
   ALT DESIGN DIRECTION C — the live design, tuned to convert
   Same design language as aricpa.ca today: warm off-white ground, navy
   dot-grid, tight Schibsted Grotesk display type, a single amber CTA.
   What changes is the selling, not the styling:
     · Ari's photograph is the hero, at size
     · two buttons, never three — WhatsApp is always-available instead
     · concrete evidence blocks (the credit checklist, the comparison
       table, the live fee, what to bring)
     · booking opens in a dialog instead of navigating away
   ============================================================ */

:root {
  --paper: #faf8f3;
  --paper-2: #f4f0e7;
  --card: #ffffff;
  --line: #e6e0d3;
  --line-2: #d8d0bf;

  --navy-950: #0c1440;
  --navy: #132066;
  --royal: #283993;
  --ink: #1a2247;
  --body: #454e70;
  --muted: #676f8e;

  --amber: #ea9d43;
  --amber-deep: #c17c19;
  --amber-soft: #fdf3e3;
  --amber-line: #f3d9ae;
  --green: #1fa855;

  --wrap: 1140px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --sec-y: clamp(3.5rem, 7.5vw, 6rem);
  --radius: 12px;
  --radius-lg: 18px;

  --sans: 'Schibsted Grotesk Variable', 'Schibsted Grotesk', system-ui, sans-serif;
  --tamil: 'Noto Sans Tamil Variable', 'Noto Sans Tamil', var(--sans);
  --tamil-display: 'Anek Tamil Variable', 'Anek Tamil', var(--tamil);
  --shadow: 0 1px 2px rgba(19, 32, 102, .05), 0 8px 28px -12px rgba(19, 32, 102, .16);
  --shadow-pop: 0 2px 6px rgba(19, 32, 102, .08), 0 24px 52px -18px rgba(19, 32, 102, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001s !important; animation-duration: .001s !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px;
}
@media (min-width: 760px) { body { padding-bottom: 0; } }
:lang(ta) body { font-family: var(--tamil); line-height: 1.9; }

/* ---------- type ---------- */
h1, h2, h3 {
  color: var(--navy);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.032em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }
:lang(ta) h1, :lang(ta) h2, :lang(ta) h3 { font-family: var(--tamil-display); letter-spacing: 0; line-height: 1.35; }
:lang(ta) h1 { font-size: clamp(1.95rem, 4.2vw, 2.85rem); }
:lang(ta) h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h1 em, h2 em, h3 em { font-style: normal; color: var(--amber-deep); }

p { margin: 0 0 1em; }
a { color: var(--royal); text-decoration: none; }
a:hover { color: var(--navy); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--amber); color: var(--navy-950); }
.v-visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

.v-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.v-center { text-align: center; }
.v-center .v-lede { margin-inline: auto; }

.v-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--royal); margin: 0 0 1rem;
}
.v-eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: var(--amber); border-radius: 2px; }
:lang(ta) .v-eyebrow { letter-spacing: .03em; text-transform: none; font-size: 1rem; }
.v-lede { font-size: 1.14rem; line-height: 1.6; color: var(--body); max-width: 40em; }
.v-note { font-size: 1rem; color: var(--muted); max-width: 64ch; }
.v-stars { color: var(--amber-deep); letter-spacing: .07em; margin-right: .3rem; }
/* 4.8 is not five full stars: faint track, bright fill clipped to the rating */
.v-stars--partial { position: relative; display: inline-block; color: rgba(217,138,36,.35); }
.v-stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--amber-deep); letter-spacing: inherit; }
.v-arrow { color: var(--royal); font-weight: 700; white-space: nowrap; }
.v-arrow span, .v-btn span { display: inline-block; transition: transform .15s ease; }
.v-arrow:hover span, .v-btn:hover span { transform: translateX(3px); }

.v-skip {
  position: absolute; left: 12px; top: 0; z-index: 100; transform: translateY(-140%);
  background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 8px; transition: transform .15s ease;
}
.v-skip:focus { transform: translateY(12px); color: #fff; }

/* ---------- buttons ---------- */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: 1.02rem; font-weight: 700; line-height: 1.25;
  padding: .95rem 1.55rem; border-radius: 10px; border: 1.5px solid transparent;
  cursor: pointer; text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
:lang(ta) .v-btn { line-height: 1.35; }
.v-btn:active { transform: translateY(1px); }
.v-btn--sm { padding: .62rem 1.05rem; font-size: .98rem; }
.v-btn--lg { padding: 1.1rem 1.9rem; font-size: 1.1rem; }
.v-btn--primary {
  background: var(--amber); color: var(--navy-950);
  box-shadow: 0 1px 2px rgba(19,32,102,.12), 0 8px 20px -8px rgba(234,157,67,.65);
}
.v-btn--primary:hover { background: var(--amber-deep); color: var(--navy-950); }
.v-btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.v-btn--secondary:hover { background: var(--navy); color: #fff; }
.v-btn--wa { background: var(--green); color: #fff; }
.v-btn--wa:hover { background: #17914a; color: #fff; }
.v-sec--dark .v-btn--secondary { color: #fff; border-color: rgba(255,255,255,.5); }
.v-sec--dark .v-btn--secondary:hover { background: #fff; color: var(--navy); }

/* ---------- header ---------- */
.v-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 248, 243, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-block: .85rem;
}
.v-nav__inner { display: flex; align-items: center; gap: 1.5rem; }
.v-brand { display: flex; align-items: center; gap: .6rem; color: var(--navy); font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; }
.v-brand__name em { font-style: normal; font-weight: 600; color: var(--muted); }
.v-nav__links { display: none; gap: 1.5rem; margin-inline: auto; }
.v-nav__links a { color: var(--ink); font-size: 1rem; font-weight: 600; }
.v-nav__links a:hover { color: var(--navy); }
.v-nav__links a.is-on { color: var(--navy); box-shadow: inset 0 -2px 0 var(--amber); }
.v-nav__end { display: none; align-items: center; gap: 1rem; }
.v-nav__lang, .v-nav__portal { color: var(--ink); font-size: 1rem; font-weight: 600; }
.v-nav__lang { border: 1.5px solid var(--line-2); border-radius: 999px; padding: .3rem .85rem; }
.v-nav__lang:hover { border-color: var(--royal); color: var(--navy); }
@media (min-width: 1020px) { .v-nav__links, .v-nav__end { display: flex; } }

.v-menu { margin-left: auto; }
.v-menu summary { list-style: none; cursor: pointer; display: grid; gap: 5px; padding: .6rem .35rem; }
.v-menu summary::-webkit-details-marker { display: none; }
.v-menu summary span { display: block; width: 26px; height: 2.5px; background: var(--navy); border-radius: 2px; }
.v-menu__panel {
  position: absolute; right: var(--gutter); left: var(--gutter); margin-top: .75rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); padding: .6rem; display: grid; z-index: 45;
}
.v-menu__panel a { padding: .9rem 1rem; border-radius: 8px; color: var(--navy); font-size: 1.05rem; font-weight: 600; }
.v-menu__panel a:hover { background: var(--paper-2); }
@media (min-width: 1020px) { .v-menu { display: none; } }

/* ---------- sections ---------- */
.v-sec { padding-block: var(--sec-y); }
.v-sec--flush { padding-top: 0; }
.v-sec--tint { background: var(--paper-2); }
.v-sec--dark { background: var(--navy); color: #ccd3f0; padding-block: clamp(3rem, 6vw, 4.5rem); }
.v-sec--dark h2, .v-sec--dark h3 { color: #fff; }
.v-sec--dark .v-eyebrow { color: var(--amber); }
.v-sec--dark .v-lede, .v-sec--dark p { color: #ccd3f0; }
.v-sec--dark a { color: #fff; }
.dotgrid, .v-hero { background-image: radial-gradient(rgba(19,32,102,.09) 1px, transparent 1.5px); background-size: 22px 22px; }

.v-split { display: grid; gap: 1rem; align-items: end; margin-bottom: 2.5rem; }
@media (min-width: 940px) { .v-split { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }
.v-split h2, .v-split .v-lede { margin-bottom: 0; }
.v-split--faq { align-items: start; margin-bottom: 0; }
@media (min-width: 940px) { .v-split--faq { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; } }

.v-grid { display: grid; gap: 1.4rem; }
@media (min-width: 780px) {
  .v-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .v-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 780px) and (max-width: 1099px) { .v-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .v-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- surfaces ---------- */
.v-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 1.75rem 1.6rem;
  display: flex; flex-direction: column; gap: .4rem;
  color: var(--body);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.v-card { color: var(--body); }
a.v-card:hover { color: var(--body); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.v-card h3 { margin: 0 0 .25rem; }
.v-card > p { font-size: 1.03rem; margin: 0 0 1rem; }
.v-card > p:last-of-type { flex: 1; }

.v-chip {
  display: inline-flex; align-items: center; font-size: .95rem; font-weight: 700; color: var(--navy);
  background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 999px; padding: .3rem .85rem;
}
.v-badge {
  align-self: flex-start; font-size: .85rem; font-weight: 700; color: var(--royal);
  background: rgba(40,57,147,.08); border-radius: 999px; padding: .25rem .7rem;
}
.v-figure {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden;
}
.v-figure img { width: 100%; height: 100%; object-fit: cover; }
.v-figure figcaption {
  padding: .9rem 1.2rem; font-size: 1rem; font-weight: 600; color: var(--navy);
  background: var(--card); border-top: 1px solid var(--line);
}
.v-figure--wide img { width: 100%; height: auto; }
.v-gallery { display: grid; gap: 1.4rem; margin-top: 2.25rem; }
@media (min-width: 780px) { .v-gallery { grid-template-columns: 1fr 1fr; } }
.v-gallery__wide { grid-column: 1 / -1; }

/* ---------- shared patterns ---------- */
.v-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; margin: 0; }
@media (min-width: 780px) { .v-stats { grid-template-columns: repeat(4, 1fr); } }
.v-stats dd { margin: 0; font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; color: var(--amber); }
.v-stats dt { margin-top: .35rem; font-size: 1rem; color: #c2c9e8; }

.v-checklist { list-style: none; margin: .5rem 0 1.1rem; padding: 0; display: grid; gap: .6rem; flex: 1; }
.v-checklist li { position: relative; padding-left: 1.75rem; font-size: 1.02rem; }
.v-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--amber-deep); font-weight: 800; }
@media (min-width: 780px) { .v-checklist--2 { grid-template-columns: 1fr 1fr; gap: .6rem 2rem; } }
.v-checklist--boxed { margin-top: 1.8rem; gap: .9rem 1.5rem; }
.v-checklist--boxed li {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem 1rem 2.9rem;
}
.v-checklist--boxed li::before { left: 1.2rem; top: 1rem; }

.v-steps { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 2rem; position: relative; }
@media (min-width: 860px) {
  .v-steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .v-steps::before {
    content: ""; position: absolute; top: 1.3rem; left: 12%; right: 12%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--amber) 0 10px, transparent 10px 18px);
  }
}
.v-steps li { position: relative; }
.v-steps__n {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem;
  background: var(--amber); color: var(--navy-950); font-weight: 800; border-radius: 50%;
  border: 5px solid var(--paper); position: relative; z-index: 1;
}
.v-sec--tint .v-steps__n { border-color: var(--paper-2); }
.v-steps h3 { margin-bottom: .35rem; }
.v-steps p { font-size: 1.02rem; margin: 0; }

.v-story { gap: .35rem; }
.v-story h3 { margin-top: .5rem; }
.v-story p { font-size: 1.02rem; margin: 0 0 .6rem; }
.v-story__found { flex: 1; }
.v-story__found strong { color: var(--navy); }
.v-story__saved {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px dashed var(--line-2); padding-top: .9rem; margin: .3rem 0 0 !important;
}
.v-story__saved span { font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
:lang(ta) .v-story__saved span { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.v-story__saved b { font-size: 1.7rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.v-story__ill { font-size: .88rem; color: var(--muted); margin-top: .5rem; }

.v-quote { gap: .8rem; }
.v-quote__top { display: flex; align-items: center; justify-content: space-between; }
.v-quote blockquote { margin: 0; flex: 1; font-size: 1.04rem; line-height: 1.6; color: var(--ink); }
.v-quote blockquote.is-secondary { font-size: 1rem; color: var(--muted); }
.v-quote__ta { margin: 0; font-size: 1.03rem; color: var(--ink); }
.v-quote__ta span { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .3rem; }
.v-quote figcaption { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: .9rem; }
.v-quote figcaption strong { color: var(--navy); }
.v-quote figcaption span { color: var(--muted); font-size: .95rem; }

.v-faq { display: grid; }
.v-faq details { border-bottom: 1px solid var(--line-2); }
.v-faq summary {
  list-style: none; cursor: pointer; position: relative; padding: 1.2rem 2.5rem 1.2rem 0;
  color: var(--navy); font-size: 1.1rem; font-weight: 700;
}
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  color: var(--amber-deep); font-size: 1.5rem; font-weight: 400; line-height: 1;
}
.v-faq details[open] summary::after { content: "–"; }
.v-faq p { font-size: 1.03rem; padding-bottom: 1.2rem; margin: 0; max-width: 62ch; }

.v-svc { gap: .35rem; }
.v-svc__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--amber-soft); color: var(--amber-deep); margin-bottom: .7rem; }
.v-svc__n { display: none; }

/* pricing */
.v-price-groups { display: grid; gap: 2.5rem; }
@media (min-width: 940px) { .v-price-groups { grid-template-columns: 1fr 1fr; align-items: start; } }
.v-price-groups h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.v-price-list { list-style: none; margin: 0; padding: 0; gap: 0; }
.v-price-row { display: flex; justify-content: space-between; gap: 1.25rem; padding: 1.3rem 1.5rem; align-items: baseline; }
.v-price-row + .v-price-row { border-top: 1px solid var(--line); }
.v-price-row__text { display: flex; flex-direction: column; gap: .15rem; }
.v-price-row__text strong { color: var(--navy); font-size: 1.06rem; }
.v-price-row__text span { font-size: 1rem; color: var(--muted); }
.v-price-row__tag {
  flex: none; font-weight: 800; color: var(--navy); background: var(--amber-soft);
  border: 1px solid var(--amber-line); padding: .35rem .85rem; border-radius: 999px; font-size: 1rem; white-space: nowrap;
}
.v-examples { border-left: 4px solid var(--amber); }
.v-examples h2 { font-size: 1.45rem; }
.v-examples__grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 720px) { .v-examples__grid { grid-template-columns: 1fr 1fr; } }
.v-example { display: flex; flex-direction: column; gap: .25rem; background: var(--paper-2); border-radius: 10px; padding: 1rem 1.15rem; }
.v-example__label { font-weight: 700; color: var(--navy); }
.v-example__math { font-variant-numeric: tabular-nums; }
.v-example__math strong { color: var(--navy); font-size: 1.2rem; }
.v-promise-sec { background: var(--navy); }
.v-promise { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 940px) { .v-promise { grid-template-columns: .9fr 1.1fr; } }
.v-promise__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.v-promise__list li {
  display: flex; gap: .85rem; align-items: flex-start; font-size: 1.06rem; color: #e6eafc;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 1rem 1.2rem;
}
.v-promise__tick { color: var(--amber); font-weight: 800; }

/* about */
.v-principal { display: grid; gap: 1.85rem; align-items: start; padding: clamp(1.5rem, 4vw, 2.6rem); }
@media (min-width: 780px) { .v-principal { grid-template-columns: auto 1fr; } }
.v-principal__photo { width: 190px; height: 190px; object-fit: cover; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.v-principal h2 { margin-bottom: .1rem; font-size: 1.95rem; }
.v-principal h2 em { color: var(--amber-deep); font-weight: 700; }
.v-principal__role { color: var(--muted); font-weight: 600; margin-bottom: .85rem; }
.v-principal__facts { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 1rem; }

.v-roster { list-style: none; margin: 2rem 0 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.v-roster li { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; justify-content: space-between; align-items: baseline; padding: 1.3rem 1.65rem; }
.v-roster li + li { border-top: 1px solid var(--line); }
.v-roster__name { color: var(--navy); font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; }
.v-roster__meta { display: flex; gap: .9rem; align-items: baseline; font-size: 1rem; }
.v-roster__cred { color: var(--amber-deep); font-weight: 700; }

.v-people { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .7rem; }
.v-people li { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; border-bottom: 1px dashed var(--line-2); padding-bottom: .7rem; }
.v-people strong { color: var(--navy); font-size: 1.1rem; }
.v-people span { color: var(--muted); font-size: 1rem; }

/* contact */
.v-contact { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 980px) { .v-contact { grid-template-columns: 1.05fr .95fr; gap: 2rem; } }
.v-contact__cards { display: grid; gap: 1.4rem; }
@media (min-width: 620px) { .v-contact__cards { grid-template-columns: 1fr 1fr; } }
.v-contact__big { font-size: 1.45rem; font-weight: 700; margin: 0 0 .2rem; }
.v-contact__visual { display: grid; gap: 1.4rem; }
.v-hours { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .55rem; }
.v-hours li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: .55rem; font-size: 1.02rem; }
.v-hours strong { color: var(--navy); }
.v-map { min-height: 320px; }
.v-map iframe { width: 100%; height: 320px; border: 0; display: block; }
.v-booking { display: grid; place-items: center; gap: 1.25rem; padding: 3rem 1.5rem; background: var(--card); margin-top: 1.5rem; }
.v-booking__skel { display: grid; gap: .6rem; width: min(420px, 100%); }
.v-booking__skel span { display: block; height: 12px; border-radius: 6px; background: var(--paper-2); }
.v-booking__skel span:nth-child(2) { width: 70%; }
.v-booking__skel span:nth-child(3) { height: 120px; }

/* reviews */
.v-gline {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: 999px; padding: .7rem 1.3rem; color: var(--ink); font-size: 1.02rem;
}
.v-gline:hover { border-color: var(--royal); color: var(--navy); }
.v-honesty { max-width: 820px; }
.v-caps { margin: 1.6rem 0; }
.v-caps h3 { margin-bottom: .85rem; }
.v-who { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .v-who { grid-template-columns: .75fr 1.25fr; gap: 3rem; } }
.v-who__photo { max-width: 280px; }
.v-who__photo img { aspect-ratio: 1 / 1; }

/* ============================================================
   Direction C only — the conversion layer
   ============================================================ */

/* ---------- hero: the person ---------- */
.c-hero { padding-block: clamp(2.75rem, 6vw, 4.5rem) 0; overflow: hidden; }
.c-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) { .c-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: end; } }
.c-hero__copy { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 939px) { .c-hero__copy { padding-bottom: clamp(2.5rem, 6vw, 3.5rem); } }
.c-hero h1 { max-width: 15ch; }
.c-hero .v-lede { max-width: 36em; }
.v-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; }
.v-hero__actions--center { justify-content: center; }
.c-hero__ctanote { margin: .85rem 0 0; font-size: .98rem; color: var(--muted); }
.c-hero__wa {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.4rem;
  max-width: 100%;
  color: var(--green); font-weight: 700; font-size: 1.02rem;
  border-bottom: 2px solid rgba(31,168,85,.25); padding-bottom: .15rem;
}
.c-hero__wa:hover { color: #17914a; border-bottom-color: var(--green); }
.c-hero__wa span { display: inline-block; transition: transform .15s ease; }
.c-hero__wa:hover span { transform: translateX(3px); }

/* The portrait is the hero. It is not a card: Ari stands in front of a navy
   arch and breaks out of it at the bottom, meeting the proof bar. The mask
   dissolves the foot of the frame so nothing reads as a cut-out rectangle. */
.c-portrait {
  position: relative;
  margin: 0;
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: 430px;
}
.c-portrait__stage {
  position: absolute;
  left: -3.5%; right: -3.5%; top: -3%; bottom: 5%;
  background: linear-gradient(168deg, var(--royal) 0%, var(--navy) 55%, var(--navy-950) 100%);
  border-radius: 999px 999px 28px 28px;
}
.c-portrait__stage::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px);
  background-size: 20px 20px;
}
.c-portrait picture { display: block; position: relative; z-index: 1; }
.c-portrait img {
  width: 100%;
  height: auto;
  display: block;
  /* the arch is the portrait, not a frame around it */
  border-radius: 999px 999px 26px 26px;
  /* and its foot dissolves into the page rather than ending on a hard line */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgba(0,0,0,.7) 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, rgba(0,0,0,.7) 96%, transparent 100%);
}
.c-portrait picture { filter: drop-shadow(0 26px 44px rgba(12, 20, 64, .3)); }
.c-portrait__rating {
  position: absolute; z-index: 2; top: 8%; right: -8%;
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-pop);
  border-radius: 999px; padding: .55rem 1.05rem; font-size: .95rem; color: var(--ink); white-space: nowrap;
}
.c-portrait__rating b { color: var(--navy); }
.c-portrait__rating:hover { border-color: var(--royal); color: var(--ink); }
.c-portrait__badge {
  position: absolute; z-index: 2; bottom: 20%; left: -9%;
  background: var(--amber); color: var(--navy-950); font-weight: 800; font-size: .95rem;
  border-radius: 999px; padding: .55rem 1.1rem; box-shadow: var(--shadow-pop); white-space: nowrap;
}
.c-portrait figcaption {
  position: absolute; z-index: 2; left: 50%; bottom: 2%; transform: translateX(-50%);
  display: inline-flex; align-items: baseline; gap: .55rem;
  background: var(--navy-950); border-radius: 999px; padding: .55rem 1.35rem;
  box-shadow: var(--shadow-pop); white-space: nowrap;
}
.c-portrait figcaption strong { color: #fff; font-size: 1.02rem; }
.c-portrait figcaption span { color: var(--amber); font-size: .93rem; font-weight: 700; }

@media (max-width: 939px) {
  /* On a phone the face has to be in the first screen, so the portrait leads.
     Nothing sits under the portrait here, so it ends on the arch rather than
     dissolving into the page. */
  .c-portrait { order: -1; max-width: 300px; margin: 0 auto 2rem; }
  .c-portrait img { -webkit-mask-image: none; mask-image: none; }
  .c-portrait__rating { right: -4%; font-size: .88rem; padding: .45rem .85rem; }
  .c-portrait__badge { left: -4%; font-size: .88rem; padding: .45rem .9rem; }
  .c-portrait figcaption { padding: .45rem 1.1rem; }
  .c-portrait figcaption strong { font-size: .96rem; }
}

/* ---------- proof bar ---------- */
.c-proofbar { background: var(--navy); color: #fff; padding-block: 1.1rem; }
.c-proofbar ul {
  list-style: none; margin: 0; display: flex; flex-wrap: wrap;
  gap: .5rem 2.25rem; justify-content: center; align-items: center;
}
.c-proofbar li { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; color: #e4e8fb; }
.c-proofbar li::before { content: "✓"; color: var(--amber); font-weight: 800; }

/* ---------- what you get ---------- */
.c-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
@media (min-width: 800px) { .c-gets { grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; } }
.c-gets li { display: flex; gap: 1.1rem; align-items: flex-start; }
.c-gets__n {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--amber-soft); border: 1px solid var(--amber-line);
  color: var(--amber-deep); font-weight: 800;
}
.c-gets h3 { margin: .15rem 0 .35rem; }
.c-gets p { margin: 0; font-size: 1.03rem; }

/* ---------- fee estimator ---------- */
.c-calc { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 900px) { .c-calc { grid-template-columns: 1.05fr .95fr; gap: 2.75rem; } }
.c-calc__controls { display: grid; gap: 1.6rem; }
.c-calc__controls fieldset { border: 0; margin: 0; padding: 0; }
.c-calc__controls legend { font-size: 1.05rem; font-weight: 700; color: var(--navy); padding: 0; margin-bottom: .75rem; }
.c-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.c-chips label { cursor: pointer; }
.c-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-chips span {
  display: inline-block; padding: .65rem 1.2rem; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink);
  font-size: 1.02rem; font-weight: 600; transition: all .15s ease;
}
.c-chips input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.c-chips input:focus-visible + span { outline: 3px solid var(--royal); outline-offset: 2px; }
.c-chips label:hover span { border-color: var(--navy); }
.c-calc__panel {
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--amber);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 1.85rem 1.75rem;
}
.c-calc__label { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
:lang(ta) .c-calc__label { letter-spacing: 0; text-transform: none; font-size: 1rem; }
.c-calc__figure { font-size: clamp(2.8rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; color: var(--navy); margin: 0 0 1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.c-calc__lines { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.c-calc__lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.02rem; border-bottom: 1px dashed var(--line); padding-bottom: .55rem; }
.c-calc__lines b { color: var(--navy); }
.c-calc__note { font-size: 1rem; color: var(--muted); margin: 0 0 1.3rem; }
.c-calc__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---------- the checklist ---------- */
.c-check { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .c-check { grid-template-columns: 1.15fr .85fr .95fr; } }
.c-check__col {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 1.75rem 1.6rem;
}
.c-check__col h3 { font-size: 1.15rem; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 2px solid var(--amber); }
.c-check__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.c-check__col li { position: relative; padding-left: 1.75rem; font-size: 1.01rem; line-height: 1.5; }
.c-check__col li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--amber-deep); font-weight: 800;
}
.c-check__note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  margin-top: 2rem; font-size: 1.06rem; color: var(--navy); font-weight: 600;
}

/* ---------- versus table ---------- */
.c-vs { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.c-vs table { width: 100%; border-collapse: collapse; min-width: 640px; }
.c-vs th, .c-vs td { text-align: left; padding: 1.05rem 1.25rem; font-size: 1.02rem; vertical-align: top; }
.c-vs thead th { font-size: .95rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid var(--line); }
:lang(ta) .c-vs thead th { text-transform: none; letter-spacing: 0; font-size: 1.02rem; }
.c-vs thead th.is-us { color: var(--navy); background: var(--amber-soft); }
.c-vs tbody th { font-weight: 700; color: var(--navy); width: 32%; }
.c-vs tbody tr + tr th, .c-vs tbody tr + tr td { border-top: 1px solid var(--line); }
.c-vs td { color: var(--muted); }
.c-vs td.is-us { color: var(--ink); font-weight: 600; background: rgba(253,243,227,.5); }
.c-vs td.is-us span { color: var(--green); font-weight: 800; margin-right: .2rem; }

/* ---------- what to bring ---------- */
.c-bring h3 { font-size: 1.12rem; padding-bottom: .8rem; border-bottom: 2px solid var(--amber); margin-bottom: .9rem; }
.c-bring .v-checklist { margin-bottom: 0; }
.c-bring .v-checklist li { font-size: 1rem; }

/* ---------- people + office ---------- */
.c-people, .c-office { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) {
  .c-people { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
  .c-office { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; }
}
.c-office .v-figure { max-width: 480px; }
.c-office .v-figure img { aspect-ratio: 3 / 2; }
.c-office .v-hours { max-width: 26rem; margin-block: 1.25rem; }

/* ---------- booking modal ---------- */
.v-modal {
  width: min(760px, calc(100vw - 2rem));
  max-height: min(92vh, 980px);
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--card); color: var(--body);
  box-shadow: 0 40px 90px -30px rgba(12, 20, 64, .55);
  overflow: hidden;
}
.v-modal::backdrop { background: rgba(12, 20, 64, .55); backdrop-filter: blur(3px); }
.v-modal__head { display: flex; gap: 1rem; align-items: flex-start; padding: 1.6rem 1.75rem 1.25rem; border-bottom: 1px solid var(--line); }
.v-modal__head h2 { font-size: 1.5rem; margin: 0 0 .3rem; }
.v-modal__head p { margin: 0; font-size: 1.02rem; }
.v-modal__note { margin-top: .5rem !important; color: var(--muted); font-size: .98rem !important; }
.v-modal__close {
  margin-left: auto; flex: none; width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center; font-size: 1.6rem; line-height: 1;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 50%;
  color: var(--navy); cursor: pointer;
}
.v-modal__close:hover { background: var(--navy); color: #fff; }
.v-modal__frame { height: min(62vh, 640px); background: var(--paper-2); }
.v-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.v-modal__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding: 1rem 1.75rem; border-top: 1px solid var(--line); background: var(--paper);
  font-size: 1rem; color: var(--muted);
}

/* ---------- desktop WhatsApp bubble ---------- */
.v-wa-bubble {
  display: none;
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  align-items: center; gap: .6rem;
  background: var(--green); color: #fff; font-weight: 700; font-size: 1rem;
  padding: .85rem 1.15rem; border-radius: 999px;
  box-shadow: 0 10px 26px -8px rgba(31,168,85,.7);
  transition: background .15s ease;
}
.v-wa-bubble:hover { background: #17914a; color: #fff; }
.v-wa-bubble span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease; }
.v-wa-bubble:hover span, .v-wa-bubble:focus-visible span { max-width: 16rem; }
@media (min-width: 760px) { .v-wa-bubble { display: inline-flex; } }

/* ---------- closer + footer ---------- */
.v-closer { background: var(--navy); color: #ccd3f0; padding-block: clamp(3rem, 6vw, 4.5rem); background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.5px); background-size: 22px 22px; }
.v-closer h2 { color: #fff; margin-bottom: .4rem; }
.v-closer .v-lede { color: #ccd3f0; margin: 0; }
.v-closer__inner { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) { .v-closer__inner { grid-template-columns: 1.15fr .85fr; } }
.v-closer__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.v-closer .v-btn--secondary { color: #fff; border-color: rgba(255,255,255,.5); }
.v-closer .v-btn--secondary:hover { background: #fff; color: var(--navy); }

.v-foot { background: var(--navy-950); color: #b9c1e4; padding-block: 3rem 2rem; font-size: 1rem; }
.v-foot h3 { color: #fff; font-size: 1.05rem; margin-bottom: .85rem; }
.v-foot a { color: #cfd6f2; }
.v-foot a:hover { color: #fff; }
.v-foot__grid { display: grid; gap: 2rem; }
@media (min-width: 820px) { .v-foot__grid { grid-template-columns: 1.2fr .8fr 1.1fr 1.1fr; } }
.v-foot__brand img { filter: brightness(0) invert(1); margin-bottom: .9rem; }
.v-foot__brand strong { color: #fff; }
.v-foot__muted { color: #97a0c9; }
.v-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.v-foot address { font-style: normal; margin-bottom: .8rem; }
.v-foot__hours { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; margin-bottom: .3rem; }
.v-foot__contact { margin-top: 1rem; }
.v-foot__base {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .96rem; color: #8d97c2;
}
.v-foot__base p { margin: 0; }
.v-foot__switch { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ---------- mobile sticky bar ---------- */
.v-sticky {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr 1.1fr;
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px -12px rgba(19,32,102,.4);
}
.v-sticky a { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: 1.05rem .5rem; font-size: 1rem; font-weight: 700; color: var(--navy); }
.v-sticky a + a { border-left: 1px solid var(--line); }
.v-sticky a:nth-child(2) { color: var(--green); }
.v-sticky__primary { background: var(--amber); color: var(--navy-950) !important; }
@media (min-width: 760px) { .v-sticky { display: none; } }

/* ---------- review badge ---------- */
.v-alt-badge {
  position: fixed; z-index: 60; left: 14px; bottom: 84px;
  display: flex; gap: .7rem; align-items: center;
  background: rgba(12,20,64,.94); color: #fff;
  font-size: .88rem; padding: .55rem .95rem; border-radius: 999px;
  box-shadow: 0 8px 26px -8px rgba(12,20,64,.55);
}
.v-alt-badge:hover { color: #fff; }
.v-alt-badge__go { color: var(--amber); }
@media (min-width: 760px) { .v-alt-badge { bottom: 14px; } }