/* ════════════════════════════════════════════════════════════════ All Things Trust — 2026 design layer Link AFTER att.css. Only applies to pages with class="att-2026" on , so unconverted pages are untouched. Type comes from att.css (.page-h1 / .block-h2 / .block-label). Nothing here sets a font family or redefines the site type scale. ════════════════════════════════════════════════════════════════ */ .att-2026 { --a-ink:var(--ink); /* headings — site ink */ --a-body:var(--mid); /* body copy — site mid */ --a-tint:rgba(47,111,113,.04); /* callout wash — matches .story-pullquote */ --a-band:#F5F3EF; /* warm band — matches nav / .shift-section */ --a-band-teal:rgba(47,111,113,.07); --a-hairline:rgba(47,111,113,.35); --a-pad-x:80px; --a-pad-y:44px; } .att-2026 .page-h1, .att-2026 .block-h2 { color:var(--a-ink); letter-spacing:-0.015em; } .att-2026 .page-h1 em, .att-2026 .block-h2 em { font-style:normal; color:var(--teal); } .att-2026 .block-body, .att-2026 .story-body { color:var(--a-body); } /* ── Bands ─────────────────────────────────────────────
… */ .att-2026 .band { border-top:1px solid var(--rule); position:relative; } .att-2026 .band--tint { background:var(--a-band); border-top:none; } .att-2026 .band--teal { background:var(--a-band-teal); border-top:none; } .att-2026 .band--dark { background:var(--ink); border-top:none; } .att-2026 .band--dark .block-label { color:var(--gold); } .att-2026 .band--dark .block-h2 { color:#fff; } .att-2026 .band--dark .block-h2 em { color:var(--gold); } .att-2026 .band--dark .block-body { color:rgba(250,250,247,.7); } .att-2026 .band-inner { max-width:1200px; margin:0 auto; padding:var(--a-pad-y) var(--a-pad-x); } /* ── Split: label column + ruled content column ───────
…
…
*/ .att-2026 .split { display:grid; grid-template-columns:minmax(200px,3.2fr) 8.8fr; gap:0 40px; align-items:start; } .att-2026 .split--wide-aside { grid-template-columns:minmax(220px,5fr) 7fr; } .att-2026 .split__main { border-left:1px solid var(--a-hairline); padding-left:44px; max-width:70ch; } .att-2026 .split__aside .block-label { margin-bottom:14px; } .att-2026 .split__aside .block-h2 { margin-bottom:0; } .att-2026 .split__main > .block-h2 { margin-bottom:22px; } .att-2026 .split__main--wide { max-width:82ch; } /* label above the content, no rail, content spans the container (Our Story) */ .att-2026 .split--stacked { grid-template-columns:minmax(0,1fr); gap:0; } .att-2026 .split--stacked .split__main { border-left:none; padding-left:0; max-width:none; } /* Who We Are: section prose at the story's size, spanning the band. The .block-body cap in the shared base has to be lifted or the paragraphs stop short of the column. Only this section pairs band--tint with split--stacked, so the closing band is unaffected. */ .att-2026 .band--tint .split--stacked .block-body { max-width:none; font-size:1.375rem; line-height:1.65; } /* rule on the aside instead (used by "Today" on About) */ .att-2026 .split--ruled-aside .split__aside { border-right:1px solid var(--rule); padding-right:36px; } .att-2026 .split--ruled-aside .split__main { border-left:none; padding-left:0; max-width:none; } .att-2026 .block-h2--lines > span { display:block; } .att-2026 .split__aside p { font-size:1rem; line-height:1.7; color:var(--a-body); /* the aside headline carries no bottom margin, and when the split stacks this column spans the band, so the measure needs a cap of its own */ margin:14px 0 0; max-width:460px; } /* ── Beats: labelled chapters in sequence ───────────────
… */ .att-2026 .beats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 40px; align-items:start; } .att-2026 .beat { max-width:52ch; } .att-2026 .beat-label { display:block; font-family:'Space Grotesk', sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal); margin-bottom:8px; } .att-2026 .beat:nth-of-type(2) .beat-label { color:var(--gold); } .att-2026 .beat:nth-of-type(3) .beat-label { color:var(--red); } .att-2026 .beat:nth-of-type(4) .beat-label { color:var(--red); } .att-2026 .beat p { font-size:1rem; line-height:1.72; color:var(--a-body); margin:0 0 12px; } .att-2026 .beat p:last-child { margin-bottom:0; } .att-2026 .beat--wide { grid-column:1 / -1; max-width:none; } .att-2026 .beat-lead { font-weight:700; color:var(--ink); margin-bottom:8px !important; } .att-2026 .beats > .callout { grid-column:1 / -1; margin:0; } /* Narrative variant: the story runs down the page, its subheads sitting above the prose rather than in a margin, so each beat reads as an editorial passage. The callout and the three columns below it span the section's full width, so the narrative and the turn it takes are set apart by measure as well as space. */ .att-2026 .beats--narrative { grid-template-columns:minmax(0,1fr); gap:0; max-width:none; } .att-2026 .beats--narrative > * { grid-column:1; max-width:none; } .att-2026 .beats--narrative .beat { margin-top:52px; max-width:820px; } .att-2026 .beats--narrative .beat:first-child { margin-top:0; } .att-2026 .beats--narrative .beat-label { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; margin:0 0 14px; padding:0; } .att-2026 .beats--narrative .beat p { font-size:1.375rem; line-height:1.65; color:var(--a-body); margin:0 0 18px; } .att-2026 .beats--narrative .beat p:last-child { margin-bottom:0; } .att-2026 .beats--narrative > .callout { margin:58px 0 0; } /* Frustration and the callout share a row: the narrative keeps the main column, the callout becomes a side statement beside it. Same tint, rule, radius and face as the wide callout; only its proportions change. */ .att-2026 .split--stacked .split__main > .block-h2 { margin-bottom:50px; } .att-2026 .beats--narrative .story-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:0 48px; align-items:start; margin-top:52px; } .att-2026 .beats--narrative .story-row .beat { margin-top:0; max-width:none; } /* The Insight now sits inside the row, so it is the only .beat among its siblings and nth-of-type(2) no longer reaches it. Name it directly. */ .att-2026 .beats--narrative .story-row .beat-label { color:var(--gold); } /* The turn out of the chronology: three equal columns, divided by the same hairline the tile and people grids use. No boxes, no icons. */ .att-2026 .story-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:64px; padding-top:46px; border-top:1px solid var(--rule); } .att-2026 .story-col { border-left:1px solid var(--rule); padding:0 30px; } .att-2026 .story-col:first-child { border-left:none; padding-left:0; } .att-2026 .story-col:last-child { padding-right:0; } .att-2026 .story-col-head { font-family:'Space Grotesk', sans-serif; font-size:1.2rem; font-weight:700; line-height:1.35; color:var(--a-ink); margin:0 0 14px; } .att-2026 .story-col-num { color:var(--teal); } .att-2026 .story-col:nth-child(2) .story-col-num { color:var(--gold); } .att-2026 .story-col:nth-child(3) .story-col-num { color:var(--red); } .att-2026 .story-col p { font-size:1rem; line-height:1.75; color:var(--a-body); margin:0; } .att-2026 .beats--narrative > .callout--close { margin:74px 0 0; } /* ── Callout ──────────────────────────────────────────── */ .att-2026 .callout { background:var(--a-tint); border-left:4px solid var(--teal); border-radius:0 6px 6px 0; padding:22px 28px; margin:20px 0; color:var(--a-ink); font-family:'Space Grotesk', sans-serif; font-size:1.2rem; line-height:1.4; font-weight:700; } /* declared after the base callout: at equal specificity the later rule wins, and this one has to be able to clear the base margin */ .att-2026 .callout--aside { margin:0; font-size:1.15rem; line-height:1.45; padding:26px 28px; } .att-2026 .callout em { font-style:normal; color:var(--teal); } /* Concluding belief — open, no box, rule above */ .att-2026 .callout--close { background:none; border-left:none; border-radius:0; border-top:2px solid var(--teal); padding:22px 0 0; margin:26px 0 0; font-size:1.45rem; line-height:1.35; max-width:30ch; } .att-2026 .callout--close { max-width:none; } .att-2026 .band--dark .callout { background:rgba(255,255,255,.05); border-left-color:var(--gold); color:#fff; } /* ── Hero A: image bleeds off the right, fades into the page ──
+ */ .att-2026 .hero--bleed { padding-bottom:104px; } .att-2026 .hero--bleed .page-hero-inner { position:relative; z-index:1; } .att-2026 .hero-copy { max-width:500px; } .att-2026 .hero--bleed .hero-lead { max-width:440px; font-size:1.375rem; line-height:1.55; color:var(--a-body); } .att-2026 .hero-media { display:block; position:absolute; top:0; right:0; bottom:0; left:auto; width:58%; margin:0; z-index:0; -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 30%); mask-image:linear-gradient(to right, transparent 0%, #000 30%); } .att-2026 .hero-media img { width:100%; height:100%; object-fit:cover; object-position:60% 30%; display:block; } /* ── Hero B: squared split, copy on a tinted half ─────────
…
…
*/ .att-2026 .hero-split { margin-top:68px; display:grid; grid-template-columns:1fr 1fr; /* the hero sits on the page background and the tinted band below supplies the step down, the way About reads; on --a-band it ran straight into Where We Help with no change of tone and no edge */ align-items:stretch; background:var(--bg); } .att-2026 .hero-split__copy { padding:56px var(--a-pad-x) 44px; display:flex; flex-direction:column; justify-content:center; } /* the lead runs the copy column, flush with the headline above it; a 46ch cap stopped it ~100px short and left the column ragged */ .att-2026 .hero-split__copy .hero-lead { font-size:1.375rem; line-height:1.55; color:var(--a-body); max-width:none; border-left:none; padding-left:0; margin-top:16px; } .att-2026 .hero-split__media { display:block; position:relative; min-height:420px; } .att-2026 .hero-split__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* service line under a hairline rule. The three labels are flex items with explicit gaps, not one inline run, so they can never wrap mid-string into what reads as continuous text. The switch to a stack is driven by a container query on the line itself rather than a viewport breakpoint: the copy column's width does not track the viewport monotonically — the hero is a 50/50 split above 1024 and full width below it, so one column is *wider* at 768 than at 1200. A media query would have to guess at two separate ranges and would re-break whenever the split changes. 536px is the row's natural width (518px with the separators) plus a small trailing gutter. */ .att-2026 .hero-meta { container-type:inline-size; margin-top:24px; padding-top:14px; border-top:1px solid var(--rule); font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--a-body); } .att-2026 .hero-meta__list { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:0; row-gap:10px; } /* atomic while they share a line; the dot is a separator, not punctuation */ .att-2026 .hero-meta__list > span { white-space:nowrap; } .att-2026 .hero-meta__list > span + span::before { content:'·'; margin:0 12px; color:var(--rule); } /* Not enough room for one comfortable row: stack, drop the separators, and let a label break internally only if the column gets extremely narrow. */ @container (max-width:536px) { .att-2026 .hero-meta__list { flex-direction:column; align-items:flex-start; row-gap:9px; } .att-2026 .hero-meta__list > span { white-space:normal; } .att-2026 .hero-meta__list > span + span::before { content:none; } } /* ── Icon tile grid (2×2 with ruled dividers) ─────────────
… */ .att-2026 .tile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .att-2026 .tile { padding:0 0 32px 38px; border-left:1px solid var(--rule); } .att-2026 .tile:nth-child(odd) { border-left:none; padding:0 38px 32px 0; } .att-2026 .tile:nth-child(n+3) { padding-top:32px; padding-bottom:0; border-top:1px solid var(--rule); } .att-2026 .tile:nth-child(-n+2) { padding-bottom:32px; } .att-2026 .tile-icon { display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:14px; background:var(--teal); color:#fff; } .att-2026 .tile:nth-child(2) .tile-icon { background:var(--gold); color:var(--ink); } .att-2026 .tile:nth-child(3) .tile-icon { background:var(--red); } .att-2026 .tile:nth-child(4) .tile-icon { background:var(--grey); } .att-2026 .tile-icon svg { width:19px; height:19px; } .att-2026 .tile-name { font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.2rem; color:var(--a-ink); margin-bottom:9px; } .att-2026 .tile-desc { font-size:0.9rem; line-height:1.7; color:var(--a-body); margin-bottom:13px; } /* ── Numbered rows (a real sequence: 01 / 02 / 03) ────────
  1. 01 … */ .att-2026 .steps { list-style:none; margin:0; padding:0; } .att-2026 .step { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:0 24px; align-items:start; padding:28px 0; border-top:1px solid var(--rule); } .att-2026 .step:first-child { border-top:none; padding-top:0; } .att-2026 .step-num { font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.9rem; line-height:1; color:var(--teal); } .att-2026 .step:nth-child(2) .step-num { color:var(--red); } .att-2026 .step:nth-child(3) .step-num { color:var(--gold); } .att-2026 .step-body { border-left:1px solid var(--rule); padding-left:24px; } .att-2026 .step-name { font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.2rem; color:var(--a-ink); margin-bottom:8px; } .att-2026 .step-promise { font-size:1rem; line-height:1.5; color:var(--a-ink); font-weight:500; margin-bottom:5px; } .att-2026 .step-desc { font-size:0.9rem; line-height:1.58; color:var(--a-body); margin-bottom:9px; } .att-2026 .step-cadence { font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--a-body); } /* Section with a full-height image column beside the content */ .att-2026 .band--media { display:grid; grid-template-columns:1fr minmax(0,38%); align-items:stretch; } .att-2026 .band--media .band-inner { max-width:none; } /* the image column already narrows this side of the band, so the intro runs the width of the content column and squares up with the list below it rather than stopping short at the shared base's 720px cap */ .att-2026 .band--media .block-body { max-width:none; } .att-2026 .band-media { position:relative; display:block; min-height:100%; } /* The column is a narrow slice of a 16:9 frame, so cover crops it hard on the horizontal. Centred, the crop severed the forearm at the right edge. Pulling the frame left brings the arm through to the shoulder into view. How far it can go is bounded by the fingertips at the left: the slice is ~65% of the source at 1920 but only ~42% at 1440 and ~32% just above the 1100 stack, and a percentage object-position drifts rightward as the slice narrows, so the narrow half of the split range takes a gentler shift. */ .att-2026 .band-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:68% center; display:block; } /* ── People grid (four across) ───────────────────────────── */ .att-2026 .band--people .band-inner { padding-left:56px; padding-right:56px; } .att-2026 .band--people .people-grid { margin-top:56px; } .att-2026 .band--people .team-intro { font-size:1.375rem; line-height:1.6; color:var(--a-body); max-width:none; margin:0; } .att-2026 .people-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:34px; } .att-2026 .people-grid .team-card { border:none; border-left:1px solid var(--rule); padding:0 22px; display:flex; flex-direction:column; } .att-2026 .people-grid .team-card:first-child { border-left:none; padding-left:0; } .att-2026 .people-grid .team-card:last-child { padding-right:0; } /* One portrait treatment for all four: circular crop, neutral hairline, no rings. 120px with a 1px border holds the 124px outer diameter the rings occupied, so the portrait reads larger without moving anything around it. */ .att-2026 .people-grid .team-card .team-photo { width:135px; height:135px; margin:0 auto 22px; box-shadow:none; border:1px solid var(--rule); } .att-2026 .people-grid .team-body { padding:0; display:flex; flex-direction:column; flex:1; } .att-2026 .people-grid .team-name { font-size:1.2rem; color:var(--a-ink); margin-bottom:5px; } .att-2026 .people-grid .team-role { font-size:0.72rem; letter-spacing:0.14em; color:var(--teal); margin-bottom:18px; } .att-2026 .people-grid .team-bio { font-size:0.9rem; line-height:1.85; color:var(--a-body); margin-top:14px; } /* Bios collapse by default. The control is a real , so pointer and keyboard both work with no script, and nothing depends on hover. */ .att-2026 .people-grid .team-more { margin:0; } .att-2026 .people-grid .team-more__toggle { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; padding:11px 0 0; border-top:1px solid var(--rule); font-family:'Space Grotesk', sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); transition:color .2s; } .att-2026 .people-grid .team-more__toggle::-webkit-details-marker { display:none; } .att-2026 .people-grid .team-more__toggle::after { content:''; width:6px; height:6px; margin-left:auto; flex:none; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s; } .att-2026 .people-grid .team-more[open] .team-more__toggle::after { transform:translateY(1px) rotate(-135deg); } .att-2026 .people-grid .team-more__toggle:hover { color:var(--ink); } .att-2026 .people-grid .team-more__toggle:focus-visible { outline:2px solid var(--teal); outline-offset:4px; } .att-2026 .people-grid .when-open { display:none; } .att-2026 .people-grid .team-more[open] .when-closed { display:none; } .att-2026 .people-grid .team-more[open] .when-open { display:inline; } .att-2026 .people-grid .team-more[open] .team-bio { animation:bio-in .24s ease both; } @keyframes bio-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { .att-2026 .people-grid .team-more[open] .team-bio { animation:none; } } .att-2026 .people-grid .team-linkedin { font-size:0.72rem; letter-spacing:0.14em; color:var(--teal); margin-top:26px; gap:9px; } .att-2026 .people-grid .team-linkedin:hover { color:var(--ink); } .att-2026 .people-grid .team-linkedin svg { width:22px; height:22px; padding:4px; background:var(--teal); color:#fff; flex:none; } .att-2026 .people-grid .team-linkedin::after { content:'\2192'; font-size:0.85rem; } /* ── Closing CTA band ────────────────────────────────────── */ .att-2026 .closing .band-inner { display:flex; align-items:center; justify-content:flex-start; gap:36px; flex-wrap:wrap; padding:40px var(--a-pad-x); } /* The briefings band and the closing band both run headline | copy [| CTA]. They share one 30 / 45 / 25 track set and one gutter, so their copy starts on the same indent by construction. The closing band has no CTA track of its own — its button sits under its copy — so that copy spans 2 / -1. */ .att-2026 .briefings .band-inner, .att-2026 .closing--stacked .band-inner { --band-gap:36px; grid-template-columns:30fr 45fr 25fr; gap:var(--band-gap); } .att-2026 .closing--stacked .band-inner { display:grid; align-items:center; padding:var(--a-pad-y) var(--a-pad-x); } /* The copy column spans 2 / -1 because the CTA sits under the copy rather than in a track of its own. Subgrid then holds the paragraph to track 2, so it ends where the briefings paragraph above it ends, while the CTA still spans to the band's right edge. */ .att-2026 .closing--stacked .band-inner > :last-child { grid-column:2 / -1; display:grid; grid-template-columns:subgrid; column-gap:var(--band-gap); } .att-2026 .closing--stacked .block-body { grid-column:1; } .att-2026 .closing--stacked .cta-pair { grid-column:1 / -1; } /* the CTA sits at the band's right edge, its copy left — same shape as the briefings band above it, where the button already takes the last track */ .att-2026 .closing--stacked .cta-pair { justify-content:flex-end; } /* the shared base caps .block-body at 720px. On desktop this column is narrower than that anyway, but once the band stacks the cap stopped the copy short of the edge while the briefings paragraph beside it ran the full width. */ .att-2026 .closing--stacked .block-body { max-width:none; } .att-2026 .closing-h { font-family:'Space Grotesk', sans-serif; font-weight:900; font-size:clamp(1.4rem,2vw,1.8rem); line-height:1.2; color:var(--a-ink); margin-bottom:6px; } .att-2026 .band--dark .closing-h { color:#fff; } .att-2026 .closing-sub { font-size:1rem; line-height:1.6; color:var(--a-body); } .att-2026 .band--dark .closing-sub { color:rgba(250,250,247,.7); } .att-2026 .cta-pair { display:flex; gap:12px; flex-wrap:wrap; } /* ── Buttons (extend att.css) ────────────────────────────── */ .att-2026 .btn-outline { display:inline-flex; align-items:center; gap:10px; padding:13px 26px; background:#fff; border:1.5px solid var(--teal); color:var(--ink); font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; transition:background .2s, color .2s; } .att-2026 .btn-outline::after { content:'\2192'; } .att-2026 .btn-outline:hover { background:var(--teal); color:#fff; } .att-2026 .band--dark .btn-outline { background:transparent; border-color:rgba(255,255,255,.35); color:#fff; } .att-2026 .band--dark .btn-outline:hover { background:rgba(255,255,255,.1); } .att-2026 .btn-primary::after, .att-2026 .btn-secondary::after { content:'\2192'; margin-left:10px; } /* ── How We Help ────────────────────────────────────────────────── From the How We Help drop. Two of its rules are deliberately left out: the portrait-ring rules, because About removed those rings and this file is shared, and .intro-media / .steps--detail, which the page never uses. */ /* Capped, but left-aligned rather than centred. Centring put every band label and headline right of the hero copy and of the media band above 1440, since neither of those centres. Left-aligning holds them all flush at --a-pad-x. */ .att-2026.page-how-we-help .band-inner { max-width:1440px; margin-left:0; margin-right:auto; } .att-2026 .split--tiles { grid-template-columns:minmax(200px,3.9fr) 8.1fr; gap:0 96px; } /* Where We Help carries the most content of any band on the page — four tiles plus a statement column — so it gets more air than the page default. Keyed off .split--tiles, which only this section uses. */ .att-2026 .band-inner.split--tiles { padding-top:calc(var(--a-pad-y) + 20px); padding-bottom:calc(var(--a-pad-y) + 20px); } .att-2026 .split--tiles .split__aside p { margin-top:18px; } .att-2026 .tile-action { font-size:0.9rem; line-height:1.7; color:var(--teal); margin:0; } /* ── Tile disclosure ────────────────────────────────────── The teal action line sits behind a control so the grid reads as four problems first. No box, no border, no shadow: the control is set in the teal at the action line's own size, and the panel opens in place. */ .att-2026 .tile-toggle { display:inline-flex; align-items:center; gap:8px; margin:0; padding:0; border:0; background:none; text-align:left; font-family:inherit; font-size:0.9rem; line-height:1.7; font-weight:inherit; color:var(--teal); cursor:pointer; } .att-2026 .tile-toggle::after { content:'\2192'; } .att-2026 .tile-toggle[aria-expanded="true"]::after { content:'\2191'; } .att-2026 .tile-toggle:hover { text-decoration:underline; text-underline-offset:3px; } .att-2026 .tile-toggle:focus-visible { outline:2px solid var(--teal); outline-offset:4px; } /* 0fr -> 1fr animates a row of unknown height. visibility keeps the closed panel out of the tab order and the accessibility tree, and transitioning it holds it visible for the length of the collapse. */ .att-2026 .tile-reveal { display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .28s ease, opacity .2s ease, visibility .28s; } /* the gap to the control belongs to the clipped content, not to the wrapper: padding on the wrapper survives the 0fr row and leaves dead space when closed */ .att-2026 .tile-reveal__inner { min-height:0; overflow:hidden; } .att-2026 .tile-reveal .tile-action { padding-top:11px; } .att-2026 .tile-toggle[aria-expanded="true"] + .tile-reveal { grid-template-rows:1fr; opacity:1; visibility:visible; } .att-2026 .u-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } @media (prefers-reduced-motion: reduce) { .att-2026 .tile-reveal { transition:none; } } .att-2026 .closing-h em { font-style:normal; color:var(--teal); } .att-2026 .band--dark .closing-h em { color:var(--gold); } .att-2026 .step > a { align-self:center; white-space:nowrap; } .att-2026 .btn-red, .att-2026 .btn-ink { display:inline-flex; align-items:center; gap:10px; padding:13px 24px; text-decoration:none; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:#fff; transition:opacity .2s; } .att-2026 .btn-red { background:var(--red); } .att-2026 .btn-ink { background:var(--ink); } .att-2026 .btn-red::after, .att-2026 .btn-ink::after { content:'\2192'; } .att-2026 .btn-red:hover, .att-2026 .btn-ink:hover { opacity:.85; color:#fff; } .att-2026 .briefings .band-inner { display:grid; align-items:center; } .att-2026 .briefings .band-inner > .btn-outline { justify-self:end; } /* The briefings and closing CTAs sit in adjacent bands against the same right edge, so they read as a pair and should share a box rather than each shrink-wrapping its own label. 240px clears the wider of the two ("Start a Conversation", 226.8px) with enough margin that a small difference in font metrics cannot push one label past it; both labels centre in the extra room. The outline button's 1.5px border also made it 3px taller, so the primary carries a transparent border of the same width to line the boxes up. */ .att-2026.page-how-we-help .briefings .btn-outline, .att-2026.page-how-we-help .closing--stacked .btn-primary { min-width:240px; justify-content:center; } .att-2026.page-how-we-help .closing--stacked .btn-primary { border:1.5px solid transparent; } .att-2026 .briefings .closing-h { margin-bottom:0; } .att-2026 .briefings p { font-size:1rem; line-height:1.7; color:var(--a-body); margin:0; } .att-2026 .step { grid-template-columns:60px minmax(0,1fr) auto; align-items:start; padding:20px 0; } /* The page-wide band-inner carries margin-right:auto to hold every section flush left. On a grid item an auto margin turns off stretch, so here it shrink-wrapped the text column and left it short of the image above ~1600. The grid track already does the constraining in this band. */ .att-2026.page-how-we-help .band--media .band-inner { max-width:none; margin-right:0; } /* Three primitives where How We Help wants different values from About. About keeps the base; the page class carries the difference. */ .att-2026.page-how-we-help { --a-pad-y:36px; } .att-2026.page-how-we-help .split__main > .block-h2 { margin-bottom:18px; } .att-2026.page-how-we-help .closing .band-inner { justify-content:space-between; padding:32px var(--a-pad-x); } /* ── Responsive ─────────────────────────────────────────── */ /* below this the slice is too narrow to hold both the fingertips and the shoulder; the fingertips win */ @media (max-width:1400px) { .att-2026 .band--media .band-media img { object-position:60% center; } } @media (max-width:1100px) { .att-2026 .people-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:36px; } .att-2026 .people-grid .team-card:nth-child(odd) { border-left:none; padding-left:0; } .att-2026 .people-grid .team-card:nth-child(even) { padding-right:0; } .att-2026 .band--media { grid-template-columns:1fr; } .att-2026 .band-media { min-height:320px; } /* the two closing bands stack together, so their copy keeps the same indent at every width instead of parting company between 1025 and 1100 */ .att-2026 .briefings .band-inner { grid-template-columns:1fr; gap:22px; } .att-2026 .briefings .band-inner > .btn-outline { justify-self:start; } .att-2026 .closing--stacked .band-inner { grid-template-columns:1fr; gap:24px; } .att-2026 .closing--stacked .band-inner > :last-child { grid-column:auto; display:block; } .att-2026 .closing--stacked .cta-pair { justify-content:flex-start; } } @media (max-width:1024px) { .att-2026 { --a-pad-x:40px; --a-pad-y:38px; } .att-2026 .hero--bleed { padding-bottom:0; } .att-2026 .hero-media { position:relative; inset:auto; width:auto; height:auto; aspect-ratio:1456 / 816; margin:0 -40px 32px; -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%); mask-image:linear-gradient(to bottom, #000 72%, transparent 100%); } .att-2026 .hero-copy, .att-2026 .hero--bleed .hero-lead { max-width:100%; } .att-2026 .hero-split { grid-template-columns:1fr; margin-top:68px; } .att-2026 .hero-split__media { min-height:300px; order:-1; } .att-2026 .split, .att-2026 .split--ruled-aside .split { grid-template-columns:1fr; gap:20px; } /* stacked, the statement and the tiles need a clear break between them */ .att-2026 .split--tiles { gap:28px; } .att-2026 .beats--narrative .story-row { grid-template-columns:minmax(0,1fr); gap:0; } .att-2026 .callout--aside { margin-top:36px; } .att-2026 .split__main { border-left:none; padding-left:0; max-width:none; } .att-2026 .split--ruled-aside .split__aside { border-right:none; padding-right:0; padding-bottom:20px; border-bottom:1px solid var(--rule); } .att-2026 .beats { gap:24px 32px; } /* that gap re-applies to the narrative below 1024 at equal specificity and later in the file, adding 24px at every junction in the section */ .att-2026 .beats--narrative { gap:0; } } @media (max-width:768px) { .att-2026 { --a-pad-x:24px; --a-pad-y:26px; } /* the vision line sat flush against the section's bottom edge here */ .att-2026 .hero--bleed { padding-bottom:28px; } /* the team band kept a 56px desktop gutter on phones while every other section used 24px, so it read as narrower than the rest of the page */ .att-2026 .band--people .band-inner { padding-left:var(--a-pad-x); padding-right:var(--a-pad-x); } /* tighter label-to-copy, paragraph and beat rhythm on a narrow column */ .att-2026 .split, .att-2026 .split--ruled-aside .split { gap:10px; } .att-2026 .split--tiles { gap:24px; } .att-2026 .block-body { margin-bottom:16px; } .att-2026 .beats--narrative .beat { margin-top:36px; } .att-2026 .beats--narrative .story-row { margin-top:36px; } .att-2026 .callout--aside { margin-top:24px; } .att-2026 .beats--narrative > .callout--close { margin-top:44px; } .att-2026 .band--people .people-grid { margin-top:34px; } .att-2026 .hero-media { margin:0 -24px 24px; } .att-2026 .hero-split { margin-top:60px; } .att-2026 .hero-split__copy { padding:40px var(--a-pad-x) 32px; } .att-2026 .tile-grid { grid-template-columns:1fr; } .att-2026 .tile, .att-2026 .tile:nth-child(odd), .att-2026 .tile:nth-child(-n+2) { border-left:none; padding:28px 0; border-top:1px solid var(--rule); } .att-2026 .tile:last-child { padding-bottom:0; } /* stacked, the band's own gutters already carry the section */ .att-2026 .band-inner.split--tiles { padding-top:40px; padding-bottom:40px; } .att-2026 .tile:first-child { border-top:none; padding-top:0; } .att-2026 .step { grid-template-columns:48px minmax(0,1fr); } .att-2026 .step-body { grid-column:2; } /* stacked, every step CTA drops under its text in the content column and sizes to its label. Keyed off the direct so a new button variant cannot fall back into the 48px number column and clip. */ .att-2026 .step > a { grid-column:2; justify-self:start; align-self:start; margin-top:16px; } .att-2026 .beats { grid-template-columns:1fr; } /* the forced break cannot fit on two lines at a readable size here, so the headline wraps on its own instead */ .att-2026 .page-h1 br { display:none; } .att-2026 .beats--narrative .beat p { font-size:1.15rem; } .att-2026 .band--tint .split--stacked .block-body { font-size:1.15rem; } .att-2026 .story-cols { grid-template-columns:1fr; margin-top:32px; padding-top:28px; } /* one column: a centred portrait above flush-left text read as two pieces */ .att-2026 .people-grid .team-card .team-photo { margin:0 0 18px; } .att-2026 .story-col { border-left:none; padding:26px 0 0; border-top:1px solid var(--rule); } .att-2026 .story-col:first-child { padding-top:0; border-top:none; } .att-2026 .band--people .team-intro { max-width:100%; font-size:1.15rem; } .att-2026 .people-grid { grid-template-columns:1fr; } .att-2026 .people-grid .team-card { border-left:none; padding:0 0 26px; border-bottom:1px solid var(--rule); } .att-2026 .people-grid .team-card:last-child { border-bottom:none; padding-bottom:0; } .att-2026 .closing .band-inner { flex-direction:column; align-items:flex-start; } .att-2026 .callout { font-size:1rem; padding:16px 20px; } .att-2026 .callout--close { font-size:1.2rem; padding-left:0; padding-right:0; } } @media (max-width:480px) { .att-2026 { --a-pad-x:20px; } .att-2026 .hero-media { margin:0 -20px 20px; } }