/* ========================================================================== Suria Crestway Sdn. Bhd. — Service page (industry segment) First of nine: Ship Owners & Ship Management Companies. Standalone from css/style.css and css/about.css on purpose: this ships as its own WordPress plugin, so it carries its own tokens, reset and entrance rules rather than depending on another plugin's stylesheet being enqueued. Everything is scoped under .sc-svcpage and prefixed .sc- so it can be dropped into a shortcode without fighting the active theme. ONE STYLESHEET, ALL NINE PAGES. Nothing here is specific to ship owners — the segment only supplies content. Add page 02 by writing markup against these same classes; don't fork the sheet. IMAGE RULES ARE PREFIXED `.sc-svcpage` ON PURPOSE — don't "simplify" them. Page builders ship a blanket image reset at the same specificity as a plain component rule. Elementor's is .elementor img { border:none; border-radius:0; box-shadow:none; height:auto; max-width:100% } which is (0,1,1) — identical to `.sc-svchero__media img`. A plugin stylesheet is enqueued before the theme's and before Elementor's, so on an equal-specificity tie the later sheet wins and every image depending on a CSS height collapses. The `.sc-svcpage` prefix makes these (0,2,1), which wins on specificity and so holds regardless of load order. ========================================================================== */ .sc-svcpage { /* Brand */ --sc-brand: #262aad; --sc-brand-dark: #1c1f8a; --sc-brand-tint: #eef0fb; --sc-brand-tint2:#e3e7f8; --sc-accent: #f42e39; /* Neutrals */ --sc-navy: #070a26; --sc-ink: #0e1130; --sc-ink-2: #474c6d; --sc-ink-3: #7a7f9c; --sc-line: #e3e6f1; --sc-cream: #f8f7f4; --sc-paper: #ffffff; /* Layout */ --sc-w: 1340px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; color: var(--sc-ink-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* --- reset (scoped) ------------------------------------------------------ Wrapped in :where() so it carries ZERO specificity. Without this the reset outranks the component classes below (and would, for example, repaint .sc-svchero__title with the default heading colour). */ .sc-svcpage *, .sc-svcpage *::before, .sc-svcpage *::after { box-sizing: border-box; } :where(.sc-svcpage) :where(h1, h2, h3, p, figure) { margin: 0; } :where(.sc-svcpage) :where(img) { display: block; max-width: 100%; } :where(.sc-svcpage) :where(button) { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } :where(.sc-svcpage) :where(a) { color: inherit; text-decoration: none; } /* Body copy runs justified. Set on the paragraphs themselves rather than on a wrapper, so headings, eyebrows, labels and buttons keep their own alignment and only prose is affected. Hyphenation is not optional here. Justifying a narrow column without letting words break forces the leftover space into the word gaps — the rivers of white that make justified text look broken. The limits are deliberately loose: 5 2 2 lets any word of 5+ characters break with two letters either side, which is what actually closes the gaps at these measures. The element must carry a lang attribute or the browser has no dictionary and silently does nothing. Kept in step with the same block in style.css — change one, change all. */ .sc-svcpage p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 2; -webkit-hyphenate-limit-after: 2; hyphenate-limit-chars: 5 2 2; /* Stops the last line landing as a single orphaned word, which reads worse next to justified lines than it does under ragged-right text. */ text-wrap: pretty; } :where(.sc-svcpage) :where(h1, h2, h3) { font-family: "Archivo", "Inter", sans-serif; color: var(--sc-ink); font-weight: 600; } /* The helpers below (.sc-container, .sc-i, .sc-h2, .sc-eyebrow, .sc-dot) share their names with css/style.css and css/about.css. They are PREFIXED `.sc-svcpage` on purpose so all three stylesheets can coexist on one site: unprefixed, they would be an equal-specificity tie that load order decides, and their responsive overrides differ — so whichever loaded last would silently restyle another plugin's sections. Don't unprefix them. */ /* 1340px fixed, matching the homepage. Below that the safety inset keeps content off the viewport edge. */ .sc-svcpage .sc-container { width: var(--sc-w); max-width: 100%; margin-inline: auto; } @media (max-width: 1379px) { .sc-svcpage .sc-container { padding-inline: 24px; } } .sc-svcpage .sc-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* --- shared type --------------------------------------------------------- */ .sc-svcpage .sc-h2 { font-size: 44px; line-height: 1.36; font-weight: 500; letter-spacing: -0.02em; } /* The reference layout sets the second line of each heading in a lighter tone than the first, which is what carries the two-part phrasing. */ .sc-svcpage .sc-h2 strong { font-weight: 600; } .sc-svcpage .sc-h2 em { font-style: normal; color: var(--sc-ink-3); } /* in the headings above is a styling hook and is deliberately upright. In the lede it is real emphasis and stays italic — spelled out so the rule above is not read as applying to every em on the page. */ .sc-svcpage .sc-provide__lede em { font-style: italic; } .sc-svcpage .sc-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink); } .sc-svcpage .sc-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); flex: none; } .sc-svcpage .sc-dot { color: var(--sc-accent); } /* ========================================================================== 1. PAGE HERO BANNER — 50vh, same recipe as the About banner ========================================================================== */ .sc-svchero { position: relative; background: var(--sc-navy); min-height: 50vh; min-height: 50svh; display: flex; align-items: flex-end; padding-top: 182px; /* clears the overlaying site header */ padding-bottom: 66px; isolation: isolate; } .sc-svchero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .sc-svcpage .sc-svchero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* Two-layer scrim: a directional wash that keeps the left-hand type readable, plus a vertical pass so the header sits on something dark at the top and the section joint reads at the bottom. RE-BALANCED 2026-08-17. It used to run .94 -> .24 across and .55 down, which made the banner the single biggest reason the site read dark. The stops are now ASYMMETRIC on purpose: the left two are nearly untouched because the white hero type sits there and that is what the contrast budget buys, while the middle and right are cut hard (.62 -> .26, .34 -> .06, .24 -> .02) because no text sits there — that is where the photograph gets to show. Chosen by measuring, not by eye: candidates were rendered and the contrast under the hero title and the eyebrow read back off the pixels. This one leaves the title 55% and the eyebrow 133% above their AA floors across the worst hero photograph on the site. Lightening the MIDDLE stop is what eats that margin first (the title box runs to 900px, well into it), so re-measure before touching .26. */ .sc-svchero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(98deg, rgba(7,10,38,.86) 0%, rgba(7,10,38,.70) 26%, rgba(8,14,44,.26) 46%, rgba(8,16,48,.06) 64%, rgba(8,18,52,.02) 100%), linear-gradient(to bottom, rgba(7,10,38,.22) 0%, rgba(7,10,38,0) 32%, rgba(7,10,38,.13) 100%); } .sc-svchero__inner { position: relative; } .sc-svchero__sub { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,.82); } .sc-svchero__sub .sc-dot-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); flex: none; } /* Matches the homepage and About banners exactly — the page title is the opening statement, so it keeps the hero scale rather than dropping to the 33px .sc-h2 used by the sections below it. */ .sc-svchero__title { margin-top: 22px; max-width: 900px; font-size: 68px; line-height: 1.12; font-weight: 500; letter-spacing: -0.028em; color: #fff; } .sc-svchero__title strong { font-weight: 700; } /* Business-unit pages carry NO banner-size override — they run the same 68/58/50/40 ladder as the eight segment pages, which is the post-type-scale scale, not the smaller one still live at suriacrestway.com. If a unit page ever looks off next to a segment page, the fix belongs in the shared rule above, not in a per-page exception. */ /* ========================================================================== 2. WHAT WE PROVIDE — heading + photo left, stacked service cards right ========================================================================== */ .sc-provide { background: #fff; padding: 104px 0 96px; } /* stretch, not start: the photograph is sized to finish level with the bottom card, so the left column has to be told the row's full height. */ .sc-provide__grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 76px; align-items: stretch; } /* Column flex so the figure can take whatever height the heading, lede and the card list opposite leave over. */ .sc-provide__head { display: flex; flex-direction: column; } .sc-provide__head .sc-h2 { margin-top: 18px; } .sc-provide__lede { margin-top: 20px; font-size: 16px; line-height: 1.78; color: var(--sc-ink-3); } /* No aspect-ratio here: the frame fills the leftover height so its bottom edge lands on the bottom of the last card, and the 1100x880 photograph covers it. `height: 0` is doing real work — it is the flex basis. Left at `auto`, the basis comes from the img's 1100x880 ratio, so the figure contributes ~500px to the column's intrinsic height, the left column ends up TALLER than the card list, and the photo hangs 150px below the last card — the bug this replaced. With a zero basis the cards set the row height and the figure flexes into whatever the copy above leaves. min-height is the floor for a segment whose lede runs long enough to leave the figure nothing; it does not make the photo taller than the cards. */ .sc-provide__visual { margin-top: 34px; flex: 1 1 auto; height: 0; min-height: 300px; border-radius: 8px; overflow: hidden; background: #eceef5; } .sc-svcpage .sc-provide__visual img { width: 100%; height: 100%; object-fit: cover; } /* align-content: start keeps each card at its own copy height. Without it the list — stretched to the row height by the grid above — hands its spare space to its auto rows, and all four cards grow a block of dead padding under the text. The cards set the row height; the figure opposite is what flexes. */ .sc-provide__list { display: grid; gap: 14px; padding-top: 6px; align-content: start; } /* Icon left, copy right. Tinted at rest, white with a hairline on hover, so the four read as one block rather than four competing panels. */ .sc-pcard { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 24px 26px 26px; border-radius: 8px; background: var(--sc-brand-tint); border: 1px solid transparent; transition: background-color .24s ease, border-color .24s ease, transform .24s ease; } .sc-pcard:hover { background: #fff; border-color: var(--sc-line); transform: translateY(-2px); } .sc-pcard__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--sc-brand); color: #fff; display: grid; place-items: center; flex: none; transition: background-color .24s ease; } .sc-pcard__icon .sc-i { font-size: 23px; } .sc-pcard:hover .sc-pcard__icon { background: var(--sc-accent); } .sc-pcard h3 { font-size: 22px; line-height: 1.34; letter-spacing: -0.015em; } .sc-pcard p { margin-top: 9px; font-size: 14.5px; line-height: 1.68; color: var(--sc-ink-3); } /* ========================================================================== 3. BRAND PANEL — one wide card on a tinted band: photo left, statement right ========================================================================== */ /* Full-bleed water backdrop, same recipe as the homepage's "Why choose us" band: `why-bg.webp` behind, a navy wash over it, and a frosted panel on top. The path is relative to THIS file, so css/ and assets/ have to stay siblings — same constraint style.css has. */ .sc-band { position: relative; padding: 88px 0; background: url("../assets/img/why-bg.webp") center / cover no-repeat #0d2b52; isolation: isolate; } .sc-band::before { content: ""; position: absolute; inset: 0; background: rgba(9, 16, 54, .28); z-index: -1; } /* Barely-there white fill, hairline border, blur behind — the hero stats bar's glass. THE BLUR LIVES ONLY HERE. Adding backdrop-filter to the body column inside would buy nothing: it samples this panel's already-composited layer rather than the photograph, so it would read as a flat tint. A translucent fill and a hairline are what make the column read as glass. No box-shadow: it replaced a solid brand-blue card that needed lifting off a flat tint. Glass on a photograph doesn't, and the shadow muddied the water texture around the panel's edges. */ .sc-brandpanel { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; padding: 30px; border-radius: 8px; background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); } /* Positioning context for the stat tile. Inset inside the panel now rather than bleeding to its edges, so it carries its own radius and clip. */ .sc-brandpanel__media { position: relative; min-height: 430px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.08); } .sc-svcpage .sc-brandpanel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Sits over the photograph's bottom-right corner, pointing into the copy. */ .sc-brandpanel__stat { position: absolute; right: 26px; bottom: 26px; padding: 18px 22px 20px; border-radius: 8px; background: rgba(7,10,38,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); } .sc-brandpanel__num { display: block; font-family: "Archivo", sans-serif; font-size: 50px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: #fff; } .sc-brandpanel__label { display: block; margin-top: 8px; max-width: 130px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.72); } /* The statement column is a glass card in its own right — the same fill and hairline as the panel it sits in, which is what the reference layout does with the cards beside its photograph. */ .sc-brandpanel__body { padding: 44px 44px 46px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); } /* The eyebrow, heading and check rows all invert on the dark ground — enough overrides that they're grouped here rather than sprinkled through. */ .sc-brandpanel__body .sc-eyebrow { color: rgba(255,255,255,.72); } .sc-brandpanel__body .sc-eyebrow__dot { background: #fff; } .sc-brandpanel__body .sc-h2 { margin-top: 18px; color: #fff; } .sc-brandpanel__body .sc-h2 em { color: rgba(255,255,255,.6); } .sc-brandpanel__body p { margin-top: 20px; font-size: 15.5px; line-height: 1.8; color: rgba(255,255,255,.76); } .sc-brandpanel__checks { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } .sc-check { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; color: #fff; } .sc-check__mark { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; flex: none; } .sc-check__mark .sc-i { font-size: 12px; stroke-width: 2.6; } /* ========================================================================== 4. STAGES — uppercase heading + photo left, intro and accordion right ========================================================================== */ .sc-stages { background: #fff; padding: 100px 0 110px; } .sc-stages__grid { display: grid; grid-template-columns: 500px 1fr; gap: 80px; } .sc-stages__left { position: sticky; top: 32px; align-self: start; } /* The reference layout's largest section title — set here rather than on .sc-h2 so the other sections keep the 33px scale. */ .sc-stages__title { margin-top: 16px; max-width: 380px; font-size: 47px; line-height: 1.18; font-weight: 600; letter-spacing: -0.01em; } .sc-stages__figure { margin-top: 34px; width: 340px; border-radius: 8px; overflow: hidden; aspect-ratio: 340 / 400; background: #eceef5; } .sc-svcpage .sc-stages__figure img { width: 100%; height: 100%; object-fit: cover; } /* --- accordion: one panel open at a time -------------------------------- The accordion is the whole right column: there is no intro paragraph or link above it, so the first row's top rule starts level with the eyebrow opposite. `margin-top` is deliberately 0 — see the optical offset note in the README before adding one back. */ .sc-steps { margin-top: 0; } .sc-step { border-bottom: 1px solid var(--sc-line); } .sc-step:first-child { border-top: 1px solid var(--sc-line); } .sc-step__head { width: 100%; display: flex; align-items: center; gap: 18px; padding: 22px 0; text-align: left; } .sc-step__no { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--sc-ink-3); font-variant-numeric: tabular-nums; flex: none; transition: color .2s ease; } /* Closed rows are small uppercase labels; the open row grows into a 21px sentence-case title. The transition on font-size is what makes that read as one row expanding rather than two different rows. */ .sc-step__title { flex: 1; font-family: "Archivo", sans-serif; font-size: 14.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .075em; color: var(--sc-ink-3); transition: color .22s ease, font-size .22s ease, letter-spacing .22s ease; } .sc-step__toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sc-line); color: var(--sc-ink-3); display: grid; place-items: center; flex: none; transition: transform .28s ease, background-color .22s ease, color .22s ease, border-color .22s ease; } .sc-step__toggle .sc-i { font-size: 15px; } .sc-step:hover .sc-step__title { color: var(--sc-ink); } .sc-step:hover .sc-step__toggle { border-color: var(--sc-brand); color: var(--sc-brand); } .sc-step--open .sc-step__no { color: var(--sc-accent); } .sc-step--open .sc-step__title { font-size: 27px; font-weight: 600; text-transform: none; letter-spacing: -0.018em; color: var(--sc-ink); } .sc-step--open .sc-step__toggle { transform: rotate(45deg); background: var(--sc-brand); border-color: var(--sc-brand); color: #fff; } /* grid-template-rows 0fr → 1fr animates the panel height without JS having to measure anything. */ .sc-step__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s ease; } .sc-step__panel > p { overflow: hidden; } .sc-step--open .sc-step__panel { grid-template-rows: 1fr; } .sc-step__panel p { font-size: 15px; line-height: 1.72; color: var(--sc-ink-3); max-width: 640px; } .sc-step--open .sc-step__panel p { padding-bottom: 26px; } /* ========================================================================== BUSINESS UNIT OVERVIEW — copy left, sticky photograph right Used only by the six business-unit pages, which carry the client's own prose rather than the four-card breakdown the segment pages use. No invented heading — the eyebrow label and the client's own first sentence (set as a lede, same scale as .sc-provide__lede) are the only structure added on top of their copy. Mirrored left-to-right against .sc-provide so the two section types are distinguishable at a glance when a page eventually carries both. Cream rather than white: it sits directly under the navy hero, and the warm ground stops the page reading as two flat slabs. ========================================================================== */ .sc-buov { background: var(--sc-cream); padding: 104px 0 96px; } .sc-buov__grid { display: grid; grid-template-columns: 1.06fr 1fr; gap: 76px; align-items: start; } /* Same scale as .sc-provide__lede — the client's first paragraph, not an invented heading, so it takes the standard lede treatment rather than a size of its own. */ .sc-buov__lede { margin-top: 20px; font-size: 16px; line-height: 1.78; color: var(--sc-ink-3); max-width: 620px; } .sc-buov__body p { margin-top: 20px; font-size: 16px; line-height: 1.78; color: var(--sc-ink-3); max-width: 620px; } /* Copied from css/style.css rather than shared: services.css is a standalone plugin stylesheet and cannot depend on the homepage's sheet being enqueued. Values are the homepage hero CTA's, with --sc-brand as the ground — that is the same #262aad the live hero button already uses. Keep the two in step. */ .sc-svcpage .sc-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; transition: background-color .22s ease, color .22s ease, transform .22s ease; } .sc-svcpage .sc-btn--brand { background: var(--sc-brand); color: #fff; border-radius: 8px; padding: 13px 26px; font-size: 15px; } .sc-svcpage .sc-btn--brand:hover { background: var(--sc-brand-dark); } .sc-buov__cta { margin-top: 34px; } /* Sticky copy column, matching .sc-stages__left. The photograph opposite is the taller box on every unit page, so pinning the text is what actually holds still — the reverse (pinning the photo) leaves the copy to scroll away from its own CTA. This works ONLY because .sc-buov__grid uses align-items: start. That keeps each column's box at its content height while its GRID AREA stays the full row height, and a sticky item travels inside its grid area. Switch the grid to the default `stretch` and both columns become full-height, leaving zero travel — sticky then silently does nothing. The offset clears the 114px site header plus a little breathing room. */ .sc-buov__head { position: sticky; top: 138px; } .sc-buov__figure { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #eceef5; } .sc-svcpage .sc-buov__figure img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== BUSINESS UNIT CAPABILITIES — heading, then a two-up card grid Second section on every unit page. White, so the page reads navy hero → cream overview → white grid rather than two cream slabs in a row. FOUR CARDS, FOUR COLUMNS, every unit — the count is fixed, not per-unit. .sc-bucard is a STACKED card (disc above the heading), not .sc-pcard. At four across, a column is ~305px; .sc-pcard spends 52px of that on the icon and 20px on the gap before the text even starts, leaving under 200px of measure. Icon on top gives the copy the full column. .sc-pcard itself is left alone — the eight segment pages still use it two-up beside a photo. The disc, its brand→accent hover and the lift are copied from .sc-pcard on purpose, so a unit page and a segment page still read as one system. ========================================================================== */ .sc-bucap { background: #fff; padding: 104px 0 96px; } .sc-bucap__head { max-width: 780px; } .sc-bucap__head .sc-h2 { margin-top: 18px; } .sc-bucap__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; /* stretch (the grid default, stated here so nobody "tidies" it back to start): every card takes the height of the tallest in its row, so the four tinted blocks line up top and bottom. Card bodies run to different lengths — left to size themselves, the row ends up visibly ragged. The cost is some empty space under the shorter cards, which is the intended look. */ align-items: stretch; } .sc-bucard { padding: 30px 26px 32px; border-radius: 8px; background: var(--sc-brand-tint); border: 1px solid transparent; transition: background-color .24s ease, border-color .24s ease, transform .24s ease; } .sc-bucard:hover { background: #fff; border-color: var(--sc-line); transform: translateY(-2px); } .sc-bucard__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--sc-brand); color: #fff; display: grid; place-items: center; transition: background-color .24s ease; } .sc-bucard__icon .sc-i { font-size: 23px; } .sc-bucard:hover .sc-bucard__icon { background: var(--sc-accent); } /* 19.5px, not the 22px .sc-pcard uses: at a quarter of the row a 22px heading wraps to three lines on the longer card titles. Both sit on the same bumped type scale. */ .sc-bucard h3 { margin-top: 22px; font-size: 19.5px; line-height: 1.34; letter-spacing: -0.015em; } .sc-bucard p { margin-top: 10px; font-size: 14.5px; line-height: 1.68; color: var(--sc-ink-3); } /* ========================================================================== Responsive — the design width is 1340px; these keep it usable below that ========================================================================== */ @media (max-width: 1200px) { .sc-svchero__title { font-size: 58px; } .sc-provide__grid { grid-template-columns: 1fr; gap: 30px; } /* The grid column stops setting the measure once it's full width, so the lede needs its own cap or it runs to ~110 characters a line. */ .sc-provide__lede { max-width: 680px; } /* Back to a fixed shape once the columns stack — there is no longer a card list opposite to match, and the zero flex basis above would otherwise leave the frame stuck at its min-height. */ .sc-provide__visual { flex: 0 0 auto; height: auto; min-height: 0; aspect-ratio: 16 / 9; } .sc-brandpanel__body { padding: 36px 34px 38px; } .sc-stages__grid { grid-template-columns: 1fr; gap: 46px; } /* Nothing left to stick to once the columns stack. */ .sc-stages__left { position: static; } .sc-stages__title { max-width: none; } .sc-stages__figure { width: 100%; aspect-ratio: 16 / 9; } .sc-buov__grid { grid-template-columns: 1fr; gap: 38px; } /* Nothing left to stick to once the columns stack, and a 4:5 portrait is far too tall at full width. */ .sc-buov__head { position: static; } .sc-buov__figure { aspect-ratio: 16 / 9; } .sc-buov__lede, .sc-buov__body p { max-width: 680px; } /* Four across needs ~305px a column; below 1200px that is no longer there. */ .sc-bucap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .sc-svchero { min-height: 0; padding-top: 110px; padding-bottom: 52px; } .sc-svchero__title { font-size: 50px; } .sc-svcpage .sc-svchero__media img { object-position: 62% 50%; } .sc-provide { padding: 48px 0; } .sc-buov { padding: 48px 0; } .sc-bucap { padding: 48px 0; } .sc-band { padding: 48px 0; } .sc-brandpanel { grid-template-columns: 1fr; } /* Let the photo size itself once it's a band across the top of the card — 460px of forced height on a full-width cell crops it to a strip. */ .sc-brandpanel__media { min-height: 0; aspect-ratio: 16 / 10; } .sc-svcpage .sc-brandpanel__media img { position: static; } .sc-stages { padding: 72px 0 78px; } } @media (max-width: 620px) { /* The banner headline stays the largest type on the page at 30px; the section headings drop to 22px and the uppercase one to 26px. */ .sc-svchero__title { font-size: 40px; } .sc-svcpage .sc-h2 { font-size: 29px; } .sc-stages__title { font-size: 34px; } .sc-provide__panel { padding: 20px; } .sc-pcard { grid-template-columns: 1fr; gap: 16px; padding: 22px 22px 24px; } .sc-brandpanel { padding: 20px; gap: 20px; } .sc-brandpanel__body { padding: 26px 24px 28px; } .sc-brandpanel__checks { grid-template-columns: 1fr; } .sc-brandpanel__stat { right: 16px; bottom: 16px; padding: 14px 18px 16px; } .sc-brandpanel__num { font-size: 39px; } .sc-step__head { gap: 14px; } .sc-step--open .sc-step__title { font-size: 23px; } .sc-bucap__grid { grid-template-columns: 1fr; margin-top: 34px; } } /* ========================================================================== ENTRANCE ANIMATION [data-anim] elements rise/fade in as they scroll into view. The resting state here is fully VISIBLE — the hidden state only exists under .sc-anim-on, which js/services.js adds. So with JS off, JS broken, or IntersectionObserver missing, every element just renders normally. Stagger comes from --sc-d, set per element by the same module. ========================================================================== */ .sc-svcpage.sc-anim-on [data-anim] { opacity: 0; } .sc-svcpage.sc-anim-on [data-anim="up"] { transform: translateY(22px); } .sc-svcpage.sc-anim-on [data-anim="left"] { transform: translateX(-26px); } .sc-svcpage.sc-anim-on [data-anim="scale"] { transform: scale(.965); } /* The transition lives on the "in" state only, so applying the hidden state at startup can't animate backwards from visible. */ .sc-svcpage.sc-anim-on [data-anim].sc-anim-in { opacity: 1; transform: none; transition: opacity .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms), transform .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms); } @media (prefers-reduced-motion: reduce) { .sc-svcpage *, .sc-svcpage *::before, .sc-svcpage *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } /* Never leave anything hidden waiting on a transition that won't run. */ .sc-svcpage.sc-anim-on [data-anim] { opacity: 1 !important; transform: none !important; } }