/* ========================================================================== Ilastar — component layer. Every value here comes from styles/tokens/*.css. The reference design (reference/kit/*.html) is authored with inline React styles; this file is the extraction of those styles into flat, prefixed classes, following the naming plan in design-spec.md. Contents 1. Page primitives .il-wrap .il-section 2. Layout grids .il-split .il-grid 3. Type roles .il-h1 .il-h2 .il-h3 .il-p .il-copy 4. Core .il-btn .il-arrow .il-overline .il-badge .il-tile 5. Surfaces .il-card .il-photo .ds-floatbadge 6. Content blocks .il-bullets .il-defgrid .il-steprow .il-pullquote .il-accordion .il-statbar .il-servicecard 7. Headers and bands .il-hero .il-heading .il-band 8. Forms .il-field .il-control .il-check .il-formcard .il-steprail 9. Legal page layout .il-legal 10. Utility bar .il-utility 11. Nav .il-nav 12. Footer .il-footer 13. Modifiers .il-w-* .il-text-* .il-mt-* 14. Responsive 1180 / 992 / 900 / 560 ========================================================================== */ [hidden] { display: none !important; } /* The icon sprite sits at the top of every . It must stay in the layout tree (display:none can stop resolving), just take up no room. */ .il-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .il-icon { display: block; flex: 0 0 auto; } .il-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--navy-800); color: var(--white); font-weight: var(--fw-semibold); border-radius: 0 0 var(--radius-sm) 0; } .il-skip:focus { left: 0; text-decoration: none; color: var(--white); } .il-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 1. Page primitives ========================================================================== */ .il-wrap { max-width: var(--page-max); margin: 0 auto; } /* Grid and flex children default to min-width:auto, which stops them shrinking below their widest unbreakable child — a long button label is enough to push a whole column past the viewport on a phone. */ .il-split > *, .il-grid > *, .il-defgrid > *, .il-bullets > *, .il-legal > * { min-width: 0; } /* Full-width band + centred container. Sections alternate white / #F5F7FA, with navy reserved for hero, one proof band and the closing CTA. */ .il-section { padding: var(--section-y-sm) var(--page-pad); background: var(--surface); color: var(--text-body); } .il-section--sm { padding-top: var(--sp-14); padding-bottom: var(--sp-14); } .il-section--lg { padding-top: var(--section-y); padding-bottom: var(--section-y); } .il-section--alt { background: var(--surface-alt); } .il-section--tint { background: var(--surface-tint); } .il-section--dark { background: var(--surface-dark); color: var(--text-on-dark); } .il-section--deep { background: var(--dark-deep); color: var(--text-on-dark); } .il-section--rule { border-top: var(--border); } .il-section--dark.il-section--rule, .il-section--deep.il-section--rule { border-top: var(--border-dark); } /* Compact dark page header (no photo) — Parts.jsx PageHeader. */ .il-section--header { padding-top: 76px; padding-bottom: 72px; } /* ========================================================================== 2. Layout grids ========================================================================== */ /* Two-column photo/text pair — 48px gutter, per design-spec.md. */ .il-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: start; } .il-split--center { align-items: center; } .il-split--end { align-items: flex-end; } /* Alternating chapters keep the text first in the DOM and flip it visually, so the reading order stays text-then-photo at every width. */ .il-split--flip > :first-child { order: 2; } .il-split--flip > :last-child { order: 1; } .il-split--9-11 { grid-template-columns: .9fr 1.1fr; } .il-split--8-12 { grid-template-columns: .8fr 1.2fr; } .il-split--75-125 { grid-template-columns: .75fr 1.25fr; gap: var(--sp-16); } .il-split--145-1 { grid-template-columns: 1.45fr 1fr; gap: var(--sp-10); } .il-split--1-105 { grid-template-columns: 1fr 1.05fr; } .il-split--42-1 { grid-template-columns: .42fr 1fr; gap: var(--sp-14); } /* Card grids — --gutter, per design-spec.md. */ .il-grid { display: grid; gap: var(--gutter); } .il-grid--2 { grid-template-columns: 1fr 1fr; } .il-grid--3 { grid-template-columns: repeat(3, 1fr); } .il-grid--tight { gap: var(--sp-3); } .il-grid--wide { gap: 44px; } .il-span-2 { grid-column: span 2; } /* "Choose this when" card: heading, intro, checklist, footer pinned low, link. */ .il-choice { display: flex; flex-direction: column; gap: var(--sp-4); } .il-choice--20 { gap: var(--sp-5); } /* Hairline list grids: rows butt together, columns are spaced. */ .il-grid--rows2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; } .il-grid--rows3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--sp-10); } .il-stack { display: flex; flex-direction: column; gap: var(--sp-4); } .il-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; } .il-row--lg { gap: 14px; } .il-row--wide { gap: 26px; } /* ========================================================================== 3. Type roles ========================================================================== */ .il-h1 { font-family: var(--font-core); font-weight: var(--fw-black); font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--tracking-head); color: var(--text-strong); max-width: 24ch; } .il-h1--ondark { color: var(--text-on-dark); } .il-h2 { font-family: var(--font-core); font-weight: var(--fw-black); font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--tracking-head); color: var(--text-strong); max-width: 24ch; } .il-h2--30 { font-size: 30px; } .il-h2--28 { font-size: 28px; } .il-h2--26 { font-size: 26px; } .il-h3 { font-family: var(--font-core); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -.01em; color: var(--text-strong); } .il-h3--lg { font-size: var(--fs-h3); } .il-h3--26 { font-size: 26px; } .il-p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); max-width: 62ch; } .il-p--sm { font-size: var(--fs-body-sm); } .il-p--lead { font-size: var(--fs-lead); } .il-p--strong { font-weight: var(--fw-medium); color: var(--ink); } .il-p--meta { font-size: var(--fs-meta); line-height: 1.5; color: var(--grey-400); } .il-h2--ondark, .il-h3--ondark { color: var(--text-on-dark); } .il-p--ondark { color: var(--text-on-dark-muted); } .il-p--ondark.il-p--strong { color: var(--text-on-dark); } /* An overline sits 18px above the heading it introduces. :where() keeps this at zero added specificity so an explicit .il-mt-* on the heading still wins, and it deliberately matches only .il-h1/.il-h2 — .il-hero__title and .il-band__title carry their own, larger offsets. */ :where(.il-overline) + .il-h1, :where(.il-overline) + .il-h2 { margin-top: 18px; } /* Stacked paragraphs — Parts.jsx Copy. */ .il-copy { display: flex; flex-direction: column; gap: var(--sp-4); } .il-copy--tight { gap: 14px; } /* ========================================================================== 4. Core ========================================================================== */ /* Primary interactive control. Navy fill on light, mint fill on navy — mint is never a fill behind white text. Every CTA carries a trailing arrow. */ .il-btn { display: inline-flex; align-items: center; gap: 10px; height: var(--control-h); padding: 0 22px; font-family: var(--font-core); font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-body); white-space: nowrap; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-control); background: var(--navy-800); color: var(--white); border-color: var(--navy-800); } .il-btn:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); text-decoration: none; } /* js/site.js swaps this text while a form is submitting. No styling of its own — it exists so the script never has to guess which span holds the label. */ .il-btn__label { display: inline; } .il-btn__icon { transition: transform var(--dur) var(--ease); } .il-btn:hover .il-btn__icon { transform: translateX(var(--arrow-shift)); } .il-btn--sm { height: var(--control-h-sm); padding: 0 var(--sp-4); font-size: 15px; } .il-btn--full { display: flex; width: 100%; justify-content: center; } .il-btn--inverse { background: var(--accent); color: var(--navy-800); border-color: var(--accent); } .il-btn--inverse:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--navy-800); } .il-btn--secondary { background: var(--white); color: var(--navy-800); border-color: var(--navy-800); } .il-btn--secondary:hover { background: var(--surface-alt); border-color: var(--navy-800); color: var(--navy-800); } .il-btn--outline-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); } .il-btn--outline-dark:hover { background: rgba(255,255,255,.08); border-color: var(--white); color: var(--white); } .il-btn--ghost { background: transparent; color: var(--text-accent); border-color: transparent; padding: 0; } .il-btn--ghost:hover { background: transparent; color: var(--accent-press); } .il-btn:disabled, .il-btn[aria-disabled="true"] { background: var(--surface-alt); color: var(--disabled); border-color: var(--line); cursor: not-allowed; } .il-btn:disabled .il-btn__icon { transform: none; } /* Inline text link with the house arrow. --text-accent on light, never raw mint. */ .il-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-core); font-weight: var(--fw-semibold); color: var(--text-accent); text-decoration: none; transition: color var(--dur) var(--ease); } .il-arrow:hover { color: var(--accent-press); text-decoration: none; } .il-arrow__text { border-bottom: 1px solid transparent; padding-bottom: 1px; } .il-arrow:hover .il-arrow__text { border-bottom-color: currentColor; } .il-arrow__icon { transition: transform var(--dur) var(--ease); } .il-arrow:hover .il-arrow__icon { transform: translateX(var(--arrow-shift)); } .il-arrow--sm { font-size: 15px; } .il-arrow--xs { font-size: 14px; } .il-arrow--ondark { color: var(--accent); } .il-arrow--ondark:hover { color: var(--accent); } .il-arrow--ondark:hover .il-arrow__text { border-bottom-color: var(--accent); } /* Condensed uppercase eyebrow with a mint dash. Sits above every H1/H2. */ .il-overline { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); font-weight: var(--fw-semibold); font-size: var(--fs-overline); line-height: 1.2; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-accent); } .il-overline::before { content: ""; width: 28px; height: 2px; background: var(--accent); flex: 0 0 auto; } .il-overline--nodash::before { display: none; } .il-overline--ondark { color: var(--accent); } .il-overline--muted { color: var(--text-muted); } .il-overline--onmuted { color: var(--text-on-dark-muted); } /* Small condensed-uppercase chip. Width is content + padding, never full-width. */ .il-badge { display: inline-flex; align-items: center; align-self: flex-start; width: fit-content; gap: var(--sp-2); padding: 5px 10px 4px; border: 1px solid; border-radius: var(--radius-sm); font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); font-weight: var(--fw-semibold); font-size: 12px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent-press); border-color: var(--accent-soft); } .il-badge--mint { background: var(--accent); color: var(--navy-800); border-color: var(--accent); } .il-badge--navy { background: var(--navy-800); color: var(--white); border-color: var(--navy-800); } .il-badge--outline { background: transparent; color: var(--navy-800); border-color: var(--line-strong); } .il-badge--outline-dark { background: transparent; color: var(--white); border-color: var(--line-on-dark); } /* The system's only decorative colour block. */ .il-tile { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--accent); color: var(--navy-800); } .il-tile--46 { width: 46px; height: 46px; } .il-tile--44 { width: 44px; height: 44px; } .il-tile--soft { background: var(--accent-soft); color: var(--accent-press); } .il-tile--navy { background: var(--navy-800); color: var(--accent); } .il-tile--ondark { background: rgba(4,221,181,.14); color: var(--accent); } /* ========================================================================== 5. Surfaces ========================================================================== */ /* Cards are flat at rest — a card with a resting shadow is a bug. */ .il-card { background: var(--surface-card); border: var(--border); border-radius: var(--radius); padding: var(--pad-card); color: var(--text-body); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .il-card--lg { padding: var(--pad-card-lg); } .il-card--flush { padding: 0; overflow: hidden; } .il-card--stack { display: flex; flex-direction: column; gap: 18px; } .il-card--alt { background: var(--surface-alt); } .il-card--tint { background: var(--surface-tint); border-color: #CDF2E9; } .il-card--dark { background: var(--navy-700); border-color: var(--line-on-dark); color: var(--text-on-dark); } .il-card--interactive:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line-strong); transform: translateY(-2px); } .il-card--interactive:focus-within { box-shadow: var(--shadow-card-hover); border-color: var(--line-strong); } /* Photo frame. The saturate(.82) filter plus the sat=-28 URL parameter is what keeps mint the only saturated colour on the page. Keep both. */ .il-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-photo); border: var(--border); background: #E9EDF2; } .il-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.02); } .il-photo--16x9 { aspect-ratio: 16 / 9; } .il-photo--16x10 { aspect-ratio: 16 / 10; } .il-photo--3x4 { aspect-ratio: 3 / 4; } .il-photo--4x5 { aspect-ratio: 4 / 5; } /* Photo sitting flush at the top of a card: no radius, hairline divider below. */ .il-photo--flat { border-radius: 0; border: none; border-bottom: var(--border); } .il-photo__scrim { position: absolute; inset: 0; background: var(--scrim-dark); } /* Navy block overlapping a photo corner. tokens/responsive.css drops this out of absolute positioning below 900px — keep the class name. */ .ds-floatbadge { position: absolute; left: -20px; bottom: -14px; max-width: 220px; padding: var(--sp-6) 26px 22px; min-width: 196px; background: var(--navy-800); color: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .ds-floatbadge__value { font-family: var(--font-num); font-weight: var(--fw-black); font-size: 44px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--accent); } .ds-floatbadge__label { margin-top: 10px; font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); font-weight: var(--fw-semibold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--white); } .ds-floatbadge__note { margin-top: var(--sp-2); font-size: var(--fs-meta); line-height: 1.4; color: var(--text-on-dark-muted); } .il-photo-wrap { position: relative; padding-bottom: 10px; } /* ========================================================================== 6. Content blocks ========================================================================== */ /* Hairline bullet list — Parts.jsx Bullets. */ .il-bullets { display: grid; grid-template-columns: 1fr; gap: 0 44px; list-style: none; margin: 0; padding: 0; } .il-bullets--2 { grid-template-columns: 1fr 1fr; } .il-bullets--3 { grid-template-columns: repeat(3, 1fr); gap: 0 var(--sp-10); } .il-bullets__item { display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; border-top: var(--border); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-body); } .il-bullets--ondark .il-bullets__item { border-top-color: var(--line-on-dark); color: var(--text-on-dark-muted); } .il-dash { width: 18px; height: 2px; background: var(--accent); margin-top: 10px; flex: 0 0 auto; } .il-bullets__icon { margin-top: 2px; color: var(--accent-press); } .il-bullets__icon--minus { color: var(--grey-400); } .il-bullets--ondark .il-bullets__icon { color: var(--accent); } .il-bullets--ondark .il-bullets__icon--minus { color: rgba(255,255,255,.45); } /* Mint-tinted band: the hairline picks up the tint border. */ .il-section--tint .il-bullets__item { border-top-color: #CDF2E9; } /* Grid of H3 + body definitions — Parts.jsx DefGrid. */ .il-defgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; } .il-defgrid--3 { grid-template-columns: repeat(3, 1fr); } .il-defgrid__item { display: flex; gap: 18px; align-items: flex-start; padding: 26px 0; border-top: var(--border); } .il-defgrid--ondark .il-defgrid__item { border-top-color: var(--line-on-dark); } .il-defgrid__body { margin-top: 10px; } /* Numbered process row — up to four steps inline. */ .il-steprow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .il-steprow__item { padding: 0 28px 0 0; position: relative; } .il-steprow__head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-5); } .il-steprow__num { font-weight: var(--fw-black); font-size: 17px; color: var(--text-accent); } .il-steprow__rule { flex: 1; height: var(--rule); background: var(--line); } .il-steprow__arrow { color: var(--grey-400); } .il-steprow__body { margin-top: var(--sp-3); } .il-steprow--ondark .il-steprow__num { color: var(--accent); } .il-steprow--ondark .il-steprow__rule { background: var(--line-on-dark); } .il-steprow--ondark .il-steprow__arrow { color: rgba(255,255,255,.4); } /* Pull quote with the mint left border. */ .il-pullquote { margin: 0; padding-left: 28px; border-left: 3px solid var(--accent); } .il-pullquote__text { font-family: var(--font-core); font-weight: var(--fw-medium); font-size: 21px; line-height: 1.42; letter-spacing: -.01em; color: var(--text-strong); } .il-pullquote__by { margin-top: var(--sp-5); font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); font-weight: var(--fw-semibold); font-size: var(--fs-meta); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-muted); } .il-pullquote__role { color: var(--grey-400); } .il-pullquote--ondark .il-pullquote__text { color: var(--text-on-dark); } .il-pullquote--ondark .il-pullquote__by { color: var(--accent); } .il-pullquote--ondark .il-pullquote__role { color: var(--text-on-dark-muted); } /* Objection accordion — hairline rows, mint plus/minus, one open at a time. Shipped for reuse; no page in the current build renders one. */ .il-accordion { border-top: var(--border); } .il-accordion__row { border-bottom: var(--border); } .il-accordion__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: 26px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-core); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -.01em; color: var(--text-strong); } .il-accordion__icon { color: var(--text-accent); } .il-accordion__panel { padding-bottom: 28px; max-width: var(--measure); } .il-accordion--ondark { border-top-color: var(--line-on-dark); } .il-accordion--ondark .il-accordion__row { border-bottom-color: var(--line-on-dark); } .il-accordion--ondark .il-accordion__btn { color: var(--text-on-dark); } .il-accordion--ondark .il-accordion__icon { color: var(--accent); } /* Claim bar — figures split by vertical hairlines, each with a source qualifier. Shipped for reuse; no page in the current build renders one. */ .il-statbar__row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .il-statbar__item { padding: 4px var(--sp-8); border-left: var(--border); } .il-statbar__item:first-child { border-left: none; } .il-statbar__label { margin-top: var(--sp-4); font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); font-weight: var(--fw-semibold); font-size: var(--fs-meta); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-strong); } .il-statbar__source { margin-top: var(--sp-2); font-size: var(--fs-meta); line-height: 1.45; color: var(--text-muted); } .il-statbar__note { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: var(--border); font-size: var(--fs-meta); line-height: 1.5; color: var(--text-muted); } .il-statbar--ondark .il-statbar__item { border-left-color: var(--line-on-dark); } .il-statbar--ondark .il-statbar__label { color: var(--white); } .il-statbar--ondark .il-statbar__source, .il-statbar--ondark .il-statbar__note { color: var(--text-on-dark-muted); } .il-statbar--ondark .ds-stat { color: var(--accent); } .il-statbar .ds-stat { color: var(--text-accent); } /* Service grid card — photo, corner numeral, mint tile, label, title, body, link. Shipped for reuse; no page in the current build renders one. */ .il-servicecard { display: flex; flex-direction: column; background: var(--surface-card); border: var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .il-servicecard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .il-servicecard__media { position: relative; } .il-servicecard__num { position: absolute; top: 0; right: 0; padding: 10px 14px 8px; background: var(--navy-800); color: var(--white); font-weight: var(--fw-black); font-size: 15px; letter-spacing: .02em; border-bottom-left-radius: var(--radius-sm); } .il-servicecard__body { padding: var(--pad-card); display: flex; flex-direction: column; gap: 14px; flex: 1; } .il-servicecard__head { display: flex; align-items: center; gap: 14px; } /* The 01 / 02 corner numeral inside a card. */ .il-num-sm { font-weight: var(--fw-black); font-size: 15px; } /* Card-internal hairline note pinned to the bottom. */ .il-note-foot { margin-top: auto; padding-top: var(--sp-4); border-top: var(--border); font-size: 14px; line-height: 1.5; color: var(--grey-400); } /* Hairline role/credential row — home credibility strip. */ .il-rolerow { display: flex; gap: 14px; align-items: center; padding: var(--sp-4) 0; border-top: var(--border); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); } .il-rolerow .il-dash { margin-top: 0; } /* "What owners usually try first" chips. */ .il-tilebox { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 18px; background: var(--surface-alt); border: var(--border); border-radius: var(--radius-sm); font-size: var(--fs-body-sm); line-height: 1.45; } .il-tilebox__icon { margin-top: 2px; color: var(--grey-400); } /* Hairline label/body pair used on dark bands. */ .il-deflist__item { padding: 28px 0; border-top: var(--border-dark); } .il-deflist__term { color: var(--accent); } /* ========================================================================== 7. Headers and bands ========================================================================== */ /* Dark hero over operations photography: scrim, overline, H1 hook, two CTAs. */ .il-hero { position: relative; background: var(--dark-deep); overflow: hidden; } .il-hero__media { position: absolute; inset: 0; } .il-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.03); } .il-hero__scrim { position: absolute; inset: 0; background: var(--scrim-dark); } .il-hero__inner { position: relative; max-width: var(--page-max); margin: 0 auto; padding: 88px var(--page-pad); min-height: min(64vh, 540px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .il-hero--tall .il-hero__inner { min-height: min(82vh, 700px); } .il-hero__title { margin-top: 26px; max-width: 26ch; font-family: var(--font-core); font-weight: var(--fw-black); font-size: clamp(32px, 3.1vw, 46px); line-height: var(--lh-head); letter-spacing: var(--tracking-head); color: var(--white); } .il-hero--tall .il-hero__title { font-size: clamp(34px, 3.4vw, 46px); max-width: 30ch; } .il-hero__body { margin-top: 30px; max-width: 60ch; display: flex; flex-direction: column; gap: 14px; } .il-hero--tall .il-hero__body { margin-top: 36px; max-width: 62ch; gap: var(--sp-4); } .il-hero__lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: rgba(255,255,255,.86); } .il-hero__text { font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255,255,255,.7); } .il-hero__actions { margin-top: var(--sp-10); display: flex; flex-wrap: wrap; gap: 14px; } /* Overline + H2 + optional lead, optional right-hand action slot. */ .il-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-12); margin-bottom: var(--sp-12); } .il-heading__overline { margin-bottom: 18px; } .il-heading__lead { margin-top: 18px; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-muted); max-width: 56ch; } .il-heading__action { flex: 0 0 auto; padding-bottom: 6px; } .il-heading--ondark .il-heading__lead { color: var(--text-on-dark-muted); } /* Full-bleed photo CTA band — Parts.jsx CtaBand / CtaClose, and the audit opt-in. */ .il-band { position: relative; background: var(--dark-deep); padding: 96px var(--page-pad); color: var(--text-on-dark); } .il-band--close { padding: 104px var(--page-pad); } .il-band__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) contrast(1.02); } .il-band--close .il-band__media, .il-band__media--deep { filter: saturate(.55) contrast(1.02); } .il-band__scrim { position: absolute; inset: 0; background: var(--scrim-dark); } .il-band__inner { position: relative; max-width: var(--page-max); margin: 0 auto; } .il-band__title { margin-top: var(--sp-6); max-width: 20ch; font-weight: var(--fw-black); font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--tracking-head); color: var(--white); } .il-band__lead { margin-top: 22px; max-width: 48ch; font-size: var(--fs-lead); line-height: var(--lh-body); color: rgba(255,255,255,.78); } .il-band__list { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .il-band__list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: rgba(255,255,255,.8); font-size: var(--fs-body-sm); line-height: 1.5; } .il-band__actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; } /* ========================================================================== 8. Forms ========================================================================== */ .il-field { display: flex; flex-direction: column; gap: var(--sp-2); } .il-field--wide { grid-column: span 2; } .il-label { font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); font-weight: var(--fw-semibold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .il-label__req { color: var(--accent-deep); } .il-hint { font-size: var(--fs-meta); line-height: 1.45; color: var(--grey-400); } .il-error { font-size: var(--fs-meta); line-height: 1.45; color: var(--risk); } .il-field--ondark .il-label, .il-field--ondark .il-hint { color: var(--text-on-dark-muted); } /* Shared control style: hairline box, navy focus border plus the mint focus ring. */ .il-control { width: 100%; height: var(--control-h); padding: 0 14px; font-family: var(--font-core); font-size: 16px; color: var(--text-body); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: none; transition: var(--transition-control), box-shadow var(--dur) var(--ease); } .il-control:focus, .il-control:focus-visible { border-color: var(--navy-800); box-shadow: var(--focus-ring); } .il-control[aria-invalid="true"] { border-color: var(--risk); } textarea.il-control { height: auto; padding: 12px 14px; line-height: var(--lh-body); resize: vertical; } .il-select { position: relative; display: block; } .il-select select { appearance: none; -webkit-appearance: none; padding-right: 42px; } .il-select__icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--grey-600); } /* Square checkbox — mint fill with a navy tick when checked. */ .il-check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; } .il-check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; } .il-check__box { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--line-strong); transition: var(--transition-control); color: var(--navy-800); } .il-check__box svg { opacity: 0; } .il-check input:checked + .il-check__box { background: var(--accent); border-color: var(--accent); } .il-check input:checked + .il-check__box svg { opacity: 1; } .il-check input:focus-visible + .il-check__box { box-shadow: var(--focus-ring); } .il-check__label { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--text-muted); } /* The white qualification card that sits over the full-bleed CTA photo. */ .il-formcard { background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--pad-card-lg); color: var(--text-body); } .il-formcard__title { margin-top: var(--sp-4); font-family: var(--font-core); font-weight: var(--fw-black); font-size: 26px; line-height: 1.2; letter-spacing: -.02em; color: var(--text-strong); } .il-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; } .il-formgrid--20 { gap: var(--sp-5); margin-top: 0; max-width: 760px; } .il-formstack { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 760px; } .il-formfoot { margin-top: 22px; display: flex; flex-direction: column; gap: var(--sp-5); } /* Numbered step rail with a mint progress line. */ .il-steprail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; } .il-steprail > li { display: flex; } .il-steprail__btn { flex: 1; } .il-steprail__btn { text-align: left; background: none; border: none; padding: 0 0 var(--sp-4); border-top: 3px solid var(--line-strong); cursor: default; font-family: var(--font-core); color: inherit; } .il-steprail__btn[data-state="done"], .il-steprail__btn[data-state="now"] { border-top-color: var(--accent); } .il-steprail__btn[data-state="done"] { cursor: pointer; } .il-steprail__head { margin-top: 14px; display: flex; align-items: center; gap: 10px; } .il-steprail__num { font-weight: var(--fw-black); font-size: var(--fs-meta); color: var(--grey-400); } .il-steprail__btn[data-state="now"] .il-steprail__num { color: var(--text-accent); } .il-steprail__btn[data-state="done"] .il-steprail__num { color: var(--navy-800); } .il-steprail__label { font-weight: var(--fw-bold); font-size: 15px; color: var(--text-muted); } .il-steprail__btn[data-state="now"] .il-steprail__label, .il-steprail__btn[data-state="done"] .il-steprail__label { color: var(--text-strong); } .il-steprail__note { margin-top: 6px; font-size: var(--fs-meta); line-height: 1.4; color: var(--grey-400); } .il-form { margin-top: 44px; } .il-form__fieldset { border: none; margin: 0; padding: 0; min-width: 0; } .il-form__nav { margin-top: 36px; display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; } .il-form__hint { font-size: 14px; color: var(--grey-400); } /* Honeypot — off-screen, never focusable, never announced. */ .il-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Cloudflare Turnstile. Reserve the widget's height so nothing shifts when it loads — the flexible size renders at 65px. */ .il-turnstile { min-height: 65px; } /* ========================================================================== 9. Legal page layout ========================================================================== */ .il-legal { display: grid; grid-template-columns: .42fr 1fr; gap: var(--sp-14); align-items: start; } .il-legal__aside { position: sticky; top: 96px; } .il-legal__updated { margin-top: 10px; font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); } .il-legal__toc { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; } .il-legal__toc li { border-top: var(--border); padding: 11px 0; } .il-legal__toc a { font-size: 14px; line-height: 1.4; color: var(--text-muted); text-decoration: none; } .il-legal__toc a:hover { color: var(--accent-press); } .il-legal__links { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .il-legal__body { max-width: 74ch; } .il-legal__section { padding-top: var(--sp-10); } .il-legal__section:first-child { padding-top: 0; } .il-legal__prose { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; } .il-legal__prose p { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-muted); } .il-legal__defs { display: flex; flex-direction: column; } .il-legal__def { border-top: var(--border); padding: 14px 0; font-size: var(--fs-body-sm); } .il-legal__def dt { display: inline; font-weight: var(--fw-bold); } .il-legal__def dd { display: inline; margin: 0; color: var(--text-muted); } .il-legal__note { margin-top: 4px; padding: 22px; } .il-legal__note p { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ink); } /* ========================================================================== 10. Utility bar ========================================================================== */ .ds-utility { background: var(--dark-deep); height: var(--utilitybar-h); } .ds-utility-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); } .il-utility__left { display: flex; align-items: center; gap: var(--sp-6); } .il-utility__link { display: inline-flex; align-items: center; gap: var(--sp-2); color: rgba(255,255,255,.82); font-size: var(--fs-meta); text-decoration: none; transition: color var(--dur) var(--ease); } .il-utility__link:hover { color: var(--accent); text-decoration: none; } .ds-utility-note { font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); font-weight: var(--fw-semibold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); } .ds-utility-cta { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); font-weight: var(--fw-semibold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; } .ds-utility-cta:hover { color: var(--accent); text-decoration: none; } .ds-utility-cta svg { transition: transform var(--dur) var(--ease); } .ds-utility-cta:hover svg { transform: translateX(var(--arrow-shift)); } /* ========================================================================== 11. Nav ========================================================================== */ .ds-nav { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: var(--border); } .il-nav__inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); } .il-nav__logo { display: flex; align-items: center; } .il-nav__logo img { height: 26px; width: auto; } .ds-nav-links { display: flex; align-items: center; gap: 34px; margin-left: auto; } .il-nav__item { position: relative; } .il-nav__group { display: flex; align-items: center; gap: 5px; } .il-nav__link { display: flex; align-items: center; gap: 6px; font-family: var(--font-core); font-size: 16px; font-weight: var(--fw-semibold); text-decoration: none; padding-bottom: 3px; color: var(--text-muted); border-bottom: 2px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .il-nav__link:hover { color: var(--navy-800); text-decoration: none; } .il-nav__link[aria-current="page"], .il-nav__link.is-active { color: var(--navy-800); border-bottom-color: var(--accent); } /* A parent keeps the mint underline while one of its children is the current page. Mirrors the PARENTS map in reference/kit/Parts.jsx.txt. */ body[data-page="review"] .il-nav__link[data-id="services"], body[data-page="management"] .il-nav__link[data-id="services"], body[data-page="carriers"] .il-nav__link[data-id="who"], body[data-page="brokerages"] .il-nav__link[data-id="who"] { color: var(--navy-800); border-bottom-color: var(--accent); } body[data-page="review"] .il-nav__link[data-id="services"] ~ .il-nav__toggle, body[data-page="management"] .il-nav__link[data-id="services"] ~ .il-nav__toggle, body[data-page="carriers"] .il-nav__link[data-id="who"] ~ .il-nav__toggle, body[data-page="brokerages"] .il-nav__link[data-id="who"] ~ .il-nav__toggle { color: var(--navy-800); } .il-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: var(--grey-400); transition: color var(--dur) var(--ease); } .il-nav__toggle svg { transition: transform var(--dur) var(--ease); } .il-nav__item:hover .il-nav__toggle, .il-nav__toggle[aria-expanded="true"] { color: var(--navy-800); } .il-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .il-nav__item--active .il-nav__toggle { color: var(--navy-800); } /* visibility flips instantly on open and is delayed only on close. If it were transitioned in both directions the panel would still be visibility:hidden at the moment the keyboard handler tries to focus its first link — and an element that is not visible cannot take focus. */ .il-nav__drop { position: absolute; top: 100%; left: -18px; padding-top: var(--sp-3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); } .il-nav__item:hover .il-nav__drop, .il-nav__drop.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s; } .il-nav__panel { background: var(--white); border: var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--sp-2) 0; min-width: 268px; } .il-nav__droplink { display: block; padding: 13px 18px; font-family: var(--font-core); font-size: 15px; font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; color: var(--text-muted); background: transparent; border-left: 2px solid transparent; transition: var(--transition-control); } .il-nav__droplink:hover { color: var(--navy-800); background: var(--surface-alt); text-decoration: none; } .il-nav__droplink[aria-current="page"] { color: var(--navy-800); background: var(--surface-alt); border-left-color: var(--accent); } .ds-nav-cta { display: inline-flex; } .ds-nav-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 38px; margin-left: auto; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; color: var(--navy-800); } .ds-nav-burger .il-icon-close { display: none; } .ds-nav-burger[aria-expanded="true"] .il-icon-open { display: none; } .ds-nav-burger[aria-expanded="true"] .il-icon-close { display: block; } .ds-nav-mobile { border-top: var(--border); background: var(--white); padding: 10px var(--page-pad) 22px; max-height: 72vh; overflow-y: auto; } .il-navm__group { border-bottom: var(--border); padding: 6px 0; } .il-navm__link { display: block; padding: var(--sp-3) 0; font-family: var(--font-core); font-weight: var(--fw-bold); font-size: 17px; color: var(--text-strong); text-decoration: none; } .il-navm__link[aria-current="page"] { color: var(--text-accent); } .il-navm__child { display: block; padding: 10px 0 10px var(--sp-4); border-left: 2px solid var(--line); margin-bottom: 2px; font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; } .il-navm__child[aria-current="page"] { border-left-color: var(--accent); } .il-navm__cta { margin-top: var(--sp-5); } /* ========================================================================== 12. Footer ========================================================================== */ .ds-footer { background: var(--dark-deep); color: var(--text-on-dark); padding: 72px var(--page-pad) 0; } .ds-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--sp-10); padding-bottom: var(--sp-16); } .il-footer__logo { height: 28px; width: auto; } .il-footer__blurb { margin-top: var(--sp-6); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-on-dark-muted); max-width: 34ch; } .il-footer__entity { margin-top: 18px; font-size: var(--fs-meta); line-height: 1.5; color: rgba(255,255,255,.45); max-width: 34ch; } .il-footer__title { font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); font-weight: var(--fw-semibold); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding-bottom: 18px; margin-bottom: 18px; border-bottom: var(--border-dark); } .il-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .il-footer__link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 15px; color: var(--text-on-dark-muted); text-decoration: none; transition: color var(--dur) var(--ease); } .il-footer__link:hover { color: var(--white); text-decoration: none; } .il-footer__link svg { color: var(--accent); opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .il-footer__link:hover svg { opacity: 1; transform: translateX(2px); } .il-footer__bottom { border-top: var(--border-dark); padding: 26px 0 34px; display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; font-size: var(--fs-meta); color: rgba(255,255,255,.45); } .il-footer__tagline { font-family: var(--font-condensed); font-stretch: var(--stretch-condensed); letter-spacing: .1em; text-transform: uppercase; } /* ========================================================================== 13. Single-purpose modifiers These carry one axis each (measure, colour role, vertical rhythm) and must sit after the component rules: a component's own `margin: 0` or `max-width` reset would otherwise win on equal specificity and silently kill the modifier. ========================================================================== */ /* Line-measure modifiers. The design varies the measure per instance to control where headings and paragraphs wrap; these carry that one axis. */ .il-w-16 { max-width: 16ch; } .il-w-18 { max-width: 18ch; } .il-w-20 { max-width: 20ch; } .il-w-22 { max-width: 22ch; } .il-w-24 { max-width: 24ch; } .il-w-26 { max-width: 26ch; } .il-w-30 { max-width: 30ch; } .il-w-34 { max-width: 34ch; } .il-w-40 { max-width: 40ch; } .il-w-42 { max-width: 42ch; } .il-w-44 { max-width: 44ch; } .il-w-46 { max-width: 46ch; } .il-w-48 { max-width: 48ch; } .il-w-50 { max-width: 50ch; } .il-w-52 { max-width: 52ch; } .il-w-56 { max-width: 56ch; } .il-w-60 { max-width: 60ch; } .il-w-62 { max-width: 62ch; } .il-w-68 { max-width: var(--measure); } .il-w-70 { max-width: 70ch; } .il-w-74 { max-width: 74ch; } .il-w-none { max-width: none; } /* Colour roles. Named after the token they carry, so a colour never appears as a literal in the markup. Links at text size use --text-accent, never raw mint. */ .il-text-accent { color: var(--text-accent); } .il-text-mint { color: var(--accent); } .il-text-press { color: var(--accent-press); } .il-text-muted { color: var(--text-muted); } .il-text-ink { color: var(--ink); } .il-text-white { color: var(--text-on-dark); } .il-text-meta { color: var(--grey-400); } /* Vertical rhythm. The design sets a deliberate gap above many blocks; these carry that one axis so no page needs an inline style. */ .il-mt-4 { margin-top: var(--sp-1); } .il-mt-6 { margin-top: 6px; } .il-mt-8 { margin-top: var(--sp-2); } .il-mt-10 { margin-top: 10px; } .il-mt-12 { margin-top: var(--sp-3); } .il-mt-14 { margin-top: 14px; } .il-mt-16 { margin-top: var(--sp-4); } .il-mt-18 { margin-top: 18px; } .il-mt-20 { margin-top: var(--sp-5); } .il-mt-22 { margin-top: 22px; } .il-mt-24 { margin-top: var(--sp-6); } .il-mt-26 { margin-top: 26px; } .il-mt-28 { margin-top: 28px; } .il-mt-30 { margin-top: 30px; } .il-mt-32 { margin-top: var(--sp-8); } .il-mt-36 { margin-top: 36px; } .il-mt-40 { margin-top: var(--sp-10); } .il-mt-44 { margin-top: 44px; } .il-mt-auto { margin-top: auto; } .il-flex-1 { flex: 1; } /* ========================================================================== 14. Responsive tokens/responsive.css carries the token overrides and the ds-* class hooks. These are the structural rules the static build owns, plus the section-padding fix: responsive.css sets --sect-pad-lg/--sect-pad-md, but the sections read --section-y/--section-y-sm, so the shipped overrides never reach them. ========================================================================== */ @media (max-width: 1180px) { :root { --section-y: 96px; --section-y-sm: 72px; } .il-legal { gap: var(--sp-10); } } /* Client decision: the utility bar is desktop-only. Below 992px the strip above the nav is dropped entirely, so the sticky nav sits at the top of the page. (A deliberate departure from the reference, which keeps it at every width.) */ @media (max-width: 991.98px) { .ds-utility { display: none; } } @media (max-width: 900px) { :root { --section-y: 64px; --section-y-sm: 52px; } /* Every multi-column block becomes a single column. */ .il-split, .il-grid--2, .il-grid--3, .il-grid--rows2, .il-grid--rows3, .il-bullets--2, .il-bullets--3, .il-defgrid, .il-defgrid--3, .il-steprow, .il-formgrid, .il-formgrid--20, .il-legal, .ds-footer-grid { grid-template-columns: 1fr; } /* A `span 2` item in a one-column grid would create an implicit second column and put the layout back to two tracks. Reset the spans with the columns. */ .il-field--wide, .il-span-2 { grid-column: auto; } .il-split { gap: 28px; } .il-split--75-125, .il-split--145-1, .il-split--42-1 { gap: 28px; } .ds-footer-grid { gap: var(--sp-8); } .il-legal { gap: var(--sp-8); } .il-legal__aside { position: static; } .il-hero__inner, .il-hero--tall .il-hero__inner { min-height: auto; padding: var(--sp-16) var(--page-pad); } .il-band, .il-band--close { padding: var(--sp-16) var(--page-pad); } .il-section--header { padding-top: var(--sp-12); padding-bottom: var(--sp-12); } .il-heading { flex-direction: column; align-items: flex-start; gap: var(--sp-6); margin-bottom: var(--sp-8); } .il-heading__action { padding-bottom: 0; } .il-steprow__item { padding: 0 0 var(--sp-6) 0; } .il-steprow__arrow { display: none; } .il-formcard { padding: var(--pad-card-lg); } .il-steprail { grid-template-columns: 1fr 1fr; } .ds-floatbadge { margin-top: -18px; } .il-photo-wrap { padding-bottom: 0; } .il-nav__inner { gap: var(--sp-4); } } @media (max-width: 560px) { /* Some CTA labels are long enough that a single nowrap line does not fit a 375px screen. Let them wrap and grow rather than push the page sideways. */ .il-btn { white-space: normal; text-align: center; height: auto; min-height: var(--control-h); padding-top: 11px; padding-bottom: 11px; } .il-btn--sm { min-height: var(--control-h-sm); padding-top: 8px; padding-bottom: 8px; } .il-steprail { grid-template-columns: 1fr; } .il-band__actions, .il-form__nav { row-gap: var(--sp-3); } .il-footer__bottom { flex-direction: column; gap: var(--sp-3); } .il-pullquote { padding-left: var(--sp-5); } .il-hero__title { max-width: none; } }