/* ========================================================================== Amaze Enterprises — inner pages Shared by every page below the homepage (solution details, capability pages, company pages). Loaded AFTER league.css, which stays the owner of the header, mobile panel, footer and the colour tokens — this file adds only what an inner page needs and never restyles the chrome. Everything here is prefixed .in- so it can never collide with league.css's .lg- namespace, and every colour goes through the tokens league.css sets, so an inner page inherits whichever palette its class selects (.brand-amaze = the amazelogo2 blue + cyan). ========================================================================== */ /* -------------------------------------------------------------------------- Shared section rhythm One scale for the whole set of inner pages: every band uses .in-section for its vertical padding, so pages stacked from different blocks still breathe identically. -------------------------------------------------------------------------- */ .in-section { padding: 70px 0; } .in-section--tight { padding: clamp(40px, 4.4vw, 72px) 0; } .in-section--tint { background: #f7f8fb; } .in-section--wash { background: var(--hero-bg); } /* section heading block — eyebrow, h2, one line of support */ .in-head { max-width: 46rem; margin-bottom: clamp(32px, 3.6vw, 56px); } .in-head--center { margin-inline: auto; text-align: center; } .in-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } /* the short rule that leads the eyebrow — cyan, so the secondary brand hue turns up on every page without ever carrying text */ .in-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent-2); } .in-head h2 { margin: 0; font-size: clamp(1.75rem, 1rem + 2.2vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); } .in-head p { margin: 18px 0 0; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); line-height: 1.6; color: var(--muted); } .in-head--center p { margin-inline: auto; } /* -------------------------------------------------------------------------- Inner banner The diagonal-split plate: copy on the left over paper, artwork on the right behind a slanted edge. The slant is a clip-path on the media rather than a skewed box — a skew would shear the photograph with it. -------------------------------------------------------------------------- */ .in-hero { position: relative; isolation: isolate; display: flex; align-items: center; /* the header is fixed, so the plate has to reserve its own height back or the breadcrumb starts underneath the bar */ padding-top: calc(var(--header-h) + clamp(28px, 3.4vw, 56px)); padding-bottom: clamp(44px, 4.6vw, 80px); min-height: clamp(520px, 44vw, 680px); overflow: hidden; background: var(--white); } /* faint wash under the copy half so the white column isn't dead flat */ .in-hero::before { content: ""; position: absolute; inset: 0 40% 0 0; z-index: -2; background: radial-gradient(120% 90% at 0% 0%, rgba(var(--accent-rgb), 0.07), transparent 62%), linear-gradient(180deg, #fbfcfe 0%, var(--white) 60%); } .in-hero-inner { position: relative; z-index: 1; width: 100%; } /* Sized as a share of the container, never in rem alone. The cut is placed at --cut of the same container (see .in-hero-media), so a percentage here is the only thing that keeps the copy clear of the artwork at every width — a fixed rem column overruns the diagonal as soon as the container caps out and the viewport keeps growing. The rem term is only an upper bound for line length on very wide screens. */ .in-hero-copy { max-width: min(38rem, 47%); } /* ---- breadcrumb ---- */ .in-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: clamp(18px, 2vw, 28px); font-size: 0.86rem; color: var(--muted); } .in-crumbs a { color: var(--muted); transition: color 0.22s var(--ease); } .in-crumbs a:hover { color: var(--accent); } .in-crumbs [aria-current] { color: var(--ink); } .in-crumbs svg { width: 14px; height: 14px; flex: none; opacity: 0.5; } /* ---- headline ---- Two tones on purpose, matching the logo lockup: the first line is ink, the turn of the sentence is the accent. .in-hero-title-accent is a span so the split follows the copy rather than a hardcoded line break. */ .in-hero h1 { margin: 0; font-size: clamp(1.9rem, 0.9rem + 2.6vw, 2.9rem); line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; color: var(--ink); } /* Both halves are blocks, so the two-tone split lands on the line break the copy was written for rather than wherever the column happens to run out. Each half still wraps inside itself on a narrow screen. */ .in-hero h1 span { display: block; } .in-hero h1 .in-accent { color: var(--accent); } .in-hero-lead { max-width: 33rem; margin: clamp(20px, 2.2vw, 30px) 0 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem); line-height: 1.62; color: var(--muted); } .in-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3vw, 42px); } /* ---- the slanted artwork ---- Sits behind the copy in the stack but is clipped clear of it, so the plate still reads as one band rather than two columns butted together. */ .in-hero-media { position: absolute; z-index: -1; inset: 0 0 0 auto; /* Left edge measured off the container, not the viewport. .lg-container is capped at --container and centred, so past that cap a plain `left: 52%` keeps marching right while the copy stops — the two drift apart and the headline ends up over the photograph. Re-deriving the container's own geometry here pins the cut to the same column the copy is laid out in, at every width, while the plate still bleeds to the viewport edge. */ left: calc(max(0px, (100vw - var(--container)) / 2) + min(100vw, var(--container)) * var(--cut, 0.52)); /* top edge sits further left than the bottom, so the cut leans with the reading direction instead of against it */ clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%); } .in-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The cyan edge along the cut. It can't be a border — the cut is a clip-path, which has no stroke — so it's a second polygon: the same two points as the diagonal, plus the same two shifted 5px right. That parallelogram hugs the inside of the cut at whatever angle the diagonal ends up at. */ .in-hero-media::after { content: ""; position: absolute; inset: 0; background: var(--accent-2); clip-path: polygon(0 0, 5px 0, calc(16% + 5px) 100%, 16% 100%); pointer-events: none; } /* A document page — privacy, terms — has a heading and no pitch above the fold, so the full-height plate would be mostly empty paper. Shorter, and the statement itself starts higher up the page. */ .in-hero--short { min-height: clamp(340px, 28vw, 440px); padding-bottom: clamp(28px, 3vw, 48px); } /* the copy needs more of the row before the artwork does, so the cut moves right rather than the type getting smaller */ @media (max-width: 1180px) { .in-hero { --cut: 0.56; } } /* below tablet the diagonal has no room — the artwork becomes a full-width plate above the copy and the cut runs horizontally instead */ @media (max-width: 820px) { .in-hero { display: block; min-height: 0; padding-top: var(--header-h); } .in-hero::before { inset: 0; } .in-hero-media { position: relative; /* back into the normal layer: stacked above the copy it no longer sits beside, it has nothing left to hide behind */ z-index: auto; inset: auto; width: 100%; height: clamp(220px, 42vw, 320px); margin-bottom: clamp(28px, 4vw, 40px); clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); } .in-hero-media::after { display: none; } .in-hero-copy { max-width: none; } .in-hero-inner { padding-bottom: clamp(36px, 6vw, 56px); } } /* -------------------------------------------------------------------------- Buttons Two only: a filled primary and a hairline secondary. Both are square-ish rather than league.css's pills — an inner page is a document, and the pill belongs to the marketing chrome above it. -------------------------------------------------------------------------- */ .in-btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 28px; font-family: var(--font-display); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; border-radius: 10px; border: 1px solid transparent; transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .in-btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.3s var(--ease); } .in-btn:hover svg { transform: translateX(4px); } .in-btn--solid { color: var(--white); background: var(--accent); border-color: var(--accent); } .in-btn--solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); } .in-btn--line { color: var(--ink); background: transparent; border-color: rgba(var(--accent-rgb), 0.35); } /* an address is not a label — it has to be reproduced exactly, so it opts out of the uppercasing and tracking the button otherwise applies */ .in-btn--mail { text-transform: none; letter-spacing: 0; font-size: 0.96rem; } .in-btn--line:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } /* on the dark band the hairline button has to invert */ .in-band .in-btn--line { color: var(--white); border-color: rgba(255, 255, 255, 0.4); } .in-band .in-btn--line:hover { color: var(--ink); background: var(--white); border-color: var(--white); } /* -------------------------------------------------------------------------- Credentials strip — the standing line, directly under the banner -------------------------------------------------------------------------- */ .in-creds { border-block: 1px solid var(--hairline); background: var(--hero-bg); } .in-creds-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* top-aligned, not centred: the four labels wrap to different line counts, and centring each one against its own text block leaves the icons sitting at four different heights across the strip */ .in-cred { display: flex; align-items: flex-start; gap: 14px; padding: clamp(22px, 2.4vw, 32px) clamp(16px, 2vw, 30px); } /* dividers as borders on the cells, not separate elements, so they disappear correctly whenever the grid rewraps */ .in-cred+.in-cred { border-left: 1px solid var(--hairline); } .in-cred svg { width: 30px; height: 30px; flex: none; color: var(--accent); stroke-width: 1.6; } .in-cred-label { display: block; font-family: var(--font-display); font-size: 0.98rem; font-weight: 500; line-height: 1.25; color: var(--ink); } .in-cred-sub { display: block; margin-top: 3px; font-size: 0.84rem; line-height: 1.35; color: var(--muted); } @media (max-width: 900px) { .in-creds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* with two per row the left border is wrong on every odd cell */ .in-cred+.in-cred { border-left: 0; } .in-cred:nth-child(even) { border-left: 1px solid var(--hairline); } .in-cred:nth-child(n + 3) { border-top: 1px solid var(--hairline); } } @media (max-width: 520px) { .in-creds-grid { grid-template-columns: minmax(0, 1fr); } .in-cred:nth-child(even) { border-left: 0; } .in-cred+.in-cred { border-top: 1px solid var(--hairline); } } /* -------------------------------------------------------------------------- Overview — the argument on the left, an aside on the right The aside is a photograph with a card pulled up over its foot. It used to be a boxed list of what the solution includes, which was wrong twice: the category cards in the next section already say that, and a single card left most of a tall column empty. The card now carries what the reader has to do next, which nothing else on the page covers. -------------------------------------------------------------------------- */ .in-overview-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 4.4vw, 72px); align-items: start; } .in-overview-copy p { margin: 0 0 18px; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); line-height: 1.68; color: var(--muted); } .in-overview-copy p:last-child { margin-bottom: 0; } .in-overview-copy strong { color: var(--ink); font-weight: 500; } /* the pulled-out line that closes the copy column */ .in-pullquote { margin: clamp(26px, 3vw, 36px) 0 0; padding: 20px 0 20px 22px; border-left: 3px solid var(--accent-2); font-family: var(--font-display); font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); } /* ---- the aside ---- */ .in-overview-media { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 5 / 4; background: var(--hero-bg); } .in-overview-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* blue-to-cyan bar along the foot of the frame — the same two-hue move the logo makes, and it gives the card above it something to sit against */ .in-overview-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); } /* Pulled up over the foot of the photograph and inset from both sides, so the frame reads as one object rather than a picture with a caption under it. The negative margin is what creates the overlap; the side inset keeps the photograph visible past both edges of the card. */ .in-aside-card { position: relative; z-index: 1; margin: clamp(-72px, -5vw, -48px) clamp(14px, 1.6vw, 26px) 0; padding: clamp(22px, 2.4vw, 30px); background: var(--white); border: 1px solid var(--hairline); border-radius: 18px; box-shadow: 0 28px 54px -34px rgba(8, 19, 43, 0.45); } .in-aside-card h3 { margin: 0 0 4px; font-size: 1.06rem; letter-spacing: -0.01em; color: var(--ink); } .in-aside-card>p { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.5; color: var(--muted); } .in-aside-list { display: grid; gap: 12px; } .in-aside-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; line-height: 1.5; color: var(--muted); } /* the tick is drawn, not a glyph — a character would sit on the text baseline and drift out of line with the first row of a wrapped item */ .in-aside-list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat, var(--accent); } /* the closing line — set off by a rule rather than another box */ .in-aside-note { margin: clamp(18px, 2vw, 24px) 0 0; padding-top: clamp(16px, 1.8vw, 20px); border-top: 1px solid var(--hairline); font-size: 0.9rem; line-height: 1.55; color: var(--muted); } .in-aside-note strong { color: var(--ink); font-weight: 500; } @media (max-width: 900px) { .in-overview-split { grid-template-columns: minmax(0, 1fr); } /* stacked, the photograph is no longer holding up a column — it only needs to be a band above the card */ .in-overview-media { aspect-ratio: 16 / 9; } } /* -------------------------------------------------------------------------- Category cards — what actually gets supplied under this solution -------------------------------------------------------------------------- */ .in-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); } .in-card { position: relative; padding: clamp(26px, 2.6vw, 34px); background: var(--white); border: 1px solid var(--hairline); border-radius: 18px; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .in-card:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), 0.4); box-shadow: 0 28px 50px -34px rgba(8, 19, 43, 0.42); } .in-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 20px; color: var(--accent); background: rgba(var(--accent-rgb), 0.08); border-radius: 14px; transition: color 0.3s var(--ease), background 0.3s var(--ease); } .in-card-icon svg { width: 26px; height: 26px; stroke-width: 1.7; } .in-card:hover .in-card-icon { color: var(--white); background: var(--accent); } .in-card h3 { margin: 0 0 10px; font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); } .in-card p { margin: 0; font-size: 0.95rem; line-height: 1.58; color: var(--muted); } @media (max-width: 980px) { .in-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .in-cards { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Process — four numbered steps on a single drawn rule -------------------------------------------------------------------------- */ .in-steps { /* both the grid gap and the connectors are measured off these, so the line between two steps can never drift out of step with the layout */ --step-gap: clamp(20px, 2.4vw, 36px); --step-dot: 54px; --step-lead: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--step-gap); } .in-step { position: relative; } /* The connector, drawn per step rather than as one rule across the row. A single rule has to assume the numerals are centred in their columns; these are left-aligned with the copy, so it started mid-gap and left a stub hanging past the last step. Each line instead starts just clear of its own numeral and runs across the gap to just short of the next one, which also means it stays correct at every breakpoint. */ .in-step::after { content: ""; position: absolute; top: calc(var(--step-dot) / 2); left: calc(var(--step-dot) + var(--step-lead)); right: calc(-1 * (var(--step-gap) + var(--step-lead))); height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.45), rgba(var(--accent-2-rgb), 0.5)); } /* nothing to the right of the last step to connect to */ .in-step:last-child::after { display: none; } .in-step-num { display: inline-flex; align-items: center; justify-content: center; width: var(--step-dot); height: var(--step-dot); margin-bottom: 22px; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.01em; color: var(--accent); /* tinted rather than white: the connector now stops short of the circle, so the disc no longer has to mask a line running underneath it */ background: rgba(var(--accent-rgb), 0.07); border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 50%; transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); } .in-step:hover .in-step-num { color: var(--white); background: var(--accent); border-color: var(--accent); } .in-step h3 { margin: 0 0 10px; font-size: 1.06rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); } .in-step p { margin: 0; font-size: 0.94rem; line-height: 1.58; color: var(--muted); } @media (max-width: 900px) { .in-steps { --step-gap: clamp(26px, 4vw, 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); } /* two per row: the second of each pair now ends its row, so its connector would run off the side of the container instead of into a next step */ .in-step:nth-child(2n)::after { display: none; } } @media (max-width: 520px) { .in-steps { grid-template-columns: minmax(0, 1fr); } /* stacked, every step ends its own row */ .in-step::after { display: none; } } /* -------------------------------------------------------------------------- Dark band — compliance and standards -------------------------------------------------------------------------- */ .in-band { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: var(--ink); } .in-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 100% 0%, rgba(var(--accent-2-rgb), 0.22), transparent 58%), radial-gradient(80% 120% at 0% 100%, rgba(var(--accent-rgb), 0.42), transparent 60%); } .in-band-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 4vw, 68px); align-items: center; } .in-band .in-eyebrow { color: var(--accent-2); } .in-band .in-eyebrow::before { background: var(--accent-2); } .in-band h2 { margin: 0; font-size: clamp(1.7rem, 1rem + 2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--white); } .in-band-lead { margin: 18px 0 0; font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.62; color: rgba(255, 255, 255, 0.72); } .in-band-actions { margin-top: clamp(24px, 2.6vw, 34px); } .in-band-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; overflow: hidden; } /* the 1px grid gap is doing the ruling, so each cell just needs its own opaque-enough backdrop to sit on */ .in-band-item { padding: clamp(22px, 2.4vw, 30px); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(2px); } .in-band-item h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1rem; line-height: 1.3; color: var(--white); } .in-band-item svg { width: 20px; height: 20px; flex: none; color: var(--accent-2); stroke-width: 1.8; } .in-band-item p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.66); } @media (max-width: 900px) { .in-band-split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .in-band-list { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Media split — image one side, reasons the other -------------------------------------------------------------------------- */ .in-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 72px); align-items: center; } .in-split-media { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; } .in-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); } .in-split-media:hover img { transform: scale(1.04); } /* the corner tab — reads as a caption plate rather than a badge, so it stays flush to the frame instead of floating over the photograph */ .in-split-tag { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 16px 24px 16px 20px; font-family: var(--font-display); font-size: 0.92rem; color: var(--white); background: var(--accent); border-top-right-radius: 16px; } .in-split-tag svg { width: 18px; height: 18px; flex: none; stroke-width: 2; } .in-reasons { display: grid; gap: clamp(18px, 2vw, 26px); } .in-reason { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 16px; row-gap: 0; } .in-reason-icon { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 12px; } .in-reason-icon svg { width: 21px; height: 21px; stroke-width: 1.7; } .in-reason h3 { margin: 0 0 6px; font-size: 1.04rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); } .in-reason p { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--muted); } @media (max-width: 900px) { .in-split { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Story — a long passage laid out to be read, not to be decorated No artwork: the column that would hold it is given to the heading instead, which then holds its position while the passage scrolls past. That buys the text a proper measure — around 65 characters — where splitting the row evenly with a photograph would have squeezed it to nearer 40. -------------------------------------------------------------------------- */ .in-story { /* the same tinted plate the home page's About Us sits on */ background: var(--hero-bg); } .in-story-split { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 88px); align-items: start; } /* Sticky against the grid area, which spans the whole row — so the heading travels with the passage instead of scrolling away at the first paragraph. Offset by the header, which is fixed and would otherwise cover it. */ .in-story-head { position: sticky; top: calc(var(--header-h) + clamp(16px, 2vw, 32px)); } .in-story-head h2 { margin: 0; /* kept in step with .lg-about-head h2 on the home page */ font-size: clamp(2rem, 0.2rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } /* the rule under the heading, carrying the logo's two hues */ .in-story-head h2::after { content: ""; display: block; width: 64px; height: 3px; margin-top: clamp(18px, 2vw, 26px); border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .in-story-body { /* the measure is the point of this layout — cap it even though the column it sits in is wider than this at desktop widths */ /* max-width: 40rem; */ } .in-story-body p { margin: 0 0 clamp(18px, 1.8vw, 24px); font-size: clamp(1rem, 0.96rem + 0.22vw, 1.08rem); /* looser than the site's 1.6: this is the only block on any page long enough for line spacing to decide whether it gets read */ line-height: 1.78; color: var(--ink); } .in-story-body p:last-child { margin-bottom: 0; } /* the opening paragraph carries the weight of a standfirst. Two classes deep so it beats `.in-story-body p` above, which is (0,1,1) */ .in-story-body .in-story-lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.6; letter-spacing: -0.01em; } /* The one summarising line in the passage. Set off with a rule rather than a box — a filled panel here would read as a callout pulled out of the story, and this line belongs in its middle. */ .in-story-body .in-story-turn { margin-block: clamp(28px, 3vw, 40px); padding-left: clamp(20px, 2vw, 28px); border-left: 3px solid var(--accent-2); font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.12rem, 1rem + 0.7vw, 1.45rem); line-height: 1.4; letter-spacing: -0.015em; } @media (max-width: 900px) { .in-story-split { grid-template-columns: minmax(0, 1fr); } /* nothing beside it to hold position against once stacked */ .in-story-head { position: static; } .in-story-body { max-width: none; } } /* -------------------------------------------------------------------------- Flow — a numbered sequence where each step is a single line Full-width rows rather than the compact .in-steps grid: with one sentence per step and nothing under it, four narrow columns leave most of the page empty. Rows give the same four steps the weight they need to carry a page on their own, and a one-line step is easier to read across than down. -------------------------------------------------------------------------- */ .in-flow { border-top: 1px solid var(--hairline); } .in-flow-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 48px); padding: clamp(24px, 3.2vw, 42px) clamp(0px, 1.4vw, 20px); border-bottom: 1px solid var(--hairline); transition: background 0.35s var(--ease), padding-left 0.35s var(--ease); } .in-flow-step:hover { background: rgba(var(--accent-rgb), 0.04); padding-left: clamp(12px, 2.2vw, 32px); } /* A ghost numeral — tinted rather than outlined. `-webkit-text-stroke` with a transparent fill would give a cleaner outline, but anything that doesn't support it renders the number invisible, and these are the only labels the step has. Tabular figures so 01–04 all occupy the same width and the sentences beside them stay on one left edge. */ .in-flow-num { font-family: var(--font-heading); font-weight: 500; font-size: clamp(2rem, 1rem + 3vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: rgba(var(--accent-rgb), 0.24); transition: color 0.35s var(--ease); } .in-flow-step:hover .in-flow-num { color: var(--accent); } .in-flow-step h3 { margin: 0; font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.7rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); } .in-flow-step h3 a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; /* an address is not a sentence — keep it off the uppercase/tracking the rest of the line inherits, and let it break rather than overflow */ word-break: break-word; } .in-flow-step h3 a:hover { color: var(--accent-dark); } .in-flow-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 50%; opacity: 0; transform: translateX(-8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .in-flow-mark svg { width: 18px; height: 18px; stroke-width: 2; } .in-flow-step:hover .in-flow-mark { opacity: 1; transform: none; } /* the arrow is a hover affordance, and there is no hover on touch — showing it at rest is better than a control that can never appear */ @media (hover: none) { .in-flow-mark { opacity: 1; transform: none; } } @media (max-width: 620px) { .in-flow-step { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; } /* nothing left to point at once the row is this narrow */ .in-flow-mark { display: none; } } /* -------------------------------------------------------------------------- Spec list — registration details, as a contracting officer reads them A

rather than a table: these are label/value pairs, not a grid of data with meaningful columns, and a dl stacks correctly on a phone where a real table would need scrolling to reach the values. -------------------------------------------------------------------------- */ /* sub-heading over the list, a step below the section h2 rather than beside it */ .in-spec-title { margin: 0 0 clamp(14px, 1.6vw, 20px); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); letter-spacing: -0.01em; color: var(--ink); } .in-spec { border-top: 1px solid var(--hairline); } .in-spec-row { display: grid; grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr); gap: clamp(6px, 2vw, 40px); align-items: baseline; padding: clamp(15px, 1.7vw, 21px) 0; border-bottom: 1px solid var(--hairline); } .in-spec-row dt { font-size: 0.92rem; line-height: 1.45; color: var(--muted); } .in-spec-row dd { margin: 0; font-family: var(--font-display); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); line-height: 1.45; color: var(--ink); } /* identifiers are read character by character and often typed into a form — tabular figures stop 1 and 0 from collapsing into each other */ .in-spec-row .in-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; } /* ---- status ---- */ .in-status { display: inline-flex; align-items: center; gap: 10px; } /* the halo is a second, softer ring on the same dot rather than an extra element — box-shadow spreads outward from the circle it is drawn on */ .in-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(var(--accent-2-rgb), 0.22); } /* ---- code chips ---- */ .in-codes { display: flex; flex-wrap: wrap; gap: 8px; } .in-code { padding: 5px 12px; font-size: 0.92rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--accent); background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: 8px; } @media (max-width: 620px) { .in-spec-row { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Methods — a short flat list of what we transact on auto-fit rather than a fixed column count: the set is five, which divides badly into three or four, and letting the row decide avoids a hole. -------------------------------------------------------------------------- */ .in-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .in-method { display: flex; align-items: center; gap: 12px; padding: clamp(18px, 1.9vw, 24px); font-family: var(--font-display); font-size: 1rem; line-height: 1.35; color: var(--ink); background: var(--white); border: 1px solid var(--hairline); border-radius: 14px; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .in-method:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), 0.38); box-shadow: 0 20px 38px -28px rgba(8, 19, 43, 0.45); } .in-method svg { width: 22px; height: 22px; flex: none; color: var(--accent); stroke-width: 1.8; } /* -------------------------------------------------------------------------- Form — the quote request Six columns, not two: the fields are not all the same weight. A quantity wants a short box and a delivery address a long one, and a two-column grid can only offer half or full. Every field declares its own span off the six. -------------------------------------------------------------------------- */ .in-form { max-width: 62rem; margin-inline: auto; padding: clamp(24px, 3.4vw, 52px); background: var(--white); border: 1px solid var(--hairline); border-radius: 22px; box-shadow: 0 34px 64px -46px rgba(8, 19, 43, 0.5); } .in-form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); } /* the default is a half row; the modifiers below are the exceptions */ .in-field { grid-column: span 3; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .in-field--full { grid-column: span 6; } .in-field--narrow { grid-column: span 2; } .in-field--wide { grid-column: span 4; } .in-field label { font-size: 0.9rem; line-height: 1.35; color: var(--muted); } /* The asterisk is the only visible marker of a required field, so it has to read as one. Halvar Breit draws it as a tiny five-point star sitting high on the line, which at label size looks like a speck of dust rather than a mark — a system face gives a heavier, rounder asterisk that is legible beside the field name. The field itself still carries `required` for validation, so nothing here is load-bearing for the form working. */ .in-req { font-family: Arial, Helvetica, system-ui, sans-serif; font-size: 1.15em; line-height: 1; color: var(--accent); } .in-field input, .in-field textarea { width: 100%; padding: 13px 15px; font: inherit; font-size: 1rem; line-height: 1.45; color: var(--ink); background: #fbfcfe; border: 1px solid var(--hairline); border-radius: 11px; transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease); } .in-field textarea { resize: vertical; min-height: 96px; } .in-field input::placeholder, .in-field textarea::placeholder { color: #9aa3b2; } .in-field input:focus, .in-field textarea:focus { outline: none; background: var(--white); border-color: var(--accent); /* a ring rather than a thicker border: a border change would reflow the field by a pixel every time it takes focus */ box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } /* -------------------------------------------------------------------------- Contact — standing details beside the form The aside is the short column, so it leads on desktop reading order without pushing the form below the fold. -------------------------------------------------------------------------- */ .in-contact-split { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 52px); align-items: start; } .in-contact-aside { display: grid; gap: clamp(14px, 1.6vw, 20px); } .in-info { padding: clamp(22px, 2.4vw, 30px); background: var(--white); border: 1px solid var(--hairline); border-radius: 18px; } .in-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; color: var(--accent); background: rgba(var(--accent-rgb), 0.08); border-radius: 13px; } .in-info-icon svg { width: 22px; height: 22px; stroke-width: 1.7; } .in-info h3 { margin: 0 0 10px; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); } .in-info p { margin: 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.6; color: var(--muted); } /* the day range and the clock time are two lines of one fact, so they sit as one paragraph with a break rather than as two paragraphs with a gap */ .in-info p strong { display: block; font-weight: 500; color: var(--ink); } .in-info a { color: var(--accent); word-break: break-word; transition: color 0.22s var(--ease); } .in-info a:hover { color: var(--accent-dark); } /* the form card already carries its own padding and shadow — inside the split it only has to stop centring itself in a column it now fills */ .in-contact-split .in-form { max-width: none; margin-inline: 0; } @media (max-width: 900px) { .in-contact-split { grid-template-columns: minmax(0, 1fr); } /* side by side once stacked: two short cards in one column is a lot of vertical run before the form starts */ .in-contact-aside { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } /* ---- foot ---- */ .in-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(22px, 2.6vw, 32px); } .in-form-note { margin: 0; font-size: 0.88rem; color: var(--muted); } .in-form-note .in-req { margin-right: 3px; } @media (max-width: 720px) { /* below this the six-column split stops buying anything — a half-width field is too narrow to type into on a phone */ .in-field, .in-field--narrow, .in-field--wide { grid-column: span 6; } } /* -------------------------------------------------------------------------- Points — short statements, one per row No numerals: unlike .in-flow these are not a sequence, so numbering them would imply an order the copy does not have. Each is a single phrase, so the row carries a mark and the phrase at heading size and nothing else. -------------------------------------------------------------------------- */ /* Picture beside the list. `stretch` rather than a fixed ratio: the media column takes whatever height the five rows come to, so the two halves always end level however the phrases wrap. */ .in-points-split { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: stretch; } .in-points-media { position: relative; overflow: hidden; border-radius: 22px; min-height: 320px; background: var(--hero-bg); } .in-points-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* the same blue-to-cyan foot the About aside carries, so the two picture frames on the site read as one treatment */ .in-points-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .in-points { max-width: 54rem; margin-inline: auto; border-top: 1px solid var(--hairline); } /* inside the split the list is already in a column of its own — the standalone measure cap and centring would only narrow it further */ .in-points-split .in-points { max-width: none; margin-inline: 0; } @media (max-width: 900px) { .in-points-split { grid-template-columns: minmax(0, 1fr); } /* stacked, the picture has no column to match the height of, so it needs a shape of its own rather than stretching to nothing */ .in-points-media { min-height: 0; aspect-ratio: 16 / 9; } } .in-point { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.4vw, 30px); padding: clamp(18px, 2.4vw, 30px) clamp(0px, 1.2vw, 16px); border-bottom: 1px solid var(--hairline); transition: background 0.35s var(--ease), padding-left 0.35s var(--ease); } .in-point:hover { background: rgba(var(--accent-rgb), 0.04); padding-left: clamp(10px, 2vw, 28px); } .in-point-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(44px, 3.8vw, 54px); aspect-ratio: 1; color: var(--accent); background: rgba(var(--accent-rgb), 0.07); border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: 50%; transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); } .in-point-icon svg { width: 46%; height: 46%; stroke-width: 1.8; } .in-point:hover .in-point-icon { color: var(--white); background: var(--accent); border-color: var(--accent); } .in-point h3 { margin: 0; font-size: clamp(1.08rem, 0.95rem + 0.7vw, 1.55rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); } /* -------------------------------------------------------------------------- Legal — privacy and terms One statement per page, so it is set as a statement rather than padded out into paragraphs of boilerplate nobody wrote. Capped at a reading measure and given the heading face, which is what stops a single sentence on a wide page from reading like a caption that lost its picture. -------------------------------------------------------------------------- */ .in-legal { max-width: 46rem; margin-inline: auto; } .in-legal-statement { margin: 0; padding-left: clamp(20px, 2.2vw, 30px); border-left: 3px solid var(--accent-2); font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.62rem); line-height: 1.45; letter-spacing: -0.015em; color: var(--ink); } /* the sibling document — without it each of these pages is a dead end */ .in-legal-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px, 3.4vw, 46px); } /* -------------------------------------------------------------------------- Under construction — a page that has been published before it has content Says so plainly rather than dressing an empty page up as a finished one. -------------------------------------------------------------------------- */ .in-construction { max-width: 34rem; margin-inline: auto; text-align: center; } .in-construction-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(72px, 7vw, 92px); aspect-ratio: 1; margin-bottom: clamp(22px, 2.6vw, 32px); color: var(--accent); background: rgba(var(--accent-rgb), 0.07); border: 1px solid rgba(var(--accent-rgb), 0.18); border-radius: 26px; } .in-construction-icon svg { width: 44%; height: 44%; stroke-width: 1.5; } .in-construction h2 { margin: 0; font-size: clamp(1.6rem, 1rem + 2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.025em; color: var(--ink); } .in-construction-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(26px, 3vw, 38px); } /* -------------------------------------------------------------------------- Promise — one statement, centred on the dark band -------------------------------------------------------------------------- */ .in-promise { margin-inline: auto; text-align: center; } .in-promise .in-eyebrow { margin-bottom: clamp(18px, 2vw, 26px); } /* the cap goes on the heading, not the wrapper: `ch` on the wrapper resolves against its own 1rem font, which capped the line at about fifteen of the heading's much wider characters and broke the statement over three lines */ .in-promise h2 { max-width: 24ch; margin-inline: auto; } /* a longer statement needs a longer line before it starts breaking badly */ .in-promise--wide h2 { max-width: 34ch; } /* -------------------------------------------------------------------------- Duo — two statements of equal standing, side by side on the dark band -------------------------------------------------------------------------- */ .in-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 60px); } /* the rule belongs to the second panel, not between the two as a third element, so it disappears on its own when the pair stacks */ .in-duo>*+* { padding-left: clamp(28px, 3.4vw, 60px); border-left: 1px solid rgba(255, 255, 255, 0.16); } /* outlined rather than filled: a solid tile would read as a button on a band this dark, and these two panels are statements, not actions */ .in-duo-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: clamp(18px, 2vw, 24px); color: var(--accent-2); background: rgba(var(--accent-2-rgb), 0.09); border: 1px solid rgba(var(--accent-2-rgb), 0.32); border-radius: 15px; } .in-duo-icon svg { width: 26px; height: 26px; stroke-width: 1.6; } .in-duo h2 { margin: 0 0 16px; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--white); } .in-duo p { margin: 0; font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.1rem); line-height: 1.65; color: rgba(255, 255, 255, 0.74); } @media (max-width: 820px) { .in-duo { grid-template-columns: minmax(0, 1fr); } .in-duo>*+* { padding-left: 0; padding-top: clamp(28px, 4vw, 40px); border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); } } /* -------------------------------------------------------------------------- FAQ —

so it opens with no JS at all -------------------------------------------------------------------------- */ .in-faq { max-width: 54rem; margin-inline: auto; border-top: 1px solid var(--hairline); } .in-faq details { border-bottom: 1px solid var(--hairline); } .in-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(18px, 2vw, 24px) 0; font-family: var(--font-display); font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); cursor: pointer; list-style: none; transition: color 0.22s var(--ease); } /* Safari draws its own disclosure triangle from a pseudo no other engine has */ .in-faq summary::-webkit-details-marker { display: none; } .in-faq summary:hover { color: var(--accent); } /* the +/− is one drawn glyph: a circle with two bars, the vertical one rotating away as the panel opens */ .in-faq-mark { position: relative; flex: none; width: 30px; height: 30px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 50%; transition: background 0.28s var(--ease), border-color 0.28s var(--ease); } .in-faq-mark::before, .in-faq-mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; background: var(--accent); transform: translate(-50%, -50%); transition: transform 0.3s var(--ease), background 0.28s var(--ease); } .in-faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); } .in-faq details[open] .in-faq-mark { background: var(--accent); border-color: var(--accent); } .in-faq details[open] .in-faq-mark::before, .in-faq details[open] .in-faq-mark::after { background: var(--white); } .in-faq details[open] .in-faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); } .in-faq-body { padding: 0 54px clamp(20px, 2.2vw, 28px) 0; font-size: 0.98rem; line-height: 1.65; color: var(--muted); } .in-faq-body p { margin: 0; } /* -------------------------------------------------------------------------- Related solutions — the sibling pages, as a plain linked grid -------------------------------------------------------------------------- */ .in-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); } .in-rel { position: relative; display: block; isolation: isolate; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 11; background: var(--ink); } .in-rel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } .in-rel:hover img { transform: scale(1.06); } /* the scrim is what makes the label legible on any of the six photographs, so it is a gradient rather than a flat tint — the top of the frame keeps its picture */ .in-rel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 19, 43, 0) 34%, rgba(8, 19, 43, 0.82) 100%); transition: background 0.4s var(--ease); } .in-rel:hover::after { background: linear-gradient(180deg, rgba(1, 75, 207, 0.1) 20%, rgba(8, 19, 43, 0.88) 100%); } .in-rel-label { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: clamp(18px, 2vw, 26px); font-family: var(--font-heading); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.14rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--white); } .in-rel-label svg { width: 22px; height: 22px; flex: none; transition: transform 0.35s var(--ease); } .in-rel:hover .in-rel-label svg { transform: translate(4px, -4px); } @media (max-width: 980px) { .in-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .in-related { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Scroll reveal — progressive enhancement only No JS: where scroll-driven animations exist the blocks rise as they enter, and everywhere else they are simply already in place. The un-animated state is the finished state on purpose — nothing here can leave content hidden. -------------------------------------------------------------------------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .in-head, .in-cred, .in-overview-copy, .in-overview-aside, .in-card, .in-step, .in-flow-step, .in-point, .in-points-media, .in-construction, .in-spec-row, .in-method, .in-info, .in-promise, .in-band-split, .in-duo, .in-split-media, .in-reason, .in-rel { animation: in-rise linear both; animation-timeline: view(); /* starts as the block enters the bottom of the viewport and is done by the time it is a fifth of the way up — any later and a short section finishes animating after it has already been read */ animation-range: entry 8% cover 24%; } } } @keyframes in-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* ========================================================================== Responsive refinements Appended last so these beat the desktop-first rules above on source order rather than on escalating specificity. ========================================================================== */ /* `.in-btn` is nowrap so a two-word label never breaks mid-capsule. The mail button carries a 22-character address instead of a label, and at 320px the capsule measured 324px — the one thing on any inner page that pushed the document wider than the viewport. Let this variant wrap and shrink; the nowrap stays on every other button. */ .in-btn--mail { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; } @media (max-width: 420px) { .in-btn { padding: 14px 20px; font-size: 0.86rem; } /* stacked, they should share an edge rather than sit at two widths */ .in-hero-actions, .in-band-actions, .in-legal-actions, .in-construction-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .in-hero-actions .in-btn, .in-band-actions .in-btn, .in-legal-actions .in-btn, .in-construction-actions .in-btn { justify-content: center; width: 100%; } }