/* ---------------------------------------------------------------------------
 * nas-cpa.com — the design contract as stylesheet.
 *
 * Every value here comes from design-contract.md and is used verbatim. This
 * file replaces the Tailwind build: the contract's vocabulary is small (a
 * hairline grid, two buttons, one dark panel) and its values are exact, so
 * hand-authored CSS is both shorter and honest about what it is. It also
 * keeps the site's own rule — nothing is built at deploy time.
 *
 * Written mobile-last: the desktop layout is the base and the three
 * breakpoints (1100 / 900 / 620) narrow it, matching the contract §6.
 *
 * Do not add: a second typeface, shadows, border-radius, gradients, icon
 * sets or transitions beyond a colour change. See design-contract.md §8.
 * ------------------------------------------------------------------------ */

:root {
	--paper: #F7F5F0;
	--band: #EFEAE0;
	--ink: #10222F;
	--soft: #5A6672;
	--rule: rgba(16, 34, 47, 0.14);
	--brass: #9A7B46;

	/* On a dark ground the contract's own literals apply: brass lifts,
	   because 0.5-lightness brass on navy is unreadable. */
	--brass-on-dark: #B79A6C;
	--on-dark: #F7F5F0;
	--on-dark-2: rgba(247, 245, 240, 0.72);
	--on-dark-3: rgba(247, 245, 240, 0.62);
	--on-dark-legal: rgba(247, 245, 240, 0.5);
	--rule-on-dark: rgba(247, 245, 240, 0.16);
	--rule-on-dark-strong: rgba(247, 245, 240, 0.30);
	--utility-text: #D9D3C6;
	--panel: #FBFAF7;
}

/* --- reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	background: var(--paper);
	color: var(--ink);
	font-family: Rubik, Arial, sans-serif;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--brass); }
button, input, select, textarea { font-family: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: #E4DED0; }

h1, h2, h3, h4 { font-weight: 500; margin: 0; color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; }

/* Focus is always visible. The contract only overrides it on inputs. */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.visually-hidden {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Clipped rather than pushed off-canvas: in RTL an inset-inline-start of
 * -9999px puts a box past the right edge and can create horizontal scroll. */
.skip-link {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; z-index: 100;
}
.skip-link:focus {
	width: auto; height: auto; margin: 0; overflow: visible;
	clip-path: none;
	inset-inline-start: 12px; top: 12px;
	background: var(--ink); color: var(--on-dark);
	padding: 10px 18px; font-size: 15px;
}

/* --- layout ------------------------------------------------------------ */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* Vertical only, as longhand. A `padding: 88px 0` shorthand here would reset
 * the horizontal padding that .wrap sets, and every `class="wrap section"`
 * would lose its gutters — invisible at wide viewports, text flush against
 * the screen edge on a phone. */
.section { padding-top: 88px; padding-bottom: 88px; }
.section--secondary { padding-top: 72px; padding-bottom: 72px; }
.section--head { padding-top: 56px; padding-bottom: 56px; }
.section--band { background: var(--band); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--ruled { border-top: 1px solid var(--rule); }

.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); }

/* Two-column editorial split: heading left, prose right. */
.split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; }

/* Detail page with sticky sidebar. */
.detail { display: grid; grid-template-columns: 1.55fr 0.75fr; gap: 80px; align-items: start; }
.detail__aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 28px; }

/* T5 — sticky quick-nav beside grouped questions. */
.faq-layout { display: grid; grid-template-columns: 270px 1fr; gap: 72px; align-items: start; }
.faq-nav { position: sticky; top: 110px; }
.faq-group { scroll-margin-top: 120px; }

/* T6 — office details beside the form panel. */
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; }
.contact-entry { border-bottom: 1px solid var(--rule); padding: 22px 0; }

/* T4 — the team strip. */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }

/* --- type -------------------------------------------------------------- */

.eyebrow {
	font-size: 13px; font-weight: 300; letter-spacing: 0.14em;
	color: var(--brass); margin: 0 0 18px;
}
.section--dark .eyebrow { color: var(--brass-on-dark); }

.h1 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.12; letter-spacing: -0.025em; }
.h1--home { font-size: clamp(38px, 4.6vw, 62px); }
.h2 { font-size: 34px; line-height: 1.25; letter-spacing: -0.02em; }
.h2--prose { font-size: 27px; line-height: 1.32; }
.h3 { font-size: 20px; line-height: 1.4; }

.lead { font-size: 19px; line-height: 1.75; color: var(--soft); max-width: 70ch; }
.section--dark .lead { color: var(--on-dark-2); }

.prose { max-width: 80ch; }
.prose p { margin: 0 0 22px; color: var(--soft); }
.prose h2 { font-size: 27px; line-height: 1.32; margin: 44px 0 18px; }
.prose h3 { font-size: 20px; line-height: 1.4; margin: 32px 0 14px; }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--brass); border-bottom: 1px solid var(--brass); }

/* Markdown blocks map onto the contract's block vocabulary (§3): UL takes the
 * brass inline-start rules, OL stays decimal, tables are hairline-ruled, and
 * a blockquote reads as the NOTE callout. */
.prose ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 12px; }
.prose ul li {
	font-size: 16px; line-height: 1.75; color: var(--soft);
	padding-inline-start: 16px; border-inline-start: 1px solid var(--brass);
}
.prose ol { padding-inline-start: 22px; margin: 0 0 22px; display: flex; flex-direction: column; gap: 12px; }
.prose ol li { font-size: 16px; line-height: 1.75; color: var(--soft); }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 0 0 22px; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 15px 16px; text-align: start; vertical-align: top; line-height: 1.7; }
.prose th { background: var(--band); font-weight: 500; color: var(--ink); }
.prose td { color: var(--soft); }
.prose blockquote {
	margin: 0 0 22px; padding: 22px 24px;
	border: 1px solid var(--rule); background: var(--band);
	color: var(--ink); font-size: 16px; line-height: 1.75;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose code {
	font-family: ui-monospace, Menlo, monospace; font-size: 0.92em;
	background: var(--band); padding: 2px 5px;
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }

.measure-tight { max-width: 24ch; }

.mono {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 12px; color: var(--brass);
}
.section--dark .mono { color: var(--brass-on-dark); }

.muted { color: var(--soft); }
.small { font-size: 15px; line-height: 1.7; }
.legal { font-size: 13px; line-height: 1.8; }

/* Latin runs inside Hebrew prose stay left-to-right without breaking. */
.ltr { direction: ltr; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; }

/* --- hairline grid (the signature pattern) ------------------------------
 * The gap IS the rule line. Never widen it responsively. */

.hgrid {
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}
.hgrid--3 { grid-template-columns: repeat(3, 1fr); }
.hgrid--4 { grid-template-columns: repeat(4, 1fr); }
.hgrid--2 { grid-template-columns: repeat(2, 1fr); }

.hgrid > * { background: var(--paper); padding: 30px; }
.section--band .hgrid > * { background: var(--band); }
.hgrid > a:hover, .hgrid > .hgrid__cell--link:hover { background: var(--band); }
.section--band .hgrid > a:hover { background: var(--paper); }

.hgrid--dense > * { padding: 20px 22px; }
.hgrid--roomy > * { padding: 40px; }

.section--dark .hgrid { background: var(--rule-on-dark-strong); border-color: var(--rule-on-dark-strong); }
.section--dark .hgrid > * { background: var(--ink); }

/* --- buttons ----------------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 16px 28px;
	font-size: 16px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--on-dark);
	cursor: pointer;
}
.btn:hover { background: var(--brass); border-color: var(--brass); color: var(--on-dark); }

.btn--secondary { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn--secondary:hover { background: var(--band); border-color: var(--ink); color: var(--ink); }

.btn--compact { padding: 10px 18px; font-size: 14px; }

/* Inside a dark panel the buttons invert. */
.section--dark .btn, .footer .btn {
	background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.section--dark .btn:hover, .footer .btn:hover {
	background: var(--brass-on-dark); border-color: var(--brass-on-dark); color: var(--ink);
}

/* --- components -------------------------------------------------------- */

.quote {
	padding-inline-start: 20px;
	border-inline-start: 2px solid var(--brass);
	font-size: 19px; line-height: 1.7; color: var(--ink);
	margin: 0;
}

.note {
	padding: 22px 24px;
	border: 1px solid var(--rule);
	background: var(--band);
	color: var(--ink);
	font-size: 16px; line-height: 1.75;
}

.stat__figure { font-size: 42px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.stat__label { font-size: 16px; margin-top: 10px; }
.stat__note { font-size: 14px; color: var(--soft); margin-top: 6px; }

/* Numbered list rows: mono brass index, then title, then prose. */
.rows { border-top: 1px solid var(--rule); }
.row {
	display: grid; grid-template-columns: 80px 0.9fr 1.6fr; gap: 32px;
	padding: 32px 0; border-bottom: 1px solid var(--rule);
	align-items: start;
}

/* T2 index rows. The services index adds an action column; the articles
 * index trades it for a date/read-time column and makes the whole row a link. */
.row--index { grid-template-columns: 80px 0.9fr 1.6fr 150px; padding: 40px 0; border-top: 0; }
.row--article { grid-template-columns: 210px 1fr 170px; gap: 40px; padding: 38px 0; border-top: 0; }
.row--article:hover { background: var(--band); color: var(--ink); }

.deflist { border-top: 1px solid var(--rule); }
.deflist__item {
	display: grid; grid-template-columns: 0.5fr 1fr; gap: 24px;
	padding: 16px 0; border-bottom: 1px solid var(--rule);
	font-size: 15px;
}
.deflist__term { color: var(--soft); }

.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th, .table td { border: 1px solid var(--rule); padding: 15px; text-align: start; }
.table th { background: var(--band); font-weight: 500; }
.table td { color: var(--soft); }

/* Sidebar lists: brass rules mean "what's included", --rule means neutral. */
.sidelist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sidelist li {
	padding-inline-start: 14px;
	border-inline-start: 1px solid var(--brass);
	font-size: 15px; line-height: 1.6;
}
.sidelist--neutral li { border-inline-start-color: var(--rule); color: var(--soft); }

.panel { border: 1px solid var(--rule); padding: 28px; }
.panel--dark { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.panel--dark .panel__title { color: var(--on-dark); }
.panel__title {
	font-size: 13px; letter-spacing: 0.12em; font-weight: 400;
	color: var(--brass); margin: 0 0 18px;
}
.panel--dark .panel__title { color: var(--brass-on-dark); }

.breadcrumb { font-size: 14px; color: var(--soft); margin-bottom: 28px; }
.breadcrumb a { color: var(--soft); }
.breadcrumb a:hover { color: var(--brass); }
.breadcrumb span { padding: 0 8px; opacity: 0.5; }

/* No illustration is ever drawn — a framed, captioned placeholder instead. */
.placeholder {
	border: 1px solid var(--rule);
	background-image: repeating-linear-gradient(135deg, rgba(16, 34, 47, 0.05) 0 8px, transparent 8px 16px);
	display: grid; place-items: center;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 11px; letter-spacing: 0.1em; color: var(--soft);
	text-align: center; padding: 20px;
}
.placeholder--portrait { aspect-ratio: 3 / 4; }
.placeholder--wide { aspect-ratio: 16 / 9; }

/* --- forms ------------------------------------------------------------- */

.form-panel { border: 1px solid var(--rule); background: var(--panel); padding: 40px; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.field label { font-size: 14px; color: var(--soft); }
.field input, .field select, .field textarea {
	border: 1px solid var(--rule);
	background: var(--paper);
	padding: 14px 16px;
	font-size: 16px;
	font-family: inherit;
	font-weight: 300;
	color: var(--ink);
	border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none; border-color: var(--brass);
}
.field textarea { min-height: 160px; resize: vertical; }
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field__error { font-size: 14px; color: #8C2F2F; }

.form-status { padding: 16px 18px; border: 1px solid var(--rule); font-size: 15px; margin-bottom: 22px; }
.form-status--ok { border-color: var(--brass); }

/* --- utility bar, header ----------------------------------------------- */

.utilitybar { background: var(--ink); color: var(--utility-text); font-size: 13px; letter-spacing: 0.01em; }
.utilitybar__inner {
	display: flex; flex-wrap: wrap; gap: 20px;
	align-items: center; justify-content: space-between;
	padding-top: 9px; padding-bottom: 9px;
}
.utilitybar__tagline { opacity: 0.82; }
.utilitybar__links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.utilitybar a { color: var(--utility-text); }
.utilitybar a:hover { color: var(--on-dark); }
.utilitybar__phone { color: var(--on-dark); font-weight: 400; }
.utilitybar__hours { opacity: 0.6; }

.siteheader {
	position: sticky; top: 0; z-index: 40;
	background: rgba(247, 245, 240, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rule);
}
.siteheader__inner { display: flex; align-items: center; gap: 28px; padding-top: 16px; padding-bottom: 16px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
	width: 42px; height: 42px; flex: 0 0 42px;
	display: grid; place-items: center;
	background: var(--ink); color: var(--on-dark);
	font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.brand__sub { font-size: 12px; color: var(--soft); letter-spacing: 0.08em; }

.nav {
	display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
	margin-inline-start: auto; font-size: 15px;
}
.nav a {
	padding: 4px 0; white-space: nowrap;
	color: var(--soft); font-weight: 300;
	border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 400; border-bottom-color: var(--brass); }

.headeractions { display: flex; gap: 10px; align-items: center; }
.headeractions .portal {
	font-size: 14px; color: var(--soft);
	border: 1px solid var(--rule); padding: 9px 14px;
}
.headeractions .portal:hover { border-color: var(--ink); color: var(--ink); }

/* The mobile menu is the one piece of behaviour, so it stays minimal. */
.menu-toggle {
	display: none;
	background: none; border: 1px solid var(--rule);
	padding: 9px 14px; font-size: 14px; cursor: pointer;
}
.mobilemenu { display: none; border-top: 1px solid var(--rule); background: var(--paper); }
.mobilemenu.is-open { display: block; }
.mobilemenu ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.mobilemenu li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.mobilemenu__actions { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; }

/* --- CTA band + footer -------------------------------------------------- */

.ctaband { border-top: 1px solid var(--rule); background: var(--band); }
.ctaband__inner {
	padding: 88px 28px;
	display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center;
}
.ctaband h2 { font-size: 36px; line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 18px; }
.ctaband p { font-size: 18px; line-height: 1.8; color: var(--soft); max-width: 64ch; }
.ctaband__actions { display: flex; gap: 14px; align-items: center; justify-self: end; }

.footer { background: var(--ink); color: var(--utility-text); }
.footer__cols {
	padding: 72px 28px 40px;
	display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr 1fr; gap: 56px;
}
.footer__title {
	font-size: 13px; letter-spacing: 0.12em; font-weight: 400;
	color: var(--brass-on-dark); margin: 0 0 18px;
}
.footer__list { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.footer__list a, .footer__contact a { color: var(--on-dark-2); }
.footer__list a:hover, .footer__contact a:hover { color: var(--on-dark); }
.footer__about { font-size: 14px; line-height: 1.8; color: var(--on-dark-3); }
.footer__contact { display: flex; flex-direction: column; gap: 11px; font-size: 14px; color: var(--on-dark-2); line-height: 1.6; }
.footer__contact .strong { color: var(--on-dark); }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.footer__mark {
	width: 40px; height: 40px; display: grid; place-items: center;
	border: 1px solid var(--rule-on-dark-strong); color: var(--on-dark);
	font-size: 13px; font-weight: 500;
}
.footer__brandtext { display: flex; flex-direction: column; line-height: 1.3; color: var(--on-dark); }
.footer__brandname { font-size: 15px; font-weight: 500; }
.footer__brandsub { font-size: 12px; color: rgba(247, 245, 240, 0.6); letter-spacing: 0.08em; }

.footer__legal { padding: 0 28px 56px; }
.footer__disclaimer {
	margin: 0 0 28px; padding-top: 28px;
	border-top: 1px solid var(--rule-on-dark);
	font-size: 13px; line-height: 1.8; color: var(--on-dark-legal); max-width: 110ch;
}
.footer__bottom {
	display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between;
	font-size: 13px; color: var(--on-dark-legal);
}
.footer__bottom a { color: var(--on-dark-legal); }
.footer__bottom a:hover { color: var(--on-dark); }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }

/* --- responsive (contract §6) ------------------------------------------ */

@media (max-width: 1100px) {
	.hgrid--3, .hgrid--4, .why-grid, .hgrid--3-plain,
	.team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.split, .detail, .ctaband__inner, .field--pair,
	.footer__cols, .row, .row--index, .row--article, .deflist__item,
	.why-grid, .hgrid--3-plain, .faq-layout, .contact-layout { grid-template-columns: 1fr; }
	.faq-layout, .contact-layout { gap: 40px; }
	.faq-nav { position: static; }
	.row--index, .row--article { gap: 12px; }
	.why-grid { gap: 28px; }
	.split, .detail, .ctaband__inner { gap: 32px; }
	.footer__cols { gap: 40px; }
	.row { gap: 12px; padding: 26px 0; }
	.detail__aside { position: static; }
	.wrap, .ctaband__inner, .footer__cols, .footer__legal { padding-left: 18px; padding-right: 18px; }
	.h1, .h1--home { font-size: 34px; }
	.h2, .ctaband h2 { font-size: 26px; }
	.placeholder--portrait { aspect-ratio: 4 / 3; }
	.ctaband__actions { justify-self: start; }
	.table-scroll { overflow-x: auto; }
	.section { padding-top: 64px; padding-bottom: 64px; }
}

@media (max-width: 620px) {
	.hgrid--2, .hgrid--3, .hgrid--4, .why-grid, .hgrid--3-plain,
	.team-grid { grid-template-columns: 1fr; }
	.siteheader__inner { flex-wrap: wrap; gap: 14px; }
	.nav { display: none; }
	.menu-toggle { display: inline-block; }
	.utilitybar { display: none; }
	.ctaband__actions { flex-wrap: wrap; }
}