/* The first screen, "Written in ink": the name written in gold, then gilded and caught by the lamp.
   Scoped to .ink-hero so it cannot clash with the rest of the site. */

.ink-hero {
  --night: #030b20;
  --gold-hi: #f6e2a8;
  --on-night: #eef1f7;
  --on-night-soft: #c3cbdd;
  --rule-gold: rgb(226 182 90 / .3);
  --hh: 82px;
  --peek: 118px;
  position: relative; isolation: isolate; overflow: clip; container-type: inline-size;
  min-height: max(600px, calc(100svh - var(--hh) - var(--peek)));
  display: grid; align-content: center;
  padding: clamp(36px, 4.8vh, 96px) 0 clamp(32px, 4.2vh, 72px);
  background: var(--night); color: var(--on-night); text-align: center;
  --fs: min(196px, 21.8svh, calc((100cqi - 2 * var(--m)) / 5.86));
  --ny: 30%;
}
.ink-hero > .wrap { position: relative; z-index: 2; }

/* lamplight, grain and vignette */
.ink-hero .bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ink-hero .bg-base { background: radial-gradient(64% 58% at 50% var(--ny), #0d265b 0%, #091d4a 22%, #06143a 44%, #040c25 66%, #020613 86%, #010205 100%); }
.ink-hero .bg-lamp {
  background:
    radial-gradient(34% 24% at calc(50% + var(--lx, 0px)) calc(var(--ny) + var(--ly, 0px)), rgb(255 200 120 / .14) 0%, rgb(230 160 70 / .05) 52%, transparent 100%),
    radial-gradient(60% 34% at 50% 0%, rgb(170 190 235 / .045) 0%, transparent 100%);
  mix-blend-mode: screen;
}
.ink-hero .bg-grain {
  opacity: .085; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ink-hero .bg-vignette { background: radial-gradient(115% 92% at 50% 34%, transparent 42%, rgb(1 2 6 / .82) 100%); }

/* the name, with calligrapher's guide lines running through it */
.ink-hero .name { position: relative; font-size: var(--fs); }
.ink-hero .guide {
  position: absolute; left: 50%; width: 100vw; margin-left: -50vw; height: 1px; pointer-events: none; transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent 2%, rgb(226 182 90 / .13) 22%, rgb(226 182 90 / .13) 78%, transparent 98%);
}
.ink-hero .g-cap { top: calc(.872em - .694em); }
.ink-hero .g-x { top: calc(.872em - .424em); }
.ink-hero .g-base { top: .872em; background: linear-gradient(90deg, transparent 2%, rgb(226 182 90 / .3) 24%, rgb(226 182 90 / .3) 76%, transparent 98%); }
.ink-hero .ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
html:not(.gilt) .ink-hero .ink .gilt { display: none; }
.ink-hero .ink .strokes path { fill: none; stroke: #f6dc9c; stroke-linejoin: round; stroke-linecap: round; }
.ink-hero .ink .dot path { fill: #e0b450; stroke: none; }
.ink-hero .ink .dot, .ink-hero .ink .nib { opacity: 0; }
html:not(.intro) .ink-hero .ink .strokes, html:not(.intro) .ink-hero .ink .dot, html:not(.intro) .ink-hero .ink .nib { display: none; }

/* double rule under the name, as under a total in a ledger */
.ink-hero .total { display: block; padding: 0; width: min(100%, calc(var(--fs) * 5.75)); margin: clamp(14px, 2vh, 24px) auto 0; height: 5px; border-block: 1px solid rgb(226 182 90 / .72); }
.ink-hero .cred { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 24px; margin-top: clamp(16px, 2.2vh, 24px);
  font: 400 16px/1.3 var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-lt); }
.ink-hero .cred span { margin-right: -.26em; }
.ink-hero .cred span + span::before { content: none; }
.ink-hero .cred .sep { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
.ink-hero .lede { max-width: 52ch; margin: clamp(16px, 2.4vh, 28px) auto 0; font-size: clamp(18px, 1rem + .3vw, 21px); line-height: 1.6; color: var(--on-night-soft); text-wrap: balance; }
.ink-hero .keys { justify-content: center; margin-top: clamp(14px, 2vh, 22px); }
.ink-hero .keys a { color: var(--on-night); font-size: 16px; }
.ink-hero .acts { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 32px; margin-top: clamp(20px, 3vh, 34px); }
.ink-hero .acts .btn { min-height: 54px; padding: 0 32px; font-size: 17px; }
.ink-hero .more-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--on-night); font-size: 17px; text-decoration: none; border-bottom: 1px solid rgb(226 182 90 / .5); padding-top: 2px; }
.ink-hero .more-link svg { width: 18px; height: 10px; transition: transform .3s var(--arrive); }
@media (hover: hover) and (pointer: fine) { .ink-hero .more-link:hover { color: var(--gold-lt); } .ink-hero .more-link:hover svg { transform: translateX(4px); } }

/* the principal's credentials, entered like a ledger and double-ruled underneath */
.ink-hero .ledger { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, var(--lw)); margin: clamp(24px, 3.6vh, 56px) auto 0; }
.ink-hero .ledger::before, .ink-hero .ledger::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.ink-hero .ledger::before { top: 0; border-top: 1px solid var(--rule-gold); }
.ink-hero .ledger::after { bottom: 0; height: 5px; border-block: 1px solid rgb(226 182 90 / .5); }
.ink-hero .ledger > div { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 22px 22px; border-left: 1px solid rgb(226 182 90 / .18); }
.ink-hero .ledger > div:first-child { border-left: 0; }
.ink-hero .ledger dt { margin: 0; }
.ink-hero .ledger b { display: block; font: 400 clamp(34px, 2.9vw, 44px)/1 var(--display); color: var(--gold-lt); letter-spacing: .01em; }
.ink-hero .ledger dd { margin: 0; max-width: 31ch; font-size: 16px; line-height: 1.5; color: var(--on-night-soft); text-wrap: balance; }

/* short laptop screens */
@media (min-width: 1021px) and (max-height: 820px) {
  .ink-hero .ledger { width: min(100%, max(var(--lw), 1060px)); margin-top: clamp(20px, 3.2vh, 36px); }
  .ink-hero .ledger > div { gap: 7px; padding: 14px 18px 18px; }
  .ink-hero .ledger b { font-size: 34px; }
  .ink-hero .ledger dd { max-width: 36ch; }
}
@media (max-width: 1020px) {
  .ink-hero { --hh: 64px; }
  .ink-hero .ledger { grid-template-columns: auto 1fr; width: min(100%, 560px); text-align: left; }
  .ink-hero .ledger > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; column-gap: 0; padding: 0; border-left: 0; border-top: 1px solid rgb(226 182 90 / .16); }
  .ink-hero .ledger dt { justify-self: end; padding: 16px 20px 18px 6px; }
  .ink-hero .ledger dd { align-self: stretch; padding: 18px 6px 18px 20px; border-left: 1px solid rgb(226 182 90 / .3); max-width: none; text-wrap: pretty; }
  .ink-hero .ledger > div:first-child { border-top: 0; }
}
@media (max-width: 640px) {
  .ink-hero { --peek: 0px; min-height: 0; padding: 56px 0 44px; }
  .ink-hero .bg-base { background: radial-gradient(120% 52% at 50% var(--ny), #0d265b 0%, #091d4a 24%, #06143a 46%, #040c25 70%, #020613 100%); }
  .ink-hero .bg-lamp { background: radial-gradient(70% 18% at 50% var(--ny), rgb(255 200 120 / .14) 0%, rgb(230 160 70 / .05) 55%, transparent 100%); }
  .ink-hero .bg-vignette { background: radial-gradient(150% 80% at 50% 30%, transparent 46%, rgb(1 2 6 / .78) 100%); }
  .ink-hero .total { margin-top: 18px; }
  .ink-hero .cred { flex-direction: column; gap: 8px; margin-top: 20px; letter-spacing: .2em; }
  .ink-hero .cred span { margin-right: -.2em; }
  .ink-hero .cred .sep { display: none; }
  .ink-hero .lede { font-size: 18px; max-width: 30ch; margin-top: 22px; }
  .ink-hero .acts { flex-direction: column; gap: 8px; margin-top: 26px; }
  .ink-hero .acts .btn { width: min(100%, 340px); }
  .ink-hero .ledger { margin-top: 40px; }
  .ink-hero .ledger dt { padding: 14px 16px 16px 2px; }
  .ink-hero .ledger dd { padding: 16px 2px 16px 16px; line-height: 1.45; }
  .ink-hero .ledger b { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .ink-hero *, .ink-hero *::before, .ink-hero *::after { transition: none !important; animation: none !important; }
}

/* ---------- the rest of the site, brought in line with the first screen ---------- */

/* gilded buttons everywhere */
.btn, .navy .btn {
  background: #e2b65a linear-gradient(180deg, #eccb7b 0%, #e2b65a 48%, #d6a443 100%); color: var(--navy);
  box-shadow: inset 0 1px 0 rgb(255 247 222 / .55), inset 0 -1px 0 rgb(120 80 10 / .25);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.06); background: linear-gradient(180deg, #eccb7b 0%, #e2b65a 48%, #d6a443 100%);
    box-shadow: inset 0 1px 0 rgb(255 247 222 / .6), inset 0 -1px 0 rgb(120 80 10 / .25), 0 12px 30px -12px rgb(226 182 90 / .6); }
}

/* the key-services strip under the first screen: deep night, gold top edge */
.facts-band { background: #030b20; border-top: 0; position: relative; }
.facts-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-lt) 50%, var(--gold) 80%, transparent); opacity: .85; }

/* ---------- inner page headings: the same lit navy and gold as the first screen ---------- */
.page-head { position: relative; isolation: isolate; overflow: hidden; border-bottom: 0;
  background: radial-gradient(70% 120% at 22% 0%, #0d265b 0%, #081a45 38%, #04102c 72%, #020818 100%); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(36% 70% at 18% 30%, rgb(255 200 120 / .10) 0%, transparent 100%); }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  border-top: 1px solid rgb(226 182 90 / .75); border-bottom: 1px solid rgb(226 182 90 / .45); }
.page-head h1 { background: linear-gradient(180deg, #f5dc9a 0%, #e2b65a 52%, #c4933a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
@media (forced-colors: active) { .page-head h1 { color: CanvasText; background: none; } }


/* the grain is an inline SVG pattern, so the browser does not mistake the texture for the page's main content */
.ink-hero .bg-grain { background-image: none; }
.ink-hero .bg-grain svg { display: block; width: 100%; height: 100%; }
/* phones: the monogram's box is sized by its width, so the space is held before the picture arrives */
@media (max-width: 860px) {
  .logo-panel { aspect-ratio: auto; padding: 28px; }
  .logo-panel img { width: min(220px, 60%); height: auto; max-height: none; }
}

/* ================= his white-and-gold logo, round 10 ================= */

/* a navy header that runs straight into the first screen */
.top { background: #040d27; color: var(--on-navy); border-bottom: 1px solid rgb(226 182 90 / .26); box-shadow: 0 10px 30px -22px rgb(0 0 0 / .8); }
.top .wrap { min-height: 82px; }
.brand { transition: opacity .35s ease, visibility 0s; }
.brand img { height: 52px; width: auto; }
.top nav a { color: var(--on-navy); }
@media (hover: hover) and (pointer: fine) { .top nav a:hover { color: var(--gold-lt); } }
.menu { color: var(--on-navy); }
@media (max-width: 980px) {
  .top .wrap { min-height: 66px; }
  .brand img { height: 40px; }
  .top nav { inset: 66px 0 0; background: #040d27; color: var(--on-navy); }
  .top nav a { border-bottom-color: rgb(226 182 90 / .2); }
  .top nav .nav-only { color: var(--gold-lt); }
}
/* on the home page the small logo waits until the big one has gone up under the header */
html.name-in-view .top .brand { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }

/* the first screen: his logo is the name */
.ink-hero {
  --lw: min(1080px, calc(100cqi - 2 * var(--m)), calc(31svh * 4.0177));
  --lh: calc(var(--lw) / 4.0177);
}
.ink-hero .name { font-size: 16px; }
.ink-hero .g-cap { top: calc(var(--lh) * .3379); }
.ink-hero .g-x { top: calc(var(--lh) * .4047); }
.ink-hero .g-base { top: calc(var(--lh) * .6837); }
.ink-hero #firm { position: relative; z-index: 1; width: var(--lw); margin: 0 auto; line-height: 0;
  filter: drop-shadow(0 0 40px rgb(226 182 90 / .14)); }
.ink-hero #firm img { display: block; width: 100%; height: auto; }
.ink-hero .name > .logo-ink { position: absolute; z-index: 2; top: 0; left: 50%; width: var(--lw); height: auto; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.intro .ink-hero #firm .logo-art {
  -webkit-mask-image: linear-gradient(90deg, #000 var(--wa, -200px), transparent var(--wb, -40px));
          mask-image: linear-gradient(90deg, #000 var(--wa, -200px), transparent var(--wb, -40px));
}
.intro .ink-hero .name > .logo-ink { opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 var(--pa, -200px), transparent var(--pb, -40px));
          mask-image: linear-gradient(90deg, #000 var(--pa, -200px), transparent var(--pb, -40px));
}
.ink-hero .lede { margin-top: clamp(22px, 3.2vh, 38px); }
@media (max-width: 640px) {
  .ink-hero .lede { margin-top: 26px; }
}

/* the principal's SV star mark, on navy */
.logo-panel { background: radial-gradient(80% 70% at 40% 30%, #0d265b 0%, #081a45 55%, #050f2c 100%); border: 1px solid rgb(226 182 90 / .45); }
.logo-panel img { width: 100%; max-width: 100%; height: auto; }

/* the footer: his logo straight on navy */
.foot .logo { background: none; padding: 0; display: block; }
.foot .logo img { width: min(100%, 300px); height: auto; }

/* his original navy-and-gold logo stays on the white paper of the quotation and the carried quote */
.lh img { height: 54px; width: auto; }
.carry .lh img { height: 44px; }
.pr-side, .logo-panel { min-width: 0; }
.logo-panel { aspect-ratio: 1 / 1; padding: 15%; }
@media (max-width: 860px) {
  .principal .wrap { grid-template-columns: minmax(0, 1fr); }
  .logo-panel { aspect-ratio: auto; padding: 28px; }
  .logo-panel img { width: min(200px, 56%); }
}
@media (prefers-reduced-motion: reduce) { .brand, html.name-in-view .top .brand { transition: none; } }

/* ================= round 11: fixes from the independent review ================= */

/* the words under the logo are hidden from the first paint during the opening, so they do not show and then vanish */
html.intro .ink-hero :is(.lede, .keys, .acts, .ledger > div, .guide),
html.intro .ink-hero .ledger::before, html.intro .ink-hero .ledger::after { opacity: 0; }
html.intro .ink-hero :is(.lede, .keys, .acts, .ledger > div) { transform: translateY(16px); }
.ink-hero .ink .dot circle { fill: #e0b450; }

/* short laptop screens: a smaller logo and tighter spacing, so the next section peeks in */
@media (min-width: 1021px) and (max-height: 820px) {
  .ink-hero { --lw: min(1080px, calc(100cqi - 2 * var(--m)), calc(26svh * 4.0177)); min-height: calc(100svh - var(--hh) - var(--peek)); padding: 24px 0 20px; }
  .ink-hero .lede { margin-top: 16px; }
  .ink-hero .ledger { margin-top: 16px; }
}

/* section links land right under the header */
html { scroll-padding-top: 82px; }
@media (max-width: 980px) { html { scroll-padding-top: 66px; } }

/* phones: his logo heads the paper on the left, with "Fee estimate" and the date under it */
@media (max-width: 560px) {
  .lh { flex-direction: column; align-items: flex-start; }
  .lh .doc { text-align: start; }
}
.carry[hidden] { display: none; }

/* keyboard focus that shows on gold buttons on navy, and on the selected tab */
.top .btn:focus-visible, .ink-hero .btn:focus-visible, .navy .btn:focus-visible { outline-color: var(--gold-lt); }
.tabs button:focus-visible { outline-color: var(--navy); }

/* narrow phones: the estimate's total line wraps instead of pushing the card wider than the screen */
.total { flex-wrap: wrap; }

/* form fields with edges you can see, and a clear mark on what is missing */
form.f :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) { border: 1px solid #7a869c; }
form.f [aria-invalid="true"]:not([type="checkbox"]) { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
form.f input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #b3261e; outline-offset: 2px; }
form.f .status:empty { display: none; }
form.f .status { margin: 0; font-weight: 700; color: #8a1c14; }
form.f .status.ok { color: #1f6b3a; }

/* the fee schedule's closing terms read as a heading of their own */
.fee-sec.prose h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.1; }

/* Windows contrast themes: keep his logo on its own ground, and keep the selected tab visible */
@media (forced-colors: active) {
  .top .brand img, .ink-hero #firm img, .foot .logo img, .logo-panel img { forced-color-adjust: none; background: #040d27; }
  .lh img { forced-color-adjust: none; background: #fff; }
  .tabs button[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ================= round 12: contact details ================= */
.contact-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.contact-facts > div { min-width: 0; }
.contact-facts dd { margin-bottom: 0; overflow-wrap: anywhere; }
.contact-facts dd a { text-underline-offset: .2em; }
.contact-facts address { font-style: normal; font-family: var(--text); font-size: var(--step-body); line-height: 1.5; }
.contact-facts .map-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--text); font-size: var(--step-small); }
.contact-facts > div:last-child { grid-column: 1 / -1; }
.wa-qr { display: flex; align-items: center; gap: 18px; margin: 22px 0 0; padding: 14px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); width: fit-content; max-width: 100%; }
.wa-qr img { width: 120px; height: 120px; flex: none; }
.wa-qr figcaption { max-width: 24ch; font-size: var(--step-small); line-height: 1.45; color: var(--ink-soft); }
/* phones open WhatsApp with a tap, so the code is only for computers */
@media (hover: none) and (pointer: coarse), (max-width: 760px) { .wa-qr { display: none; } }
@media (max-width: 420px) { .contact-facts { grid-template-columns: minmax(0, 1fr); } }

.foot-contact { margin-top: 14px; font-style: normal; font-size: var(--step-small); line-height: 1.7; color: var(--on-navy-soft); }
.foot-contact a { display: inline-flex; align-items: center; min-height: 32px; color: var(--on-navy); }
@media (max-width: 980px) { .foot-contact a { min-height: 44px; } }

/* round 13: areas served */
.foot-areas { margin-top: 12px; }
.foot-areas [lang="ms"] { color: rgb(195 203 219 / .8); }
.contact-facts dd.areas { font-family: var(--text); font-size: var(--step-body); line-height: 1.5; }