/* ================================================================== * iTech Valet — AI AUTHORITY ENGINE (/services/) * * Loaded ONLY on the services page. See functions.php. * * !! EVERY PAGE ON THIS SITE IS CUSTOM. Nothing here is expected to be * reused, and nothing here may be promoted into main.css because it * "looks generic" - the next page measures differently. * * Every number below was read off the LIVE page through the DOM on * 2026-08-24, at 1280, 1024, 769, 768 and 375. The CSS export in * migration/ was used only to find which artwork belongs to which band. * * ASSET PATHS ARE ../../img/ - two levels, because this file sits in * assets/css/pages/. One level silently killed six homepage backgrounds * once; the bands rendered their fallback colours and nothing errored. * * SPECIFICITY. main.css sets `h2.section-title { margin: ... }` and * `.svc-band p { font-size: ... }` below sets type for the whole page. * Both are (0,1,1). Every override in this file is therefore written at * (0,2,0) or better - `.svc-band .svc-title`, not `.svc-title`. A plain * single-class rule here LOSES, silently, and the markup looks correct * the whole time. That is the bug that painted the homepage hero * paragraph white on a white card. * * THE 400px STACKED-COLUMN CAP IS REPRODUCED, after a first pass decided * it was builder noise and dropped it. Below 769 the original caps every * NARROW stacked column at 400px and centres it. Seen at 375 that changes * nothing - the viewport is already under 400 - so the first cut measured * clean and shipped full-width blocks. * * At 768 it is not a card-width detail, it is the reading measure of the * whole page: four bands came out between 66 and 813px shorter than the * original because the copy ran 728px wide instead of 360. Faithful is the * default; if the narrow measure is not wanted on tablets that is Gerek's * call to make, not a judgement to bury in a stylesheet. * * WHICH columns are capped is measured per element, not guessed: the * engine's four stages, the cards in bands 5 and 6, the three closing * columns and the pills all cap. The hero card, the playbook copy, the * engine's heading and closer, the tier copy, the button and the founder * note all stay full width. * * The other departure that used to live here is gone: nothing. There WAS a second - this file used to ramp its type * fluidly between 860 and 1280, the theme's usual idiom, which was exact * at 1280, 768 and 375 and wrong everywhere in between. At 1100 the page * came out 243px shorter than the original in one band alone, with a * 51.7px heading against the original's 60. It now steps where the * original steps, so it matches at EVERY width and not only at the three * that were measured first. * * THE BREAKPOINTS ARE 768 AND 992, and they are the original's, not the * theme's usual 860. Measured at 769, 900 and 992: only THREE values move * in that middle band - the section title 60 -> 50, the disqualifier * headings 36 -> 30, and the CTA 22px on an 18px line -> 20px on 24. * Everything else - the 70px headline, the 110px accent, the 18px * standfirst, 22px body, 22px pills - holds its desktop value all the way * down to 769 and only changes at 768. The first cut ramped all of them. * * 01 BAND FRAME * 02 DARK BANDS AND ARTWORK * 03 HERO * 04 THE OLD PLAYBOOK IS DEAD * 05 WHAT IS THE AI AUTHORITY ENGINE? * 06 TWO TIERS, ONE SYSTEM * 07 WHAT HAPPENS AFTER YOU SAY YES * 08 THIS IS NOT FOR EVERYONE * 09 FIND OUT WHAT AI SAYS * 09b BELOW 993, NOT TYPE * 10 TABLET AND DESKTOP TYPE * 10b FULL DESKTOP * 11 MOBILE * ================================================================== */ /* ================================================================== * 01 BAND FRAME * ================================================================== */ /* The inset every content block carries INSIDE the 1200px band. * * Measured: the band runs 40 -> 1240 at a 1280 viewport, and its headings * and copy run 60 -> 1220. That extra 20px is Beaver Builder's module * margin, and it is on the module, not the container - card grids sit * flush at 40 and 1240 while text is inset. * * It halves on mobile, where the live page removes the row gutter * altogether: text lands at 20 and cards at 10 inside a 375 viewport, * which is exactly where the original's do. */ .svc-band { --svc-inset: 20px; } /* Measured per row. Bands 5 and 6 carry 60px of tail; the rest are 20/20. Fixed 60, not a clamp - the live page keeps the full 60 at 375 too. */ .svc-pad60 { padding-bottom: 60px; } /* Body copy. Measured 22px/31.9 at 1280 and 20px/29 at 768 and 375, which is exactly --t-lead at --lh-lead. WEIGHT 300, AND GETTING THERE TOOK THREE READINGS. getComputedStyle on the live paragraphs says 100. It is wrong about what the visitor sees, twice over: 1. Almost every paragraph's text is wrapped in a Google-Docs ``, so the 100 on the

is overridden before it reaches a single word. 2. The live page requests Lexend 100, 300 and 700 - it never loads a 400 face. CSS font matching resolves a requested 400 down to the 300 that is available. So the page renders in Lexend 300, the same weight as the rest of the site. Confirmed by measuring, not by reasoning: the same string at 22px is 1001.33px wide on the live page and 1001.33px wide here at 300 - against 953.95 at 100 and 1031.56 at a real 400. THIS IS WHY THE WEIGHT MUST BE READ OFF THE TEXT NODES, not the block. Setting 100 here made four paragraphs wrap a line short and one wrap a line long, and nothing about the page looked broken. */ .svc-band p, .svc-band li { font-size: var(--t-lead); font-weight: 300; line-height: var(--lh-lead); } /* Measured: 10px between paragraphs, and nothing after the last one - so a band's tail is its own padding and not the padding plus a stray 10. */ .svc-band p:last-child { margin-bottom: 0; } /* Section titles. main.css supplies Bebas, uppercase and the 60px/40px --t-h2 scale; the margins, alignment and leading are per band. */ .svc-band .svc-title { margin-inline: var(--svc-inset); } .svc-band .svc-title--center { text-align: center; } /* The bright blue inside "Two Tiers... ONE System". Measured #2494e0. */ .svc-em-blue { color: var(--c-blue); } /* ================================================================== * 02 DARK BANDS AND ARTWORK * * Bands 3, 5 and 7 sit on dark photographs and set everything white. * ================================================================== */ .svc-dark, .svc-dark h1, .svc-dark h2, .svc-dark h3, .svc-dark p, .svc-dark li { color: var(--c-white); } /* The white cards in band 5 keep the navy type they have on the live site - that contrast is the design, not an oversight. Written at (0,2,1) so it outranks `.svc-dark p` above rather than relying on source order. */ .svc-dark .svc-card--white p { color: var(--c-navy); } /* THE TWO `a` RULES THAT USED TO SIT HERE ARE GONE, and nothing replaces * them: every dark band carries `links-inherit` in the template, which * makes a link take `currentColor` - white on the band, navy inside a * white card - from the two rules above. See main.css section 02b. * * THIS PAGE'S CLOSING HOVER WAS BROKEN AND IS NOW FIXED. `.svc-dark * a:not(.cta-button)` was (0,2,1) and governed only the resting state, * so main.css's (0,3,1) hover repainted all three closing links navy. * Measured on the artwork behind them: 1.00:1, 1.00:1 and 1.00:1 worst * pixel at 1280. Three invisible links, and nothing looks wrong until a * pointer lands on one. BUILD-PLAN.md flagged this page and the homepage * as still carrying the defect after /about/ was fixed; both are fixed * now, by the same rule rather than by two more one-line patches. */ /* --- band artwork ------------------------------------------------- * The real photographs from the original. Which image belongs to which * band comes from Beaver Builder's generated stylesheet, keyed by node * id; the files themselves were already in the captured media. * * The globe is SHARED with the homepage's closing band and is not * duplicated - one file, referenced from both page stylesheets. * ------------------------------------------------------------------ */ .bg-services-hero, .bg-services-engine, .bg-services-execution, .bg-services-globe { background-repeat: no-repeat; background-position: center; background-size: cover; } .bg-services-hero { background-image: url("../../img/bg/services-hero.webp"); } .bg-services-engine { background-image: url("../../img/bg/services-engine.webp"); } .bg-services-execution { background-image: url("../../img/bg/services-execution.webp"); } .bg-services-globe { background-image: url("../../img/bg/home-dark-globe.webp"); } /* ================================================================== * 03 HERO * * A LIGHT photograph, so the type here is NAVY - this band is not * .svc-dark, unlike the three that look like it in the layout stylesheet. * ================================================================== */ /* 100px above the headline, measured. On the live page that is 20 of row padding, 40 contributed by an empty Beaver Builder module holding a stylesheet , and 60 of real margin. The junk module is gone; the 120px of air it produced is kept, because that is what the band is. */ .svc-hero .svc-hero__headline { margin: 100px var(--svc-inset) 60px; color: var(--c-navy); font-size: 40px; /* measured floor; ramps in section 10 */ line-height: 1.1; text-align: center; } /* Chewy, italic, and much larger than the headline it sits under. The second line's box is the accent's own leading - 121px on 110px - which is what makes the headline 198px tall rather than 154. */ .svc-hero__accent { font-family: var(--f-accent); font-style: italic; font-size: 50px; /* measured at 375; ramps in section 10 */ line-height: 1.1; color: var(--c-navy); } /* The standfirst card. Measured #d7d7d7 - a page-specific grey, deliberately not promoted to a token: nothing else on the site uses it. 15px radius, full band width, 20px of padding, and the text at 300 rather than the 100 the rest of the band runs at. */ .svc-band .svc-summary { margin: 0; padding: 20px; border-radius: 15px; background: #d7d7d7; color: var(--c-ink); font-size: 20px; /* measured at 375/768; 18px from 861 up */ font-weight: 300; line-height: var(--lh-lead); text-align: center; } .svc-hero__lead { margin: 60px var(--svc-inset); color: var(--c-navy); text-align: center; } /* THE HERO BAND OPTS OUT OF THE SITE LINK RULE - `links-inherit` on the * section, not a rule here. * * Its ground is a light photograph and --c-link measures 4.15:1 on it * worst-pixel at 1280, 4.24 at 375, so the colour would very nearly do. * The lead copy is --c-navy, and that is what settles it: --c-link * against --c-navy is 2.53:1, under the 3:1 that has to hold once the * underline is gone. No colour clears both bars against navy copy - the * required luminance ranges do not overlap; the arithmetic is in main.css * section 02b. The link keeps the navy and the underline carries it. */ /* ================================================================== * 04 THE OLD PLAYBOOK IS DEAD * ================================================================== */ .svc-playbook .svc-title { margin-top: 60px; margin-bottom: 40px; line-height: 1.1; } /* 1.0 stacked, against 1.1 at 1280 - the original's own per-node setting, and the last 3px of difference in the band. The heading is one line at both widths, so this shows as band height and nothing else. */ @media (max-width: 768px) { .svc-playbook .svc-title { line-height: 1; } } /* The four retired tactics. Measured: a grey #f2f2f2 pill, 100px radius, 10px/20px of padding, with 5px above and below and 15px between (a 10px right margin meeting the next pill's 5px left one). THE PILLS ARE NOT SIZED BY THEIR LABELS. Measured 185, 225, 165 and 189px wide inside tracks of 200, 240, 180 and 204 - proportions the original's column group fixed, not content widths. Laid out with content-sized pills they came out 137px and the row read as four tags rather than four columns. The fifth track is the empty 376px the original leaves to the right of them. fr units, so the proportions hold at any width and nothing overflows. BELOW 993 THE EMPTY TRACK DISAPPEARS AND THE PILLS FILL THE ROW. Measured at 900: the original's two trailing columns collapse to zero and the four pills share the whole 860 - 211, 239, 196 and 213 wide, still one line each. Held as a grid down there instead, the tracks came out 128 and 157 wide, "Keyword Density" wrapped to two lines, and the band ran 127px tall. The original is `flex: 1 1 auto` in that range, so this is too - the same layout model produces the same widths without transcribing four numbers that are really a flex result. */ .svc-pills { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } /* The flex BASIS is the original's column percentage, not the label's own width. With `auto` the four pills started from their content and shared out the slack differently: at 769 "Keyword Density" got 8px more than the original gives it, stayed on one line where the original wraps it, and the band came out 33px short. The percentages are 200/240/180/204 of the 1200 the desktop row is built on. */ .svc-pills li { flex: 1 1 auto; } .svc-pills li:nth-child(1) { flex-basis: 16.667%; } .svc-pills li:nth-child(2) { flex-basis: 20%; } .svc-pills li:nth-child(3) { flex-basis: 15%; } .svc-pills li:nth-child(4) { flex-basis: 17%; } @media (min-width: 993px) { .svc-pills { display: grid; grid-template-columns: 200fr 240fr 180fr 204fr 376fr; } } .svc-band .svc-pills li { margin: 5px 10px 5px 5px; padding: 10px 20px; border-radius: 100px; background: #f2f2f2; color: var(--c-ink); font-size: 18px; /* measured at 375 and 768; ramps to 22 */ font-weight: 300; text-align: center; } /* Measured 720 of the band's 1200, with the remaining 480 empty. FR UNITS, never pixels: a 720px + 480px grid cannot shrink, and that is exactly what put a 1220px document inside a 900px viewport the last time it was written the other way. Identical at 1200, safe everywhere below it. */ .svc-playbook__grid { display: grid; grid-template-columns: 3fr 2fr; } .svc-playbook .svc-copy { margin: 20px var(--svc-inset) 60px; color: var(--c-navy); } /* ================================================================== * 05 WHAT IS THE AI AUTHORITY ENGINE? * ================================================================== */ /* The heading and its standfirst occupy 612 of 1200; the rest is empty. 51fr/49fr rather than 612px/588px, for the same reason as above. BOTH ITEMS ARE PINNED TO COLUMN 1 rather than wrapped in a spare div, and that is load-bearing: grid items never collapse their margins, so the heading's 20px bottom and the standfirst's 20px top stay 40px apart. As ordinary siblings they collapsed to 20 and the band came out exactly 20px short - the only fault in the first render, and invisible without the measurement. */ .svc-engine__intro { display: grid; grid-template-columns: 51fr 49fr; } .svc-engine__intro > * { grid-column: 1; } /* Measured 60px on 60px - solid, not the 1.1 the other bands use. This is the page's only two-line H2 at desktop width, so the leading shows. */ .svc-engine .svc-title { margin-top: 60px; margin-bottom: 20px; line-height: 1; } /* p. not .svc-engine__standfirst alone: this paragraph is the last child of its wrapper, so `.svc-band p:last-child { margin-bottom: 0 }` (0,2,1) outranks a single class and silently ate the 20px measured underneath it. Adding the element name makes this (0,2,1) too, and later wins. */ .svc-band p.svc-engine__standfirst { margin: 20px var(--svc-inset); } /* The four stages, two by two. Each pair shares a grid row, so The Data sits level with The Research and The Execution with The Rebuild - which is what the original's equal-height column groups produce. */ .svc-steps { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } .svc-step { margin: 40px var(--svc-inset) 20px; } .svc-step ul { margin: 0 0 10px; padding-left: 20px; list-style: disc outside; } .svc-engine__close { margin: 40px var(--svc-inset) 60px; text-align: center; } /* ================================================================== * 06 TWO TIERS, ONE SYSTEM * ================================================================== */ .svc-tiers .svc-title { margin-top: 60px; margin-bottom: 40px; line-height: 1.1; } /* Measured 300 / 900. 1fr/3fr is the same split and survives a narrow viewport. */ .svc-tier { display: grid; grid-template-columns: 1fr 3fr; align-items: start; } .svc-tier__media { margin: 20px var(--svc-inset); } .svc-tier__img { width: 100%; } .svc-tier__body { margin: 20px var(--svc-inset); color: var(--c-navy); } .svc-tier--last .svc-tier__body { margin-bottom: 60px; } /* Measured: the tier name is centred over copy that is left-aligned. */ .svc-tier__name { text-align: center; } /* ================================================================== * 07 WHAT HAPPENS AFTER YOU SAY YES * ================================================================== */ /* Measured 60px on 60px, as band 3. Centred, unlike bands 2, 4 and 6. */ .svc-after .svc-title { margin-top: 60px; margin-bottom: 20px; line-height: 1; } .svc-cards { display: grid; } .svc-cards--2 { grid-template-columns: 1fr 1fr; } .svc-cards--3 { grid-template-columns: 1fr 1fr 1fr; } /* Measured 10px on every side, inside cells that tile the band exactly. */ .svc-card { margin: 10px; } .svc-card--white { border-radius: 15px; background: var(--c-white); text-align: center; } .svc-card__media { margin: 20px 20px 40px; } .svc-card__body { margin: 0 20px 60px; } /* Fixed display widths, measured - these are not fluid images. The card has 540px of usable width and the artwork sits well inside it. */ .svc-card__img { margin-inline: auto; } .svc-card__img--checklist { width: 200px; } .svc-card__img--rebuild { width: 320px; } /* ================================================================== * 08 THIS IS NOT FOR EVERYONE * ================================================================== */ .svc-fit .svc-title { margin-top: 60px; margin-bottom: 20px; line-height: 1.1; } .svc-fit__standfirst { margin: 0 var(--svc-inset) 60px; color: var(--c-navy); } /* 25px, NOT the 15px the band-5 cards use, and a darker grey than the pills. Measured on both counts - the two card families on this page are genuinely different objects and were nearly built as one. */ .svc-card--grey { border-radius: 25px; background: #d7d7d7; } /* Black, not the heading navy. Measured. */ .svc-card__title { margin: 40px 20px 20px; color: var(--c-ink); font-family: var(--f-display); font-weight: 400; font-size: 30px; /* measured floor; ramps in section 10 */ line-height: 1.1; text-transform: uppercase; text-align: center; } /* The verdict, in orange, one clear line below the question. On the live page that gap is two
tags; 1.1em is the same distance and leaves the heading as one readable string for a screen reader. */ .svc-card__verdict { display: block; margin-top: 1.1em; color: var(--c-orange); } .svc-card--grey .svc-card__body { margin: 0 40px 60px; color: var(--c-ink); text-align: left; } /* Measured: 20px/29 in these cards at EVERY width, desktop included, while the band around them runs 22. */ .svc-band .svc-card--grey .svc-card__body p { font-size: 20px; } /* The first card's copy stops 20px above the card floor rather than 60. The three cards are equal height, so this shows only as the tail under the shortest column - and it is measured. */ .svc-card--grey .svc-card__body--short { margin-bottom: 20px; } /* ================================================================== * 09 FIND OUT WHAT AI SAYS * ================================================================== */ .svc-close .svc-title { margin-top: 60px; margin-bottom: 20px; line-height: 1.1; } /* Copy | mascot | copy. The mascot starts 80px above the two text columns, which is what the 100px against 20px top margins below produce. */ .svc-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; } .svc-trio__text { margin: 100px var(--svc-inset) 20px; text-align: center; } .svc-trio__media { margin: 20px var(--svc-inset); } .svc-trio__img { width: 250px; margin-inline: auto; } /* Measured 22px on a 24.2px line - 1.1, noticeably tighter than the 1.45 the rest of the page runs at. */ .svc-band .svc-trio__text p, .svc-band .svc-closing-note p { line-height: 1.1; } /* 20 above the button and 60 below it, measured. The 60 is PADDING, not margin: as a margin it sits next to the closing note's 100px top margin, the two collapse to 100, and 60px of the band quietly disappears. On the live page they cannot collapse because each is inside its own module. */ .svc-cta { margin: 20px 0 0; padding-bottom: 60px; text-align: center; } /* Everything but the size and weight comes from .cta-button in main.css - the 3px white ring, the 90deg gradient, the shadow and the hover reversal are all global and identical here. Measured: 22px at 700 on an 18px line, which is what makes the pill exactly 64px tall. */ .svc-cta__button { padding: 20px 40px; font-size: 17px; /* measured floor; ramps in section 10 */ font-weight: 700; line-height: 1.2; /* measured 20.4px on 17px at 768 */ text-transform: capitalize; } .svc-closing-note { margin: 100px var(--svc-inset) 60px; text-align: center; } /* The original holds this line apart with an empty paragraph either side. 44px reproduces the same 44.2px of air without shipping two paragraphs that contain nothing but a non-breaking space. Adjacent margins collapse, so this is the gap above AND below, not an addition to the 10px rhythm. */ .svc-closing-note__ask { margin-block: 44px; } /* ================================================================== * 09b THE TWO THINGS THAT CHANGE BELOW 993 BUT ARE NOT TYPE * * Both measured at 900, and neither is a type step. * ================================================================== */ @media (max-width: 992px) { /* The empty 480px column beside the playbook copy drops out below the original's medium breakpoint and the copy takes the whole row. Held at 3fr/2fr instead, the copy sat 516px wide against the original's 860 and the band ran 95px tall. */ .svc-playbook__grid { grid-template-columns: 1fr; } /* 30px above the CTA rather than 20 - measured 160px for the whole button block at 900 against 150 for a 20px top margin. */ .svc-cta { margin-top: 30px; } } /* ================================================================== * 10 TABLET AND DESKTOP TYPE (>= 769) * * Floors are the measured mobile values and live in the rules above, so * a browser that never matches this query still reads correctly. * ================================================================== */ @media (min-width: 600px) { /* All measured at 769, 900, 992, 1280 and 1512 - flat across the whole range. None of these five move until 768. */ .svc-hero .svc-hero__headline { font-size: 70px; } .svc-hero__accent { font-size: 110px; } .svc-band .svc-pills li { font-size: 22px; } /* 22 from 769 up, 20 below it. --t-lead is not used here any more: its clamp bottoms out at 20 anywhere under ~1164, so the body copy was two points light across the entire tablet range while the original held 22 down to 769. */ .svc-band p, .svc-band li { font-size: 22px; } /* The middle step. 50px against 60 above 992, measured at 769 and 900. Per-band leading is unchanged - 1.1 everywhere except the engine and the "after you say yes" bands, which run solid. */ .svc-band .svc-title { font-size: 50px; } /* THE DESKTOP SIZE, not the original's 20px middle step. The same call Gerek made about the homepage's hero button: at tablet width a 20px label under a 50px heading reads undersized, and he wants tablet to match desktop. 17px on a phone is unchanged. */ .svc-cta__button { font-size: 22px; line-height: 18px; } } /* ================================================================== * 10b FULL DESKTOP (>= 993) * * The original's upper breakpoint. Only three values cross it. * ================================================================== */ @media (min-width: 993px) { .svc-band .svc-title { font-size: 60px; } .svc-card__title { font-size: 36px; } /* 37px, measured, against the other two at 36 - a per-node value in the original. Kept rather than tidied away. */ .svc-card--wide-title .svc-card__title { font-size: 37px; } /* THE STANDFIRST CARD IS THE ONE THING THAT GETS SMALLER ON DESKTOP: 20px everywhere else against 18 here. Measured both ways round, and it holds through tablet rather than stepping at 600 with the rest - it is written to be read on a phone, and a tablet is closer to a phone than to a monitor for that one block. */ .svc-band .svc-summary { font-size: 18px; } } /* ================================================================== * 11 MOBILE * * 768, the original's own breakpoint - not the theme's usual 860. This * page stacks exactly where the page it rebuilds stacks, so there is no * width at which the two lay out differently. * ================================================================== */ @media (max-width: 768px) { /* The gutter halves and the block inset halves with it, so text lands at 20 and cards at 10 inside a 375 viewport - both measured. */ .svc-band { --svc-inset: 10px; padding-inline: 10px; } /* Measured: every heading centres, including the four that are left-aligned on desktop. */ .svc-band .svc-title { text-align: center; } /* 50px at 375 -> 80px at 600, where the tablet rule takes over at 110. Scoped to 599 rather than living in this block: the type steps at 600 now, and left here it would have been the one value still reading at phone size while everything around it had gone to tablet. */ @media (max-width: 599px) { .svc-hero__accent { font-size: clamp(50px, calc(50px + 30 * (100vw - 375px) / 225), 80px); } } /* Every grid becomes one column. */ .svc-playbook__grid, .svc-engine__intro, .svc-steps, .svc-tier, .svc-cards--2, .svc-cards--3, .svc-trio { grid-template-columns: 1fr; } /* Full-width pills, stacked, flush with the copy above and below. */ .svc-pills li, .svc-pills li:nth-child(1), .svc-pills li:nth-child(2), .svc-pills li:nth-child(3), .svc-pills li:nth-child(4) { flex: 1 1 100%; } .svc-band .svc-pills li { margin: 10px 0; } /* THE 400px CAP. The original's stacked columns are 400px wide and centred; each element below is written as its own content width so it lands on the original's pixels at BOTH 375 and 768. min() rather than max-width, because the inset has to survive when the viewport is narrower than the cap: at 375 these resolve to the full band and keep their 10px gutter, at 768 they resolve to the cap and centre in the leftover space. */ .svc-card { margin: 10px 0; } .svc-step, .svc-trio__text, .svc-trio__media { margin-inline: auto; } /* THE 400px CAP IS A PHONE TREATMENT, so it stops where the phone scale stops. It is faithful to the original at every width - but the original also runs 20px type inside it, and the type now steps up to 22 at 600. Left at 768 this would have put desktop copy in a 360px column on an iPad mini with half the screen empty either side, which is worse than either choice on its own. Below 600 the cap is unchanged. */ @media (max-width: 599px) { .svc-card { width: min(100%, 380px); margin-inline: auto; } .svc-step, .svc-trio__text, .svc-trio__media { width: min(100% - 20px, 360px); } .svc-band .svc-pills li { max-width: 380px; margin-inline: auto; } } /* Measured: the inner inset drops to a flat 20px on both card families, the disqualifier headings lose their 40px of top air, and the 60px tail under every card's copy becomes 20. */ .svc-card__title { margin: 20px; } .svc-card--white .svc-card__body, .svc-card--grey .svc-card__body, .svc-card--grey .svc-card__body--short { margin: 0 20px 20px; } /* Artwork, measured at 375 and 768. The four images do not share one scale factor, so each carries its own width. */ .svc-tier__media { text-align: center; } .svc-tier__img { width: 150px; margin-inline: auto; } .svc-card__img--checklist { width: 150px; } .svc-card__img--rebuild { width: 240px; } .svc-trio__img { width: 200px; } /* --- the mobile vertical rhythm ------------------------------------ * Stacked, the original drops almost every module margin to a flat * 20px. Carrying the desktop rhythm down instead left all seven bands * between 15 and 194px too tall - the type was already exact and the * page still read wrong, which is the whole lesson about measuring * spacing as well as size. * ------------------------------------------------------------------ */ /* 60 = the 40px the original's empty font-link module contributes plus its own 20. 30 below, which is the heading's 20 meeting the card's own 10 of column margin. */ .svc-hero .svc-hero__headline { margin: 60px var(--svc-inset) 30px; } .svc-band .svc-summary { margin-bottom: 30px; } .svc-hero__lead { margin: 0 var(--svc-inset) 20px; } /* Every section title, including the two that carry 40px underneath them on desktop. */ .svc-band .svc-title { margin-top: 20px; margin-bottom: 20px; } .svc-playbook .svc-copy { margin: 20px var(--svc-inset); } /* THE DIVIDERS ONLY EXIST STACKED. On the live desktop page the four separator modules between the engine's stages compute to zero width and paint nothing; at mobile they are a real 1px #ccc rule the width of the text column. Reproduced as a border rather than four empty elements, with the padding putting 20px either side of the line as the original has - the separator is its own module there, so it contributes 20px of margin on each side on top of the 20px the blocks either side already carry. */ /* `auto`, not the inset: the width above already carries the inset, and a margin-inline here would override the centring and pin the block to the left edge - which it did, invisibly, until the step was measured at 20-380 instead of 204-564. */ .svc-step { margin: 20px auto; } .svc-step + .svc-step { padding-top: 40px; border-top: 1px solid #ccc; } /* The FOURTH divider - the original puts one between The Execution and the closing line too, not only between the four stages. */ .svc-engine__close { margin: 20px var(--svc-inset); padding-top: 40px; border-top: 1px solid #ccc; } /* The icon's own 20px bottom margin is the whole gap - the copy starts flush against it. */ .svc-tier__body, .svc-tier--last .svc-tier__body { margin: 0 var(--svc-inset) 20px; } .svc-fit__standfirst { margin: 0 var(--svc-inset) 20px; } /* Measured 30 above the button and 20 below, the reverse of the desktop 20/60. */ .svc-cta { margin-top: 30px; padding-bottom: 20px; } .svc-closing-note { margin: 20px var(--svc-inset); } /* 42, not the desktop 44: the gap is one empty line of the original's own copy, and the line is 22px here against 24.2px at 1280. */ .svc-closing-note__ask { margin-block: 42px; } /* Stacked, the 100px that lifted the mascot beside the copy is just a hole in the page. */ .svc-trio__text { margin-top: 20px; } } /* ================================================================== * 12 RESTING CARD SHADOW — tablet and mobile * * Matches the homepage. The disqualifier cards are #d7d7d7 on white and * read flat without a pointer to lift them; Gerek asked for the shadow to * be permanent at these sizes so the grids keep some depth on a touch * screen. * * ONLY the grey cards. The band-5 cards are white on a dark photograph - * they already separate completely, and a navy shadow on dark artwork is * invisible anyway, which is the same reason the homepage's credential * boxes use a white-tinted one. * ================================================================== */ @media (max-width: 992px) { .svc-card--grey { box-shadow: var(--shadow-card); } }