/* ==================================================================
* iTech Valet — AEO Content Writing (/aeo-content-writing/)
*
* Loaded ONLY on this 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-25 at 375, 599, 600, 744, 768, 769, 900, 992, 993, 1100, 1201,
* 1280 and 1512, and cross-checked against the original's own generated
* stylesheet (migration/export/design/css/..31-layout.css).
*
* 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.
*
* FIVE BAND WIDTHS ON ONE PAGE. 1302 (hero), 1200, 1200, 1100, 998,
* 1200. --container-band's 1200 covers three of them; the other three
* are this page's own and are set per band in section 02. This is the
* only page in the rebuild whose hero is neither 1400 nor 1200, and the
* only one with a band narrower than 1000.
*
* TWO LAYOUT BREAKPOINTS, NOT ONE. Four bands become columns at 769 -
* the original's own - and the hero pair holds its single column all the
* way to 992 and only splits at 993. Measured on both sides of each.
*
* THE BODY COPY RUNS AT A 1.1 LINE-HEIGHT, and that is the original's
* own rhythm rather than an error: 22px on 24.2 at 1280, 20 on 22 at
* 375, on every one of the fourteen rich-text blocks. It is much tighter
* than the 1.45 --lh-lead the FAQs and services pages run. /about/
* already ships 1.1 for the same reason and the same measurement.
*
* THE TOKENS AND THE ORIGINAL AGREE ON THIS PAGE, which has not happened
* before. --t-lead is 20/22 and so is the original; --t-h2 is 40/50/60
* and so is the original, at the same two widths. So the section
* headings and the body copy are tokens here rather than transcribed
* numbers, and that is a fact about this page rather than a shortcut.
*
* WHAT IS NOT CARRIED: THE ORIGINAL'S 1200px STEP. Beaver Builder's
* "large" breakpoint holds three separate accidents on this page - the
* "Here's the thing." heading grows to 70px BELOW 1201 while its
* neighbours stay at 60, "You Don't Do Anything" becomes 59px, and two
* of the six headings drop to a 1.0 leading where the other four keep
* 1.4. All three vanish at 1201 and above. The settled responsive model
* steps at 600 and 993 and does not have a 1200 step, so the desktop
* state - 60px on a 1.4 line for all six - is what ships at every width
* above 992.
*
* NEVER WRITE A BARE CLAMP FOR A FONT SIZE. Every clamp in this theme
* was exact at 1280 and 375 and wrong at every width between, because a
* clamp ramps where the original steps. The pattern is the phone value
* in the base rule, followed by a min-width override.
*
* 01 BAND FRAME AND SHARED TYPE
* 02 BAND WIDTHS, COLOUR AND ARTWORK
* 03 HERO
* 04 THE TWO PICTURE BANDS
* 05 IS THIS ACTUALLY FOR YOU
* 06 THE TWO PROOF CARDS
* 07 THE CLOSING CTA
* 08 TABLET AND DESKTOP TYPE (>= 600)
* 09 LAID OUT (>= 769)
* 10 THE HERO PAIR LAYS OUT (>= 993)
* 11 THE 400px PHONE CAP (<= 599)
* ================================================================== */
/* ==================================================================
* 01 BAND FRAME AND SHARED TYPE
*
* The base rules are the PHONE values, so a browser that matches none of
* the queries below still reads correctly.
* ================================================================== */
.aeo-band {
/* The module inset. Measured: the hero band runs 20 -> 1260 at a 1280
viewport and its h1 runs 40 -> 1240. That 20px is Beaver Builder's
module margin and it sits on the module, not the container - which
is why the navy card, whose inset is zero, is 40px wider than the
heading above it. */
--aeo-inset: 20px;
color: var(--c-navy);
}
/* THE GUTTER IS ZERO WHILE STACKED. Measured: every live row's padding
goes from `... 20px` to `... 0` below 769, so the module inset becomes
the whole margin and copy lands at 20 inside a 375 viewport - where the
original's does. main.css puts 20px on every .section, so this has to
take it off again rather than never adding it. Section 09 puts it back. */
.section.aeo-band { padding-inline: 0; }
/* GRID, so the module margins below ADD rather than collapse. Beaver
Builder wraps every module in its own div and the measured gaps are the
two margins added - the 20 under the h1 meeting the 20 over the navy
card is 40px of air on the live page, and real siblings would collapse
it to 20. Grid item margins never collapse, with each other or with the
container, which lets the original's margins be transcribed literally.
`align-content: start` keeps each row its own height. */
.aeo-band > .container {
display: grid;
align-content: start;
}
/* Body copy. Measured 22px on a 24.2px line at 1280 and 20 on 22 at 375 -
a 1.1 leading at both. See the header.
WEIGHT 300, AND IT HAS TO BE READ OFF THE TEXT NODES. getComputedStyle
reports 400 on the live spans, and the live page requests Lexend 100,
300 and 700 only - so that 400 resolves back down to the 300 face that
is actually loaded. This theme DOES load a real 400, so writing 400
here would ship visibly heavier copy than the original. */
.aeo-band p {
font-size: var(--t-lead);
font-weight: 300;
line-height: 1.1;
}
/* Measured: 10px between paragraphs and nothing after the last one, so a
block's tail is its own margin and not the margin plus a stray 10.
main.css already supplies the 10; this only removes the last.
ALL THREE COPY CONTAINERS, NOT JUST .aeo-copy. The navy hero card and
the closing sign-off are not .aeo-copy blocks, and leaving them out put
a stray 10px under each - which moved the whole hero pair down by 10
and made the closing band 10 too tall. Listed rather than written as
`.aeo-band p:last-child`, which is (0,2,1) and would outrank the
explicit 20px tails on the two loose paragraphs in band 4. */
.aeo-copy p:last-child,
.aeo-hero__card p:last-child,
.aeo-cta__signoff p:last-child { margin-bottom: 0; }
/* Section headings. main.css supplies Bebas, weight 400 and the uppercase
transform through .section-title; the size, leading, tracking, colour,
alignment and margins are this page's own.
THE TRANSFORM IS A NO-OP HERE AND IS LEFT ALONE. Bebas Neue draws its
lowercase as the uppercase forms, so live's `text-transform: none` and
this rule paint the same glyphs. It matters on the h1, which is why the
h1 does NOT carry .hero__headline - half of it is Chewy, and Chewy has
real lowercase.
1.4 on a display face is unusually loose and it is measured at every
width above 992: 84 on 60. It is 56 on 40 and 70 on 50 below that. */
.aeo-band .aeo-title {
margin: 0 var(--aeo-inset);
font-size: var(--t-h2);
line-height: 1.4;
letter-spacing: -2px;
text-align: center;
}
/* INLINE LINKS ARE NOT STYLED HERE ANY MORE. One site rule, main.css
* section 02b: --c-link, no underline, --c-orange on hover.
*
* BOTH OF THIS PAGE'S LINK-CARRYING BANDS OPT OUT, for two different
* reasons. Worst pixel, measured on the real artwork at 375 and 1280:
*
* Band 4 (aeo-fit, dark). Three links on white copy. --c-link measures
* 3.57, 1.38 and 3.59 against the grounds behind them - the 1.38 is
* the one that sits on the FILLED #2494e0 card, where even the white
* copy it inherits is only 3.29:1 (BUILD-PLAN flagged that card; the
* card is still Gerek's call and is untouched here).
*
* Band 5 (aeo-proof, white). --c-link is 4.53:1 on the ground and
* would do, but the copy is --c-navy and --c-link against navy is
* 2.53:1 - under the 3:1 the missing underline needs, and no colour
* clears both bars against navy. See main.css 02b.
*
* The closing band carries `links-inherit` too. It holds only the CTA
* button today, which the rule exempts either way. */
/* ==================================================================
* 02 BAND WIDTHS, COLOUR AND ARTWORK
*
* SIX BANDS, TWO COLOURS, and the light four are NAVY rather than the
* black the homepage and the FAQs use - heading and body copy alike,
* measured rgb(6,58,108) on every paragraph. This is the first page in
* the rebuild whose body copy is not black.
*
* The dark two set everything white. There is no third scheme here, and
* the sweep for one came back empty.
* ================================================================== */
.aeo-dark,
.aeo-dark .aeo-title,
.aeo-dark p { color: var(--c-white); }
/* Band vertical padding, measured per band. Applying one row's padding to
every row has left this site's bands visibly lopsided twice. */
.section.aeo-hero { padding-block: 20px 60px; }
.section.aeo-mktg { padding-block: 60px; } /* 20/20 at >= 993, section 10 */
.section.aeo-nothing { padding-block: 20px 60px; }
.section.aeo-fit { padding-block: 60px; }
.section.aeo-proof { padding-block: 60px; }
.section.aeo-cta { padding-block: 20px; }
/* The three band widths that are not --container-band's 1200. */
.aeo-hero > .container { max-width: 1302px; }
.aeo-fit > .container { max-width: 1100px; }
.aeo-proof > .container { max-width: 998px; }
.bg-aeo-hero,
.bg-aeo-fit,
.bg-aeo-globe {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* The valet motif - VIP tickets, crowns, bow ties and martini glasses on
pale blue. It is the artwork BUILD-PLAN.md records as missing from the
homepage hero; the file was in the capture the whole time, on this
page. 2560x1285, unmodified. */
.bg-aeo-hero { background-image: url(../../img/bg/aeo-hero.webp); }
/* 2560x1184, unmodified. */
.bg-aeo-fit { background-image: url(../../img/bg/aeo-fit.webp); }
/* The same dark globe the homepage and /about/ close on - already in the
theme, and confirmed byte-identical to this page's copy in the capture
by sha256 rather than by filename. */
.bg-aeo-globe { background-image: url(../../img/bg/home-dark-globe.webp); }
/* ==================================================================
* 03 HERO
* ================================================================== */
/* 100px above the headline at desktop, measured. On the live page that is
20 of row padding, 40 contributed by an empty HTML module holding a
Google Fonts for Chewy, and 60 of real margin. The junk module
is gone - this theme loads Chewy in the head - and the 120px of air it
produced is kept, because that is what the band is.
80 below 993, where the original's own margin is 40 rather than 60. */
.aeo-hero .aeo-hero__headline {
margin: 80px var(--aeo-inset) 20px;
color: var(--c-navy);
font-family: var(--f-display);
font-weight: 400;
font-size: 46px; /* measured floor; steps in section 08 */
line-height: 1.15; /* 1 from 600 up - section 08 */
letter-spacing: -1px;
text-align: center;
}
/* The first sentence, in Chewy italic. Two faces in one h1 and the
sentence break is where they change - the original's own , not a
decoration added here.
NO text-transform ANYWHERE ON THIS HEADING. Chewy has real lowercase
and the uppercase transform .hero__headline carries would rewrite half
the line. It is why this heading does not use that class. */
.aeo-hero .aeo-hero__chewy {
font-family: var(--f-accent);
font-style: italic;
font-weight: 400;
}
/* The navy card. 25px radius, full band width - it carries NO module
inset, so it is 40px wider than the heading above it. 20px of padding
all round, which is the module margin inside it.
THE 10px OUTER MARGIN BELOW 769 IS THE ORIGINAL'S. Stacked, the card
sits 10px inside the viewport rather than at the 20 the copy uses, so
it reads slightly wider than the text it summarises. Section 09 takes
it off again. */
.aeo-hero .aeo-hero__card {
margin: 10px;
padding: 20px;
border-radius: 25px;
background: var(--c-navy);
}
/* 18px at EVERY width, which is the one type size on this page that never
steps - measured at 375 and at 1512 alike. It is smaller than the body
copy around it because it is a summary rather than a paragraph. */
.aeo-hero .aeo-hero__card p {
color: var(--c-white);
font-size: 18px;
line-height: 1.1;
text-align: center;
}
.aeo-hero .aeo-hero__pair {
display: grid;
align-content: start;
}
.aeo-hero .aeo-hero__text {
display: grid;
align-content: start;
}
/* 60 ABOVE AT EVERY WIDTH, and the original's own `@media (max-width:
768px) { margin-top: 20px }` never takes effect: the 992 rule that sets
60 is written with one class more and outranks it. Reading the source
top-down gets this wrong; it was caught by measuring 375. */
.aeo-hero .aeo-hero__text .aeo-title { margin-top: 60px; margin-bottom: 0; }
.aeo-hero .aeo-hero__text .aeo-copy { margin: 20px var(--aeo-inset); }
.aeo-hero .aeo-hero__media { margin-top: 50px; } /* 40 from 769 - section 09 */
/* Measured: 200 on a phone, 250 while stacked with room, 350 side by
side. The aspect is the file's own - 648x951 - so the height follows. */
.aeo-hero .aeo-hero__img {
width: 200px;
margin-inline: auto;
}
/* ==================================================================
* 04 THE TWO PICTURE BANDS
*
* "This Isn't Content Marketing" and "You Don't Do Anything" are the same
* band mirrored: half text, half illustration, 1200 wide, 50/50.
*
* THE FIRST ONE IS ORDER-REVERSED AND THE SECOND IS NOT. Live marks the
* first group `fl-col-group-responsive-reversed`, so its picture is the
* first column in the markup and the SECOND thing on a phone. Reproducing
* that with `order` rather than by moving the markup keeps the reading
* order a screen reader gets identical to live's.
* ================================================================== */
.aeo-split {
display: grid;
align-content: start;
}
.aeo-split .aeo-split__text {
display: grid;
align-content: start;
}
.aeo-split .aeo-title { margin-top: 0; margin-bottom: 0; } /* 60/20 at >= 993 */
.aeo-split .aeo-copy { margin: 20px var(--aeo-inset); }
.aeo-split .aeo-split__media { margin-top: 50px; }
.aeo-split__media img { margin-inline: auto; }
/* Measured: 250 on a phone, 400 while stacked with room, 450 side by
side. Both files are near-square - 813x894 and 834x943 - so a phone at
450 would have handed the reader most of a screen of mascot. */
.aeo-mktg .aeo-mktg__img,
.aeo-nothing .aeo-nothing__img { width: 250px; }
/* Stacked, the picture follows the copy in BOTH bands. In this one that
is a reversal; in the other it is the markup order. */
.aeo-split--reversed .aeo-split__media { order: 2; }
.aeo-split--reversed .aeo-split__text { order: 1; }
/* ==================================================================
* 05 IS THIS ACTUALLY FOR YOU
*
* Two cards and an arrow, on the two-AI artwork, in a 1100 band. The
* outlined card is the reader who is ready; the filled one is the reader
* who should run the diagnostic first. The arrow is the sentence between
* them and it only exists side by side.
* ================================================================== */
.aeo-fit .aeo-title { margin-top: 0; margin-bottom: 40px; } /* 20/60 at >= 993 */
.aeo-fit .aeo-fit__grid {
display: grid;
align-content: start;
}
/* 25px radius on both, and the difference between them is the fill.
Measured on all four edges: the outlined card carries 3px of --c-blue
all the way round, the filled one carries none. */
.aeo-fit .aeo-fit__card {
margin: 10px;
border-radius: 25px;
}
.aeo-fit .aeo-fit__card--outline { border: 3px solid var(--c-blue); }
.aeo-fit .aeo-fit__card--fill { background: var(--c-blue); }
.aeo-fit .aeo-fit__card .aeo-copy {
margin: 20px;
text-align: center;
}
/* Hidden while the cards are stacked - an arrow pointing right at nothing
is noise, and it is where the original hides it too. Section 09 shows
it. */
.aeo-fit .aeo-fit__arrow { display: none; }
.aeo-fit .aeo-fit__arrow-icon {
display: block;
width: 49px;
height: 49px;
margin: 130px auto 20px;
color: var(--c-blue);
}
/* Both run the full band width. 20px above while stacked, 60 laid out. */
.aeo-fit .aeo-fit__aside {
margin: 20px var(--aeo-inset);
text-align: center;
}
/* The turn. 40px on a 1.1 line at desktop - the largest body type on the
page, and larger than the section headings' phone size. */
.aeo-fit .aeo-fit__turn {
margin: 20px var(--aeo-inset);
font-size: 20px; /* measured floor; steps in section 08 */
line-height: 1.1;
text-align: center;
}
.aeo-fit .aeo-fit__turn strong { font-weight: 700; }
/* ==================================================================
* 06 THE TWO PROOF CARDS
*
* A 998 band - the narrowest on the site - holding two stacked cards at
* every width. They never become columns.
*
* THE FIRST CARD'S FILL IS A PHOTOGRAPH DRAWN AT ITS SOURCE SIZE. Live
* sets `background-size: auto` and centres it, so what the card shows is
* a 998-wide crop out of the middle of a 2190x1238 texture, and the crop
* changes with the viewport. `cover` would scale the whole picture into
* the box and show a different image. That is also why the file keeps its
* source dimensions: resizing it would move the crop.
*
* THE SECOND CARD HAS BORDERS ON ITS LEFT AND RIGHT EDGES ONLY. A sweep
* that reads border-top finds 0px and moves on - the same trap the navy
* card on /ai-visibility-check/ set with a bottom-only rule.
* ================================================================== */
.aeo-proof .aeo-proof__card {
display: grid;
align-content: start;
margin: 10px;
border-radius: 25px;
}
/* 10px of gap while stacked and 60 laid out - the original's own card
margin, which collapses to 10 on every edge below 769. */
.aeo-proof .aeo-proof__card--diy {
background-image: url(../../img/bg/aeo-card-grey.webp);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
.aeo-proof .aeo-proof__card--results {
border-right: 3px solid var(--c-navy);
border-left: 3px solid var(--c-navy);
}
.aeo-proof .aeo-title { margin-top: 0; margin-bottom: 0; }
/* 40px inside the card at desktop, 20 while stacked - measured, and it is
NOT the 20px module inset the rest of the page uses. */
.aeo-proof .aeo-proof__copy {
margin: 20px 20px 20px;
text-align: center;
}
/* THE ICONS ARE DECORATIVE AND THEY ARE THE ORIGINAL'S COLOURS. Pure red
and a mid green, transcribed. Both are aria-hidden and both duplicate
the heading beneath them - a red cross over "Not For the DIY Crowd" and
a green tick over "It Shows In the Results" - so 1.4.11's 3:1 does not
apply to them and neither was darkened. The green measures 2.75:1 on
white and is recorded here rather than left to be rediscovered. */
.aeo-proof .aeo-proof__icon {
display: block;
width: 30px;
height: 30px;
margin: 20px auto 20px; /* 40 above from 769 - section 09 */
}
/* THE ONE PLACE THIS PAGE DOES NOT MATCH LIVE TO THE PIXEL. The original
sets these two glyphs as TEXT, so each sits on the baseline of a 20.3px
line and carries 3.3px and 1.3px of descender space beneath it that has
nothing to do with the drawing. An SVG block is exactly 30px. The two
cards are therefore 3.3 and 1.3 shorter than live's and band 5 is 4.6
shorter overall - 0.4% of it. Recorded rather than padded back, because
the only way to reproduce it is to re-create the artefact. */
.aeo-proof .aeo-proof__icon--no { color: #ff0000; }
.aeo-proof .aeo-proof__icon--yes { color: #10b74a; }
/* ==================================================================
* 07 THE CLOSING CTA
* ================================================================== */
/* The one heading on the page with a 1.1 leading and no negative
tracking, and the only one live actually sets `text-transform:
uppercase` on. Measured 66 on 60 where its five neighbours are 84. */
.aeo-cta .aeo-cta__title {
margin-top: 20px; /* 60 from 769 - section 09 */
margin-bottom: 20px;
line-height: 1.1;
letter-spacing: normal;
}
.aeo-cta .aeo-cta__grid {
display: grid;
align-content: start;
}
.aeo-cta .aeo-cta__col {
margin: 20px var(--aeo-inset); /* 100px above from 769 - section 09 */
text-align: center;
}
.aeo-cta .aeo-cta__media { margin: 20px; }
.aeo-cta .aeo-cta__img {
width: 200px;
margin-inline: auto;
}
.aeo-cta .aeo-cta__action {
margin: 30px 20px 20px; /* bottom grows to 60 from 769 - section 09 */
text-align: center;
}
/* THE BUTTON IS main.css's, NOT THE ORIGINAL'S HOVER. Live repaints the
label --c-blue on a white-to-pale-blue fill on hover, which measures
2.60:1 against the 4.5:1 that 22px regular text needs. The shared
.cta-button reverses its own orange gradient and keeps white on orange
instead - the same call /contact/ made about the same fault. The
resting state IS live's: 3px white ring, 100px radius, the amber-to-
orange gradient left to right, and a real drop shadow. */
/* INLINE-BLOCK, CENTRED BY THE WRAPPER'S text-align. An earlier cut set
`display: block; width: max-content` and the label - 35 characters on
one line - became the grid's min-content width: the whole page scrolled
sideways to 462px at a 375 viewport. The original centres an
inline-block too, and its label wraps to two lines on a phone. */
.aeo-cta .aeo-cta__button {
max-width: 100%;
padding: 20px 40px;
font-size: 17px; /* measured floor; steps in section 08 */
line-height: 1.2; /* 18px flat from 600 - section 08 */
}
/* The sign-off. Lexend 700 uppercase, and the only uppercase body copy on
the page. 18px on a phone rather than --t-lead's 20 - measured, and the
same call /faqs/ made where the token and the original disagree. */
.aeo-cta .aeo-cta__signoff {
margin: 20px var(--aeo-inset); /* 100/60 from 769 - section 09 */
text-align: center;
}
.aeo-cta .aeo-cta__signoff p {
font-size: 18px; /* measured floor; steps in section 08 */
font-weight: 700;
text-transform: uppercase;
}
/* ==================================================================
* 08 TABLET AND DESKTOP TYPE (>= 600)
*
* TABLET READS AS DESKTOP. Gerek's rule, and on this page it overrides
* the original between 600 and 768, where the original is still on its
* phone scale. main.css moves --t-h2 to 50 and --t-lead to 22 here on its
* own, and both land exactly where the original's own 600-and-up values
* are; what is below is the type this page sets for itself.
* ================================================================== */
@media (min-width: 600px) {
.aeo-hero .aeo-hero__headline {
font-size: 70px;
line-height: 1;
}
/* 40px, the original's desktop value. It is the line the whole
qualifying band turns on, and at 20px it reads as another
paragraph. */
.aeo-fit .aeo-fit__turn { font-size: 40px; }
.aeo-cta .aeo-cta__signoff p { font-size: 22px; }
/* The desktop label size rather than the original's 20px middle step -
the same call /services/ and /about/ make. A 17px pill under a 50px
heading reads undersized on a tablet. The 18px line on 22px type is
the original's own and is what makes the pill 64px rather than 70. */
.aeo-cta .aeo-cta__button {
font-size: 22px;
line-height: 18px;
}
/* Artwork sized to the room it has rather than to the stack. Below
600 these are the original's phone widths exactly; from 600 they
take the original's own next step early, which is the same
departure the type makes. */
.aeo-hero .aeo-hero__img { width: 250px; }
.aeo-mktg .aeo-mktg__img,
.aeo-nothing .aeo-nothing__img { width: 400px; }
.aeo-cta .aeo-cta__img { width: 250px; }
}
/* ==================================================================
* 09 LAID OUT (>= 769)
*
* The original's own layout breakpoint, and where four of the six bands
* become columns. Everything in here is geometry: column tracks, the band
* padding that only makes sense side by side, and the module margins the
* original grows when it has the room.
* ================================================================== */
@media (min-width: 769px) {
/* The gutter comes back. main.css already puts it on .section; this
only stops section 01 from taking it away again. */
.section.aeo-band { padding-inline: var(--gutter); }
/* The cards lose the 10px they carried while stacked - measured, they
sit flush with the band at every width above 768. */
.aeo-hero .aeo-hero__card { margin: 20px 0 0; }
.aeo-fit .aeo-fit__card { margin: 0; }
.aeo-proof .aeo-proof__card { margin: 0; }
.aeo-proof .aeo-proof__card--diy { margin-bottom: 60px; }
/* --- the two picture bands. 50/50, measured: at 1280 the left column
is 40 -> 640 and the right 640 -> 1240 in both. */
.aeo-split {
grid-template-columns: 1fr 1fr;
align-items: start;
}
/* THE REVERSAL IS A STACKED-ONLY BEHAVIOUR. Side by side the picture is
back on the LEFT, where the markup puts it - reversing at every width
would have moved it to the right of the copy at 1280, which is the
opposite of the original. */
.aeo-split--reversed .aeo-split__media { order: 1; }
.aeo-split--reversed .aeo-split__text { order: 2; }
.aeo-split .aeo-split__media { margin-top: 40px; }
.aeo-hero .aeo-hero__media { margin-top: 40px; }
/* --- the qualifying band's two loose paragraphs. */
.aeo-fit .aeo-fit__aside,
.aeo-fit .aeo-fit__turn { margin-top: 60px; }
/* --- the proof cards' icon and copy both grow inside the card. */
.aeo-proof .aeo-proof__icon { margin-top: 40px; }
.aeo-proof .aeo-proof__copy { margin: 20px 40px 40px; }
/* --- the closing band's three equal columns, measured 400/400/400 of
1200 at 1280. It lays out HERE, not at 993 with the hero pair - the
hero's is a nested Beaver Builder group and this one is not, and the
two stack at different widths. Held to 993 this band came out 405px
too tall at 900 and 992, which is a whole extra screen. */
.aeo-cta .aeo-cta__grid {
grid-template-columns: 1fr 1fr 1fr;
align-items: start;
}
.aeo-cta .aeo-cta__title { margin-top: 60px; }
.aeo-cta .aeo-cta__col { margin-top: 100px; margin-bottom: 20px; }
.aeo-cta .aeo-cta__action { margin-bottom: 60px; }
.aeo-cta .aeo-cta__signoff { margin: 100px var(--aeo-inset) 60px; }
/* --- is this actually for you. 39.93 / 20.04 / 40.03 of 1100,
measured to two decimals off the original's own column widths, and
the two cards are equal height so the arrow sits between two boxes
of the same size rather than two of different ones. */
.aeo-fit .aeo-fit__grid {
grid-template-columns: 39.93fr 20.04fr 40.03fr;
align-items: stretch;
}
.aeo-fit .aeo-fit__arrow { display: block; }
}
/* ==================================================================
* 10 THE HERO PAIR LAYS OUT (>= 993)
*
* The last thing on the page to become two columns, and the only band
* that waits this long. Measured on both sides of 992/993: at 992 the
* illustration is still under the copy at full band width.
*
* The three type changes here are --t-h2's own 60 (main.css) plus the
* two alignments and the two paddings below.
* ================================================================== */
@media (min-width: 993px) {
.aeo-hero .aeo-hero__headline { margin-top: 100px; }
.aeo-hero .aeo-hero__pair {
grid-template-columns: 1fr 1fr;
align-items: start;
}
/* Measured: the left column's content starts 50px inside its track and
the right column's ends 100px inside its own. Neither is symmetrical
and neither is the module inset - a percentage width is the column's
and the inset comes out of it. */
.aeo-hero .aeo-hero__text { padding-left: 50px; }
.aeo-hero .aeo-hero__media { padding-right: 100px; }
.aeo-hero .aeo-hero__text .aeo-title { margin-bottom: 20px; }
.aeo-hero .aeo-hero__img { width: 350px; }
.aeo-mktg .aeo-mktg__img,
.aeo-nothing .aeo-nothing__img { width: 450px; }
/* The three headings that sit at the top of a reading column go left
the moment they have one. Centred over left-aligned copy in a narrow
column is what put every homepage section on a different left edge;
these share theirs. */
.aeo-band .aeo-title--left { text-align: left; }
/* Measured 20/20 above 992 against the 60/60 it takes stacked. It is
the only band on the page whose padding changes. */
.section.aeo-mktg { padding-block: 20px; }
.aeo-split .aeo-title { margin-top: 60px; margin-bottom: 20px; }
.aeo-split .aeo-split__media { margin-top: 100px; }
.aeo-fit .aeo-title { margin-top: 20px; margin-bottom: 60px; }
.aeo-cta .aeo-cta__action { margin-top: 20px; }
}
/* ==================================================================
* 11 THE 400px PHONE CAP (<= 599)
*
* Below 769 the original caps its narrow stacked columns at 400px and
* centres them. IT IS A PHONE TREATMENT, so it stops where the phone
* scale stops. Held to the original's 768 it would put 22px desktop copy
* in a 360px column on an iPad mini with half the screen empty either
* side. Same call as /services/, /about/ and /ai-visibility-check/.
*
* A CAP THAT DOES NOTHING AT YOUR TEST WIDTH IS NOT A CAP YOU HAVE
* TESTED: at 375 every one of these is already under 400 and the rule
* changes nothing. It binds between about 420 and 599.
*
* THE CAP GOES ON THE GRID, NOT ON THE BLOCKS INSIDE IT. The original
* caps the COLUMN and lets the module keep its 20px inset and the card
* its 10px, which is how a 400px column ends up holding a 380px card and
* a 360px paragraph. Capping the blocks themselves gets the outer number
* right and every inner one wrong.
*
* NOT EVERY COLUMN IS CAPPED, and which ones are was measured rather than
* derived from Beaver Builder's own rule: the hero pair, the navy hero
* card, both proof cards, the qualifying band's two loose paragraphs and
* the button all run the full width at 599 on live.
* ================================================================== */
@media (max-width: 599px) {
.aeo-split,
.aeo-fit .aeo-fit__grid,
.aeo-cta .aeo-cta__grid {
width: min(100%, 400px);
margin-inline: auto;
}
}