/* ==========================================================================
SATHISH NOTARY — BRAND SYSTEM
Every value below is measured from the client's own artwork: 12 Instagram
posts and his 2026 price flyer, sampled by hue family.
navy #00124d / #0b3162 / #01172e 110,114 px (dominant)
cream #f5f4f0 10,604 px
gold #d0a63d 2,104 px (stars, rules)
crimson #b12132 1,887 px (emphasis, urgency)
His signature devices, replicated here: a navy rule frame around cards,
ALL-CAPS letterspaced serif headings, gold rating stars, navy filled label
bars, and checkmark lists. Navy carries the page; gold and crimson are
punctuation, exactly as he uses them.
========================================================================== */
:root {
/* ---- colour ---------------------------------------------------------- */
--vellum: #f6f6f4;
--paper: #ffffff;
--ink: #101820;
--carbon: #14243f; /* deep navy — his brand, and the right dark for a consular business */
--ash: #d8d5cc;
--olive-char: #2c3f61;
--lichen: #5b6472;
--sage: #8a93a2;
--moss: #9fb0c6;
--bone: #ece9e1;
--highlighter: #fff347;
--khaki: #b08d2e; /* his gold */
/* engine-token aliases (templates + generator emit these names) */
--color-ink: var(--ink);
--color-ink-soft: var(--carbon);
--color-slate: var(--carbon);
--color-paper: var(--vellum);
--color-paper-alt: var(--bone);
--color-paper-card: var(--paper);
--color-accent: var(--carbon);
--color-accent-ink: var(--ink);
--color-urgent: var(--carbon);
--color-urgent-ink: var(--ink);
--color-rating: var(--khaki);
--color-success: #4a6741;
--color-text: var(--ink);
--color-text-muted: var(--lichen);
--color-line: var(--ash);
--color-line-strong: var(--olive-char);
--color-on-dark: #ffffff;
--color-on-dark-muted: var(--moss);
--color-on-dark-line: var(--olive-char);
/* ---- type ------------------------------------------------------------ */
--serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--font-display: var(--serif);
--font-body: var(--sans);
--font-mono: var(--mono);
--fs-caption: 12px;
--fs-sm: 14px;
--fs-body: 16px;
--fs-sub: 20px;
--fs-h3: 24px;
--fs-h2: clamp(28px, 2.2vw + 18px, 48px);
--fs-h1: clamp(40px, 6vw + 8px, 96px);
--fs-price: clamp(34px, 3.2vw + 14px, 56px);
--fs-mega: clamp(64px, 9vw, 128px);
/* ---- space ----------------------------------------------------------- */
--s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px;
--s24: 24px; --s32: 32px; --s48: 48px; --s64: 64px; --s80: 80px; --s128: 128px;
--section-gap: 80px;
--page: 1200px;
/* ---- shape ----------------------------------------------------------- */
--r-sm: 3px;
--r-lg: 8px;
}
/* ==========================================================================
BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--vellum);
color: var(--ink);
font-family: var(--sans);
font-size: var(--fs-body);
line-height: 1.6;
letter-spacing: -0.011em;
-webkit-font-smoothing: antialiased;
}
img, iframe, svg, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 {
font-family: var(--serif);
font-weight: 600;
font-variation-settings: "SOFT" 40, "WONK" 1;
letter-spacing: -0.035em;
margin: 0;
color: var(--ink);
}
h1 { font-size: var(--fs-h1); line-height: 1.0; }
h2 { font-size: var(--fs-h2); line-height: 1.06; }
h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 400; }
p { margin: 0 0 var(--s16); }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--s24); }
.section { padding-block: var(--section-gap); }
.section--surface { background: var(--vellum); }
.section--alt { background: var(--bone); }
.on-dark, .section.on-dark { background: var(--carbon); color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s16); top: var(--s16); background: var(--ink); color: #fff; padding: var(--s8) var(--s16); z-index: 999; }
.muted { color: var(--lichen); }
.tnum { font-variant-numeric: tabular-nums; }
/* ---- eyebrow: the mono margin label ------------------------------------ */
.eyebrow {
display: inline-flex; align-items: center; gap: var(--s8);
font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--lichen); margin-bottom: var(--s16);
}
.eyebrow::before { content: ""; width: 18px; height: 3px; background: var(--ink); }
.on-dark .eyebrow { color: var(--moss); }
.on-dark .eyebrow::before { background: var(--highlighter); }
.section-head { margin-bottom: var(--s48); max-width: 900px; }
.section-head h2 { margin-bottom: var(--s16); }
.section-head > p { font-size: var(--fs-body); color: var(--lichen); max-width: 62ch; margin: 0; }
.on-dark .section-head > p { color: var(--moss); }
/* ---- buttons ----------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
font-family: var(--mono); font-size: var(--fs-sm); font-weight: 500;
letter-spacing: -0.04em; text-transform: none; text-decoration: none;
padding: 12px 20px; border-radius: var(--r-sm);
background: var(--carbon); color: #fff; border: 1px solid var(--carbon);
cursor: pointer; transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--lg { padding: 16px 26px; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }
.on-dark .btn--ghost { color: #fff; border-color: #fff; }
.on-dark .btn--ghost:hover { background: #fff; color: var(--carbon); }
/* DEVIATION 1: the highlighter is an action colour here. It marks urgency. */
.btn--urgent {
background: var(--highlighter); color: var(--ink); border-color: var(--ink);
font-weight: 500;
}
.btn--urgent:hover { background: #ffe600; color: var(--ink); }
.btn .ico { width: 18px; height: 18px; flex: 0 0 18px; }
.btn svg { fill: none; }
/* ---- chips / tags ------------------------------------------------------ */
.chip, .badge {
display: inline-flex; align-items: center; gap: var(--s8);
font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--lichen);
border: 1px solid var(--khaki); background: transparent;
padding: 6px 10px; border-radius: var(--r-sm);
}
.chip svg, .badge svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
/* ==========================================================================
HEADER + NAV
========================================================================== */
.header { position: sticky; top: 0; z-index: 90; background: var(--vellum); border-bottom: 1px solid var(--ash); }
.header__top { background: var(--carbon); color: #fff; font-family: var(--mono); font-size: var(--fs-caption); }
.header__top-inner { max-width: var(--page); margin-inline: auto; padding: 8px var(--s24);
display: flex; align-items: center; justify-content: space-between; gap: var(--s16); }
.header__toplic { text-transform: uppercase; letter-spacing: 0.08em; color: var(--moss); display: inline-flex; align-items: center; gap: 6px; }
.header__toplic svg { width: 14px; height: 14px; stroke: var(--highlighter); fill: none; }
.header__topcall { color: #fff; text-decoration: none; font-weight: 500; }
.header__bar { max-width: var(--page); margin-inline: auto; padding: var(--s16) var(--s24);
display: flex; align-items: center; gap: var(--s24); }
.brand { display: inline-flex; align-items: center; gap: var(--s12); text-decoration: none; margin-right: auto; }
.brand__mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--ink); color: var(--highlighter); border-radius: var(--r-sm); }
.brand__mark svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.brand__name { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: -0.04em; color: var(--ink); }
.brand__name small { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); margin-top: 5px; }
.nav { display: flex; align-items: center; gap: var(--s24); }
.nav a, .nav__toggle {
font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink);
text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0;
letter-spacing: -0.05em;
}
.nav a:hover, .nav__toggle:hover { color: var(--lichen); }
.nav a.active, .nav__toggle.active { box-shadow: 0 3px 0 var(--highlighter); }
.nav__group { position: relative; }
.nav__toggle svg { width: 12px; height: 12px; margin-left: 4px; stroke: currentColor; fill: none; }
.nav__menu {
position: absolute; top: calc(100% + 12px); left: 0; min-width: 240px;
background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-lg);
padding: var(--s8); display: none; flex-direction: column; gap: 2px; z-index: 20;
}
.nav__group:hover .nav__menu, .nav__menu:hover { display: flex; }
.nav__menu a { padding: 9px var(--s12); border-radius: var(--r-sm); font-size: 13px; }
.nav__menu a:hover { background: var(--bone); }
.nav__all { border-top: 1px solid var(--ash); margin-top: var(--s4); padding-top: var(--s12) !important; color: var(--lichen) !important; }
.header__actions { display: flex; align-items: center; gap: var(--s16); margin-left: auto; }
.header__social { display: none; }
.tel { display: inline-flex; align-items: center; gap: var(--s8); text-decoration: none; color: var(--ink); font-weight: 500; }
.tel svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.tel span { display: flex; flex-direction: column; line-height: 1.15; }
.tel small { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); font-weight: 400; }
.hamburger { display: none; width: 42px; height: 42px; border: 1px solid var(--ink); background: transparent; border-radius: var(--r-sm); cursor: pointer; }
.hamburger span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 3px auto; }
/* drawer */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer[data-open], .drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(44,44,38,.5); opacity: 0; transition: opacity .2s; }
.drawer[data-open] .drawer__scrim, .drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(400px, 88vw);
background: var(--vellum); border-left: 1px solid var(--ash); padding: var(--s24);
transform: translateX(100%); transition: transform .22s ease; overflow-y: auto; }
.drawer[data-open] .drawer__panel, .drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s32); }
.drawer__close { width: 40px; height: 40px; border: 1px solid var(--ink); background: transparent; border-radius: var(--r-sm); cursor: pointer; font-size: 20px; line-height: 1; }
.drawer__acc-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center;
font-family: var(--mono); font-size: var(--fs-body); padding: var(--s16) 0; background: none; border: 0; border-bottom: 1px solid var(--ash); cursor: pointer; }
.drawer__acc-panel { display: none; flex-direction: column; gap: var(--s8); padding: var(--s16) 0; }
.drawer__acc[data-open] .drawer__acc-panel, .drawer__acc.is-open .drawer__acc-panel { display: flex; }
.drawer__acc-panel a { font-size: var(--fs-sm); color: var(--lichen); text-decoration: none; }
.drawer__panel > a:not(.btn) { display: block; padding: var(--s16) 0; border-bottom: 1px solid var(--ash); text-decoration: none; font-size: var(--fs-body); }
/* ==========================================================================
HERO
========================================================================== */
.hero { background: var(--vellum); border-bottom: 1px solid var(--ash); padding-block: clamp(48px, 7vw, 104px); position: relative; }
.hero.on-dark { background: var(--vellum); color: var(--ink); }
.hero.on-dark h1 { color: var(--ink); }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s64); align-items: start; }
.hero__angle {
display: inline-flex; align-items: center; gap: var(--s8);
font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--lichen); margin-bottom: var(--s24);
}
.hero__angle::before { content: ""; width: 28px; height: 4px; background: var(--highlighter); }
.hero__angle b { font-weight: 500; }
.hero h1 { margin-bottom: var(--s24); max-width: 15ch; }
.hero__copy > p { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; color: var(--lichen); max-width: 56ch; }
.hero__sub { font-family: var(--mono); font-size: var(--fs-sm); color: var(--lichen); }
.hero__cta-row { display: flex; align-items: center; gap: var(--s24); flex-wrap: wrap; margin-top: var(--s32); }
.hero__cta-row .tel { font-size: var(--fs-sub); font-family: var(--serif); font-weight: 400; letter-spacing: -0.03em; }
.hero__promise {
display: inline-flex; align-items: center; gap: var(--s8);
font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase;
letter-spacing: 0.08em; color: var(--lichen); border: 1px solid var(--khaki);
padding: 7px 12px; border-radius: var(--r-sm);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--highlighter); box-shadow: 0 0 0 3px rgba(255,243,71,.35); }
.hero__trustline { margin-top: var(--s32); padding-top: var(--s24); border-top: 1px solid var(--ash); }
.hero__rating { display: inline-flex; align-items: center; gap: var(--s12); text-decoration: none; }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; fill: var(--khaki); }
.hero__rating b { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -0.04em; }
.hero__rating small { font-family: var(--mono); font-size: var(--fs-caption); color: var(--lichen); text-transform: uppercase; letter-spacing: 0.07em; }
.hero__media { display: grid; gap: var(--s16); }
.hero__photo { border-radius: var(--r-lg); min-height: 300px; border: 1px solid var(--ash); }
/* ---- hero service chips (services surfaced high on the homepage) -------- */
.hero__svc { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s8); margin: var(--s24) 0 0; padding: 0; }
.hero__svc li { margin: 0; }
.hero__svc a {
display: inline-flex; align-items: center;
font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: -0.01em;
color: var(--ink); text-decoration: none;
background: var(--paper); border: 1px solid var(--ash); border-radius: 999px;
padding: 7px 14px; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hero__svc a:hover, .hero__svc a:focus-visible { background: var(--carbon); color: #fff; border-color: var(--carbon); }
/* ---- hero offices strip (all addresses, high up in the hero) ----------- */
.hero__offices { margin-top: clamp(28px, 4vw, 48px); padding-top: var(--s32); border-top: 1px solid var(--ash); }
.hero__offices-lead {
display: block; font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--lichen); margin-bottom: var(--s16);
}
.hero__offices-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s16); }
.hero__offices-list li { margin: 0; }
.hero__offices-list a {
display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 4px var(--s12);
text-decoration: none; background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-sm);
padding: var(--s16) var(--s16); height: 100%; transition: border-color .15s ease, box-shadow .15s ease;
}
.hero__offices-list a:hover, .hero__offices-list a:focus-visible { border-color: var(--carbon); box-shadow: 0 1px 0 var(--carbon); }
.hero__offices-list svg { grid-row: 1 / span 2; width: 18px; height: 18px; fill: var(--khaki); margin-top: 2px; }
.hero__offices-city { font-family: var(--serif); font-size: var(--fs-sub); font-weight: 400; letter-spacing: -0.03em; color: var(--ink); }
.hero__offices-addr { font-family: var(--mono); font-size: var(--fs-caption); line-height: 1.4; color: var(--lichen); }
@media (max-width: 720px) {
.hero__offices-list { grid-template-columns: 1fr; }
}
/* ---- services-led hero: the 6 primary services as the lead act --------- */
.hero__services {
list-style: none; margin: var(--s24) 0 0; padding: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s12);
}
.hero__services li { margin: 0; }
.hero__svc-card {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s16);
height: 100%; text-decoration: none;
background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-lg);
padding: 14px var(--s16);
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hero__svc-card:hover, .hero__svc-card:focus-visible { border-color: var(--khaki); box-shadow: 0 2px 0 var(--khaki); transform: translateY(-1px); }
.hero__svc-ico { display: inline-flex; width: 26px; height: 26px; color: var(--carbon); }
.hero__svc-ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.hero__svc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero__svc-name { font-family: var(--serif); font-weight: 400; font-size: var(--fs-sub); letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); }
.hero__svc-price { font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-caption); color: var(--khaki); }
.hero__svc-arw { width: 18px; height: 18px; color: var(--khaki); flex: none; }
.hero__svc-all {
display: inline-flex; align-items: center; gap: var(--s8); margin-top: var(--s16);
font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.08em; color: var(--carbon); text-decoration: none;
border-bottom: 1px solid transparent;
}
.hero__svc-all svg { width: 16px; height: 16px; color: var(--khaki); transition: transform .15s ease; }
.hero__svc-all:hover, .hero__svc-all:focus-visible { border-bottom-color: currentColor; }
.hero__svc-all:hover svg, .hero__svc-all:focus-visible svg { transform: translateX(3px); }
/* on the dark navy hero the "see all" link and lead read light, not navy */
.hero.on-dark .hero__svc-all { color: var(--gold-soft); }
.hero.on-dark .hero__svc-name { color: var(--ink); }
.hero__lead { margin-top: var(--s24); }
@media (max-width: 640px) {
.hero__services { grid-template-columns: 1fr; gap: var(--s8); }
}
/* ---- the service picker ------------------------------------------------ */
.iq { background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r-lg); padding: var(--s24); }
.iq__label { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: var(--s8); }
.iq__hint { font-family: var(--mono); font-size: var(--fs-sm); color: var(--lichen); margin-bottom: var(--s16); }
.iq__row { display: flex; flex-direction: column; gap: var(--s8); }
.iq__field { position: relative; }
.iq__field .pin { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--moss); stroke: currentColor; fill: none; }
.iq select, .iq input[type="text"] {
width: 100%; min-height: 52px; padding: 12px 38px 12px 40px;
font-family: var(--mono); font-size: var(--fs-sm); letter-spacing: -0.04em; color: var(--ink);
background: var(--vellum); border: 1px solid var(--ash); border-radius: var(--r-sm);
-webkit-appearance: none; appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6e5e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.iq select:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.iq__go { width: 100%; }
.iq__trust { display: flex; align-items: flex-start; gap: var(--s8); margin-top: var(--s16);
font-family: var(--mono); font-size: var(--fs-caption); color: var(--lichen); line-height: 1.45; }
.iq__trust svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; stroke: var(--khaki); fill: none; }
.iq__state { display: none; }
.iq[data-state="result"] .iq__form { display: none; }
.iq[data-state="result"] .iq__result { display: block; }
.iq__sq { font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--lichen); }
/* DEVIATION 3: mono at display scale, because the price is the argument. */
.iq__price {
font-family: var(--mono); font-weight: 500; font-size: var(--fs-price); line-height: 1;
letter-spacing: -0.04em; color: var(--ink); margin: var(--s8) 0;
display: inline-block; padding: 0 8px;
background: linear-gradient(to bottom, transparent 58%, var(--highlighter) 58%);
}
.iq .row { display: flex; gap: var(--s8); margin-top: var(--s16); }
/* ==========================================================================
TRUST BAR
========================================================================== */
.trustbar { background: var(--bone); border-block: 1px solid var(--ash); padding-block: var(--s16); }
.trustbar__track { display: flex; align-items: center; justify-content: center; gap: var(--s48); flex-wrap: wrap;
max-width: var(--page); margin-inline: auto; padding-inline: var(--s24); }
.trustbar .badge { border: 0; padding: 0; }
.trustbar .badge svg { stroke: var(--khaki); width: 16px; height: 16px; }
.trustbar .badge b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.trustbar .sub { color: var(--sage); }
/* ==========================================================================
VFS RESCUE LANE — DEVIATION 2
The lit door in a quiet building. Carbon full-bleed, highlighter action.
========================================================================== */
.storm { background: var(--carbon); color: #fff; }
.storm__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--s64); align-items: center; }
.storm h2 { color: #fff; margin-bottom: var(--s16); }
.storm p { color: var(--moss); }
.storm__tag {
display: inline-flex; align-items: center; gap: var(--s8);
font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em;
background: var(--highlighter); color: var(--ink);
padding: 7px 12px; border-radius: var(--r-sm); margin-bottom: var(--s24);
}
.storm__tag svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.storm__steps { display: grid; gap: var(--s12); margin-top: var(--s24); }
.storm__steps li { display: flex; align-items: flex-start; gap: var(--s12);
font-family: var(--mono); font-size: var(--fs-sm); color: #fff;
padding-bottom: var(--s12); border-bottom: 1px solid var(--olive-char); }
.storm__steps svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; stroke: var(--highlighter); fill: none; }
.storm__card { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: var(--s24); }
.storm__card .big { font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.08; letter-spacing: -0.04em; margin-bottom: var(--s8); }
.storm__card p { font-family: var(--mono); font-size: var(--fs-sm); color: var(--lichen) !important; margin-bottom: var(--s16); }
.storm__card small { display: block; margin-top: var(--s12); font-family: var(--mono); font-size: var(--fs-caption); color: var(--lichen); }
/* ==========================================================================
HOW IT WORKS
========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ash); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.step { padding: var(--s32); border-right: 1px solid var(--ash); position: relative; }
.step:last-child { border-right: 0; }
.step__n { font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.1em; color: var(--sage); }
.step__n::before { content: counter(step, decimal-leading-zero); }
.steps { counter-reset: step; }
.step { counter-increment: step; }
.step .em { display: grid; place-items: center; width: 40px; height: 40px; margin: var(--s16) 0; border: 1px solid var(--ash); border-radius: var(--r-sm); }
.step .em svg { width: 20px; height: 20px; stroke: var(--carbon); fill: none; }
.step h3 { margin-bottom: var(--s8); }
.step p { font-family: var(--mono); font-size: var(--fs-sm); color: var(--lichen); margin: 0; }
.howitworks__foot { display: flex; gap: var(--s12); flex-wrap: wrap; margin-top: var(--s24); }
/* ==========================================================================
SERVICES — price-led cards
========================================================================== */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); }
.svc { background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-lg); display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s ease; }
.svc:hover { border-color: var(--ink); }
.svc--feature { border-color: var(--ink); }
.svc__media--icon { position: relative; padding: var(--s24); display: flex; align-items: center; justify-content: flex-start;
border-bottom: 1px solid var(--ash); background: var(--bone); }
.svc__icon { width: 34px; height: 34px; color: var(--carbon); }
.svc__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.svc__tag { position: absolute; top: var(--s12); right: var(--s12);
font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
background: var(--highlighter); color: var(--ink); padding: 4px 8px; border-radius: var(--r-sm); }
.svc__body { padding: var(--s24); display: flex; flex-direction: column; flex: 1; }
.svc__body h3 { margin-bottom: var(--s12); }
.svc__price { display: flex; align-items: baseline; gap: var(--s8); margin-bottom: var(--s16); padding-bottom: var(--s16); border-bottom: 1px solid var(--ash); }
.svc__price-n {
font-family: var(--mono); font-weight: 500; font-size: 40px; line-height: 1;
letter-spacing: -0.05em; color: var(--ink);
padding: 0 6px; background: linear-gradient(to bottom, transparent 60%, var(--highlighter) 60%);
}
.svc--feature .svc__price-n { font-size: 48px; }
.svc__price-note { font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--lichen); }
.svc__desc { font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.55; color: var(--lichen); margin: 0; }
.svc__cta { margin-top: auto; padding-top: var(--s24);
display: inline-flex; align-items: center; gap: var(--s8);
font-family: var(--mono); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; color: var(--ink); }
.svc__cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; transition: transform .15s ease; }
.svc__cta:hover svg { transform: translateX(3px); }
/* ==========================================================================
FEE SCHEDULE — the signature section
========================================================================== */
.fees { background: var(--vellum); border-block: 1px solid var(--ink); }
.fees__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s24); }
.feecard { background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-lg); padding: var(--s24); display: flex; flex-direction: column; }
.feecard__head { margin-bottom: var(--s16); padding-bottom: var(--s16); border-bottom: 2px solid var(--ink); }
.feecard__head h3 { font-size: var(--fs-h3); line-height: 1.1; margin: 0; }
.feecard__note { display: block; margin-top: var(--s8); font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); }
.feelist li { display: flex; align-items: baseline; gap: var(--s12); padding: 11px 0; border-bottom: 1px solid var(--ash); }
.feelist li:last-child { border-bottom: 0; }
.feelist__l { flex: 1; font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink); letter-spacing: -0.05em; }
.feelist__l small { display: block; font-size: var(--fs-caption); color: var(--sage); margin-top: 3px; letter-spacing: -0.04em; }
.feelist__p { font-family: var(--mono); font-weight: 500; font-size: var(--fs-body); color: var(--ink); white-space: nowrap; letter-spacing: -0.05em; }
.fees__foot { display: flex; align-items: flex-start; gap: var(--s12); margin-top: var(--s32); padding-top: var(--s24);
border-top: 1px solid var(--ash); font-family: var(--mono); font-size: var(--fs-caption);
color: var(--lichen); line-height: 1.55; max-width: 78ch; }
.fees__foot svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; stroke: var(--khaki); fill: none; }
/* ==========================================================================
PROOF / REVIEWS
========================================================================== */
.proof__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0;
border: 1px solid var(--ash); border-radius: var(--r-lg); background: var(--paper); margin-bottom: var(--s48); }
.stat { padding: var(--s32) var(--s24); border-right: 1px solid var(--ash); }
.stat:last-child { border-right: 0; }
.stat b {
display: inline-block; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 4.5vw, 72px);
line-height: 0.92; letter-spacing: -0.05em; color: var(--ink);
padding: 0 4px; background: linear-gradient(to bottom, transparent 66%, var(--highlighter) 66%);
}
.stat span { display: block; margin-top: var(--s12); font-family: var(--mono); font-size: var(--fs-caption);
text-transform: uppercase; letter-spacing: 0.1em; color: var(--lichen); }
.proof__grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--s32); align-items: start; }
.tlist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); align-items: start; }
.tcard { background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-lg); padding: var(--s24); }
.tcard .stars { margin-bottom: var(--s12); }
.tcard blockquote { margin: 0 0 var(--s16); font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink); letter-spacing: -0.05em; }
.tcard__who { display: flex; align-items: center; gap: var(--s12); padding-top: var(--s16); border-top: 1px solid var(--ash); }
.tcard__avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; display: grid; place-items: center;
background: var(--carbon); color: var(--highlighter); font-family: var(--mono); font-weight: 500; font-size: var(--fs-sm); }
.tcard__who > span { display: flex; flex-direction: column; flex: 1; }
.tcard__who b { font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; }
.tcard__who span span, .tcard__who > span > span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sage); margin-top: 3px; }
.tcard__verified { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.09em; color: var(--khaki); }
.tcard__verified svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.proof__side { display: grid; gap: var(--s16); position: sticky; top: 120px; }
.mapcard { border: 1px solid var(--ash); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.mapcard__embed { min-height: 280px; background: var(--bone); }
.mapcard__embed iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; filter: saturate(.7) contrast(1.02); }
.mapcard__embed .needle, .mapcard__embed::after, .mapcard__embed::before { display: none !important; content: none !important; }
.mapcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s12);
padding: var(--s16); border-top: 1px solid var(--ash); font-family: var(--mono); font-size: var(--fs-caption); }
.mapcard__foot a { color: var(--ink); }
.rating-strip { display: inline-flex; align-items: center; gap: 6px; }
.gmark { font-family: var(--serif); font-size: 17px; font-weight: 400; }
/* ==========================================================================
OWNER
========================================================================== */
.owner { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s64); align-items: center; }
.owner__photo-wrap { display: flex; justify-content: center; }
.owner__photo--circle { width: min(220px, 56vw); height: min(220px, 56vw); border-radius: 50%; object-fit: cover; object-position: 50% 38%;
border: 1px solid var(--ash); }
.owner__since { display: inline-flex; align-items: center; font-family: var(--mono); font-size: var(--fs-caption);
text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink);
background: var(--highlighter); padding: 6px 12px; border-radius: var(--r-sm); }
.owner p { font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.65; color: var(--lichen); }
.owner ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); margin: var(--s24) 0; }
.owner li { display: flex; align-items: flex-start; gap: var(--s8); font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink); }
.owner li svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; stroke: var(--khaki); fill: none; }
.owner__sign { padding-top: var(--s24); border-top: 1px solid var(--ash); font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -0.04em; }
.owner__sign span { display: block; font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase;
letter-spacing: 0.1em; color: var(--sage); margin-top: var(--s8); }
/* ==========================================================================
COMPARE
========================================================================== */
.compare__wrap { display: grid; grid-template-columns: 1.55fr .45fr; gap: var(--s32); align-items: start; }
.ctable { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-lg); overflow: hidden; }
.ctable th, .ctable td { padding: var(--s16); text-align: left; font-family: var(--mono); font-size: var(--fs-sm); border-bottom: 1px solid var(--ash); letter-spacing: -0.05em; }
.ctable thead th { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.09em; color: var(--lichen); font-weight: 500; background: var(--bone); }
.ctable thead th.us { color: var(--ink); background: var(--highlighter); }
.ctable td.us { font-weight: 500; color: var(--ink); background: rgba(255,243,71,.14); }
.ctable tbody tr:last-child td { border-bottom: 0; }
.ctable .yes { color: var(--ink); font-weight: 500; }
.ctable .no { color: var(--sage); }
.priceanchor { background: var(--carbon); color: #fff; border-radius: var(--r-lg); padding: var(--s24); }
.priceanchor .eyebrow { color: var(--moss); }
.priceanchor .eyebrow::before { background: var(--highlighter); }
.priceanchor .range { font-family: var(--mono); font-size: var(--fs-sub); font-weight: 500; padding-bottom: var(--s12); margin-bottom: var(--s12); border-bottom: 1px solid var(--olive-char); }
.priceanchor .range small { display: block; font-size: var(--fs-caption); color: var(--moss); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.priceanchor p { font-family: var(--mono); font-size: var(--fs-sm); color: var(--moss); }
.priceanchor .disc { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sage); margin: var(--s16) 0 0; }
.priceanchor .btn { background: var(--highlighter); color: var(--ink); border-color: var(--highlighter); }
.priceanchor .btn:hover { background: #ffe600; }
/* ==========================================================================
WHY US / RISK
========================================================================== */
.whyus__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--s48); align-items: start; }
.risk-list { display: grid; gap: 0; border: 1px solid var(--ash); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.risk-list li { display: flex; gap: var(--s16); padding: var(--s24); border-bottom: 1px solid var(--ash); }
.risk-list li:last-child { border-bottom: 0; }
.risk-list .x { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--ash); border-radius: var(--r-sm); color: var(--carbon); }
.risk-list .x svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.risk-list b { display: block; font-family: var(--serif); font-size: var(--fs-sub); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 6px; }
.risk-list p { font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.55; color: var(--lichen); margin: 0; }
.guarantee { background: var(--carbon); color: #fff; border-radius: var(--r-lg); padding: var(--s32); }
.guarantee .seal { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--olive-char); border-radius: var(--r-sm); color: var(--highlighter); margin-bottom: var(--s16); }
.guarantee .seal svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.guarantee h3 { color: #fff; margin-bottom: var(--s12); }
.guarantee p { font-family: var(--mono); font-size: var(--fs-sm); color: var(--moss); line-height: 1.6; }
.guarantee ul { display: grid; gap: var(--s12); margin-top: var(--s24); }
.guarantee li { display: flex; gap: var(--s12); font-family: var(--mono); font-size: var(--fs-sm); color: #fff; }
.guarantee li svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; stroke: var(--highlighter); fill: none; }
/* ==========================================================================
SERVICE AREA + CONSULATES
========================================================================== */
.area__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s48); align-items: start; }
.area__map { border: 1px solid var(--ash); border-radius: var(--r-lg); background: var(--paper); min-height: 260px; display: grid; place-items: center; position: relative; }
.area__pin { color: var(--carbon); }
.area__radius { font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.09em; color: var(--sage); }
.area__cities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); }
.area__cities a { display: flex; align-items: center; justify-content: space-between; gap: var(--s12);
padding: var(--s16); background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-lg);
text-decoration: none; font-family: var(--mono); font-size: var(--fs-sm); transition: border-color .15s; }
.area__cities a:hover { border-color: var(--ink); }
.cons__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s16); counter-reset: cons; }
.cons { counter-increment: cons; background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-lg); padding: var(--s24); }
.cons__seal { display: block; width: 26px; height: 26px; color: var(--khaki); margin-bottom: var(--s12); }
.cons__seal svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.cons h3 { display: flex; align-items: baseline; gap: var(--s8); font-size: var(--fs-sub); margin-bottom: var(--s8); }
.cons h3::after { content: counter(cons, decimal-leading-zero); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; color: var(--khaki); }
.cons p { font-family: var(--mono); font-size: var(--fs-caption); line-height: 1.6; color: var(--lichen); margin: 0; }
/* ==========================================================================
FAQ
========================================================================== */
.faq { border-top: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--ash); }
.faq__q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s24);
padding: var(--s24) 0; background: none; border: 0; cursor: pointer; text-align: left;
font-family: var(--serif); font-size: var(--fs-sub); font-weight: 400; letter-spacing: -0.03em; color: var(--ink); }
.faq__q .pm { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ash); border-radius: var(--r-sm); }
.faq__q .pm svg { width: 12px; height: 12px; stroke: var(--carbon); fill: none; }
.faq__a { display: none; }
.faq__item[data-open] .faq__a, .faq__item.is-open .faq__a { display: block; }
.faq__a-inner { padding-bottom: var(--s24); font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.65; color: var(--lichen); max-width: 82ch; }
/* ==========================================================================
FINAL CTA + FORMS
========================================================================== */
.finalcta { background: var(--carbon); color: #fff; }
.finalcta__grid { display: grid; grid-template-columns: 1fr .9fr; gap: var(--s64); align-items: start; }
.finalcta h2 { color: #fff; }
.finalcta__sub { font-family: var(--mono); font-size: var(--fs-sm); color: var(--moss); }
.finalcta__assure { display: grid; gap: var(--s12); margin: var(--s24) 0; }
.finalcta__assure li { display: flex; gap: var(--s12); font-family: var(--mono); font-size: var(--fs-sm); color: #fff; }
.finalcta__assure svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; stroke: var(--highlighter); fill: none; }
.finalcta__phone { display: inline-flex; align-items: center; gap: var(--s12); text-decoration: none; color: #fff; }
.tel-lg { font-family: var(--serif); font-size: 32px; font-weight: 400; letter-spacing: -0.04em; }
.wizard { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: var(--s24); }
.wizard__progress { display: flex; gap: var(--s4); margin-bottom: var(--s16); }
.wizard__progress .seg { height: 3px; flex: 1; background: var(--ash); border-radius: 2px; }
.wizard__progress .seg.active { background: var(--highlighter); }
.wizard__steplabel { font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.09em; color: var(--lichen); margin-bottom: var(--s16); }
.wizard__step { display: none; }
.wizard__step.active { display: block; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.tile { display: flex; align-items: center; gap: var(--s12); padding: var(--s16); background: var(--vellum);
border: 1px solid var(--ash); border-radius: var(--r-sm); cursor: pointer; text-align: left;
font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink); transition: border-color .12s; }
.tile:hover { border-color: var(--ink); }
.tile[aria-pressed="true"], .tile.is-on { border-color: var(--ink); background: var(--highlighter); }
.tile .em svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.field { margin-bottom: var(--s12); }
.field label { display: block; font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.09em; color: var(--lichen); margin-bottom: 6px; }
.field input, .field select, .field textarea {
width: 100%; min-height: 48px; padding: 12px 14px; font-family: var(--mono); font-size: var(--fs-sm);
color: var(--ink); background: var(--vellum); border: 1px solid var(--ash); border-radius: var(--r-sm); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.wizard__back { background: none; border: 0; font-family: var(--mono); font-size: var(--fs-sm); color: var(--lichen); cursor: pointer; padding: 0; }
.wizard__trust { font-family: var(--mono); font-size: var(--fs-caption); color: var(--sage); margin-top: var(--s12); line-height: 1.5; }
.wizard__done { display: none; }
.wizard__done.active { display: block; }
.or { font-family: var(--mono); font-size: var(--fs-caption); color: var(--sage); text-align: center; margin: var(--s12) 0; }
/* ==========================================================================
INTERNAL LINKS + FOOTER
========================================================================== */
.ilinks { padding-block: var(--section-gap); border-top: 1px solid var(--ash); }
.ilinks__head { font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--lichen); margin-bottom: var(--s24); }
.ilinks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s12); }
.ilink { display: flex; align-items: center; gap: var(--s12); padding: var(--s16); background: var(--paper);
border: 1px solid var(--ash); border-radius: var(--r-lg); text-decoration: none; transition: border-color .15s; }
.ilink:hover { border-color: var(--ink); }
.ilink__k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); }
.ilink__l { flex: 1; font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink); }
.ilink__go svg { width: 16px; height: 16px; stroke: var(--moss); fill: none; }
.footer { background: var(--carbon); color: #fff; padding-block: var(--s64) var(--s32); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s32); }
.footer h3, .footer b { font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--moss); margin-bottom: var(--s16); display: block; }
.footer a { color: #fff; text-decoration: none; font-family: var(--mono); font-size: var(--fs-sm); }
.footer a:hover { color: var(--highlighter); }
.footer li { margin-bottom: var(--s12); }
.footer__nap { font-family: var(--mono); font-size: var(--fs-sm); color: var(--moss); line-height: 1.7; }
.footer__all { color: var(--moss) !important; }
.footer__bottom { margin-top: var(--s48); padding-top: var(--s24); border-top: 1px solid var(--olive-char);
display: flex; flex-direction: column; gap: var(--s12); }
.footer__bottom span, .footer__disc { font-family: var(--mono); font-size: var(--fs-caption); color: var(--sage); line-height: 1.6; }
.footer__social { display: flex; gap: var(--s12); }
.footer .brand__name, .footer .brand__name small { color: #fff; }
.footer .brand__mark { background: var(--highlighter); color: var(--ink); }
/* ==========================================================================
MOBILE STICKY BAR
========================================================================== */
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--ink); }
.bottombar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
padding: 10px 6px; text-decoration: none; font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500;
border-right: 1px solid var(--olive-char); }
.bottombar a:last-child { border-right: 0; }
.bottombar small { font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; opacity: .75; }
.bottombar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.bb-call { background: var(--highlighter); color: var(--ink); }
.bb-sms { background: var(--carbon); color: #fff; }
.bb-quote { background: var(--carbon); color: #fff; }
/* ==========================================================================
INTERIOR PAGE HERO (phero) + misc
========================================================================== */
.phero { padding-block: var(--s64); border-bottom: 1px solid var(--ash); background: var(--vellum); }
.phero h1 { margin-bottom: var(--s16); }
.phero__lead { font-family: var(--mono); font-size: var(--fs-body); color: var(--lichen); max-width: 62ch; }
.phero__rating { display: inline-flex; align-items: center; gap: var(--s8); text-decoration: none; margin-top: var(--s16); }
.phero__rating b { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.phero__rating small { font-family: var(--mono); font-size: var(--fs-caption); color: var(--lichen); }
.crumbs, .crumbs a { font-family: var(--mono); font-size: var(--fs-caption); color: var(--sage); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; }
.prose h2 { margin-top: var(--s48); margin-bottom: var(--s16); }
.prose p, .prose li { font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.7; color: var(--lichen); }
.prose .lead { font-size: var(--fs-body); color: var(--ink); }
.pricetable table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--ash); border-radius: var(--r-lg); overflow: hidden; }
.pricetable th, .pricetable td { padding: var(--s16); text-align: left; font-family: var(--mono); font-size: var(--fs-sm); border-bottom: 1px solid var(--ash); }
.pricetable thead th { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.09em; background: var(--bone); color: var(--lichen); }
.pricenote { display: flex; gap: var(--s8); font-family: var(--mono); font-size: var(--fs-caption); color: var(--lichen); }
.leadcard { background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r-lg); padding: var(--s24); }
.leadcard__title { font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: -0.04em; margin-bottom: var(--s8); }
.leadcard__sub { font-family: var(--mono); font-size: var(--fs-sm); color: var(--lichen); margin-bottom: var(--s16); }
.stormnote { background: var(--carbon); color: #fff; border-radius: var(--r-lg); padding: var(--s24); }
.stormnote .k { display: inline-flex; align-items: center; gap: var(--s8); font-family: var(--mono); font-size: var(--fs-caption);
text-transform: uppercase; letter-spacing: 0.09em; color: var(--highlighter); margin-bottom: var(--s8); }
.stormnote p { font-family: var(--mono); font-size: var(--fs-sm); color: var(--moss); }
.ctaband { background: var(--carbon); color: #fff; padding-block: var(--s64); }
.ctaband__inner { max-width: var(--page); margin-inline: auto; padding-inline: var(--s24);
display: flex; align-items: center; justify-content: space-between; gap: var(--s32); flex-wrap: wrap; }
.ctaband h2 { color: #fff; }
.ctaband p { font-family: var(--mono); font-size: var(--fs-sm); color: var(--moss); margin: var(--s8) 0 0; }
.ctaband__actions { display: flex; gap: var(--s12); flex-wrap: wrap; }
.ctaband__promise { display: inline-flex; align-items: center; gap: var(--s8); font-family: var(--mono);
font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--moss); margin-top: var(--s12); }
.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s16); }
.linkcard { display: block; padding: var(--s24); background: var(--paper); border: 1px solid var(--ash);
border-radius: var(--r-lg); text-decoration: none; }
.faq-split__media img { border-radius: var(--r-lg); border: 1px solid var(--ash); }
.gproject, .proj { border: 1px solid var(--ash); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.nextsteps__media img { border-radius: var(--r-lg); }
.spec__row { display: grid; grid-template-columns: 120px 1fr; gap: var(--s24); padding: var(--s24) 0; border-bottom: 1px solid var(--ash); }
.spec__n { font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); }
.tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
background: var(--highlighter); color: var(--ink); padding: 3px 7px; border-radius: var(--r-sm); margin-left: var(--s8); }
/* ==========================================================================
RESPONSIVE
The 96px serif and 80px gaps need a considered mobile scale, not a shrink.
========================================================================== */
@media (max-width: 1080px) {
.services, .fees__grid, .cons__grid, .index-grid, .ilinks__grid { grid-template-columns: 1fr 1fr; }
.hero__grid, .storm__grid, .owner, .whyus__grid, .area__grid, .compare__wrap, .finalcta__grid, .proof__grid { grid-template-columns: 1fr; gap: var(--s32); }
.tlist { grid-template-columns: 1fr; }
.proof__side { position: static; }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
:root { --section-gap: 56px; }
.nav, .header__actions .tel, .header__actions .btn { display: none; }
.hamburger { display: block; }
.header__actions { margin-left: auto; }
.steps { grid-template-columns: 1fr; }
.step { border-right: 0; border-bottom: 1px solid var(--ash); }
.step:last-child { border-bottom: 0; }
.stat { border-right: 0; border-bottom: 1px solid var(--ash); }
.stat:last-child { border-bottom: 0; }
.bottombar { display: grid; }
body { padding-bottom: 64px; }
.ctaband__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
.services, .fees__grid, .cons__grid, .index-grid, .ilinks__grid, .area__cities, .owner ul, .tiles, .footer__grid { grid-template-columns: 1fr; }
.container { padding-inline: var(--s16); }
.svc__price-n { font-size: 34px; }
.compare__wrap { overflow-x: auto; }
.ctable { min-width: 560px; }
.compare__wrap > div:first-child { overflow-x: auto; }
}
/* orphaned roofing-era placeholder styles must never paint */
.ph, .ph__tag, .iq__measuring, .iq__sat, .iq__scan, .iq__reticle { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* ---- trust bar: the label and its sub were colliding --------------------- */
.trustbar .badge > span:last-child { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.trustbar .badge b { font-size: var(--fs-caption); letter-spacing: 0.08em; }
.trustbar .badge .sub, .trustbar .badge > span:last-child > span { font-size: 10px; letter-spacing: 0.08em; color: var(--sage); text-transform: uppercase; }
.trustbar .em { display: inline-grid; place-items: center; }
/* ---- 771 is the argument, so it is the biggest number on the page ------- */
.stat--hero b { font-size: clamp(64px, 7.5vw, 128px); }
.stat--hero { grid-column: span 1; }
/* ---- highlighter as a drawn rule, not a background gradient -------------
A background gradient stop cannot stay registered to the baseline across a
64px-to-128px clamp, so the mark drifted off the digits. A pseudo-element
bar sits where it is told at any size. */
.stat b, .svc__price-n, .iq__price {
background: none !important;
position: relative; display: inline-block; padding: 0 6px; z-index: 0;
}
.stat b::after, .svc__price-n::after, .iq__price::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0.14em;
height: 0.30em; background: var(--highlighter); z-index: -1;
}
.stat { padding: var(--s32) var(--s24) var(--s24); }
.stat b { line-height: 1; margin-bottom: var(--s4); }
.stat--hero b { font-size: clamp(56px, 6.5vw, 112px); }
.proof__stats { align-items: end; }
/* ==========================================================================
INTERIOR PAGE FIXES
========================================================================== */
/* Any sprite I have not explicitly sized renders at the SVG
default of 300x150 and blows the layout apart. :where() carries zero
specificity, so this is a floor that never overrides a real rule. */
svg:where(:not([width])) { width: 16px; height: 16px; }
svg { flex-shrink: 0; }
/* The interior hero ships as `.phero.on-dark`. Give it the dark surface it is
asking for — it also gives service and office pages their own identity
against the cream body. */
.phero.on-dark { background: var(--carbon); border-bottom: 0; padding-block: var(--s64) var(--s48); }
.phero.on-dark h1 { color: #fff; }
.phero.on-dark .phero__lead { color: var(--moss); }
.phero.on-dark .crumbs, .phero.on-dark .crumbs a { color: var(--sage); }
.phero.on-dark .crumbs a:hover { color: #fff; }
.phero__inner { max-width: var(--page); margin-inline: auto; padding-inline: var(--s24); }
.phero .crumbs { display: flex; gap: 6px; margin-bottom: var(--s24); flex-wrap: wrap; }
.phero h1 { max-width: 20ch; }
.phero__meta { display: flex; align-items: center; gap: var(--s24); flex-wrap: wrap; margin-top: var(--s24); }
.phero.on-dark .phero__rating { color: #fff; }
.phero.on-dark .phero__rating b { color: #fff; }
.phero.on-dark .phero__rating small { color: var(--moss); }
.phero .stars svg { width: 15px; height: 15px; fill: var(--highlighter); }
.phero__chip { display: inline-flex; align-items: center; gap: var(--s8);
font-family: var(--mono); font-size: var(--fs-caption); text-transform: uppercase;
letter-spacing: 0.08em; color: var(--moss); border: 1px solid var(--olive-char);
padding: 6px 10px; border-radius: var(--r-sm); }
.phero__chip svg { width: 14px; height: 14px; stroke: var(--highlighter); fill: none; }
.phero__chip b { font-weight: 400; }
.phero__ctas { display: flex; gap: var(--s12); flex-wrap: wrap; margin-top: var(--s32); }
.phero.on-dark .btn--ghost { color: #fff; border-color: #fff; }
.phero__answer { background: var(--paper); color: var(--ink); border-radius: var(--r-lg);
padding: var(--s24); margin-top: var(--s32); font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.65; }
/* interior body rhythm */
.prose { max-width: 76ch; }
.prose h2 { font-size: var(--fs-h2); }
.prose h3 { margin-top: var(--s32); margin-bottom: var(--s8); }
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
border: 1px solid var(--ash); border-radius: var(--r-lg); background: var(--paper); margin: var(--s32) 0; }
.stats .stat { padding: var(--s24); }
.stats .stat b { font-size: clamp(30px,3vw,44px); }
/* ---- the primary action must never sit carbon-on-carbon -----------------
DEVIATION 1 again: on dark surfaces the highlighter carries the action.
It is the only thing on a carbon field with enough contrast to be found. */
.on-dark .btn:not(.btn--ghost),
.phero.on-dark .btn:not(.btn--ghost),
.finalcta .btn:not(.btn--ghost),
.storm .btn:not(.btn--ghost),
.ctaband .btn:not(.btn--ghost) {
background: var(--highlighter); color: var(--ink); border-color: var(--highlighter);
}
.on-dark .btn:not(.btn--ghost):hover,
.phero.on-dark .btn:not(.btn--ghost):hover,
.finalcta .btn:not(.btn--ghost):hover,
.storm .btn:not(.btn--ghost):hover,
.ctaband .btn:not(.btn--ghost):hover { background: #ffe600; color: var(--ink); }
/* top bar: show the number, not a lone glyph */
.header__topcall { display: inline-flex; align-items: center; gap: 6px; }
.header__topcall svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.header__top-inner > *:only-child { margin-left: auto; }
/* ---- mobile reading comfort --------------------------------------------
Monospace is heavier per character than a proportional face, so a long
direct-answer paragraph at 16px mono dominates a phone screen. Drop the
body a step on small viewports; the type system holds, the density eases. */
@media (max-width: 620px) {
.hero__copy > p, .prose p, .prose li, .svc__desc, .tcard blockquote { font-size: 15px; line-height: 1.6; }
.hero__copy > p { max-width: none; }
.section-head > p { font-size: 15px; }
.stat--hero b { font-size: 72px; }
}
/* ==========================================================================
VISUAL DEPTH LAYER
The page had no photography and no tonal range, so it read flat. Depth
comes from three things that need no images: a security-print texture
(authentic to passports and certificates), his deep navy as a real anchor,
and a much larger jump between display and body scale.
========================================================================== */
/* ---- body copy is a humanist sans now, not monospace -------------------- */
body, p, li, td, th, input, select, textarea, button, .btn { font-family: var(--sans); }
.eyebrow, .chip, .badge, .tnum, .feelist__p, .svc__price-n, .svc__price-note,
.iq__price, .iq__sq, .stat span, .step__n, .cons h3::after, .tcard__who b,
.tcard__who span span, .tcard__verified, .crumbs, .crumbs a, .footer h3, .footer b,
.brand__name small, .header__toplic, .hero__angle, .hero__rating small,
.wizard__steplabel, .field label, .feecard__note, .area__radius, .ilink__k,
.svc__tag, .storm__tag, .phero__chip, .owner__since, .owner__sign span,
.priceanchor .disc, .ctaband__promise, .mapcard__foot, .spec__n, .tag {
font-family: var(--mono);
}
.feelist__l { font-family: var(--sans); letter-spacing: -0.011em; }
.feelist__l small { letter-spacing: 0; }
/* ---- guilloche: the fine engine-turned line-work on a certificate ------- */
.storm, .finalcta, .guarantee, .priceanchor, .phero.on-dark { position: relative; overflow: hidden; }
.storm::before, .finalcta::before, .phero.on-dark::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image:
repeating-linear-gradient(38deg, rgba(255,255,255,.055) 0 1px, transparent 1px 9px),
repeating-linear-gradient(-38deg, rgba(255,255,255,.045) 0 1px, transparent 1px 11px);
}
.storm > *, .finalcta > *, .phero.on-dark > * { position: relative; z-index: 1; }
/* cream sections get the faintest laid-paper tooth */
body { background-image: repeating-linear-gradient(0deg, rgba(16,24,32,.016) 0 1px, transparent 1px 4px); }
/* ---- scale contrast: the display voice gets bigger, body stays calm ----- */
:root {
--fs-h1: clamp(42px, 5.4vw + 10px, 88px);
--fs-h2: clamp(30px, 2.6vw + 16px, 52px);
--fs-body: 17px;
--fs-sm: 15px;
}
.section-head h2 { max-width: 18ch; }
.hero h1 { max-width: 16ch; letter-spacing: -0.04em; }
/* ---- gold earns its keep on credential moments -------------------------- */
.stars svg { fill: var(--khaki); }
.hero__rating b { color: var(--ink); }
.eyebrow::before { background: var(--khaki); }
.on-dark .eyebrow::before { background: var(--highlighter); }
.trustbar { background: var(--bone); }
.trustbar .badge svg { stroke: var(--khaki); }
.brand__mark { background: var(--carbon); color: var(--highlighter); }
.footer .brand__mark { background: var(--highlighter); color: var(--carbon); }
/* ---- surfaces gain a step of depth -------------------------------------- */
.svc, .feecard, .tcard, .cons, .ilink, .area__cities a, .mapcard, .leadcard, .steps, .proof__stats, .risk-list, .ctable {
box-shadow: 0 1px 0 rgba(16,24,32,.03), 0 8px 24px -18px rgba(16,24,32,.35);
}
.svc:hover { box-shadow: 0 1px 0 rgba(16,24,32,.04), 0 16px 34px -20px rgba(16,24,32,.45); }
.svc__media--icon { background: linear-gradient(180deg, var(--bone), #f3f1ea); border-bottom-color: var(--ash); }
.svc__icon { color: var(--carbon); }
.svc--feature .svc__media--icon { background: linear-gradient(180deg, var(--carbon), #1b2f4f); border-bottom-color: var(--carbon); }
.svc--feature .svc__icon { color: var(--highlighter); }
/* ---- fee schedule reads as a printed certificate ------------------------ */
.fees { background: var(--carbon); color: #fff; border-block: 0; }
.fees::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
background-image:
repeating-linear-gradient(38deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
repeating-linear-gradient(-38deg, rgba(255,255,255,.04) 0 1px, transparent 1px 11px);
}
.fees { position: relative; overflow: hidden; }
.fees > * { position: relative; z-index: 1; }
.fees .section-head h2 { color: #fff; }
.fees .section-head > p { color: var(--moss); }
.fees .eyebrow { color: var(--highlighter); }
.fees .feecard { background: rgba(255,255,255,.045); border-color: var(--olive-char); border-top: 3px solid var(--khaki); box-shadow: none; }
.fees .feecard__head { border-bottom-color: var(--khaki); }
.fees .feecard__head h3 { color: #fff; }
.fees .feecard__note { color: var(--khaki); }
.fees .feelist li { border-top-color: rgba(255,255,255,.10); border-bottom-color: rgba(255,255,255,.10); }
.fees .feelist__l { color: #fff; }
.fees .feelist__l small { color: var(--moss); }
.fees .feelist__p { color: var(--highlighter); }
.fees .fees__foot { color: var(--moss); border-top-color: rgba(255,255,255,.14); }
.fees .fees__foot svg { stroke: var(--khaki); }
/* ---- hero: give it a composed right column, not a floating card --------- */
.hero { background: linear-gradient(180deg, #fbfaf7 0%, var(--vellum) 100%); }
.hero__media { position: relative; }
.iq { box-shadow: 0 24px 60px -34px rgba(16,24,32,.55); border-color: var(--carbon); }
.iq__label { font-family: var(--serif); font-weight: 600; }
.hero__angle::before { background: var(--highlighter); }
@media (max-width: 620px) {
.hero__copy > p, .prose p, .prose li, .svc__desc, .tcard blockquote { font-size: 16px; line-height: 1.62; }
.section-head > p { font-size: 16px; }
}
/* ==========================================================================
SELF-QC FIXES — found by reviewing the rendered page, not by guessing
========================================================================== */
/* 1. The hero phone was set in the display serif with a mono sublabel jammed
under it, so the two lines collided. Number in mono (it is a number),
label beneath it with real room. */
.hero__cta-row .tel { font-family: var(--mono); font-weight: 500; font-size: 26px; letter-spacing: -0.03em; }
.tel span { line-height: 1.25; gap: 4px; }
.tel small { margin-top: 3px; }
.hero__cta-row { gap: var(--s32) var(--s24); align-items: center; }
/* 2. The top bar showed a lone phone glyph with no number next to it. */
.header__topcall { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: 0.02em; }
.header__top-inner { justify-content: space-between; }
@media (max-width: 620px) { .header__toplic { display: none; } .header__top-inner { justify-content: flex-end; } }
/* 3. Supporting copy inside the picker was still monospace. */
.iq__hint, .iq__trust, .iq__sq:not(.tnum) { font-family: var(--sans); letter-spacing: -0.011em; }
.iq__hint { font-size: var(--fs-sm); }
.iq__trust { font-size: 13px; }
/* 4. The hero right column ended in dead space. Anchor it with the proof the
business actually has, so the column carries weight top to bottom. */
.hero__media::after {
content: "Commissioned, bonded and insured Texas notary · All seven Indian consulates · Irving, Frisco & Austin, serving every US state";
display: block; font-family: var(--mono); font-size: 11px; line-height: 1.9;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage);
padding-top: var(--s16); border-top: 1px solid var(--ash);
}
/* 5. "Dallas-Fort Worth" was breaking after the hyphen. Balance the lines and
keep the hyphenated place name intact. */
h1, h2 { text-wrap: balance; }
.hero h1 { max-width: 18ch; hyphens: none; }
/* 6. Trust-bar label and sub-label were running together with no gap. */
.trustbar__track { gap: var(--s32); }
.trustbar .badge { align-items: center; gap: var(--s12); }
.trustbar .badge > span:last-child { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.trustbar .badge b { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.09em; color: var(--ink); text-transform: uppercase; }
.trustbar .badge > span:last-child > span { font-family: var(--sans); font-size: 12px; letter-spacing: 0; color: var(--lichen); text-transform: none; }
/* keep the serif for headings inside the picker card */
.iq__label { font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.15; }
/* the Google profile link belongs in the top bar, not hidden */
.header__social { display: inline-flex; align-items: center; gap: var(--s12); }
.header__social a { color: var(--moss); display: inline-flex; }
.header__social a:hover { color: var(--highlighter); }
.header__social svg { width: 15px; height: 15px; }
/* "Dallas-Fort Worth" must not break after the hyphen */
.hero h1 { max-width: 21ch; }
/* ---- headline scale: 88px was vanity, not hierarchy ---------------------
A nine-word H1 at 88px ran to four lines, broke after the hyphen in
"Dallas-Fort Worth", and pushed the picker and the proof below the fold.
60px keeps the presence and gets the whole hero onto one screen. */
:root { --fs-h1: clamp(38px, 3.4vw + 16px, 60px); }
.hero { padding-block: clamp(40px, 4vw, 64px); }
.hero h1 { max-width: 17ch; line-height: 1.04; margin-bottom: var(--s24); }
.hero__copy > p { font-size: 17px; max-width: 58ch; }
.hero__grid { gap: var(--s48); align-items: start; }
.hero__cta-row { margin-top: var(--s24); }
.hero__trustline { margin-top: var(--s24); padding-top: var(--s16); }
.phero h1 { max-width: 22ch; }
/* ---- light cards nested inside dark sections must not inherit white ------
The lead wizard is a white card sitting inside the navy final-CTA band, so
`.finalcta h2/h3 { color:#fff }` was rendering its step headings white on
white. Every step of the lead form was invisible. */
.wizard, .wizard h2, .wizard h3, .wizard p, .wizard label,
.storm__card, .storm__card h2, .storm__card h3,
.leadcard, .leadcard h2, .leadcard h3,
.iq, .iq h2, .iq h3 { color: var(--ink); }
.wizard p, .storm__card p, .leadcard p { color: var(--lichen); }
.wizard h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin-bottom: var(--s12); }
.wizard__trust, .wizard__steplabel { color: var(--sage); }
/* ==========================================================================
SIMPLICITY PASS
The page measured 2,433 words and a ten-minute read. Nothing was deleted;
it is disclosed instead. Fee schedule tabs by category, service cards carry
one line instead of a paragraph, and the prose that remains is tighter.
========================================================================== */
/* ---- fee schedule: one category at a time ------------------------------- */
.fees__tabs { display: flex; flex-wrap: wrap; gap: var(--s8); margin-bottom: var(--s24); }
.feetab {
display: inline-flex; align-items: center; gap: var(--s8);
font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
color: var(--moss); background: transparent;
border: 1px solid var(--olive-char); border-radius: var(--r-sm);
padding: 10px 14px; cursor: pointer; transition: all .15s ease;
}
.feetab small { font-family: var(--mono); font-size: 10px; color: var(--sage); }
.feetab:hover { border-color: var(--khaki); color: #fff; }
.feetab.is-on { background: var(--highlighter); border-color: var(--highlighter); color: var(--ink); }
.feetab.is-on small { color: rgba(16,24,32,.55); }
.fees__grid { grid-template-columns: 1fr; }
.feecard.is-hidden { display: none; }
/* the visible panel spreads its rows into columns so it stays shallow */
.fees .feecard { background: transparent; border: 0; border-top: 1px solid var(--khaki); padding: var(--s24) 0 0; }
.fees .feecard__head { border-bottom: 0; margin-bottom: var(--s8); padding-bottom: 0; }
.fees .feelist { columns: 2; column-gap: var(--s48); }
.fees .feelist li { break-inside: avoid; padding: 13px 0; }
@media (max-width: 860px) { .fees .feelist { columns: 1; } }
/* ---- service cards: name, price, one line ------------------------------- */
.svc__body { padding: var(--s24); gap: 0; }
.svc__desc { font-size: 14px; line-height: 1.5; color: var(--lichen); }
.svc__price { margin-bottom: var(--s12); padding-bottom: var(--s12); }
.svc__cta { padding-top: var(--s16); font-size: 13px; }
.svc__media--icon { padding: var(--s16) var(--s24); min-height: 0; }
.svc__icon { width: 26px; height: 26px; }
/* ---- give the page air: fewer words means the space can widen ----------- */
:root { --section-gap: 88px; }
.section-head { margin-bottom: var(--s32); }
.section-head > p { max-width: 52ch; }
.hero__copy > p { font-size: 18px; max-width: 46ch; color: var(--lichen); }
/* ---- risk list reads as a checklist, not five paragraphs ---------------- */
.risk-list li { padding: var(--s16) var(--s24); }
.risk-list b { font-size: 17px; font-family: var(--sans); font-weight: 600; letter-spacing: -0.011em; }
.risk-list p { font-size: 14px; }
/* ---- reviews: four is proof, the rest live on /reviews/ ----------------- */
.tcard blockquote { font-size: 15px; }
/* fee panel is no longer a card, so it must not keep a card's shadow/radius */
.fees .feecard { box-shadow: none; border-radius: 0; }
.fees .feecard__head { min-height: 0; }
.fees__foot { font-family: var(--sans); font-size: 13px; letter-spacing: -0.011em; max-width: 68ch; }
.fees .feelist { column-fill: balance; }
/* ---- prose is sans, full stop ------------------------------------------
Monospace stayed on a dozen body-copy selectors because the base rule was
set on parents rather than the text nodes. Mono is now reserved for what it
is actually good at: numerals, labels, eyebrows and metadata. */
.storm__steps li, .storm__card p, .step p, .cons p, .guarantee p, .guarantee li,
.priceanchor p, .finalcta__sub, .finalcta__assure li, .whyus__grid p, .risk-list p,
.ctable td, .ctable th, .area__cities a, .muted, .crew-vetting, .crew-vetting p,
.owner li, .tcard blockquote, .svc__desc, .fees__foot, .iq__hint, .iq__trust,
.mapcard__foot a, .footer__nap, .footer a, .faq__a-inner, .prose p, .prose li {
font-family: var(--sans); letter-spacing: -0.011em;
}
/* numerals and labels keep the mono voice */
.feelist__p, .svc__price-n, .iq__price, .stat b, .tnum,
.ctable thead th, .priceanchor .range, .priceanchor .disc,
.cons h3::after, .step__n, .feetab, .feecard__note { font-family: var(--mono); }
.ctable thead th { letter-spacing: 0.08em; }
.storm__steps li { font-size: 15px; }
.step p, .cons p, .guarantee li, .finalcta__assure li { font-size: 15px; }
/* remaining prose selectors that were still inheriting mono */
.owner p.muted, .muted, .priceanchor .disc, .phero__lead, .pricenote,
.leadcard__sub, .ctaband p, .pricetable td, .stormnote p, .nextsteps p,
.finalcta p, .storm p, .index-grid p, .linkcard p, .spec__row p {
font-family: var(--sans); letter-spacing: -0.011em;
}
.pricetable td:last-child, .pricetable .tnum { font-family: var(--mono); }
.priceanchor .disc { font-size: 12px; text-transform: none; letter-spacing: -0.005em; }
.phero__lead { font-size: 17px; }
/* ==========================================================================
BRAND MATCH LAYER — overrides every editorial choice that was not his
========================================================================== */
:root {
--navy-deep: #00124d;
--navy: #0b3162;
--navy-soft: #17406f;
--cream: #f5f4f0;
--cream-warm: #faf9f6;
--gold: #d0a63d;
--gold-soft: #e6c882;
--crimson: #b12132;
--paper: #ffffff;
--vellum: var(--cream);
--ink: var(--navy-deep);
--carbon: var(--navy);
--olive-char: #24548c;
--lichen: #4d5f78;
--sage: #7c8ca3;
--moss: #a9bcd4;
--bone: #eceae4;
--khaki: var(--gold);
--highlighter: var(--gold);
--ash: #d9d6ce;
--color-ink: var(--navy-deep);
--color-accent: var(--navy);
--color-urgent: var(--crimson);
--color-rating: var(--gold);
--color-text: var(--navy-deep);
--color-text-muted: var(--lichen);
--color-paper: var(--cream);
--color-paper-card: var(--paper);
--color-line: var(--ash);
--serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--mono: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}
body { background: var(--cream); color: var(--navy-deep); background-image: none; }
/* ---- headings: his formal serif, ALL CAPS and letterspaced -------------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; font-variation-settings: normal; color: var(--navy-deep); }
h1 { letter-spacing: -0.015em; line-height: 1.08; }
.section-head h2, .fees .section-head h2, .storm h2 {
text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; line-height: 1.16;
}
.section-head h2 { max-width: 22ch; }
h3 { font-weight: 700; letter-spacing: -0.01em; }
/* ---- eyebrow: navy label with a gold rule, the way his flyers set it ---- */
.eyebrow { color: var(--navy); letter-spacing: 0.16em; font-family: var(--sans); font-weight: 600; font-size: 11px; }
.eyebrow::before { background: var(--gold); width: 26px; height: 2px; }
.on-dark .eyebrow, .fees .eyebrow { color: var(--gold-soft); }
.on-dark .eyebrow::before, .fees .eyebrow::before { background: var(--gold); }
/* ---- the navy rule frame: his single most recognisable device ----------- */
.svc, .feecard, .tcard, .cons, .leadcard, .iq, .storm__card, .mapcard, .steps, .proof__stats, .risk-list {
border-radius: 2px; box-shadow: none;
border: 1px solid var(--ash);
}
.tcard, .iq, .storm__card, .leadcard {
border: 2px solid var(--navy); box-shadow: 0 0 0 1px var(--paper) inset, 0 0 0 5px var(--paper), 0 0 0 6px rgba(11,49,98,.18);
}
.svc:hover { border-color: var(--navy); box-shadow: none; }
.svc--feature { border: 2px solid var(--navy); }
/* ---- gold stars, as on every one of his review graphics ----------------- */
.stars svg { fill: var(--gold); }
.hero__rating b, .phero__rating b { color: var(--navy-deep); }
/* ---- no yellow anywhere: gold rules and crimson urgency ----------------- */
.stat b::after, .svc__price-n::after, .iq__price::after { background: var(--gold-soft); height: 0.16em; bottom: 0.02em; opacity: .85; }
.svc__price-n, .iq__price, .stat b { color: var(--navy-deep); }
.feelist__p { color: var(--gold); }
.btn { background: var(--navy); border-color: var(--navy); color: #fff; border-radius: 2px; letter-spacing: 0.02em; font-weight: 600; }
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--urgent, .on-dark .btn:not(.btn--ghost), .phero.on-dark .btn:not(.btn--ghost),
.finalcta .btn:not(.btn--ghost), .storm .btn:not(.btn--ghost), .ctaband .btn:not(.btn--ghost),
.priceanchor .btn {
background: var(--gold); border-color: var(--gold); color: var(--navy-deep);
}
.btn--urgent:hover, .on-dark .btn:not(.btn--ghost):hover, .storm .btn:not(.btn--ghost):hover,
.finalcta .btn:not(.btn--ghost):hover, .priceanchor .btn:hover { background: var(--gold-soft); color: var(--navy-deep); }
/* ---- VFS lane: crimson is his urgency colour, not yellow ---------------- */
.storm { background: var(--navy-deep); }
.storm__tag { background: var(--crimson); color: #fff; letter-spacing: 0.12em; }
.storm__steps svg { stroke: var(--gold); }
.storm__card { border-color: var(--gold); box-shadow: none; }
.storm__card .big { color: var(--navy-deep); }
.pulse { background: var(--gold); box-shadow: 0 0 0 3px rgba(208,166,61,.3); }
/* ---- dark surfaces are navy, with the guilloche kept ------------------- */
.on-dark, .section.on-dark, .fees, .finalcta, .phero.on-dark, .footer, .guarantee, .priceanchor, .ctaband { background: var(--navy-deep); }
.header__top { background: var(--navy-deep); }
.brand__mark { background: var(--navy); color: var(--gold); border-radius: 2px; }
.footer .brand__mark { background: var(--gold); color: var(--navy-deep); }
.feetab { border-color: var(--olive-char); color: var(--moss); border-radius: 2px; }
.feetab.is-on { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.feetab.is-on small { color: rgba(0,18,77,.6); }
.fees .feecard { border-top-color: var(--gold); }
.fees .feecard__head { border-bottom-color: var(--gold); }
.tcard__avatar { background: var(--navy); color: var(--gold); }
.trustbar { background: var(--bone); border-color: var(--ash); }
.trustbar .badge svg { stroke: var(--gold); }
.trustbar .badge b { color: var(--navy-deep); }
.svc__media--icon { background: var(--bone); border-bottom-color: var(--ash); }
.svc__icon { color: var(--navy); }
.svc--feature .svc__media--icon { background: var(--navy-deep); }
.svc--feature .svc__icon { color: var(--gold); }
.svc__tag { background: var(--gold); color: var(--navy-deep); letter-spacing: 0.1em; }
.ctable thead th.us { background: var(--navy); color: #fff; }
.ctable td.us { background: rgba(11,49,98,.05); color: var(--navy-deep); }
.ctable .yes { color: var(--navy); font-weight: 600; }
.owner__since { background: var(--navy); color: #fff; }
.owner__photo--circle { border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--gold); }
.cons__seal { color: var(--gold); }
.cons h3::after { color: var(--gold); }
.faq { border-top-color: var(--navy); }
.faq__q { font-family: var(--serif); font-weight: 700; }
.guarantee .seal { color: var(--gold); border-color: var(--olive-char); }
.wizard__progress .seg.active { background: var(--gold); }
.tile[aria-pressed="true"], .tile.is-on { border-color: var(--navy); background: rgba(11,49,98,.06); }
.footer a:hover { color: var(--gold); }
.bb-call { background: var(--crimson); color: #fff; }
.bb-sms, .bb-quote { background: var(--navy-deep); color: #fff; }
.hero { background: linear-gradient(180deg, var(--cream-warm), var(--cream)); }
.hero__angle::before { background: var(--gold); }
.hero__promise { border-color: var(--gold); color: var(--navy); }
.nav a.active, .nav__toggle.active { box-shadow: 0 3px 0 var(--gold); }
.iq__label, .leadcard__title, .storm__card .big { font-family: var(--serif); font-weight: 700; }
/* prices in the sans, tabular — his flyer sets figures in bold sans ------- */
.svc__price-n, .iq__price, .feelist__p, .stat b, .tnum {
font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums;
}
.stat b { font-family: var(--serif); font-weight: 700; }
/* ---- caps are for short labels, not sentences ---------------------------
He sets "SERVICES" and "HAPPY CLIENT" in caps because they are two words.
A three-line sentence in caps Playfair is shouty and slow to read, so the
caps voice stays on the eyebrow and headings return to sentence case. */
.section-head h2, .fees .section-head h2, .storm h2 {
text-transform: none; letter-spacing: -0.015em; line-height: 1.1;
}
.storm h2, .fees .section-head h2 { max-width: 20ch; }
.section-head h2 { max-width: 24ch; }
/* the eyebrow keeps his letterspaced caps */
.eyebrow { letter-spacing: 0.18em; }
/* ---- dropdown sub-label sits on its own line ----------------------------
The sub-label span had no block styling in this theme, so the price ran
straight into the service name ("...Supportfrom $89"). */
.nav__menu a { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; padding: 10px 12px; }
.nav__menu a .sub { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--gold); }
.nav__menu { min-width: 280px; }
.drawer__acc-panel a .sub { display: block; font-size: 11px; color: var(--sage); margin-top: 2px; }
/* ---- client's real logo + founder portrait (21 Sep 2026) ----------------- */
.brand img, .brand__logo { height: 48px; width: auto; display: block; }
@media (max-width: 620px) { .brand img, .brand__logo { height: 40px; } }
.owner__photo-wrap { display: block; }
.owner__photo:not(.owner__photo--circle) {
width: 100%; max-width: 460px; aspect-ratio: 1080 / 1268; object-fit: cover; object-position: center top;
border: 2px solid var(--navy); outline: 1px solid var(--navy); outline-offset: 5px; border-radius: 2px; margin: 6px;
}
.header .brand__logo { height: 58px; }
@media (max-width: 620px) { .header .brand__logo { height: 50px; } }
.owner h2 { margin-bottom: var(--s16); }
/* ---- round badge logo beside the wordmark (client logo, 21 Sep 2026) ----- */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__badge { width: 60px; height: 60px; flex: 0 0 60px; display: block; object-fit: contain; }
.footer .brand__badge { width: 96px; height: 96px; flex-basis: 96px; }
@media (max-width: 620px) { .brand__badge { width: 50px; height: 50px; flex-basis: 50px; } .brand__name small { display: none; } }
/* footer: badge at a readable size, and the CTA must not be navy-on-navy */
.footer .brand__logo--foot { width: 112px !important; height: 112px !important; max-width: none; object-fit: contain; background: none !important; padding: 0 !important; border: 0 !important; margin-bottom: var(--s16); }
.footer .btn:not(.btn--ghost) { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.footer .btn:not(.btn--ghost):hover { background: var(--gold-soft); color: var(--navy-deep); }
.footer__social a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--moss); }
/* ==========================================================================
MODERN LAYER — 23 Sep 2026
Client review 23 Sep: "the look and feel is not good", "it's not modern",
"your build is not clear and not readable". He sent two references he does
rate: awsprojects.in/sathishnotary (a rival build of his own site) and
theprospernotary.com. Both share the same grammar, and neither is editorial:
white ground (not cream) photography on every service
one modern sans, bold short bullets, not paragraphs
navy + one hot accent soft shadow, generous radius
This layer rewrites the surface to that grammar. The editorial layer above
is left intact so theme-brand.css remains a one-line rollback.
========================================================================== */
:root {
/* ---- ground: white, with a cool light band. Cream read as dated. ------ */
--paper: #ffffff;
--cream: #ffffff;
--vellum: #ffffff;
--surface: #f3f6fb;
--bone: #eaf0f8;
/* ---- his navy, plus crimson promoted to the action colour ------------- */
--navy: #0b3162;
--navy-deep: #00124d;
--navy-ink: #01172e;
--crimson: #c0212f;
--crimson-dk: #9c1a26;
--gold: #d0a63d;
--ink: #0d1b33;
--lichen: #4d5b72;
--sage: #7d8ba1;
--moss: #a8b8ce;
--ash: #e2e8f1;
--carbon: #0b3162;
--color-paper: #ffffff;
--color-paper-alt: var(--surface);
--color-paper-card: #ffffff;
--color-text: var(--ink);
--color-text-muted: var(--lichen);
--color-line: var(--ash);
--color-accent: var(--navy);
--color-urgent: var(--crimson);
/* ---- one modern sans carries display and body ------------------------- */
--sans-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--serif: var(--sans-display);
--mono: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
--fs-h1: clamp(34px, 3.6vw + 12px, 60px);
--fs-h2: clamp(27px, 1.7vw + 16px, 40px);
/* ---- shape + depth: the flat no-shadow rule is what read as dated ----- */
--r-sm: 10px;
--r-lg: 16px;
--shadow-1: 0 1px 2px rgba(6,22,52,.05), 0 4px 14px rgba(6,22,52,.06);
--shadow-2: 0 2px 8px rgba(6,22,52,.07), 0 18px 44px rgba(6,22,52,.11);
--section-gap: 68px;
}
body { background: #fff; color: var(--ink); background-image: none; }
.section--surface, .section--alt { background: var(--surface); }
.section { padding-block: clamp(48px, 5.2vw, 84px); }
/* ---- type: bold modern sans, sentence case. No caps, no letterspacing. -- */
h1, h2, h3, h4,
.brand__name, .iq__label, .leadcard__title, .storm__card .big, .faq__q,
.owner__sign, .tel-lg, .stat b, .hero__rating b, .phero__rating b, .risk-list b, .gmark {
font-family: var(--sans-display);
font-weight: 800;
letter-spacing: -0.028em;
font-variation-settings: normal;
text-transform: none;
}
h1 { line-height: 1.06; }
h2 { line-height: 1.12; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.28; }
.section-head h2, .fees .section-head h2, .storm h2 {
text-transform: none; letter-spacing: -0.028em; font-weight: 800; line-height: 1.12;
}
.section-head h2 { max-width: 20ch; }
.section-head > p { font-size: 16px; line-height: 1.6; color: var(--lichen); max-width: 58ch; }
p, li { line-height: 1.65; }
/* eyebrow: a small pill, the way both references set it */
.eyebrow {
display: inline-flex; align-items: center; gap: 0;
font-family: var(--sans); font-weight: 700; font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--crimson); background: rgba(192,33,47,.08);
padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.eyebrow::before { display: none; }
.on-dark .eyebrow, .fees .eyebrow { color: #ffd9dd; background: rgba(255,255,255,.12); }
/* ---- buttons: crimson action, pill-ish, with lift --------------------- */
.btn {
border-radius: 12px; font-family: var(--sans); font-weight: 700;
letter-spacing: -0.01em; text-transform: none; font-size: 15px;
background: var(--crimson); border: 1px solid var(--crimson); color: #fff;
box-shadow: 0 2px 10px rgba(192,33,47,.22);
transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover { background: var(--crimson-dk); border-color: var(--crimson-dk); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,33,47,.3); }
.btn--ghost { background: transparent; color: var(--navy); border-color: #c6d2e4; box-shadow: none; }
.btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.on-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.on-dark .btn--ghost:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }
.btn--urgent { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.btn--urgent:hover { background: var(--crimson-dk); color: #fff; }
.footer .btn:not(.btn--ghost) { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.footer .btn:not(.btn--ghost):hover { background: var(--crimson-dk); color: #fff; }
/* ---- cards: white, soft shadow, real radius, hover lift --------------- */
.svc, .tcard, .feecard, .iq, .leadcard, .storm__card, .magnet, .guarantee, .mapcard, .priceanchor, .faq__item {
border-radius: var(--r-lg); box-shadow: var(--shadow-1); border-color: var(--ash);
}
.svc { background: #fff; border: 1px solid var(--ash); transition: transform .16s ease, box-shadow .16s ease; }
.svc:hover { border-color: var(--ash); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.svc--feature { border-color: var(--navy); box-shadow: var(--shadow-2); }
.steps { border: 0; background: transparent; gap: 18px; border-radius: 0; overflow: visible; }
.step { background: #fff; border: 1px solid var(--ash); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 26px; }
.step .em { border-radius: 12px; border: 0; background: rgba(11,49,98,.07); }
.step .em svg { stroke: var(--navy); }
.step p { font-family: var(--sans); font-size: 14.5px; }
.step__n { font-family: var(--sans); font-weight: 700; color: var(--crimson); letter-spacing: .08em; }
/* ---- service cards lead with a photograph (his references all do) ----- */
.svc__media--icon { padding: 0; border-bottom: 1px solid var(--ash); background: var(--bone); }
.svc__photo--img {
display: block; width: 100%; aspect-ratio: 16 / 10;
background-size: cover; background-position: center; background-repeat: no-repeat;
}
.svc--feature .svc__media--icon { background: var(--bone); border-bottom-color: var(--ash); }
.svc__media--icon:has(.svc__icon) { padding: var(--s24); background: linear-gradient(180deg, var(--bone), #dfe9f6); }
.svc--feature .svc__media--icon:has(.svc__icon) { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); }
.svc--feature .svc__icon { color: #fff; }
.svc__icon { color: var(--navy); }
.svc__tag { background: var(--crimson); color: #fff; font-family: var(--sans); font-weight: 700; letter-spacing: .07em; border-radius: 999px; padding: 5px 10px; }
.svc__body h3 { font-size: 18px; }
.svc__price-n {
font-family: var(--sans-display); font-weight: 800; font-size: 34px;
letter-spacing: -0.04em; color: var(--navy-deep); padding: 0; background: none;
}
.svc--feature .svc__price-n { font-size: 38px; }
.svc__price-note { font-family: var(--sans); font-weight: 600; letter-spacing: .06em; color: var(--sage); }
.svc__desc { font-size: 14.5px; }
.svc__cta { font-family: var(--sans); font-weight: 700; color: var(--crimson); font-size: 14.5px; }
.svc__cta svg { stroke: currentColor; }
/* ---- header: cleaner, lighter, sticky ---------------------------------- */
.header { background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ash); }
.nav__menu a { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); }
.nav__menu a .sub { color: var(--crimson); font-weight: 700; }
.brand__name { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.topbar { background: var(--navy-deep); }
/* ---- dark sections: his navy, no paper texture ------------------------- */
.on-dark, .section--dark, .fees { background: var(--navy-deep); }
.fees::before { display: none; }
.fees .feecard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--crimson); border-radius: var(--r-lg); }
.fees .feecard__head { border-bottom-color: rgba(255,255,255,.16); }
.fees .eyebrow { color: #ffd9dd; }
/* ---- hero: photograph behind, white type, crimson action --------------- */
.hero { border-bottom: 0; }
.hero__copy h1 { color: #fff; }
.hero .hero__sub, .hero__copy > p { color: #dbe5f3; font-size: 17px; }
.hero__angle { background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 700; letter-spacing: .08em; font-size: 11px; text-transform: uppercase; }
.hero__rating b { font-size: 26px; color: #fff; }
.iq { background: #fff; box-shadow: var(--shadow-2); border: 0; }
.iq__label { font-size: 22px; letter-spacing: -0.03em; }
/* ---- reviews, owner, misc --------------------------------------------- */
.tcard { background: #fff; }
.owner__photo:not(.owner__photo--circle) { border: 0; outline: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-2); margin: 0; }
.stat b { font-family: var(--sans-display); font-weight: 800; letter-spacing: -0.04em; }
.faq__q { font-weight: 700; font-size: 16.5px; }
input, select, textarea { border-radius: 12px; font-family: var(--sans); }
/* ---- floating WhatsApp: both of his references carry one --------------- */
.wa-float {
position: fixed; right: 18px; bottom: 84px; z-index: 60;
width: 54px; height: 54px; border-radius: 50%;
display: grid; place-items: center;
background: #25d366; box-shadow: 0 6px 22px rgba(0,0,0,.24);
transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 760px) { .wa-float { bottom: 88px; right: 14px; width: 50px; height: 50px; } .wa-float svg { width: 27px; height: 27px; } }
/* ---- mobile: tighten the long page ------------------------------------ */
@media (max-width: 760px) {
.section { padding-block: 40px; }
.steps { grid-template-columns: 1fr; }
h3 { font-size: 18px; }
}
/* ==========================================================================
MODERN LAYER — corrections after first visual QC (23 Sep 2026)
========================================================================== */
/* 1. The hero is a dark photograph, as in both references he rated.
.hero.on-dark previously forced --vellum with a `background` shorthand,
which also wiped the generator's injected hero background-image. Set the
COLOUR only, so the injected image survives. */
/* superseded by correction 6 below */
.hero.on-dark h1, .hero.on-dark h2 { color: #fff; }
.hero.on-dark p, .hero.on-dark li { color: #dbe5f3; }
.hero.on-dark .hero__rating b, .hero .hero__rating b { color: #fff; }
.hero.on-dark .hero__rating span, .hero.on-dark .hero__trustline { color: #c3d3e8; }
.hero.on-dark .tel, .hero.on-dark .hero__cta-row .tel { color: #fff; }
.hero.on-dark .hero__cta-row small, .hero.on-dark .hero__sub-note { color: #a8bcd8; }
.hero__angle { color: #fff; background: rgba(255,255,255,.16); }
.hero__angle::before { display: none; }
.hero__promise { border-color: rgba(255,255,255,.34); color: #fff; }
.hero__promise .dot, .hero__promise::before { color: var(--gold); }
/* the price picker stays a white card on the dark hero */
.hero .iq, .hero .iq * { color: var(--ink); }
.hero .iq h2, .hero .iq .iq__label { color: var(--navy-deep); }
.hero .iq p, .hero .iq li, .hero .iq small { color: var(--lichen); }
/* 2. Trustbar sits on navy, so its text must be light (was navy on navy). */
.trustbar { background: var(--navy-deep); border-block-color: rgba(255,255,255,.14); }
.trustbar .badge b, .trustbar .badge > span:last-child > b { color: #fff; }
.trustbar .badge .sub, .trustbar .badge > span:last-child > span { color: #a8bcd8; }
.trustbar .badge svg { stroke: var(--gold); }
/* 3. Every primary action is crimson. The brand layer had promoted gold,
which left two different "main" buttons on one page. */
.btn--urgent,
.on-dark .btn:not(.btn--ghost),
.phero.on-dark .btn:not(.btn--ghost),
.iq .btn, .iq__go,
.storm__card .btn:not(.btn--ghost),
.finalcta .btn:not(.btn--ghost),
.footer .btn:not(.btn--ghost) {
background: var(--crimson); border-color: var(--crimson); color: #fff;
}
.btn--urgent:hover,
.on-dark .btn:not(.btn--ghost):hover,
.iq .btn:hover, .iq__go:hover,
.storm__card .btn:not(.btn--ghost):hover,
.finalcta .btn:not(.btn--ghost):hover,
.footer .btn:not(.btn--ghost):hover {
background: var(--crimson-dk); border-color: var(--crimson-dk); color: #fff;
}
.feetab.is-on { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.pulse { background: var(--gold); box-shadow: 0 0 0 3px rgba(208,166,61,.3); }
/* 4. A ghost button on a light card was white on white. */
.btn--ghost { color: var(--navy); border-color: #c6d2e4; background: transparent; }
.on-dark .btn--ghost, .hero.on-dark .btn--ghost, .footer .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.iq .btn--ghost, .wizard .btn--ghost, .leadcard .btn--ghost { color: var(--navy); border-color: #c6d2e4; }
.iq .btn--ghost:hover, .wizard .btn--ghost:hover, .leadcard .btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
/* 5. The editorial highlighter bar under each price survived as a stray gold
stub once the prices went sans. Drop it; the rule under .svc__price does
the separating now. */
.svc__price-n::after, .svc__price-n::before { display: none !important; }
/* 6. Let the generator's injected hero photograph through. Our own rule must
not declare background-image at all, or it wins on specificity. */
.hero.on-dark { background-color: var(--navy-deep); color: #fff; }
/* 7. Every caption inside the photographic hero needs a light-on-dark floor.
"· 771 Google reviews" was #4d5b72 (a light-background token) sitting on the
photo, and the credentials line under the price card was the same. The price
card itself is a white panel, so it keeps the dark tokens. */
.hero.on-dark *:not(.iq):not(.iq *) { border-color: rgba(255,255,255,.22); }
.hero.on-dark .hero__trustline,
.hero.on-dark .hero__trustline *,
.hero.on-dark .hero__rating,
.hero.on-dark .hero__rating span,
.hero.on-dark .hero__media > p,
.hero.on-dark .hero__media small,
.hero.on-dark .hero__badge,
.hero.on-dark .hero__badge *,
.hero.on-dark .hero__creds,
.hero.on-dark .hero__creds * { color: #c9d9ee; }
.hero.on-dark .hero__rating b { color: #fff; }
.hero.on-dark .hero__rating .stars, .hero.on-dark .stars { color: var(--gold); }
.hero.on-dark .iq, .hero.on-dark .iq * { border-color: inherit; }
.hero.on-dark .iq { border-color: transparent; }
/* 8. Hero scrim. The generator's default fades to 50% opacity at the right
edge, which left the photo too bright behind the credentials line and the
review count. Same photograph, a deeper fade. Specificity (0,3,0) so it
beats the injected `.hero.hero, .hero.on-dark` rule.
This theme is client-specific, so naming the file here is safe. */
.hero.on-dark.hero--split {
background-image:
linear-gradient(106deg,
rgba(0,18,77,.96) 0%,
rgba(0,18,77,.93) 42%,
rgba(0,18,77,.84) 72%,
rgba(0,18,77,.76) 100%),
url('/assets/sathish-notary/svc/hero-documents.jpg');
background-size: cover;
background-position: center right;
}
@media (max-width: 760px) {
.hero.on-dark.hero--split {
background-image:
linear-gradient(180deg, rgba(0,18,77,.93) 0%, rgba(0,18,77,.9) 60%, rgba(0,18,77,.88) 100%),
url('/assets/sathish-notary/svc/hero-documents.jpg');
background-position: center 28%;
}
}
/* 9. Stat numbers: drop the editorial highlighter wash and its ::after bar.
At sans weights the gold slab sat off the baseline and read as a rendering
fault rather than an accent. The number carries itself. */
.stat b {
background: none; padding: 0; color: var(--navy-deep);
font-family: var(--sans-display); font-weight: 800; letter-spacing: -0.04em;
}
.stat b::after, .iq__price::after { display: none !important; }
.stat span { font-family: var(--sans); font-weight: 600; letter-spacing: .08em; color: var(--lichen); }
.stats { border: 1px solid var(--ash); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.stat { border-right-color: var(--ash); }
@media (max-width: 760px) { .stat { border-right: 0; border-bottom: 1px solid var(--ash); } .stat:last-child { border-bottom: 0; } }
/* 10. Comparison table on mobile. It was 560px inside a 358px scroller, so the
third column ("doing it yourself") sat off-screen with no scroll cue and the
comparison lost its point. Make all three columns fit the viewport. */
@media (max-width: 760px) {
.compare__wrap { overflow-x: visible; }
.ctable { width: 100%; min-width: 0; table-layout: fixed; font-size: 12.5px; }
.ctable th, .ctable td { padding: 10px 7px; word-break: normal; overflow-wrap: anywhere; hyphens: auto; line-height: 1.35; }
.ctable th:first-child, .ctable td:first-child { width: 38%; }
.ctable th:not(:first-child), .ctable td:not(:first-child) { width: 31%; }
.ctable .yes, .ctable b { font-size: 12.5px; }
}
/* ==========================================================================
COMPONENT RESTORATION — 23 Sep 2026
An audit of every class in the built HTML against this stylesheet found 49
classes with no rule at all. They were styled in chrome.css, which this
theme replaces and which is never shipped, so whole components (the lead
form, the page aside, the services index, the reviews grid, the 404) were
rendering as raw HTML. That is the "visual inconsistency" and the services
index reading as underlined text. Ported here, in the modern language.
========================================================================== */
/* ---- 1. FAQ. The JS animates panel.style.maxHeight, but the CSS hid the
panel with display:none, so max-height did nothing and no FAQ ever opened
on any page. Match the JS contract, and keep a CSS-only fallback. -------- */
.faq__a { display: block; max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.faq__q[aria-expanded="true"] + .faq__a { max-height: 2000px; }
.faq__item[data-open] .faq__a, .faq__item.is-open .faq__a { max-height: 2000px; }
.faq__q { cursor: pointer; background: none; border: 0; text-align: left; padding: 18px var(--s24); color: var(--ink); }
.faq__q .pm { transition: transform .25s ease, background .2s ease, border-color .2s ease; }
.faq__q[aria-expanded="true"] .pm { transform: rotate(45deg); background: var(--crimson); border-color: var(--crimson); }
.faq__q[aria-expanded="true"] .pm svg { stroke: #fff; }
.faq__a-inner { font-family: var(--sans); font-size: 15px; color: var(--lichen); padding: 0 var(--s24) 20px; }
/* ---- 2. Services / service-area index cards. These were bare tags with
an underlined title running straight into the description. --------------- */
.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.index-card {
display: flex; flex-direction: column; text-decoration: none;
background: #fff; border: 1px solid var(--ash); border-radius: var(--r-lg);
padding: 22px; box-shadow: var(--shadow-1);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.index-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.index-card b {
display: block; font-family: var(--sans-display); font-weight: 800;
font-size: 17px; line-height: 1.3; letter-spacing: -0.025em;
color: var(--navy-deep); margin-bottom: 8px; text-decoration: none;
}
.index-card .sub {
display: block; color: var(--lichen); font-size: 14.5px; line-height: 1.6;
text-decoration: none; margin-bottom: 14px;
}
.index-card .go {
display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
font-family: var(--sans); font-weight: 700; font-size: 14px;
letter-spacing: 0; text-transform: none; color: var(--crimson); text-decoration: none;
}
.index-card .go::after { content: ""; }
@media (max-width: 900px) { .index-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .index-grid { grid-template-columns: 1fr; } }
/* ---- 3. Two-column inner-page layout with a sticky lead aside. Without
these the aside collapsed and the prose sat in a 60% column with dead
space beside it on every service and location page. --------------------- */
.page-grid { display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: clamp(28px,4vw,52px); align-items: start; }
.page-grid > * { min-width: 0; }
.page-aside { position: sticky; top: 92px; }
@media (max-width: 980px) { .page-grid { grid-template-columns: minmax(0,1fr); } .page-aside { position: static; order: -1; } }
/* ---- 4. Lead card ------------------------------------------------------- */
.leadcard { background: #fff; border: 1px solid var(--ash); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-2); }
.leadcard__trust { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-size: 13px; color: var(--lichen); }
.leadcard__trust .ico { width: 15px; height: 15px; flex: 0 0 15px; color: var(--color-success); margin-top: 2px; }
.leadcard__or {
text-align: center; font-family: var(--sans); font-weight: 700; font-size: 11px;
letter-spacing: .1em; text-transform: uppercase; color: var(--sage);
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ash);
}
.leadcard__tel {
display: flex; align-items: center; justify-content: center; gap: 10px;
min-height: 46px; margin-top: 10px; text-decoration: none;
font-family: var(--sans-display); font-weight: 800; font-size: 19px;
letter-spacing: -0.03em; color: var(--navy-deep);
}
.leadcard__tel .ico { width: 18px; height: 18px; color: var(--crimson); }
.leadcard__done { text-align: center; padding: 20px 0; display: none; }
.leadcard[data-state="done"] .leadcard__done { display: block; }
.leadcard[data-state="done"] form { display: none; }
.leadcard__done .check { width: 54px; height: 54px; border-radius: 50%; background: var(--color-success); color: #fff; display: grid; place-items: center; margin: 0 auto 14px; }
.leadcard__done .check svg { width: 28px; height: 28px; stroke: #fff; fill: none; }
.leadcard__done p { color: var(--lichen); font-size: 14.5px; margin-top: 8px; }
/* ---- 5. Check lists ----------------------------------------------------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; font-weight: 600; color: var(--ink); }
.checks .ico { width: 18px; height: 18px; flex: 0 0 18px; color: var(--color-success); margin-top: 3px; }
.on-dark .checks li { color: #dbe5f3; }
.on-dark .checks .ico { color: #6fe39a; }
.aside-trust { margin-top: 16px; border: 1px solid var(--ash); border-radius: var(--r-lg); background: #fff; padding: 18px 20px; box-shadow: var(--shadow-1); }
.aside-trust .checks { gap: 10px; }
.aside-trust .checks li { font-size: 14px; font-weight: 600; }
/* ---- 6. Small text bits that had no rule ------------------------------- */
.crumbs .sep, .sep { color: rgba(255,255,255,.4); margin-inline: 8px; }
.on-light .sep, .section .sep { color: var(--sage); }
.hl { color: var(--gold); }
.answer {
background: #fff; border: 1px solid var(--ash); border-left: 4px solid var(--crimson);
border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-1); margin-bottom: 26px;
}
.answer p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.section-lead { color: var(--lichen); font-size: 16px; line-height: 1.65; max-width: 62ch; }
.go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--crimson); text-decoration: none; }
/* ---- 7. Spec / life / loc / tgrid / linkgrid --------------------------- */
.spec { display: grid; gap: 0; border: 1px solid var(--ash); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-1); }
.spec__row { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--ash); }
.spec__row:last-child { border-bottom: 0; }
.spec__row > b { font-weight: 700; color: var(--navy-deep); font-size: 14.5px; }
.spec__row p { margin: 0; font-size: 14.5px; color: var(--lichen); }
@media (max-width: 640px) { .spec__row { grid-template-columns: 1fr; gap: 4px; } }
.life, .tgrid, .linkgrid { display: grid; gap: 16px; }
.life { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.linkgrid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.life > *, .linkgrid > * { background: #fff; border: 1px solid var(--ash); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-1); }
.loc { display: grid; gap: 4px; font-size: 14.5px; color: var(--lichen); }
.loc b { color: var(--navy-deep); font-weight: 700; }
/* ---- 8. Service-area map block ---------------------------------------- */
.areamap { border: 1px solid var(--ash); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); background: var(--bone); }
.areamap__frame { display: block; width: 100%; height: 340px; border: 0; }
@media (max-width: 640px) { .areamap__frame { height: 250px; } }
/* ---- 9. Reviews page --------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filter {
border: 1px solid var(--ash); background: #fff; border-radius: 999px;
padding: 8px 15px; font-size: 13.5px; font-weight: 600; color: var(--lichen);
cursor: pointer; transition: all .15s ease;
}
.filter:hover { border-color: var(--navy); color: var(--navy); }
.filter.is-on, .filter[aria-pressed="true"] { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; align-items: start; }
.gcard { background: #fff; border: 1px solid var(--ash); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-1); }
.gcard__info { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--lichen); }
.faq-split { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(26px,4vw,48px); align-items: start; }
.faq-split__main { min-width: 0; }
@media (max-width: 900px) { .faq-split { grid-template-columns: 1fr; } }
/* ---- 10. 404 ----------------------------------------------------------- */
.err { min-height: 66vh; display: grid; place-items: center; background: var(--navy-deep); color: #fff; padding: 60px 20px; }
.err__inner { max-width: 620px; text-align: center; }
.err__brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.err__brand img { height: 56px; width: auto; }
.err h1 { color: #fff; margin-bottom: 12px; }
.err__lead { color: #c9d9ee; font-size: 17px; line-height: 1.6; margin-bottom: 26px; }
.err__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.err__links { display: flex; gap: 10px 20px; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; }
.err__links a { color: #c9d9ee; font-size: 14.5px; }
.err__links a:hover { color: #fff; }
.err__links-h { color: #8fa9cc; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
/* ---- 11. Header variants, drawer brand, misc -------------------------- */
.header--topbar .header__bar { justify-content: space-between; }
.btn--header { min-height: 44px; padding: 11px 18px; font-size: 14.5px; }
.brand__logo--chip { background: #fff; padding: 8px 12px; border-radius: 10px; box-sizing: content-box; }
.drawer__brand { display: inline-flex; align-items: center; gap: 10px; }
.on-light { background: #fff; color: var(--ink); }
.about-owner { border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; }
.about-reviews-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--crimson); }
.nextsteps__main { display: grid; gap: 16px; }
.consulates .cons__grid { gap: 14px; }
.svc__media, .svc__photo { display: block; }
/* ---- 12. Footer map, every page --------------------------------------- */
.footmap { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.14); }
.footmap__head h4 { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 6px; }
.footmap__head p { color: #a8bcd8; font-size: 14.5px; margin: 0 0 20px; }
.footmap__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.footmap__card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); overflow: hidden; }
.footmap__frame { display: block; width: 100%; height: 175px; border: 0; filter: saturate(.92); }
.footmap__body { padding: 15px 16px; display: grid; gap: 5px; }
.footmap__body b { color: #fff; font-family: var(--sans-display); font-weight: 800; font-size: 15.5px; letter-spacing: -0.02em; }
.footmap__body span { color: #a8bcd8; font-size: 13.5px; line-height: 1.5; }
.footmap__hrs { color: #8fa9cc !important; font-size: 12.5px !important; }
.footmap__dir { margin-top: 6px; color: var(--gold); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.footmap__dir:hover { color: #fff; }
@media (max-width: 640px) { .footmap__frame { height: 155px; } .footmap { padding-bottom: 28px; margin-bottom: 28px; } }
/* ---- 13. Social links carry words. A bare pin icon in the top bar and the
footer read as a stray glyph rather than a link. ----------------------- */
.header__social { display: flex; align-items: center; gap: 16px; }
.header__social a { display: inline-flex; align-items: center; gap: 7px; color: #c9d9ee; font-size: 12px; font-weight: 600; text-decoration: none; }
.header__social a:hover { color: #fff; }
.header__social svg { width: 14px; height: 14px; flex: 0 0 14px; }
.header__rating span { letter-spacing: .02em; white-space: nowrap; }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.footer__social a { display: inline-flex; align-items: center; gap: 7px; color: #a8bcd8; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.footer__social a:hover { color: #fff; }
.footer__social svg { width: 16px; height: 16px; flex: 0 0 16px; }
@media (max-width: 620px) { .header__rating span { display: none; } }
/* ---- 14. Service-page price table. It was wider than the viewport and made
the whole PAGE scroll sideways on mobile, which is a hard fail. ---------- */
.pricetable { border: 1px solid var(--ash); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-1); }
.pricetable table { width: 100%; border-collapse: collapse; }
.pricetable th {
text-align: left; background: var(--surface); color: var(--navy-deep);
font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 12px 16px; border-bottom: 1px solid var(--ash);
}
.pricetable td { padding: 14px 16px; border-bottom: 1px solid var(--ash); font-size: 15px; vertical-align: top; }
.pricetable tr:last-child td { border-bottom: 0; }
.pricetable td b { display: block; font-weight: 700; color: var(--navy-deep); }
.pricetable td .sub { display: block; font-size: 13px; color: var(--sage); margin-top: 2px; }
.pricetable .range { font-weight: 800; color: var(--navy-deep); white-space: nowrap; }
.pricetable .life { color: var(--lichen); font-size: 14px; }
@media (max-width: 760px) {
.pricetable table { table-layout: fixed; }
.pricetable th, .pricetable td { padding: 11px 9px; font-size: 13.5px; overflow-wrap: anywhere; }
.pricetable th { font-size: 10.5px; letter-spacing: .04em; }
.pricetable th:nth-child(1), .pricetable td:nth-child(1) { width: 46%; }
.pricetable th:nth-child(2), .pricetable td:nth-child(2) { width: 26%; }
.pricetable th:nth-child(3), .pricetable td:nth-child(3) { width: 28%; }
.pricetable td .sub { font-size: 12px; }
}
/* ---- 15. Internal-link band. `.ilinks` is injected at body level with no
.container inside it, so its cards started hard against the left edge of
the viewport while every other section sat in the 1200px measure. -------- */
.ilinks {
max-width: var(--page); margin-inline: auto;
padding-inline: 24px; padding-block: 44px;
border-top: 1px solid var(--ash);
}
.ilinks__head {
font-family: var(--sans); font-weight: 700; font-size: 11px;
letter-spacing: .1em; text-transform: uppercase; color: var(--sage);
margin-bottom: 16px;
}
.ilinks__grid { gap: 12px; }
.ilink {
display: flex; align-items: center; gap: 12px; text-decoration: none;
background: #fff; border: 1px solid var(--ash); border-radius: 12px;
padding: 14px 16px; box-shadow: var(--shadow-1);
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ilink:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ilink__k {
flex: 0 0 auto; font-family: var(--sans); font-weight: 700; font-size: 10.5px;
letter-spacing: .07em; text-transform: uppercase; color: var(--crimson);
background: rgba(192,33,47,.08); border-radius: 999px; padding: 4px 9px;
}
.ilink__l { flex: 1 1 auto; font-size: 14.5px; font-weight: 600; color: var(--navy-deep); line-height: 1.35; }
.ilink__go { flex: 0 0 18px; color: var(--sage); display: grid; place-items: center; }
.ilink__go svg { width: 16px; height: 16px; transform: rotate(-90deg); }
@media (max-width: 620px) { .ilinks { padding-inline: 16px; } }