/* The site's layout, on barnegar's web core. Every size, radius, space and type step is barnegar's, and every colour a
   token, barnegar's or the company's face in face-bardin.css: this file lays the parts of a page out and draws the
   brandbook's graphic system (the glows, the rings, the grid, the heading bar, the mountain ridge) with those tokens.
   Logical properties only, so a right-to-left page moves nothing by hand. */

/* ---------------------------------------------------------------- type: IRANYekanX for Persian and Arabic, Inter for
   Latin, as the products' Console sets them; Regular and Bold only. Licences beside the files. */
@font-face { font-family: "IRANYekanX"; src: url("/assets/fonts/IRANYekanX/IRANYekanXVF.woff2?v=3a3a62a935a5") format("woff2");
  font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-wght-normal.woff2?v=3100e775e861") format("woff2");
  font-weight: 100 900; font-display: swap; }
:lang(fa), :lang(ar), :lang(ur) { --font: "IRANYekanX", "Inter", sans-serif; }
:lang(en), :lang(es), :lang(fr), :lang(pt), :lang(id), :lang(de), :lang(tr), :lang(ru) { --font: "Inter", sans-serif; }
/* Chinese, Japanese and Hindi are set in the reader's own system face, Inter carrying the Latin words among them;
   barnegar's Noto faces for them are tens of megabytes, which no page of this site needs. Urdu's own letters, which
   IRANYekanX lacks, fall to the system's Naskh. */
:lang(zh) { --font: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
:lang(ja) { --font: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; }
:lang(hi) { --font: "Inter", "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif; }
:lang(ur) { --font: "IRANYekanX", "Noto Naskh Arabic", "Segoe UI", sans-serif; }

/* ---------------------------------------------------------------- frame: the brand's two glows stay behind the
   page as it scrolls, cyan from the top corner and green from the far side. */
body { font: var(--t-16); background-image: radial-gradient(circle at 8% 8%, var(--glow-1), transparent 24rem),
  radial-gradient(circle at 92% 36%, var(--glow-2), transparent 26rem); background-attachment: fixed; }
img { max-inline-size: 100%; block-size: auto; }
/* A link in running text takes the brand's link colour, which is measured against each ground; never the browser's. */
a { color: var(--brand-ink); text-underline-offset: .15em; }
/* A link drawn as a button reads as a button: barnegar's button leaves an anchor's underline and colour alone. */
a.bng-btn { text-decoration: none; }
a.bng-btn:not(.bng-btn--filled):not(.bng-btn--chip) { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }
.wrap { max-inline-size: 1180px; margin-inline: auto; padding-inline: var(--s-5); }
main { display: block; }
.section { padding-block: var(--s-8); }
.section + .section { border-block-start: 1px solid var(--line); }
.section--soft { background: var(--surface-2); }
/* The body uses the page's whole width, aligned with the title above it: grids, tables and steps spread across it,
   while running text keeps a readable line. */
.prose > * + * { margin-block-start: var(--s-5); }
.prose > p, .prose > ul:not([class]), .prose > ol:not([class]), .prose > h2, .prose > h3 { max-inline-size: 760px; }
/* A section's heading keeps its own space above it, which the even spacing of the blocks would otherwise take. */
.prose > h2:not(:first-child) { margin-block-start: var(--s-8); }
.prose > h3:not(:first-child) { margin-block-start: var(--s-7); }
/* Running text is set justified, as a page of a book: paragraphs, the lead, the items of a list in the text, answers
   and notes. A short text in a narrow box (a card, a step, a fact), a heading, a table, a form and the footer keep
   their own edge, since justifying a few words across a narrow line opens wide gaps. Words are broken where the
   language allows; the last line keeps the page's own edge. */
.prose > p, .prose > ul:not([class]) > li, .prose > ol:not([class]) > li, .hero .lead, .note p,
.bng-accordion__body p, .cta p {
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3 { margin: 0; color: var(--ink); }
h2 { font: var(--t-28b); margin-block: var(--s-8) var(--s-5); }
.prose > h2:first-child, .section > .wrap > h2:first-child { margin-block-start: 0; }
h3 { font: var(--t-18b); margin-block: var(--s-6) var(--s-3); }
p { margin: 0; color: var(--ink-2); }
ul, ol { color: var(--ink-2); padding-inline-start: var(--s-6); }
li + li { margin-block-start: var(--s-3); }
strong { color: var(--ink); }
code { font-family: var(--font-mono); font-size: .9em; }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; inset-block-start: 0; z-index: 10; background: var(--header-bg);
  backdrop-filter: blur(14px); border-block-end: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s-5); min-block-size: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); text-decoration: none;
  font: var(--t-16b); white-space: nowrap; }
.brand img { inline-size: 36px; block-size: 36px; }
.brand__tech { color: var(--brand-ink); }
.site-tools .bng-btn--filled:hover { box-shadow: var(--action-glow); }
.site-header .bng-navbar { flex: 1; overflow-x: auto; }
/* A menu or tab strip scrolls sideways when it does not fit: its items keep to one line, and the cut-off last item,
   not a scrollbar, shows that there is more. */
.site-header .bng-navbar, .tabs .bng-navbar { scrollbar-width: none; }
.site-header .bng-navbar::-webkit-scrollbar, .tabs .bng-navbar::-webkit-scrollbar { display: none; }
.site-header .bng-navbar__item, .tabs .bng-navbar__item { white-space: nowrap; }
.site-tools { display: flex; align-items: center; gap: var(--s-3); }
.languages { position: relative; }
/* The language switcher is a button, framed like the other controls in the header, with a chevron that turns when its
   list is open; the list ticks the page's own language and takes two columns when it is long. */
.languages summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: var(--tap-min); padding-inline: var(--s-3) var(--s-2); border-radius: var(--r-ctl);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink);
  font: var(--t-14b); white-space: nowrap; }
.languages summary::-webkit-details-marker { display: none; }
.languages summary:hover { background: var(--surface-2); }
.languages summary:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.languages summary > .bng-ic:first-child { color: var(--brand-ink); }
.languages__turn { color: var(--ink-3); transition: transform .15s ease; }
.languages[open] summary { background: var(--surface-2); }
.languages[open] .languages__turn { transform: rotate(180deg); }
.languages ul { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--s-2)); z-index: 20;
  margin: 0; padding: var(--s-2); list-style: none; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); box-shadow: var(--shadow-2); min-inline-size: 180px; }
.languages ul:has(> li:nth-child(7)) { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr));
  column-gap: var(--s-2); }
.languages li + li { margin-block-start: 0; }
.languages a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); min-block-size: var(--tap-min); border-radius: var(--r-ctl); color: var(--ink);
  text-decoration: none; white-space: nowrap; }
.languages a:hover { background: var(--surface-2); }
.languages a[aria-current] { font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); }
.languages a .bng-ic { flex: none; }
.menu-toggle { display: none; }
@media (max-width: 860px) {
  .site-header .wrap { flex-wrap: wrap; padding-block: var(--s-3); }
  .site-header .bng-navbar { order: 3; flex-basis: 100%; }
  .site-tools .bng-btn--filled { display: none; }
  /* The language list spans the screen under the header's first row, within the gutters, rather than hanging from
     the button past the screen's edge. */
  .languages ul { position: fixed; inset-inline: var(--s-5); inset-block-start: calc(var(--s-3) + var(--tap-min) + var(--s-2));
    min-inline-size: 0; }
  .languages ul:has(> li:nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- breadcrumbs and a product's tabs */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: var(--s-5) 0 0; list-style: none;
  font: var(--t-13); color: var(--ink-3); }
.breadcrumbs li + li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--s-3); color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-2); }
.tabs { border-block-end: 1px solid var(--line); margin-block-start: var(--s-6); }
.tabs .bng-navbar { overflow-x: auto; }

/* ---------------------------------------------------------------- hero: the brand's glows, a ring at the far corner
   and a fine grid that fades downward. A photograph sits in a framed panel; a page without one carries the
   brandbook's mark, a turned tile of rings. */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--s-9) var(--s-8);
  border-block-end: 1px solid var(--line);
  background: radial-gradient(circle at 20% 20%, var(--hero-glow-1), transparent 32%),
    radial-gradient(circle at 80% 10%, var(--hero-glow-2), transparent 28%); }
.hero:not(.hero--photo) { padding-block: var(--s-8) var(--s-7); }
.hero::before { content: ""; position: absolute; z-index: -1; inline-size: 36rem; block-size: 36rem;
  inset-inline-end: -10rem; inset-block-start: -15rem; border: 1px solid var(--ring); border-radius: 50%;
  box-shadow: 0 0 0 5rem var(--ring-halo), 0 0 0 10rem var(--ring-halo); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-size: 64px 64px;
  background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.hero .wrap { display: grid; gap: var(--s-7); align-items: center; }
.hero--photo .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-8); }
/* The product's name over one of its tabs, in the brand's small capitals. */
.hero .eyebrow { font: var(--t-13b); color: var(--accent-2); text-transform: uppercase; letter-spacing: .15em;
  margin-block-end: var(--s-4); }
.hero h1 { font: var(--t-36b); font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.12; text-wrap: balance; }
.hero--home h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.06; }
/* A tighter set suits Latin and Cyrillic headings; it would pull a joined script apart. */
.hero h1:is(:lang(en), :lang(es), :lang(fr), :lang(pt), :lang(id), :lang(de), :lang(tr), :lang(ru)) { letter-spacing: -.025em; }
.hero h1 .code { display: block; color: var(--brand-ink); }
.hero h1 .expansion { display: block; font: var(--t-22b); color: var(--ink); margin-block-start: var(--s-3); letter-spacing: 0; }
.hero .lead { font: var(--t-18); color: var(--ink-2); margin-block-start: var(--s-5); max-inline-size: 760px; text-wrap: pretty; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-7); }
.hero .actions .bng-btn { transition: transform .2s ease, box-shadow .2s ease; }
.hero .actions .bng-btn:hover { transform: translateY(-2px); }
.hero .actions .bng-btn--filled:hover { box-shadow: var(--action-glow); }
.hero figure { margin: 0; padding: var(--s-4); border: 1px solid var(--frame-edge); border-radius: var(--r-sheet);
  background: radial-gradient(circle at top right, var(--frame-glow), transparent 48%), var(--frame);
  box-shadow: var(--frame-shadow); }
.hero figure img { display: block; border-radius: var(--r-card); }
@media (max-width: 860px) { .hero--photo .wrap { grid-template-columns: 1fr; } }
@media (min-width: 900px) {
  .hero:not(.hero--photo) .wrap { grid-template-columns: minmax(0, 1fr) 200px; column-gap: var(--s-9); }
  .hero:not(.hero--photo) .wrap::after { content: ""; inline-size: 200px; aspect-ratio: 1; justify-self: end;
    border: 1px solid var(--mark-edge); border-radius: 32px; background: var(--mark); box-shadow: var(--mark-shadow);
    transform: rotate(4deg); }
}

/* The brandbook's bar over a section's heading, cyan running into green in the reading direction. */
.prose > h2::before, .cta h2::before { content: ""; display: block; inline-size: 54px; block-size: 4px;
  margin-block-end: var(--s-5); border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-fill), var(--accent-2)); }
:dir(rtl) .prose > h2::before, :dir(rtl) .cta h2::before { background: linear-gradient(270deg, var(--brand-fill), var(--accent-2)); }

/* ---------------------------------------------------------------- the blocks a page is written in
   The build writes how many entries a grid, a set of steps or of facts has (data-count), so the columns divide them
   evenly: three across for three, six or nine, two for two or four, four facts in one row; on a narrower screen two,
   then one. */
.grid, .steps, .facts, .product-grid { display: grid; gap: var(--s-5); margin-block: var(--s-6); padding: 0;
  list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid > li, .steps > li, .product-grid > li { margin: 0; }
.grid[data-count="1"], .product-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.grid[data-count="2"], .grid[data-count="4"], .steps[data-count="2"], .facts[data-count="2"],
.product-grid[data-count="2"], .product-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps[data-count="4"], .facts[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .grid, .steps, .facts, .product-grid, .steps[data-count="4"], .facts[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid, .steps, .facts, .product-grid, .grid[data-count], .steps[data-count], .facts[data-count], .product-grid[data-count] {
    grid-template-columns: minmax(0, 1fr); }
}
.bng-card { block-size: 100%; box-sizing: border-box; }
/* A card is lit from its near corner and carries a ring at the far one, the brandbook's circle; a product's card, which
   leads somewhere, rises under the pointer. */
.grid .bng-card, .product-grid .bng-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sheet);
  background: linear-gradient(145deg, var(--card-highlight), transparent 55%), var(--surface); box-shadow: var(--card-shadow); }
.grid .bng-card::before, .product-grid .bng-card::before { content: ""; position: absolute; inset-inline-end: -44px;
  inset-block-start: -44px; inline-size: 110px; block-size: 110px; border: 1px solid var(--card-ring); border-radius: 50%;
  pointer-events: none; }
.bng-card__body a { white-space: nowrap; }  /* a product's name in a card never breaks across lines */
.product-grid .bng-card { transition: transform .2s ease, border-color .2s ease; }
.product-grid .bng-card:hover { transform: translateY(-4px); border-color: var(--brand-fill); }
.bng-card__title .bng-ic, .tile .bng-ic { inline-size: 24px; block-size: 24px; color: var(--brand-ink); }
.steps { counter-reset: step; }
.steps > li { counter-increment: step; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-sheet);
  background: linear-gradient(145deg, var(--card-highlight), transparent 55%), var(--surface); box-shadow: var(--card-shadow); }
/* Each step's number in a cyan tile, as the brand numbers a sequence: 01, 02; in the page's own digits where it has them. */
.steps > li::before { content: counter(step, decimal-leading-zero); display: inline-grid; place-items: center;
  inline-size: 34px; block-size: 34px; border-radius: var(--r-ctl); background: var(--brand-fill); color: var(--on-brand);
  font: var(--t-13b); margin-block-end: var(--s-4); }
.steps > li:is(:lang(fa), :lang(ur))::before { content: counter(step, persian); }
.steps > li:lang(ar)::before { content: counter(step, arabic-indic); }
.steps h3 { margin-block-start: 0; }
.facts div { padding-inline-start: var(--s-4); border-inline-start: 3px solid var(--brand-fill); }
.facts dt { font: var(--t-22b); color: var(--ink); }
.facts dd { margin: var(--s-2) 0 0; color: var(--ink-2); }
/* A photograph in the body: framed like the hero's, at the width of the running text, its caption under it. */
.prose > figure.photo { margin: var(--s-6) 0 0; max-inline-size: 960px; }
figure.photo img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--frame-edge);
  border-radius: var(--r-sheet); box-shadow: var(--frame-shadow); }
figure.photo figcaption { margin-block-start: var(--s-3); font: var(--t-14); color: var(--ink-3); text-align: center; }
.note { margin-block: var(--s-6); padding: var(--s-5); background: var(--brand-soft); border-radius: var(--r-card);
  border-inline-start: 4px solid var(--brand-fill); }
.note p { color: var(--ink); }
.bng-accordion { margin-block: var(--s-5); max-inline-size: 900px; }
.bng-table-wrap { margin-block: var(--s-5); max-inline-size: 960px; }
/* A table on a page is read, not worked in: it takes the page's text size, not an application's dense one, and sits
   on a card like the page's other blocks, its heading row tinted and in the text's own colour. */
.prose .bng-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sheet);
  box-shadow: var(--card-shadow); }
.prose .bng-table { font: var(--t-16); }
.prose .bng-table th { font: var(--t-16b); color: var(--ink); background: var(--surface-2); }
.prose .bng-table tbody tr:last-child td { border-block-end: 0; }
.prose .bng-table th, .prose .bng-table td { padding-block: var(--s-4); padding-inline: var(--s-4); }

/* ---------------------------------------------------------------- products and downloads the build lists */
.product-group { margin-block: var(--s-7) 0; }
.product-group a { color: var(--ink); text-decoration: none; }
.product-group a:hover { color: var(--brand-ink); text-decoration: underline; }
.product-grid .code { font: var(--t-22b); color: var(--brand-ink); }
.downloads { margin-block: var(--s-5); padding: 0; list-style: none; display: grid; gap: var(--s-4); }
.downloads > li { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.downloads h3 { margin: 0; }
.downloads p { font: var(--t-14); }
.downloads p.for { margin-block-start: var(--s-2); }
.downloads .files { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------------------------------------------------------------- the band that closes a page, washed in the brand's
   two colours, and the footer under the brandbook's mountain ridge. */
.cta { padding-block: var(--s-8); background: var(--wash), var(--surface-2); color: var(--ink);
  border-block-start: 1px solid var(--line); }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-7); align-items: center; }
.cta h2 { color: var(--ink); margin-block-start: 0; }
.cta p { color: var(--ink-2); margin-block-start: var(--s-3); max-inline-size: 640px; }
.cta .bng-btn { transition: transform .2s ease, box-shadow .2s ease; }
.cta .bng-btn:hover { transform: translateY(-2px); box-shadow: var(--action-glow); }
.cta h2, .cta p { grid-column: 1; }
.cta .actions { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 860px) {
  .cta .wrap { grid-template-columns: minmax(0, 1fr); }
  .cta .actions { grid-column: 1; grid-row: auto; margin-block-start: var(--s-6); }
}
.site-footer { position: relative; padding-block: var(--s-8) var(--s-7); background: var(--surface-2);
  border-block-start: 1px solid var(--line); font: var(--t-14); }
.site-footer::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 22px;
  background-color: var(--ridge); pointer-events: none;
  -webkit-mask: var(--pattern-mountain-mask) repeat-x 0 0 / 120px 22px; mask: var(--pattern-mountain-mask) repeat-x 0 0 / 120px 22px; }
/* One column for each family of products, one for the products of no family, then the company's pages and the legal
   ones; two columns on a narrow screen. */
.site-footer .columns { display: grid; gap: var(--s-7) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 620px) { .site-footer .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-footer h2 a { color: var(--ink); }
.site-footer h2 { font: var(--t-14b); margin: 0 0 var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-block-start: var(--s-2); }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--brand-ink); text-decoration: underline; }
.site-footer .legal { margin-block-start: var(--s-7); color: var(--ink-3); font: var(--t-13); }

/* ---------------------------------------------------------------- print: the page on paper, as barnegar's print rules
   say; what only works on a screen is left out. */
@media print {
  .site-header, .tabs, .site-tools, .cta .actions, .site-footer .columns { display: none; }
  .section { padding-block: var(--s-6); }
  body { background-image: none; }
  .hero::before, .hero::after, .hero .wrap::after, .bng-card::before, .site-footer::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .actions .bng-btn, .cta .bng-btn, .product-grid .bng-card { transition: none; }
  .hero .actions .bng-btn:hover, .cta .bng-btn:hover, .product-grid .bng-card:hover { transform: none; }
}

/* The contact form's trap for robots: out of sight and out of the tab order, but never display: none, which robots
   learn to skip. */
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; }

/* The error pages: the same message in every published language; the first in full, the others in a compact grid. */
.error-page main { padding-block: var(--s-8); }
.error-page h1 { display: flex; align-items: center; gap: var(--s-4); }
.error-languages { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4);
  margin-block-start: var(--s-6); }
.error-languages section { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); }
.error-languages h2 { margin: 0 0 var(--s-2); font: var(--t-16b); }
.error-languages p { margin: 0 0 var(--s-3); font: var(--t-14); color: var(--ink-2); }
.error-languages p:last-child { margin-block-end: 0; }
.error-languages section:not(:first-child) .bng-btn { min-block-size: 0; padding: 0; background: none; box-shadow: none;
  color: var(--brand-ink); font: var(--t-14b); text-decoration: underline; }
.error-languages section:first-child { grid-column: 1 / -1; padding: var(--s-6); }
.error-languages section:first-child h2 { font: var(--t-28b); margin-block-end: var(--s-3); }
.error-languages section:first-child p { font: var(--t-16); }

/* The contact form keeps a form's width, however wide the page; on a wide screen the other ways to reach us stand
   beside it instead of under it. The contact page's body is: its heading, the form, the form's answer, then the
   other ways' heading, their table and the office line. */
.contact-form, .form-success { max-inline-size: 640px; }
@media (min-width: 1000px) {
  .prose:has(> .contact-form) { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
    column-gap: var(--s-9); align-items: start; }
  .prose:has(> .contact-form) > * { margin-block-start: 0; }
  .prose:has(> .contact-form) > :nth-child(1) { grid-area: 1 / 1; }
  .prose:has(> .contact-form) > :nth-child(2), .prose:has(> .contact-form) > :nth-child(3) { grid-column: 1; grid-row: 2 / span 3; }
  .prose:has(> .contact-form) > :nth-child(4) { grid-area: 1 / 2; }
  .prose:has(> .contact-form) > :nth-child(5) { grid-area: 2 / 2; }
  .prose:has(> .contact-form) > :nth-child(6) { grid-area: 3 / 2; margin-block-start: var(--s-5); }
}