/* Page composition only. All visual measurements and colours come from brand.css.
   Intrinsic wrapping and the brand's responsive grid avoid additional breakpoints. */
.brand-home { display: inline-block; flex-shrink: 0; }
.header-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-32); }
.header-links .site-nav { flex-wrap: wrap; }
.hero-composition { align-items: start; }
.hero-heading { display: flex; flex-direction: column; align-items: start; gap: var(--space-48); }
.hero-copy { padding-block-start: var(--space-8); }
.hero-title { text-wrap: balance; }
.section-intro { display: grid; grid-template-columns: var(--grid-columns); gap: var(--layout-gap); align-items: end; }
h2 { text-wrap: balance; }
.service-card { display: flex; flex-direction: column; align-items: start; gap: var(--space-24); }
.service-card p { flex-grow: 1; }
.service-card .text-link { display: inline-flex; align-items: center; min-height: var(--target-min); margin-block-start: var(--space-8); }
.product-layout { align-items: start; }
.product-details { display: flex; flex-direction: column; align-items: start; gap: var(--space-32); }
.benefit-list { padding: var(--space-0); margin: var(--space-0); list-style: none; align-self: stretch; }
.benefit-list li { border-block-start: var(--border-width) solid var(--border-subtle); padding-block: var(--space-24); color: var(--text-secondary); }
.benefit-list li:last-child { border-block-end: var(--border-width) solid var(--border-subtle); }
.steps { display: flex; flex-wrap: wrap; gap: var(--space-40); padding: var(--space-0); margin: var(--space-0); list-style: none; }
.steps li { flex: 1 1 var(--logo-width); min-inline-size: var(--space-0); border-block-start: var(--border-width) solid var(--border-subtle); padding-block-start: var(--space-32); display: flex; flex-direction: column; gap: var(--space-32); }
.step-number { display: block; }
.about-layout { gap: var(--layout-gap); align-items: start; }
.about-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-32); }
.story-symbol { display: block; inline-size: var(--space-128); block-size: auto; }
.founder-line { border-block-start: var(--border-width) solid var(--border-subtle); padding-block-start: var(--space-24); }
.contact-layout { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-48); align-items: start; }
.contact-layout > * { flex: 1 1 var(--logo-width); min-inline-size: var(--space-0); }
.contact-actions { display: flex; flex-direction: column; align-items: start; gap: var(--space-32); }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
#contact-email { user-select: text; overflow-wrap: anywhere; }
#copy-email { min-inline-size: var(--space-80); }
.footer-layout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--space-32); }
.footer-details { display: flex; flex-direction: column; gap: var(--space-8); }
.footer-details .text-link { display: inline-flex; align-items: center; min-height: var(--target-min); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.privacy-content { max-inline-size: var(--text-max); }
.skip-link { position: absolute; inset-inline-start: var(--gutter); inset-block-start: var(--space-16); transform: translateY(calc(-1 * var(--space-128))); background: var(--surface-page); z-index: 1; }
.skip-link:focus { transform: none; }
.assistive-only { position: absolute; inline-size: var(--border-width); block-size: var(--border-width); overflow: hidden; clip-path: inset(calc(var(--border-width) / 2)); white-space: nowrap; }