/* public-d.css - version D "Path and door" (30 Oct 2026): C as the base, A's parts grafted (plan.md section 1).
   Self-contained - it does not need public-a.css or public-c.css, so either can be deleted when D is chosen.
   Loaded after dhan-look.css and public-base.css. The same file in both sites. */


html { scroll-padding-top: 80px; }
body { background: var(--surface); font-size: var(--fs-body-public); line-height: 1.6; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; }
.wrap { max-width: calc(1180px + 2 * var(--edge)); margin: 0 auto; padding: 0 var(--edge); }
.icon { stroke-width: 1.8; }

/* ---------- 15.6.1 the top bar: opus's bar without the column ---------- */
.pbar { position: sticky; top: 0; z-index: 40; background: var(--look-top); border-bottom: 4px solid transparent; border-image: var(--look-bar) 1; color: var(--on-dark); }
.pbar-in { display: flex; align-items: center; gap: 18px; height: 64px; }
.pbar-logo { display: flex; align-items: center; flex: none; min-height: 44px; border-radius: var(--radius-sm); }   /* 30 Oct 2026: 44px to touch */
.pbar-logo img { display: block; height: 34px; width: auto; }
.look-smsf .pbar-logo img { border-radius: 3px; }
.pbar :focus-visible, .deep :focus-visible, .pfoot :focus-visible, .on-dark :focus-visible { outline: 2px solid var(--side-mark); outline-offset: 2px; }
.pnav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.pnav-item { position: relative; }
.pnav-link { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-sm);
    background: none; color: rgba(255, 255, 255, .86); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color var(--ease); }
.pnav-link:hover { background: var(--on-dark-hover); color: #fff; text-decoration: none; }
.pnav-link .icon { width: 16px; height: 16px; transition: transform var(--ease); }
.pnav-link[aria-expanded="true"] { background: var(--on-dark-hover); color: #fff; }
.pnav-link[aria-expanded="true"] .icon { transform: rotate(180deg); }
.pnav-link[aria-current="page"], .pnav-link.is-parent { color: #fff; }
.pnav-link[aria-current="page"]::after, .pnav-link.is-parent::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -16px; height: 3px;
    border-radius: 2px; background: var(--side-mark); }
.pdrop { position: absolute; top: calc(100% + 16px); left: 0; z-index: 50; width: 340px; padding: 8px; border-radius: var(--radius); background: var(--side-bg);
    box-shadow: var(--shadow-dark); }
.pdrop { display: none; }
/* open: by script (is-open), or without script on hover and keyboard focus; the parent link itself opens its overview page */
.pnav-item.is-open > .pdrop, html:not(.js) .pnav-item:hover > .pdrop, html:not(.js) .pnav-item:focus-within > .pdrop { display: block; }
.pdrop a { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--on-dark);
    text-decoration: none; }
.pdrop a:hover { background: var(--on-dark-hover); color: #fff; text-decoration: none; }
.pdrop a[aria-current="page"] { background: rgba(255, 255, 255, .1); box-shadow: inset 3px 0 0 var(--side-mark); }
.pdrop .icon { margin-top: 2px; color: var(--side-mark); }
.pdrop b { display: block; font-size: 15px; font-weight: 600; }
.pdrop small { display: block; color: rgba(255, 255, 255, .66); font-size: 13.5px; line-height: 1.4; }
.pbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pbar-phone { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--on-dark); font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbar-phone .icon { color: var(--side-mark); }
.pbar-phone:hover { background: var(--on-dark-hover); color: #fff; text-decoration: none; }
.pbar-signin { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius-sm);
    color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.pbar-signin .icon { width: 16px; height: 16px; color: var(--side-mark); }
.pbar-signin:hover { border-color: var(--side-mark); color: var(--side-mark); text-decoration: none; }
.btn-mark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-sm);
    background: var(--side-mark); color: var(--on-mark); font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: box-shadow var(--ease), background-color var(--ease); }
.btn-mark:hover { color: var(--on-mark); text-decoration: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.btn-mark.is-big, .btn-clear.is-big { min-height: 48px; padding: 0 20px; border-radius: var(--radius-md); font-size: 16px; }
.btn-clear { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-sm); background: transparent; color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.btn-clear:hover { border-color: var(--side-mark); color: var(--side-mark); text-decoration: none; }
.btn-clear .icon { color: var(--side-mark); }
.call-icon { display: none; }

/* 15.6.4 the phone Menu: opus's details Menu, no script */
.pmenu { display: none; }
.pmenu > summary { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-sm); color: #fff; font-weight: 600; cursor: pointer; list-style: none; }
.pmenu > summary::-webkit-details-marker { display: none; }
.pmenu > summary .i-close { display: none; }
.pmenu[open] > summary .i-menu { display: none; }
.pmenu[open] > summary .i-close { display: inline; }
.pmenu-panel { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: calc(100dvh - 60px); overflow-y: auto; padding: 12px 16px 20px;
    background: var(--side-bg); box-shadow: var(--shadow-dark); }
.pmenu-group { padding: 8px 0; border-bottom: 1px solid var(--on-dark-line); }
.pmenu-label { margin: 8px 12px 4px; color: rgba(255, 255, 255, .62); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pmenu-panel a.pm { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--on-dark);
    font-weight: 600; }
.pmenu-panel a.pm .icon { color: var(--side-mark); }
.pmenu-panel a.pm:hover { background: var(--on-dark-hover); text-decoration: none; }
.pmenu-panel a.pm[aria-current="page"] { background: rgba(255, 255, 255, .1); box-shadow: inset 3px 0 0 var(--side-mark); color: #fff; }
.pmenu-foot { display: grid; gap: 10px; padding-top: 16px; }
.pmenu-foot a { width: 100%; min-height: 48px; }

/* ---------- 15.3 the deep panel and its fine lines ---------- */
.deep { position: relative; overflow: hidden; background: var(--door-bg); color: #fff; }
.deep > .door-lines { z-index: 0; }
.deep > .wrap { position: relative; z-index: 1; }
.names { margin: 0 0 18px; color: var(--door-names); font-size: 12.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.place { color: rgba(255, 255, 255, .66); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- 15.7.1 hero, with the path chooser beside it ---------- */
.hero-in { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; padding-block: 88px 72px; }
.hero h1 { max-width: 16ch; font-family: var(--serif); font-size: var(--fs-display); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.hero-lead { max-width: 52ch; margin-top: 22px; color: var(--on-dark-muted); font-size: var(--fs-lead); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: rgba(255, 255, 255, .66); font-size: 13.5px; }
.hero-facts span { display: inline-flex; align-items: center; gap: 7px; }
.hero-facts .icon { width: 16px; height: 16px; color: var(--side-mark); }

/* the path chooser: opus's tiles in the list view, in one white card with the brand band */
.paths { position: relative; overflow: hidden; color: var(--text); background: var(--surface); border-radius: var(--radius); }
.paths::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--look-bar); }
.paths-head { padding: 22px 22px 12px; }
.paths-head h2 { font-size: var(--fs-h3-public); font-weight: 700; line-height: 1.3; }
.paths-head p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.paths .tiles { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.paths .tile { min-height: 76px; padding: 14px 18px 14px 22px !important; }
.paths .tile-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; }
.paths .tile-name { font-size: 16px; }
.paths .tile-about { font-size: 13.5px; line-height: 1.4; }
.paths .tile .go { margin-left: auto; color: var(--muted); }
.paths .tile:hover .go { color: var(--text); }
.paths-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
    font-size: 13.5px; }
.paths-foot a { font-weight: 600; }

/* ---------- 15.7.7 facts strip (only facts the firm states) ---------- */
.facts-band { background: var(--surface); padding: 28px 0 0; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.fact { padding: 20px 22px; }
.fact + .fact { border-left: 1px solid var(--border); }
.fact-label { color: var(--muted); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fact-value { margin-top: 6px; font-size: var(--fs-figure); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
.fact-value small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.fact-note { margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

/* ---------- 15.7.3 sections ---------- */
.section { padding: var(--section-y) 0; background: var(--surface); }
.section.is-grey { background: var(--bg); }
.sec-head { max-width: 760px; margin-bottom: 36px; }
.sec-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--muted); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; }
.sec-label .brand-dot { background: var(--mark-dot); }
.sec-head h2 { max-width: 24ch; font-size: var(--fs-section); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.sec-lead { max-width: 60ch; margin-top: 14px; color: var(--muted); font-size: var(--fs-lead); line-height: 1.6; }
.path-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-bottom: 14px; padding: 0 10px; border-radius: var(--radius-pill);
    background: var(--mark-soft); box-shadow: inset 0 0 0 1px var(--mark-line); color: var(--mark-text); font-size: 13px; font-weight: 600; }
.path-tag .icon { width: 15px; height: 15px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.split.is-wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.readable { max-width: var(--measure); font-size: var(--fs-body-public); }
.readable p + p { margin-top: 14px; }

/* 15.7.4 service cards: opus's wide tiles */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svc .tile { gap: 14px; padding: 28px 24px 22px; }
.svc .tile-icon { width: 52px; height: 52px; border-radius: 13px; }
.svc .tile-icon .icon { width: 26px; height: 26px; }
.svc .tile-name { font-size: var(--fs-h3-public); }
.svc .tile-about { font-size: 16px; line-height: 1.55; }
.svc .tile .link-button { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 15px; }
.svc .tile .link-button .icon { width: 16px; height: 16px; }
.svc .tile .tag { align-self: flex-start; }

/* 15.7.5 points */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.points.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.point-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--look-line); border-radius: var(--radius-md);
    background: var(--look-soft); color: var(--look-text); }
.point-icon .icon { width: 22px; height: 22px; }
.point h3 { margin-top: 14px; font-size: var(--fs-h3-public); font-weight: 600; line-height: 1.35; }
.point p { margin-top: 6px; color: var(--muted); }

/* 15.7.6 steps */
.steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; list-style: none; counter-reset: step; }
.steps li { position: relative; counter-increment: step; }
.steps li::before { content: counter(step); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 50%; background: var(--look-top); color: #fff; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.steps li:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 40px; right: -16px; height: 2px; background: var(--border); }
.steps h3 { margin-top: 14px; font-size: var(--fs-h3-public); font-weight: 600; line-height: 1.35; }
.steps p { margin-top: 6px; color: var(--muted); }

/* a list of ticks */
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .icon { margin-top: 3px; color: var(--look-text); }
.ticks.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }

/* the register card: "checking us" */
.register { overflow: hidden; }
.register-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 72px; padding: 14px 20px; }
.register-row + .register-row { border-top: 1px solid var(--border); }
.register-row .point-icon .icon { width: 20px; height: 20px; }
.register-row b { display: block; font-weight: 600; }
.register-row span.q { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; }
.register-row .btn { min-height: 44px; padding: 6px 12px; font-size: 14px; }   /* 30 Oct 2026: 44px targets (plan.md section 5) */
.register-row .btn .icon { width: 16px; height: 16px; }

/* 15.7.9 people cards */
.people { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; }
.person { overflow: hidden; }
.photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: var(--look-soft); color: var(--look-text); font-size: 13px;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.photo.is-wide { aspect-ratio: 16 / 10; border: 1px solid var(--look-line); border-radius: var(--radius); }
.person-body { padding: 16px 18px 18px; }
.person h3 { font-size: var(--fs-h3-public); font-weight: 600; }
.person .role { color: var(--muted); font-size: 13.5px; }
.person .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.person .link-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; }   /* 30 Oct 2026: a 44px target */

/* tool tiles */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tools .tile { gap: 12px; padding: 24px 20px 20px; }
.tools .tile-icon { width: 48px; height: 48px; border-radius: 12px; }
.tools .tile-name { font-size: 17px; }
.tools .tile-about { font-size: 15px; line-height: 1.5; }
.tools .meta { margin-top: auto; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.tools .meta .icon { width: 16px; height: 16px; color: var(--look-text); }

/* 15.7.10 FAQ */
.faq { max-width: 820px; overflow: hidden; }
.faq details + details { border-top: 1px solid var(--border); }
.faq summary { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 20px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--surface-2); }
.faq summary .icon { margin-left: auto; color: var(--muted); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { max-width: 68ch; padding: 0 20px 18px; color: var(--text); line-height: 1.65; }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }

/* 15.7.8 pricing block */
.price-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; }
.price-left { padding: 32px; border-right: 1px solid var(--border); }
.price-right { padding: 32px; }
.price-name { font-size: var(--fs-h3-public); font-weight: 600; }
.price-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 14px 0 6px; }
.price-figure b { font-size: 56px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-figure span { color: var(--muted); }
.extras { margin-top: 22px; border-top: 1px solid var(--border); }
.extra { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.extra span { color: var(--muted); font-size: 14px; display: block; }
.extra b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* insight cards (15.7.13) */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post { display: flex; flex-direction: column; gap: 10px; padding: 22px; color: var(--text); }
a.post:hover { border-color: var(--ink); box-shadow: var(--shadow-hover); color: var(--text); text-decoration: none; }
.post h3 { font-size: var(--fs-h3-public); font-weight: 600; line-height: 1.35; }
.post time { color: var(--muted); font-size: 13px; }
/* 30 Oct 2026: an article's own picture at 3:2 (they are made 1536 x 1024) on its card and at the top of the article; a quiet
   panel in the look's colour with a line icon when an article has none - never a stock photo */
.post-picture { display: flex; align-items: center; justify-content: center; margin: -22px -22px 6px; aspect-ratio: 3 / 2; overflow: hidden;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; background: var(--look-top); color: var(--side-mark); }
.post-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-picture .icon { width: 40px; height: 40px; }
.article-picture { margin: 0 0 28px; overflow: hidden; aspect-ratio: 3 / 2; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-2); }
.article-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post .tag { align-self: flex-start; }

/* ---------- enquiry: deep words beside a white card ---------- */
.enquire-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; padding-block: 80px; }
.enquire h2 { max-width: 16ch; font-family: var(--serif); font-size: 40px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.enquire .lead { margin-top: 16px; color: var(--on-dark-muted); font-size: var(--fs-lead); }
.next { list-style: none; margin-top: 28px; display: grid; gap: 16px; counter-reset: n; }
.next li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; counter-increment: n; color: var(--on-dark); }
.next li::before { content: counter(n); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--on-dark-line); color: var(--side-mark); font-weight: 700; font-size: 14px; }
.next b { display: block; color: #fff; }
.next span { color: var(--on-dark-muted); font-size: 15px; }
.reach { display: grid; gap: 10px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--on-dark-line); }
.reach a, .reach p { display: flex; align-items: center; gap: 10px; color: var(--on-dark); font-weight: 600; min-height: 32px; }
.reach .icon { color: var(--door-mark); }
.reach p { font-weight: 400; color: var(--on-dark-muted); }
.form-card-p { padding: 32px; color: var(--text); }
.form-card-p h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.2; }
.form-card-p > p { margin-top: 6px; color: var(--muted); }
.pform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 24px; }
.pform .field.is-full { grid-column: 1 / -1; }
.pform .input { min-height: 48px; padding: 11px 14px; border-radius: var(--radius-md); font-size: 16px; }
.pform textarea.input { min-height: 120px; }
.pform .input:focus { outline: 2px solid transparent; border-color: var(--door-ring); box-shadow: 0 0 0 1px var(--door-ring); }
.pform .field-label { color: var(--text); font-size: 13.5px; }
.pform .optional { color: var(--muted); font-weight: 500; }
.pform .door-button { grid-column: 1 / -1; margin-top: 6px; }
.pform .door-button:focus-visible { outline: 2px solid var(--door-ring); outline-offset: 3px; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--grey-line);
    border-radius: var(--radius-md); font-size: 15px; font-weight: 600; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label:has(input:checked) { border-color: var(--door-ring); box-shadow: 0 0 0 1px var(--door-ring); background: var(--look-soft); }
.choice label:has(input:focus-visible) { outline: 2px solid var(--look-focus); outline-offset: 2px; }
.choice .icon { width: 16px; height: 16px; color: var(--look-text); }
.pform fieldset { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.pform legend { margin-bottom: 6px; padding: 0; font-size: 13.5px; font-weight: 600; }
.form-trust { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px;
    line-height: 1.5; }
.form-trust .icon { width: 15px; height: 15px; margin-top: 2px; flex: none; }

/* ---------- 15.7.2 page head (service pages) and 15.6.5 trail ---------- */
.phead-in { padding-block: 40px 48px; }
.trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .66); list-style: none; }
/* 30 Oct 2026: each crumb 44px tall to touch (plan.md section 5), so the trail's own gap under it is smaller */
.trail li { display: inline-flex; align-items: center; gap: 6px; }
.trail a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--on-dark); text-underline-offset: 3px; }
.trail a:hover { color: #fff; text-decoration: underline; }
.trail [aria-current="page"] span { overflow-wrap: anywhere; }
.trail .icon { width: 14px; height: 14px; }
.trail .up { display: none; }
.phead-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.phead h1 { font-family: var(--serif); font-size: var(--fs-door); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.phead .lead { max-width: 56ch; margin-top: 14px; color: var(--on-dark-muted); font-size: var(--fs-lead); }
.fit { padding: 18px 20px; border: 1px solid var(--on-dark-line); border-radius: var(--radius); background: rgba(255, 255, 255, .04); }
.fit-title { color: var(--door-names); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fit ul { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.fit li { display: flex; gap: 10px; color: var(--on-dark); font-size: 15px; line-height: 1.45; }
.fit li .icon { margin-top: 2px; color: var(--side-mark); }
.fit li.is-no .icon { color: rgba(255, 255, 255, .66); }
.fit a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* service page body: text with a sticky "at a glance" card */
.svc-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.svc-main > section { padding: 48px 0; border-top: 1px solid var(--border); }
.svc-main > section:first-child { border-top: 0; padding-top: 8px; }
.svc-main h2 { font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.svc-main .sec-label { margin-bottom: 10px; }
.svc-main .intro { max-width: var(--measure); margin-top: 12px; color: var(--muted); font-size: 17px; }
.svc-main .block { margin-top: 24px; }
.glance { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }   /* 30 Oct 2026: never taller than the window */
.glance .card-body { display: grid; gap: 14px; padding: 22px; }
.glance h2 { font-size: 16px; font-weight: 700; }
.glance dl { margin: 0; display: grid; gap: 0; }
.glance dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14.5px; }
.glance dt { color: var(--muted); }
.glance dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.toc { list-style: none; display: grid; gap: 2px; margin-top: 18px; font-size: 13.5px; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 4px 12px; border-left: 3px solid var(--border); color: var(--muted); }   /* 30 Oct 2026: 44px */
.toc a:hover { border-left-color: var(--look-line); color: var(--text); text-decoration: none; }
.toc a.is-on { border-left-color: var(--look-accent); color: var(--text); font-weight: 600; }
.toc-title { margin-top: 22px; color: var(--muted); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* a table as the standard's list */
.list-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.list-table th, .list-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.list-table thead th { border-top: 0; background: var(--surface-2); color: var(--muted); font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.list-table td:first-child { font-weight: 600; width: 38%; }
.table-card { overflow-x: auto; }

/* downloads 15.7.17 */
.dl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 12px 18px; }
.dl-row + .dl-row { border-top: 1px solid var(--border); }
.dl-row b { display: block; font-weight: 600; }
.dl-row span { color: var(--muted); font-size: 13.5px; }

/* 15.7.11 call-to-action band */
.band-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 64px; }
.band h2 { max-width: 22ch; font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1.2; }
.band p { margin-top: 10px; color: var(--on-dark-muted); }
.band-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

/* ---------- 15.6.6 footer ---------- */
.pfoot { background: var(--look-top); border-top: 4px solid transparent; border-image: var(--look-bar) 1; color: rgba(255, 255, 255, .72); font-size: 15px; }
.pfoot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px; padding-block: 56px 36px; }
.pub .pfoot-logo { height: 40px; width: auto; display: block; }   /* 30 Oct 2026: ".pub" so it outweighs public-base.css's ".pub img { height: auto }" */
.look-smsf .pfoot-logo { border-radius: 3px; }
.pfoot .about { margin-top: 16px; max-width: 34ch; }
.pfoot h2 { margin-bottom: 10px; color: var(--door-names); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pfoot ul { list-style: none; }
.pfoot li a, .pfoot li span { display: flex; align-items: center; gap: 10px; min-height: 32px; color: rgba(255, 255, 255, .72); }
.pfoot li a { min-height: 44px; }   /* 30 Oct 2026: 44px targets (plan.md section 5) */
.pfoot li a:hover { color: #fff; text-decoration: underline; }
.pfoot li .icon { color: var(--side-mark); }
.pfoot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 20px 32px; border-top: 1px solid var(--on-dark-line);
    color: rgba(255, 255, 255, .66); font-size: 13px; }
.pfoot-bottom nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pfoot-bottom a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: rgba(255, 255, 255, .72); }
.pfoot-bottom a .icon { width: 14px; height: 14px; }
.pfoot-bottom a:hover { color: #fff; text-decoration: underline; }
/* 30 Oct 2026 (C1): "Cookie choices" (with the cookie notice) - a button that reads as the legal links beside it, 44px to touch */
.pfoot-choices { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .72);
    font: inherit; cursor: pointer; }
.pfoot-choices:hover { color: #fff; text-decoration: underline; }

/* ---------- 15.6.7 30 Oct 2026 (C1): the cookie notice (public.consent - only where the brand has advertising cookies) ----------
   A white strip at the foot of the window with the look's 4px line, the last thing on the page and held at the foot while
   the page scrolls (sticky): never a pop-up over the page, and at the very end it sits below the footer, so the page's last
   lines are never under it. The top bar and the phone menu stay above it. The two answers are buttons of the same size and
   weight (one grid of two equal columns); on a phone they share the width. While it shows, scrolling to whatever has focus
   keeps clear of it (--consent-room, its height, set by public.js). */
html { scroll-padding-bottom: var(--consent-room, 0px); }
.consent { position: sticky; bottom: 0; z-index: 30; border-top: 4px solid transparent; border-image: var(--look-bar) 1; background: var(--surface);
    box-shadow: 0 -8px 24px rgba(23, 10, 3, .12); color: var(--text); }
.pub .consent:focus-visible { outline-offset: -6px; }
.consent-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 14px; }
.consent-words { flex: 1 1 440px; min-width: 0; }
.consent-text { font-size: 15px; line-height: 1.55; }
.consent-text strong { font-weight: 600; }
/* the privacy policy link: 44px to touch without opening up the line (the extra height is padding, taken back by the margin) */
.consent-text a { display: inline-block; margin-block: -11px; padding-block: 11px; color: var(--look-text); text-decoration: underline; text-underline-offset: 3px; }
.consent-now { margin-top: 4px; color: var(--muted); font-size: 14px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-actions .btn { min-height: 44px; padding-inline: 16px; }
@media (max-width: 600px) {
    .consent-in { gap: 10px; padding-block: 12px; }
    .consent-text { font-size: 14.5px; }
    .consent-actions { flex: 1 1 100%; }
    .consent-actions .btn { padding-inline: 8px; white-space: normal; }
}
@media (forced-colors: active) { .consent { border-top: 2px solid CanvasText; } }

/* ---------- 15.8 widths and phones ---------- */
@media (max-width: 1100px) {
    .pbar-phone { display: none; }
    .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
}
@media (max-width: 1000px) {
    .svc, .posts, .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .points.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pfoot-cols { grid-template-columns: 1fr 1fr; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facts .fact:nth-child(3) { border-left: 0; }
    .facts .fact:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 900px) {
    .pnav, .pbar-signin, .pbar-end > .btn-mark { display: none; }
    .pmenu { display: block; }
    .pmenu > summary { height: 44px; }   /* 30 Oct 2026: 44px to touch (was 40px) */
    .pbar-in { position: relative; }
    .steps { grid-template-columns: 1fr; gap: 20px; }
    .steps li { padding-left: 48px; }
    .steps li::before { position: absolute; left: 0; top: 0; }
    .steps li:not(:last-child)::after { top: 40px; bottom: -14px; left: 15px; right: auto; width: 2px; height: auto; }
    .steps h3 { margin-top: 3px; }
    .split, .split.is-wide-left, .faq-wrap, .price-card { grid-template-columns: 1fr; gap: 32px; }
    .price-left { border-right: 0; border-bottom: 1px solid var(--border); }
    .svc-body { grid-template-columns: 1fr; }
    .glance { position: static; order: -1; max-height: none; overflow: visible; padding: 0; }
    .toc, .toc-title { display: none; }
    .band-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 860px) {
    .hero-in, .phead-grid, .enquire-in { grid-template-columns: 1fr; gap: 32px; }
    .hero-in { padding-block: 48px; }
    .deep > .door-lines { display: none; }
    .hero-actions > a { flex: 1 1 100%; }
    .enquire-in { padding-block: 56px; }
}
@media (max-width: 640px) {
    .svc, .posts, .people, .tools, .points, .points.is-four, .pfoot-cols { grid-template-columns: 1fr; }
    .ticks.is-two { grid-template-columns: 1fr; }
    .points { gap: 0; }
    .points .point { padding: 20px 0; }
    .points .point + .point { border-top: 1px solid var(--border); }
    .pform { grid-template-columns: 1fr; }
    .register-row { grid-template-columns: 40px minmax(0, 1fr); }
    .register-row .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) {
    :root { --edge: 16px; --section-y: 48px; --fs-section: 24px; --fs-lead: 17px; --fs-figure: 30px; --fs-door: 32px; }
    .pbar-in { height: 56px; gap: 8px; }
    .pbar-logo img { height: 30px; }
    .call-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25);
        border-radius: var(--radius-sm); color: var(--side-mark); }   /* 30 Oct 2026: 44px to touch (was 40px) */
    .fact { padding: 16px; }
    .fact-value small { font-size: 13px; }
    .price-left, .price-right, .form-card-p { padding: 24px 20px; }
    .price-figure b { font-size: 44px; }
    .enquire h2, .band h2 { font-size: 30px; }
    .trail .crumb { display: none; }
    .trail .up { display: inline-flex; }
    .pfoot-cols { padding-block: 40px 24px; }
    .faq summary { padding: 14px 16px; }
    .faq .answer { padding: 0 16px 16px; }
    .band-actions, .band-actions a { width: 100%; }
}
@media (max-width: 380px) {
    .pmenu > summary .label { display: none; }
    /* 30 Oct 2026: the facts strip one under another on the narrowest phones */
    .facts { grid-template-columns: 1fr; }
    .facts .fact + .fact { border-left: 0; border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (forced-colors: active) {
    .tile, .card, .btn-mark, .btn-clear, .paths, .fact { border: 1px solid CanvasText; }
}
/* printing: the section "printing" at the end of this file (30 Oct 2026) */
.facts dd { margin: 0; }
.facts .fact-value { margin-top: 6px; }
.dl-row .pill { justify-self: end; }
@media (max-width: 640px) { .dl-row { grid-template-columns: 40px minmax(0, 1fr); } .dl-row > .btn, .dl-row > .pill { grid-column: 2; justify-self: start; } }
/* 30 Oct 2026 (C1): on a phone a row's button wraps its words ("Download the checklist (PDF)") rather than push the page sideways;
   a full-width button wraps rather than widen its card (the checklist's side card) */
@media (max-width: 640px) { .dl-row > .btn { max-width: 100%; white-space: normal; text-align: left; } }
.pub .btn-block { white-space: normal; }
.hero-in > *, .phead-grid > *, .enquire-in > *, .split > *, .svc-body > *, .faq-wrap > *, .price-card > * { min-width: 0; }
@media (max-width: 860px) { .hero-in, .phead-grid, .enquire-in { grid-template-columns: minmax(0, 1fr); } }
.svc.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
    .svc.is-two { grid-template-columns: 1fr; }
    .person { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
    .person .photo { aspect-ratio: auto; min-height: 130px; border-bottom: 0; border-right: 1px solid var(--border); }
    .person-body { padding: 14px 16px; }
}

/* ---------- grafted from A: "What you receive" tiles and the enquiry as a second door ---------- */
:root { --gutter: var(--edge); }
/* service cards: opus's wide tiles (15.7.4) */
.p-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* 30 Oct 2026: two tiles across the full width (smsfaudits.com's "What you receive", once the contravention report went) */
.p-tiles.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 22px; overflow: hidden; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: box-shadow var(--ease), border-color var(--ease); }
.p-tile:hover, .p-tile:focus-visible { border-color: var(--ink); box-shadow: var(--shadow-hover); color: var(--text); text-decoration: none; }
.p-tile .tile-band { height: 4px; }
.p-tile .tile-icon { width: 52px; height: 52px; border-radius: 13px; }
.p-tile .tile-icon .icon { width: 26px; height: 26px; }
.p-tile h3 { margin: 4px 0 0; font-size: var(--fs-h3-public); font-weight: 700; line-height: 1.3; }
.p-tile p { color: var(--muted); }
.p-tile .go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--look-text); font-weight: 600; }
.p-tile.is-other { background: var(--surface-2); }
.p-tile .tag { align-self: flex-start; }
/* ---------- the door, closing: contact at the foot of the page (15.7.14 on the page, not in a pop-up) ---------- */
.p-close { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); background: var(--surface); }
.p-close-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 32px; padding: 72px 56px 48px max(var(--gutter), calc((100vw - 1180px) / 2));
    background: var(--door-bg); color: #fff; }
.p-close-brand > *:not(.door-lines) { position: relative; }
.p-close-brand img { display: block; width: auto; height: 54px; }
.look-smsf .p-close-brand img { border-radius: 3px; }
.p-cta-line { max-width: 18ch; margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1.2; color: #fff; text-wrap: balance; }
.p-contact-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.p-contact-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--on-dark); }
.p-contact-list .icon { margin-top: 3px; color: var(--door-mark); }
.p-contact-list a { color: #fff; font-weight: 600; }
.p-contact-list .big { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-contact-list small { display: block; color: var(--on-dark-muted); font-size: 13.5px; }
.p-close-main { padding: 72px max(var(--gutter), calc((100vw - 1180px) / 2)) 56px 56px; }
.p-form-wrap { max-width: 560px; }
.p-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; margin-top: 24px; }
.p-form .is-wide { grid-column: 1 / -1; }
.p-form .field-label { color: var(--text); }
.p-form .optional { color: var(--muted); }
.p-form .input { min-height: 48px; padding: 11px 14px; border-radius: var(--radius-md); font-size: 16px; }
.p-form textarea.input { min-height: 120px; resize: vertical; }
.p-form select.input { appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586070' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; padding-right: 40px; }
.p-form .input:focus { outline: 2px solid transparent; border-color: var(--door-ring); box-shadow: 0 0 0 1px var(--door-ring); }
.p-form .door-button { margin-top: 4px; }
.p-form .door-button:focus-visible { outline: 2px solid var(--door-ring); outline-offset: 3px; }
.p-form .door-trust { margin-top: 8px; }

/* independence note (calm, factual) */
.p-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; padding: 28px; }
.p-note .p-desk-ico { width: 52px; height: 52px; border-radius: 13px; }


/* the offices with their time zones in words (from B), on the door's dark ground */
.p-offices { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--on-dark-muted); font-size: 14px; }
.p-offices b { color: #fff; font-weight: 600; }
/* a short line in the firm's own voice (from B), set as a quiet quote.
   30 Oct 2026: in Inter - the serif is only for a page's title and the enquiry band's line (plan.md section 2, review #9) */
.quiet-quote { max-width: 46ch; margin: 28px 0 0; padding-left: 18px; border-left: 3px solid var(--look-line); color: var(--text); font-family: var(--font);
    font-size: 19px; font-weight: 500; line-height: 1.5; }
.quiet-quote footer { margin-top: 8px; color: var(--muted); font-family: var(--font); font-size: 13.5px; }
.p-close .names { margin-bottom: 10px; }
@media (max-width: 1100px) { .p-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .p-close { grid-template-columns: 1fr; }
    .p-close-brand .door-lines { display: none; }
    .p-close-brand { padding: 48px var(--gutter) 36px; }
    .p-close-main { padding: 40px var(--gutter) 48px; }
}
@media (max-width: 640px) { .p-tiles, .p-tiles.is-two, .p-form { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .p-cta-line { font-size: 28px; } }
@media (forced-colors: active) { .p-tile { border: 1px solid ButtonText; } }

/* =====================================================================================================================
   30 Oct 2026: the inner pages, both sites (content/{dhan,smsf}/*.md; plan.md section 2, D). Built from the parts above
   (.deep.phead, .svc-body, .glance, .faq, .steps, .price-card, .dl-row, .register, .people, .posts, .band, .p-close) and these:
     .phead.is-light   a white page head: the trail, the serif h1, the lead (the deep one is .deep.phead)
     .phead-facts      two short facts beside a deep page head (A's head: the fee and the turnaround)
     .phead-note       a quiet line under the lead ("Reviewed by ...", "Last updated ...")
     .section.is-first the body straight under a page head
     .prose            reading text: paragraphs, lists, h2-h4, tables, quotes, figures (legal pages, articles)
     .reviewed, .note  "Reviewed by ..." at a page's foot; a quiet note ("General information only ...")
     .go-link          a link on its own line, with a 44px target; .go-links: a row of them
     .doc-group        a group of documents to send (the audit checklist), .doc-list its list
     .calc             the fee calculator: a form that works without script, its answer and its hint
     .profile-grid     a person's page head: the photo's place, name, role, tags, register line
     .avatar           the photo's place until real photos are agreed (initials; aria-hidden on the page); .photo-mono: initials in a card's .photo
     .person.is-row    a person card with the photo beside the words; .signers: that card beside the register card
     .chips-nav        in-page links as opus's chips; .members-group, .members, .member: the wider team
     .qa-group, .qa    questions with their answers in view (the Questions page)
     .office-cards     the two offices with their time zones in words (each an .office-card)
     .steps.is-down    the steps one under another, for longer words
     .door-page        the contact page: the door's deep panel (.p-close-brand) beside the form (.p-close-main)
     .panel-page       a short page in one white card (thank you, not found, a holding page)
     .article-meta, .byline-card, .glance.is-after   the article page
   The same file in both sites.
   ===================================================================================================================== */

/* page heads */
.phead.is-light { position: relative; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text); }
.phead.is-light .phead-in { padding-block: 32px 44px; }
.phead.is-light .trail, .panel-card .trail { color: var(--muted); }
.phead.is-light .trail a, .panel-card .trail a { color: var(--text); }
.phead.is-light .trail a:hover, .panel-card .trail a:hover { color: var(--look-text); }
.phead.is-light .trail .icon, .panel-card .trail .icon { color: var(--grey-strong); }
.phead.is-light .names { color: var(--look-text); }
.phead.is-light h1 { color: var(--text); }
.phead.is-light .lead { color: var(--muted); }
.phead h1 { max-width: 22ch; text-wrap: balance; }
.phead .lead { text-wrap: pretty; }
.phead-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); justify-self: end; margin: 0; border: 1px solid var(--on-dark-line);
    border-radius: var(--radius); }
.phead-facts > div { padding: 14px 20px; }
.phead-facts > div + div { border-left: 1px solid var(--on-dark-line); }
.phead-facts dt { color: var(--on-dark-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.phead-facts dd { margin: 4px 0 0; color: #fff; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.phead-facts dd small { display: block; color: var(--on-dark-muted); font-size: 13px; font-weight: 500; white-space: normal; }
.phead-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 16px; color: var(--muted); font-size: 14px; }
.phead-note .icon { width: 16px; height: 16px; color: var(--look-text); }
.deep .phead-note { color: var(--on-dark-muted); }
.deep .phead-note .icon { color: var(--side-mark); }
.section.is-first { padding-top: 48px; }

/* reading text */
.prose { max-width: var(--measure); font-size: var(--fs-read); line-height: 1.7; overflow-wrap: break-word; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 44px; color: var(--text); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.prose h3 { margin-top: 30px; color: var(--text); font-size: var(--fs-h3-public); font-weight: 600; line-height: 1.35; }
.prose h4 { margin-top: 24px; color: var(--text); font-size: 16px; font-weight: 600; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 10px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 6px; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin-top: 8px; }
.prose li::marker { color: var(--look-text); }
.prose a { color: var(--look-text); text-decoration: underline; text-underline-offset: 3px; }
.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose blockquote { margin: 24px 0 0; padding-left: 18px; border-left: 3px solid var(--look-line); color: var(--text); }
.prose img { height: auto; border-radius: var(--radius-sm); }
.prose figure { margin: 24px 0 0; }
.prose figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); color: var(--text); font-weight: 600; }
.prose hr { margin: 36px 0; border: 0; border-top: 1px solid var(--border); }
.prose code { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--grey-soft); font-size: .9em; }
.prose pre { overflow-x: auto; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--grey-soft); }
.prose [id], .svc-main [id] { scroll-margin-top: 96px; }
.prose .confirm { font-size: .78em; }
.reviewed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 14px; }
.reviewed .icon { width: 16px; height: 16px; color: var(--look-text); }
.note { display: flex; align-items: flex-start; gap: 10px; max-width: var(--measure); margin-top: 28px; padding: 14px 16px; border-radius: var(--radius-md);
    background: var(--grey-soft); color: var(--grey-text); font-size: 14.5px; line-height: 1.55; }
.note > .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--muted); }
.go-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--look-text); font-weight: 600; }
.go-link .icon { width: 16px; height: 16px; }
.go-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.go-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn-row .btn { min-height: 44px; }
.dl-row .btn { min-height: 44px; }
.svc-main .lead-text { max-width: var(--measure); margin-top: 12px; color: var(--grey-text); font-size: var(--fs-read); line-height: 1.7; }
.svc-main .lead-text + .lead-text { margin-top: 12px; }

/* the audit checklist */
.doc-group { padding: 24px 24px 22px; }
.doc-group + .doc-group { margin-top: 16px; }
.doc-group h3 { font-size: var(--fs-h3-public); font-weight: 600; line-height: 1.35; }
.doc-group > p { margin-top: 4px; color: var(--muted); font-size: 15px; }
.doc-list { display: grid; gap: 10px; margin-top: 14px; list-style: none; }
.doc-list li { position: relative; padding-left: 22px; line-height: 1.55; }
.doc-list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--look-text); }
.doc-list .doc-list { margin-top: 10px; }
.doc-list .doc-list li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--look-text); }
.doc-sub { margin-top: 14px; color: var(--text); font-weight: 600; }

/* the fee calculator */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 40px; align-items: end; padding: 28px; }
.calc-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.calc-form .field { flex: 1 1 150px; }
.calc-form .input { min-height: 48px; font-size: 18px; font-variant-numeric: tabular-nums; }
.calc-form .btn { min-height: 48px; }
.calc-answer { color: var(--text); font-size: 20px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.calc-answer b { font-weight: 700; }
.calc-hint { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14.5px; }
.calc-table th:not(:first-child), .calc-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* people */
.avatar { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border: 1px solid var(--look-line); border-radius: var(--radius);
    background: var(--look-soft); color: var(--look-text); font-size: 44px; font-weight: 600; letter-spacing: .02em; }
.photo .photo-mono { font-size: 34px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.profile-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.profile-role { margin-top: 10px; color: var(--muted); font-size: 17px; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.profile-register { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 6px 12px; margin-top: 18px; padding: 12px 16px; border: 1px solid var(--look-line);
    border-radius: var(--radius-md); background: var(--look-soft); color: var(--text); font-size: 15px; }
.profile-register .icon { width: 18px; height: 18px; color: var(--look-text); }
.signers { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 18px; align-items: start; }
.person.is-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.person.is-row .photo { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--border); }
.person .role .confirm, .person-body > .confirm { font-size: 12px; }
.person-body .go-link { min-height: 44px; }
.chips-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chips-nav .chip { height: 44px; padding: 0 16px; text-decoration: none; }
.chips-nav .chip:hover { text-decoration: none; }
.members-group + .members-group { margin-top: 36px; }
.members-group > h3 { margin-bottom: 14px; font-size: var(--fs-h3-public); font-weight: 600; }
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; list-style: none; }
.member { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.member .initials { width: 40px; height: 40px; font-size: 13.5px; }
.member-text { min-width: 0; }
.member b { display: block; font-weight: 600; line-height: 1.3; }
.member-role { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; }

/* questions with their answers in view */
.qa-group + .qa-group { margin-top: 44px; }
.qa-group > h2 { margin-bottom: 14px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.qa { padding: 20px 24px; }
.qa + .qa { border-top: 1px solid var(--border); }
.qa h3 { font-size: var(--fs-h3-public); font-weight: 600; line-height: 1.4; }
.qa .answer { max-width: var(--measure); margin-top: 8px; color: var(--grey-text); line-height: 1.65; }
.qa .answer p + p { margin-top: 10px; }
.qa .go-link { margin-top: 2px; }

/* offices, steps one under another */
.office-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.office-card { padding: 20px 22px; }
.office-card h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h3-public); font-weight: 600; }
.office-card h3 .icon { color: var(--look-text); }
.office-card p { margin-top: 6px; color: var(--muted); }
.steps.is-down { grid-template-columns: 1fr; gap: 28px; max-width: var(--measure); margin-top: 8px; }
.steps.is-down li { padding-left: 52px; }
.steps.is-down li::before { position: absolute; left: 0; top: 0; }
.steps.is-down li:not(:last-child)::after { top: 40px; bottom: -22px; left: 15px; right: auto; width: 2px; height: auto; }
.steps.is-down h3 { margin-top: 3px; }
.steps.is-down p { color: var(--grey-text); font-size: var(--fs-read); line-height: 1.65; }

/* the contact page: the door */
.door-page { min-height: calc(100vh - 68px); }
.door-page .p-close-brand { justify-content: flex-start; }
.door-page .p-close-main { display: flex; flex-direction: column; }
.door-page h1 { margin: 0; color: var(--text); font-family: var(--serif); font-size: var(--fs-door); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.door-lead { max-width: 52ch; margin-top: 12px; color: var(--muted); font-size: 16.5px; }
.door-page .eform { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); }
.door-page .eform-title { font-size: var(--fs-h2); }
/* 30 Oct 2026: the form's title as the page's h1 (<x-enquiry-form :level="1">): the line under the title and the quiet line,
   then the fields below a rule */
.door-page .eform.is-page { margin-top: 0; padding-top: 0; border-top: 0; }
.door-page .eform.is-page .eform-title { font-size: var(--fs-door); }
.door-page .eform.is-page .eform-form { padding-top: 24px; border-top: 1px solid var(--border); }
.after-form { display: grid; gap: 4px; margin-top: 18px; color: var(--muted); font-size: 14.5px; }
.after-form p { display: flex; align-items: flex-start; gap: 8px; }
.after-form .icon { width: 16px; height: 16px; margin-top: 4px; color: var(--look-text); }
.p-contact-list .confirm { font-size: 12px; }
.p-contact-list .maps { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--side-mark); font-size: 14px; font-weight: 600; }
.p-contact-list li > span { min-width: 0; overflow-wrap: anywhere; }   /* 30 Oct 2026: a long address never pushes the page sideways */
.p-contact-list .maps .icon { width: 15px; height: 15px; margin: 0; color: currentColor; }
/* 30 Oct 2026 (review-wave-2 #6): the phone number and the email are 44px targets too, as "Open in Maps" (plan.md
   section 5; they were 27px and 20px tall); the icon beside them sits at the link's middle */
.p-contact-list li > span > a:not(.maps) { display: inline-flex; align-items: center; min-height: 44px; }
.p-contact-list li:has(> span > a:first-child:not(.maps)) > .icon { margin-top: 13px; }

/* a short page in one white card */
.panel-page { padding: 72px 0 96px; background: var(--bg); }
.panel-card { position: relative; max-width: 660px; margin: 0 auto; padding: 40px 40px 36px; }
.panel-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 16px; background: var(--look-soft);
    color: var(--look-text); }
.panel-icon .icon { width: 28px; height: 28px; }
.panel-card h1 { color: var(--text); font-family: var(--serif); font-size: var(--fs-door); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.panel-card .lead { margin-top: 12px; color: var(--grey-text); font-size: 17px; line-height: 1.6; }
.panel-card .lead + .lead { margin-top: 10px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.panel-actions .btn { min-height: 48px; }

/* the article page */
.article-meta { margin-top: 16px; color: var(--muted); font-size: 14.5px; }
.byline-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 18px 20px; }
.byline-card .initials { width: 48px; height: 48px; font-size: 15px; }
.byline-card b { display: block; font-weight: 600; }
.byline-card span { display: block; color: var(--muted); font-size: 14px; }
.byline-card .go-link { grid-column: 1 / -1; min-height: 44px; font-size: 15px; }
.glance-stack { display: grid; gap: 16px; }
.post .post-summary { color: var(--muted); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post .post-meta { margin-top: auto; color: var(--muted); font-size: 13.5px; }
.pub .pager-link { min-width: 44px; height: 44px; }
.pager-pages .pager-link .icon { width: 16px; height: 16px; }

@media (max-width: 1000px) {
    .signers { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .glance.is-after { order: 0; }
    .calc { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 860px) {
    .phead-facts { justify-self: start; }
    .door-page { min-height: 0; }
}
@media (max-width: 640px) {
    .office-cards { grid-template-columns: 1fr; }
    .profile-grid { grid-template-columns: 92px minmax(0, 1fr); gap: 18px; }
    .avatar { font-size: 26px; }
    .person.is-row { grid-template-columns: 104px minmax(0, 1fr); }
    .qa { padding: 18px 16px; }
    .doc-group { padding: 20px 18px; }
    .calc { padding: 22px 18px; }
}
@media (max-width: 600px) {
    .phead.is-light .phead-in { padding-block: 22px 32px; }
    .prose h2, .qa-group > h2 { font-size: 22px; }
    .panel-page { padding: 32px 0 48px; }
    .panel-card { padding: 28px 20px 24px; }
    .panel-actions .btn { width: 100%; }
}
@media (max-width: 420px) {
    .phead-facts { grid-auto-flow: row; }
    .phead-facts > div + div { border-left: 0; border-top: 1px solid var(--on-dark-line); }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-grid .avatar { width: 96px; }
}
.person-links { display: grid; justify-items: start; }
.person .link-button .icon { width: 16px; height: 16px; }
.trail .up a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.extra > div { min-width: 0; }
.extra > div > b { display: block; color: var(--text); font-weight: 600; white-space: normal; }
.extra .extra-fig { flex: none; max-width: 48%; text-align: right; }
.extra .extra-fig small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; white-space: normal; }
.prose .bio > * + * { margin-top: 16px; }
.post h2 { font-size: var(--fs-h3-public); font-weight: 600; line-height: 1.35; }
.toc-card .toc { margin-top: 10px; }
@media (max-width: 900px) { .toc-card { display: none; } }
@media (max-width: 900px) {
    .glance.is-contents .toc-card { display: block; }
    .glance.is-contents .toc { display: grid; }
}
.steps.is-plain p { margin-top: 14px; color: var(--text); font-size: 16.5px; line-height: 1.55; }
@media (max-width: 900px) { .steps.is-plain p { margin-top: 4px; } }
.calc-table-card { max-width: 720px; }
/* 30 Oct 2026: a footer line that is not a link flows as words (its icon in front), so a "[to confirm]" mark follows the
   words instead of squeezing them; a mark after a link goes under it */
.pfoot li > span:not(.confirm) { position: relative; display: block; padding: 4px 0 4px 28px; }
.pfoot li > span:not(.confirm) > .icon { position: absolute; left: 0; top: 7px; }
.pfoot li .confirm { display: inline; min-height: 0; }
.pfoot li > a + .confirm { display: inline-block; margin: 0 0 6px; }
.pfoot li > a:has(> .icon) + .confirm { margin-left: 28px; }
.doc-group > .doc-list:first-child { margin-top: 0; }
h4.doc-sub { margin: 16px 0 0; font-size: 15px; line-height: 1.4; }
.byline-card .initials { display: inline-flex; color: var(--initials-text); font-size: 15px; }
.faq-wrap > .sec-head { margin-bottom: 0; }
@media (max-width: 420px) {
    .person.is-row { grid-template-columns: 76px minmax(0, 1fr); }
    .person.is-row .photo .photo-mono { font-size: 22px; }
}

/* =====================================================================================================================
   30 Oct 2026: printing, both sites - so the audit checklist page prints cleanly (it replaces the old PDF, which printed
   the old address), and any other page with it. A page prints as black words on white paper:
     - at the top only the logo (no menu, phone, sign-in or main button); the page head and the reading column at full
       width; at the foot the footer's Contact column and the legal lines (who we are, the ABN, the registrations, the
       Professional Standards sentence)
     - left out: the preview bar, the skip link, the trail, buttons and links set as buttons, forms, the enquiry band and
       door, "On this page" and the side card, in-page chips, the print button itself ([data-print], public.js), the cookie
       notice (30 Oct 2026, C1)
     - cards keep a thin border; a heading stays with what follows it; a list item is never split over two pages
     - the audit checklist's lists (.doc-list) print as a list to tick: an empty box before each document
   A "Print this checklist" button: <button type="button" class="btn btn-quiet" data-print hidden><x-icon name="print" />
   Print this checklist</button> - public.js shows it and opens the print window; without script it stays hidden.
   ===================================================================================================================== */
@media print {
    @page { margin: 14mm 14mm 16mm; }
    html { scroll-padding-top: 0; }
    body.pub { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
    .pub a, .pub .icon, .pub .u-muted, .pub .lead, .pub .lead-text, .pub .sec-label, .pub .phead-note { color: #000 !important; }
    .skip-link, .pnav, .pbar-end, .trail, .btn, .btn-mark, .btn-clear, .door-button, .go-links, .go-link, [data-print], .band, .enquire,
    .p-close:not(.door-page), .door-page .p-close-brand, .eform-form, .eform-problems, .eform-quiet, .eform-jobs, .form-trust,
    .glance, .toc, .toc-title, .chips-nav, .door-lines, .pfoot-cols > div:not(:last-child), .pfoot-bottom nav, .consent { display: none !important; }

    /* the top: the logo alone, on white */
    .pbar { position: static; background: none !important; border: 0 !important; border-image: none !important; color: #000; }
    .pbar-in { height: auto; padding: 0 0 16pt; }
    .pbar-logo img { height: 26pt; }
    .wrap { max-width: none; padding: 0; }

    /* dark panels as plain words; sections without their colours and wide spacing */
    .pub .deep, .pub .on-dark, .pub .phead, .pub .section { background: none !important; color: #000 !important; }
    .pub .deep *, .pub .on-dark * { color: #000 !important; }
    .phead, .phead.is-light { border: 0; }
    .phead-in, .phead.is-light .phead-in { padding-block: 0 10pt; }
    .phead-grid, .svc-body { display: block; }
    .phead h1 { max-width: none; font-size: 22pt; }
    .section, .section.is-first { padding: 8pt 0; }
    .svc-main > section { padding: 10pt 0 0; border-top: 0; }
    h1, h2, h3, h4, .sec-label { break-after: avoid; page-break-after: avoid; color: #000; }
    .card { box-shadow: none !important; border: .75pt solid #888; }
    .card, .register-row, .dl-row, .steps li, .p-tile, .tile, .fact { break-inside: avoid; page-break-inside: avoid; }
    li { break-inside: avoid; page-break-inside: avoid; }

    /* the audit checklist: a box to tick before each document */
    .doc-group, .doc-group + .doc-group { margin-top: 8pt; padding: 8pt 10pt; break-inside: auto; page-break-inside: auto; }
    .doc-list { gap: 4pt; margin-top: 6pt; }
    .doc-list li { padding-left: 18pt; }
    .doc-list li::before, .doc-list .doc-list li::before { left: 0; top: .15em; width: 9pt; height: 9pt; border: .75pt solid #000; border-radius: 1.5pt;
        background: none !important; box-shadow: none !important; }

    /* the foot: how to reach us and who we are, in small black words */
    .pfoot { margin-top: 16pt; padding: 0; background: none !important; border: 0 !important; border-top: .75pt solid #000 !important; border-image: none !important;
        color: #000; font-size: 9pt; break-inside: avoid; page-break-inside: avoid; }
    .pfoot-cols { display: block !important; padding: 8pt 0 0; }
    .pfoot h2 { display: none; }
    .pfoot ul { display: flex; flex-wrap: wrap; gap: 2pt 14pt; }
    .pfoot li a, .pfoot li span, .pfoot li > span:not(.confirm), .pfoot-bottom a { display: inline; min-height: 0; padding: 0; color: #000 !important; }
    .pfoot .icon { display: none; }
    .pfoot-bottom { display: block; padding: 6pt 0 0; border: 0; color: #000; font-size: 8.5pt; }
    .pfoot-bottom p + p { margin-top: 2pt; }
}