/* services--ai-marketing-services: generated by _tools/build/design_to_page.py from _tools/design (direction B, orange); edit the
   design and regenerate. Scoped to main.aim; brand tokens and the kicker / CTA helpers from brand.css. Fonts and
   .container come from the theme. */
main.aim{--orange:#F5412C; --orange-600:#DD271A; --orange-700:#BF090B;
  --black:#0E0E0E; --raised:#171717; --stone:#9A9E8E; --stone-700:#5C6052; --grey:#EFEFEF; --white:#FFFFFF;
  --accent:var(--orange); --on-accent:var(--grey);          /* approved pairings: grey on orange, orange on black/grey */
  --on-accent-hover:var(--white);                            /* CLAUDE.md: outline hover = orange with #FFFFFF text */
  --radius:4px;
  --sans:Interphases,Arial,sans-serif; --mono:InterphasesMono,ui-monospace,monospace; --script:Vandalord,cursive;
  background:var(--black);color:var(--grey);font-family:var(--sans);font-size:16px;line-height:1.5}
:where(.aim) *,:where(.aim) *::before,:where(.aim) *::after{box-sizing:border-box}
:where(.aim) img{display:block;max-width:100%}
:where(.aim) a{color:inherit;text-decoration:none}
:where(.aim) :is(h1,h2,h3,h4,p,ul,ol,figure){margin:0}
:where(.aim) ul{padding:0;list-style:none}
:where(.aim) ul li{padding:0}
:where(.aim) :is(h1,h2,h3,h4,h5,h6){line-height:inherit}
.aim [tabindex="-1"]:focus{outline:none}
.aim-kicker{display:inline-block;align-self:flex-start;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;padding-bottom:6px;border-bottom:1.2px solid var(--accent)}
.aim-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:var(--radius);
  font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.2;text-transform:none;border:1px solid transparent;transition:all .3s}
.aim-btn:hover,.aim-btn:focus-visible{transform:scale(1.05)}
.aim-btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.aim-btn--primary:hover,.aim-btn--primary:focus-visible{background:var(--white);color:var(--black);border-color:var(--white)}
.aim-btn--outline{background:transparent;color:var(--grey);border-color:var(--grey)}
.aim-btn--outline:hover,.aim-btn--outline:focus-visible{background:var(--accent);color:var(--on-accent-hover);border-color:var(--accent)}
.aim-on-light .aim-btn--outline{color:var(--black);border-color:var(--black)}

/* <picture> around the page-chrome images: the 390 versions swap in below 768 */

.aim{
  --ink-accent:var(--orange);
  --hair-d:rgba(239,239,239,.12); --line-d:rgba(239,239,239,.28);
  --hair-l:rgba(14,14,14,.14);    --line-l:var(--black);
  --gut:64px; --rail:280px;
}
.aim p{font-size:17px;line-height:1.6}
.aim p,.aim-point,.aim-ticks li{text-wrap:pretty}   /* no one-word last lines */
.aim a:focus-visible,.aim button:focus-visible,.aim summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.aim-on-light a:focus-visible,.aim-on-light button:focus-visible,.aim-on-light summary:focus-visible{outline-color:var(--ink-accent)}
.aim-on-light .aim-loc__card a:focus-visible{outline-color:var(--accent)}
.aim-on-light .aim-kicker{color:var(--black);border-bottom-color:var(--ink-accent)}
.aim-on-light .aim-btn--outline:hover,.aim-on-light .aim-btn--outline:focus-visible{background:var(--accent);color:var(--on-accent-hover);border-color:var(--accent)}   /* brand.css .aim-on-light colours would otherwise win */

/* ---------- type ---------- */
.aim-h1{font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;font-size:104px;color:var(--grey)}
.aim-h1__line,.aim-h1__key{display:block}
.aim-h1__line{font-weight:300}
.aim-h1__key{color:var(--accent)}
.aim-display{font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;font-size:88px}
.aim-display--xl{font-size:104px;line-height:.9}
.aim-h2{font-weight:700;font-size:48px;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.aim-h2--statement{font-size:56px;line-height:1.02}
.aim-h3{font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.aim .aim-lead{font-size:22px;line-height:1.45;font-weight:400}

/* ---------- 1 · hero ---------- */
/* the 21:9 banner sits on solid black, as in the approved Figma (138:928, Robert 12 Oct): no grey straddle behind it */
.aim-hero{padding-top:112px;background:var(--black)}
.aim-hero__in{display:flex;flex-direction:column}
.aim-hero__kicker{margin-bottom:40px}
.aim-hero .aim-h1{margin-bottom:56px}
.aim-hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:64px}
.aim-hero__row .aim-lead{max-width:690px;color:var(--grey)}
.aim-ctas{display:flex;gap:16px;flex:none}
.aim-hero__media{margin-top:72px}
.aim-hero__media img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 15%;border-radius:var(--radius)}   /* 15%: keeps the phones' status bars and all three ad circles whole */

/* ---------- 2 · guide (grey) ---------- */
.aim-guide{background:var(--grey);color:var(--black);padding:120px 0 140px}
.aim-guide__grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--gut)}
.aim-read{min-width:0}
.aim-sec+.aim-sec{margin-top:128px}

/* index rail */
.aim-index{align-self:stretch}
.aim-index__stick{position:sticky;top:96px}
.aim-index__title{margin-bottom:28px}
.aim-index__list{border-bottom:1px solid var(--hair-l)}
.aim-index__list li{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--hair-l);font-size:16px;line-height:1.35;font-weight:500}
.aim-index__list li:first-child{border-top-color:var(--line-l)}
.aim-index__mark{flex:none;width:4px;height:20px;background:transparent}
.aim-index__list a{color:var(--black);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.2px;
  text-underline-offset:5px;transition:text-decoration-color .3s}
.aim-index__list a:hover{text-decoration-color:var(--ink-accent)}
/* current item: faux bold (stroke) instead of font-weight:700. Glyph advances stay the same, so a label that just fits
   (e.g. "Shopify & WordPress AI Integrations" at 1280-1510 and 360) does not wrap to two lines and shift the list or page
   when the scroll-spy marks it (review, 12 Oct) */
.aim-index__list .is-current a{-webkit-text-stroke:.6px currentColor}
.aim-index__list .is-current .aim-index__mark{background:var(--accent)}
.aim-index__go{display:none}   /* jump arrow: shown below 1024, where the index is a list of full-width rows */

/* the New Search Economy */
.aim-intro .aim-kicker{margin-bottom:24px}
.aim-intro .aim-h2{margin-bottom:28px;max-width:960px}
.aim-intro .aim-lead{max-width:860px;color:var(--black)}

/* six services as numbered table rows: number | title + text | list */
.aim-sec.aim-table{margin-top:80px}
.aim-table{border-top:1.2px solid var(--line-l)}
.aim-row{display:grid;grid-template-columns:56px minmax(0,1fr) 264px;column-gap:32px;padding:36px 0 40px;border-bottom:1px solid var(--hair-l)}
.aim-num{align-self:start;justify-self:start;display:inline-flex;align-items:center;height:30px;padding:0 9px;border-radius:var(--radius);
  background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.06em;margin-top:1px}
.aim-row__body .aim-h3{margin-bottom:12px}
.aim-row__body p{max-width:520px}
.aim-ticks{display:flex;flex-direction:column;gap:10px;padding-top:5px}
.aim-ticks li,.aim-point{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45;font-weight:500}
.aim-tick{flex:none;width:7px;height:7px;margin-top:7px;background:var(--accent)}

/* image + text blocks */
.aim-split{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:center}
.aim-split__media img{width:100%;height:auto;aspect-ratio:20/21;object-fit:cover;border-radius:var(--radius)}
.aim-split__text{display:flex;flex-direction:column}
.aim-split__text .aim-h2{margin:24px 0 20px}
.aim-points{margin-top:28px;border-top:1.2px solid var(--line-l)}
.aim-point{padding:13px 0;border-bottom:1px solid var(--hair-l);font-size:16px}

/* ---------- 4 · resources, locations, FAQ (grey) ----------
   Direction A's layouts on the guide body's grey: no index rail here, the three sections run across the container on A's
   12-column grid (24px gutters: at 1440 a column is 80.67px, 4 cols = 394.67, 5 = 499.33, 6 = 604, 8 = 813.33).
   A's spacing: 120px between sections, split by a hairline where two sections share a colour (here all three do);
   the chapter's own edges pad 140px like B's other chapters, so the black bands above and below keep their rhythm.
   A's colours on black become B's colours on grey: text black (A's stone answers too), accent text and toggles
   --ink-accent; the Service Regions card stays black with A's card contents. */
.aim-wide{background:var(--grey);color:var(--black);padding:140px 0}
.aim-wsec{padding-bottom:120px}
.aim-wsec:last-child{padding-bottom:0}
.aim-rule{height:0;margin:0 0 120px;border:0;border-top:1px solid var(--hair-l)}
.aim-g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.aim-wh2{font-weight:800;font-size:56px;line-height:.95;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.aim-kicker+.aim-wh2{margin-top:28px}
.aim-whead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-bottom:64px}
.aim-whead__main{grid-column:1 / span 8;display:flex;flex-direction:column}
.aim .aim-whead__aside{grid-column:9 / span 4;font-size:18px;line-height:1.6;color:var(--black);padding-bottom:4px}

/* resources: 3 x 3 bordered link cards, the whole card clickable, accent arrow tile (accent fill + on-accent glyph) */
.aim-res__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.aim-rcard{position:relative;display:flex;flex-direction:column;padding:32px 28px 36px;border:1px solid var(--black);border-radius:var(--radius);
  transition:background-color .3s}
.aim-rcard:hover{background:var(--white)}
.aim-rcard h3{min-height:2.3em;padding-right:60px;font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.aim-rcard h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}   /* whole card clickable, invisible */
.aim .aim-rcard p{margin-top:20px;font-size:16px;line-height:1.55;color:var(--black)}
.aim-sq{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--radius);
  background:var(--accent);color:var(--on-accent);transition:transform .3s,background-color .3s,color .3s}
.aim-rcard .aim-sq{position:absolute;top:26px;right:24px}
.aim-rcard:hover .aim-sq{transform:scale(1.1)}

/* locations: heading + paragraph left, the black Service Regions card right (A's card: black instead of raised, its
   1px border kept in the card colour so the box measures the same) */
.aim-loc__grid{align-items:start}
.aim-loc__copy{grid-column:1 / span 6;display:flex;flex-direction:column;padding-right:24px}
.aim .aim-loc__lead{margin-top:28px;max-width:600px;font-size:19px;line-height:1.55;color:var(--black)}
.aim-loc__card{grid-column:8 / span 5;background:var(--black);color:var(--grey);border:1px solid var(--black);border-radius:var(--radius);padding:36px}
.aim-loc__card h3{font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.025em}
.aim .aim-region{margin-top:24px;padding-top:24px;border-top:1px solid var(--hair-d);font-size:16px;line-height:1.6;color:var(--grey)}
.aim-region strong{display:block;margin-bottom:8px;font-family:var(--mono);font-weight:700;font-size:12px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.aim .aim-loc__links{display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:28px;border-top:1px solid var(--hair-d);font-size:16px;line-height:1.5}
.aim-ulink{font-weight:600;font-size:17px;padding-bottom:4px;border-bottom:1.2px solid var(--accent);transition:color .3s}
.aim-ulink:hover{color:var(--accent)}
.aim-sep{color:var(--stone)}

/* FAQ: sticky title left, accordion right; Vandalord +/- toggles in the accent ink, the open question in the accent ink
   and its toggle in the text colour (A turns it grey on black; on grey that is black) */
.aim-faq__grid{align-items:start}
.aim-faq__head{grid-column:1 / span 5;position:sticky;top:96px;display:flex;flex-direction:column;padding-right:24px}
.aim-faq__list{grid-column:7 / span 6}
.aim-faq__list details{border-top:1px solid var(--hair-l)}
.aim-faq__list details:last-child{border-bottom:1px solid var(--hair-l)}
.aim-faq__list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;list-style:none;cursor:pointer}
.aim-faq__list summary::-webkit-details-marker{display:none}
.aim-faq__q{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em;transition:color .3s}
.aim-faq__list summary:hover .aim-faq__q,.aim-faq__list details[open] .aim-faq__q{color:var(--ink-accent)}
.aim-tg{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;font-family:var(--script);font-size:44px;line-height:1;
  color:var(--ink-accent);transition:color .3s}
.aim-tg__minus{font-size:60px}                                  /* Vandalord's hyphen is narrow: match the + width */
.aim-faq__list details[open] .aim-tg{color:var(--black)}
.aim-faq__list details[open] .aim-tg__plus,.aim-faq__list details:not([open]) .aim-tg__minus{display:none}
.aim .aim-faq__list details p{padding:0 68px 30px 0;font-size:17px;line-height:1.6;color:var(--black)}

/* ---------- black bands ---------- */
.aim-band{background:var(--black);color:var(--grey);padding:140px 0}

/* 3 · videos */
.aim-vid__top{display:grid;grid-template-columns:minmax(0,1fr) 552px;column-gap:var(--gut)}
.aim-vid__intro{display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.aim-vid__head .aim-kicker{margin-bottom:40px}
.aim-vid__title span{display:block}
.aim .aim-vid__sub{font-size:22px;line-height:1.45;max-width:470px;color:var(--grey)}
.aim-vid__pinned{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.aim-tile{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;background:var(--raised);border:1px solid var(--hair-d);transition:border-color .3s}
/* the real YouTube Shorts player, as on the live page: its own Shorts play button, plays in the tile */
.aim-tile iframe{display:block;width:100%;height:100%;border:0}
.aim-tile:hover{border-color:var(--accent)}
.aim-badge{position:absolute;z-index:1;pointer-events:none;top:16px;left:16px;padding:6px 9px;border-radius:var(--radius);background:rgba(14,14,14,.78);color:var(--grey);
  font-family:var(--mono);font-weight:700;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.aim-badge.is-pin{background:var(--accent);color:var(--on-accent)}
.aim-strip{margin-top:96px}
.aim-strip__bar{display:flex;justify-content:space-between;align-items:flex-end;padding-top:32px;border-top:1px solid var(--hair-d);margin-bottom:28px}
.aim-strip__label{display:flex;align-items:baseline;gap:24px}
.aim-strip__label small{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.aim-strip__arrows{display:flex;gap:8px}
.aim-arrow{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-d);border-radius:var(--radius);
  background:transparent;color:var(--grey);cursor:pointer;transition:all .3s}
.aim-arrow:hover,.aim-arrow:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--on-accent-hover);transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.aim-btn:hover,.aim-btn:focus-visible,.aim-arrow:hover,.aim-arrow:focus-visible{transform:none}}
.aim-strip__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 80px) / 6);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.aim-strip__track::-webkit-scrollbar{display:none}
.aim-strip__track .aim-tile{scroll-snap-align:start}

/* 5 · closing CTA (mirrors the hero) */
.aim-cta{padding:140px 0}
.aim-cta .aim-kicker{margin-bottom:40px}
.aim-cta__title{text-wrap:balance}
.aim-key{color:var(--accent)}
.aim-cta__row{margin-top:56px}

/* 6 · Read More (grey) */
.aim-journal{background:var(--grey);color:var(--black);padding:140px 0}
.aim-journal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:56px}
.aim-journal__titles .aim-kicker{margin-bottom:40px}
.aim-journal__titles .aim-display{display:block}
.aim-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.aim-card{display:flex;flex-direction:column}
.aim-card__media{display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--black)}
.aim-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.aim-card:hover .aim-card__media img{transform:scale(1.05)}
.aim-card__meta{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-bottom:14px;border-bottom:1px solid var(--hair-l)}
.aim-card__title{display:block;margin-top:16px;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.aim-cat{font-family:var(--mono);font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-accent)}
.aim-arr{flex:none;display:flex;color:var(--black);transition:color .3s}
.aim-card__title,.aim-item__title{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .3s,color .3s}
.aim-card:hover .aim-card__title,.aim-item:hover .aim-item__title{text-decoration-color:var(--ink-accent)}

.aim-ph{display:flex;align-items:center;justify-content:center;background:var(--black)}
.aim-ph__fill{fill:var(--accent)}
.aim-ph__ink{stroke:var(--on-accent)}
.aim-ph__line{stroke:var(--accent)}

.aim-list{margin-top:72px;border-top:1.2px solid var(--line-l)}
/* title column starts on the second card's edge: thumb 72 + 32 + category + 32 = one card + the 24px card gap */
.aim-item{display:grid;grid-template-columns:72px calc((100% - 48px) / 3 - 112px) minmax(0,1fr) 24px;column-gap:32px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair-l)}
.aim-item__thumb{display:flex;width:72px;height:54px;border-radius:var(--radius);overflow:hidden}
.aim-item__thumb img{width:100%;height:100%;object-fit:cover}
.aim-item__title{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em}

/* ---------- responsive ----------
   One markup for every size (copycheck): layouts reflow, nothing is duplicated; the only things that switch are
   decorative (index jump arrows on, strip scroll buttons off on phones).
   --cw = the .container content width at each step (720 below 1024, 592 below 768, 100vw - 48 below 640): the phone
   display type and the hero banner's straddle are sized from it, so they follow the screen.
   Tablet (768-1023): the phone structure (one column, index first) at larger sizes, with 2-4 column grids where they fit.
   Phone (<768, designed at 390 = 342px of content): display XL (H1, videos) = 15% of the content width (51.3px at 390,
   46.8 at 360, so "AI MAKES THE" and "MOVE FIRST." each hold one line) / display (Read More) 12% / closing CTA statement
   10.5% (its orange "advantage later." holds one line) / statement 34 / uppercase H2 34 / H2 30 / H3 24 / lead 20 /
   body 17 / lists 16 / mono labels 12 (the staging kicker size).
   Chapters pad 72px (64 after the banner), sections 72px apart (section 4: 56 + hairline + 56).
   Tap targets 44px+: index rows 48, buttons 52 (full width, stacked), FAQ rows 64+, region links 44, cards whole.
   Line breaks below 1280: .aim-nw spans (markup only, words unchanged) keep hyphenated compounds, "AI Overview" and each
   Read More em dash with its word; H3s, FAQ questions and Read More titles balance, so no heading ends on a lone word.
   Small desktop (1024-1279, a 976px container): the guide's 280px index rail and the video band's title column leave
   too little room at 976 (service text ~250px wide, the H2s in narrow columns), so the rail moves up as the tablet's
   two-column jump index and the video intro sits above the pinned four; the reading column then runs the full 976 and
   keeps the desktop's inner layouts (service rows 56 + 32 + 592 + 32 + 264, image/text pairs 460 + 56 + 460), as do
   resources (3 x 3), locations, FAQ and Read More. Display XL 82 (the H1's key line still spans the container: 942 of
   976) / display 72 / uppercase H2 48; the other type stays at desktop sizes. Chapters pad 128, reading sections 112
   apart, section 4: 104 + hairline + 104. */

/* shared by everything below 1280: hero and closing CTA copy above the CTAs, the guide in one column with the index
   first (right under the banner) as rows that jump down the page, the video intro above the pinned four */
@media (max-width:1279px){
  .aim-hero__row{flex-direction:column;align-items:flex-start;gap:36px}
  .aim-guide__grid{grid-template-columns:minmax(0,1fr)}
  .aim-index{margin-bottom:96px}
  .aim-index__stick{position:static}
  .aim-index__list{display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:32px}
  .aim-index__list li{padding:0}
  .aim-index__list li:nth-child(6){border-top-color:var(--line-l)}
  .aim-index__list a{flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px 0}
  .aim-index__go{display:block;flex:none;color:var(--ink-accent)}
  .aim-nw{white-space:nowrap}   /* hyphenated compounds (AI-assisted, GCC-focused...) never break after the hyphen */
  .aim-h3{text-wrap:balance}
  .aim-vid__top{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .aim-vid__pinned{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}

/* small desktop (1024-1279): desktop layouts at 976 wide, around the shared rules above */
@media (min-width:1024px) and (max-width:1279px){
  .aim-hero{padding-top:104px}
  .aim-h1,.aim-display--xl{font-size:82px}
  .aim-display{font-size:72px}
  .aim-hero .aim-h1{margin-bottom:48px}
  .aim-hero__media{margin-top:64px}

  /* guide: the reading column at the full container width */
  .aim-guide{padding:104px 0 128px}
  .aim-sec+.aim-sec{margin-top:112px}
  .aim-sec.aim-table{margin-top:72px}

  /* videos: the title left and its line right on one row (as the hero and resources heads), the pinned four below
     (232 wide), then the six-up strip as on desktop (149 wide) */
  .aim-band{padding:128px 0}
  .aim-vid__top{row-gap:56px}
  .aim-vid__intro{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:64px}
  .aim-vid__head{flex:none}
  .aim .aim-vid__sub{max-width:420px}
  .aim-strip{margin-top:72px}

  /* resources, locations, FAQ: A's 12-column layouts; the Service Regions card and the FAQ list take one more column
     each, so the region links hold one line and the answers keep a reading width */
  .aim-wide{padding:128px 0}
  .aim-wsec{padding-bottom:104px}
  .aim-rule{margin-bottom:104px}
  .aim-wh2{font-size:48px}
  .aim-rcard h3{font-size:20px}
  .aim-loc__card{grid-column:7 / span 6}
  .aim-faq__list{grid-column:6 / span 7}

  /* closing CTA and Read More */
  .aim-cta{padding:128px 0}
  .aim-cta__row{margin-top:48px}
  .aim-journal{padding:128px 0}
  .aim-card__title{font-size:20px}
  .aim-list{margin-top:64px}
}

@media (max-width:1023px){
  .aim{--cw:720px}

  /* hero: copy above the CTAs; the banner goes 16:10 (the photo's own ratio, nothing cropped) and still straddles */
  .aim-hero{padding-top:96px}
  .aim-h1,.aim-display--xl{font-size:88px}
  .aim-display{font-size:72px}
  .aim-hero .aim-h1{margin-bottom:44px}
  .aim-hero__media{margin-top:56px}
  .aim-hero__media img{aspect-ratio:16/10;object-position:50% 50%}

  /* guide: one column, the index first (shared rules above) */
  .aim-guide{padding:96px 0 112px}
  .aim-sec+.aim-sec{margin-top:96px}
  .aim-intro .aim-h2,.aim-intro .aim-lead{max-width:none}
  .aim-sec.aim-table{margin-top:56px}
  .aim-row{grid-template-columns:56px minmax(0,1fr);row-gap:24px}
  .aim-row__body p{max-width:none}
  .aim-ticks{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;padding-top:0}
  .aim-split{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .aim-split--flip .aim-split__media{order:-1}   /* image first in both pairs */
  .aim-split__media img{aspect-ratio:16/10}

  /* videos: intro, then the pinned four in a row (shared rules above), then the strip */
  .aim-band{padding:112px 0}
  .aim-vid__intro{gap:32px}
  .aim-vid__head .aim-kicker{margin-bottom:32px}
  .aim .aim-vid__sub{max-width:560px}
  .aim-strip{margin-top:72px}
  .aim-strip__track{grid-auto-columns:calc((100% - 48px) / 4)}

  /* resources, locations, FAQ: stacked, the black card full width */
  .aim-wide{padding:112px 0}
  .aim-wsec{padding-bottom:88px}
  .aim-rule{margin-bottom:88px}
  .aim-wh2{font-size:48px}
  .aim-whead{grid-template-columns:minmax(0,1fr);row-gap:24px;margin-bottom:48px}
  .aim-whead__main,.aim .aim-whead__aside{grid-column:auto}
  .aim .aim-whead__aside{max-width:600px;padding-bottom:0}
  .aim-res__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .aim-loc__copy,.aim-loc__card{grid-column:1 / -1}
  .aim-loc__copy{padding-right:0}
  .aim-loc__card{margin-top:48px}
  .aim .aim-loc__links{align-items:baseline}
  .aim-ulink{padding-top:14px}   /* 44px tap height; the underline stays 4px under the text */
  .aim-faq__head{grid-column:1 / -1;position:static;padding-right:0;margin-bottom:40px}
  .aim-faq__list{grid-column:1 / -1}

  /* closing CTA and Read More */
  .aim-cta{padding:112px 0}
  .aim-cta .aim-kicker,.aim-journal__titles .aim-kicker{margin-bottom:32px}
  .aim-cta__row{margin-top:44px}
  .aim-journal{padding:112px 0}
  .aim-journal__head{flex-direction:column;align-items:flex-start;gap:32px;margin-bottom:48px}
  .aim-cards{gap:16px}
  .aim-card__title{font-size:19px}
  .aim-list{margin-top:56px}
  .aim-item{grid-template-columns:72px minmax(0,1fr) 24px;grid-template-areas:"thumb cat arr" "thumb title arr";column-gap:24px;row-gap:6px;align-items:start;padding:16px 0}
  .aim-item__thumb{grid-area:thumb}
  .aim-item .aim-cat{grid-area:cat}
  .aim-item__title{grid-area:title;font-size:19px;text-wrap:balance}
  .aim-item .aim-arr{grid-area:arr;align-self:center}
}

@media (max-width:767px){
  .aim{--cw:592px}

  /* type */
  .aim .aim-kicker{font-size:12px;letter-spacing:.06em;padding-bottom:7px}
  .aim-h1,.aim-display--xl{font-size:calc(var(--cw) * .15);line-height:.92}
  .aim-display{font-size:calc(var(--cw) * .12);line-height:.95}
  .aim-h2{font-size:30px;line-height:1.08}
  .aim-h2--statement{font-size:34px;line-height:1.06}
  .aim-h3{font-size:24px}
  .aim .aim-lead,.aim .aim-vid__sub{font-size:20px;line-height:1.5}
  .aim-ticks li,.aim-point{font-size:16px}

  /* hero: CTAs full width, stacked */
  .aim-hero{padding-top:56px}
  .aim-hero__kicker{margin-bottom:28px}
  .aim-hero .aim-h1{margin-bottom:28px}
  .aim-hero__row{align-items:stretch;gap:32px}
  .aim-ctas{flex-direction:column;gap:12px}
  .aim-ctas .aim-btn{width:100%}
  .aim-hero__media{margin-top:40px}

  /* guide */
  .aim-guide{padding:64px 0 72px}
  .aim-index{margin-bottom:72px}
  .aim-index__title{margin-bottom:20px}
  .aim-index__list{display:block}
  .aim-index__list li:nth-child(6){border-top-color:var(--hair-l)}
  .aim-sec+.aim-sec{margin-top:72px}
  .aim-intro .aim-kicker{margin-bottom:20px}
  .aim-intro .aim-h2{margin-bottom:20px}
  .aim-sec.aim-table{margin-top:48px}
  .aim-row{grid-template-columns:minmax(0,1fr);row-gap:0;padding:28px 0 32px}
  .aim-num{margin:0 0 18px}
  .aim-row__body .aim-h3{margin-bottom:10px}
  .aim-ticks{grid-column:auto;display:flex;flex-direction:column;gap:10px;margin-top:20px}
  .aim-split{row-gap:32px}
  .aim-split__media img{aspect-ratio:4/3}
  .aim-split__text .aim-h2{margin:20px 0 16px}
  .aim-points{margin-top:24px}

  /* videos: pinned 2 x 2, the strip bleeds to the screen edge and scrolls (swipe; no arrow buttons on a phone) */
  .aim-band{padding:72px 0}
  .aim-vid__top{row-gap:40px}
  .aim-vid__intro{gap:24px}
  .aim-vid__head .aim-kicker{margin-bottom:28px}
  .aim-vid__pinned{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .aim-badge{top:10px;left:10px}
  .aim-strip{margin-top:56px}
  .aim-strip__bar{align-items:center;padding-top:24px;margin-bottom:20px}
  .aim-strip__label{flex:1;justify-content:space-between}
  .aim-strip__arrows{display:none}
  .aim-strip__track{margin:0 -24px;padding:0 24px;scroll-padding:0 24px;grid-auto-columns:148px;gap:12px}

  /* resources (one column of cards), locations (card full width), FAQ */
  .aim-wide{padding:72px 0}
  .aim-wsec{padding-bottom:56px}
  .aim-rule{margin-bottom:56px}
  .aim-wh2{font-size:34px;line-height:.98}
  .aim-kicker+.aim-wh2{margin-top:20px}
  .aim-whead{row-gap:16px;margin-bottom:32px}
  .aim .aim-whead__aside{font-size:17px}
  .aim-res__grid{grid-template-columns:minmax(0,1fr);gap:12px}
  /* the arrow tile (32px, A's small tile) sits on the card's 20px padding grid, centred on the title's first line, and
     ends above the paragraph so the text never runs into it */
  .aim-rcard{padding:24px 20px}
  .aim-rcard h3{min-height:0;padding-right:48px;font-size:20px}
  .aim-rcard .aim-sq{top:20px;right:20px;width:32px;height:32px}
  .aim-rcard .aim-sq svg{width:14px;height:14px}
  .aim .aim-rcard p{margin-top:12px}
  .aim .aim-loc__lead{margin-top:20px;font-size:17px}
  .aim-loc__card{margin-top:32px;padding:28px 24px}
  .aim-loc__card h3{font-size:24px}
  .aim .aim-region{margin-top:20px;padding-top:20px}
  .aim .aim-loc__links{flex-direction:column;align-items:flex-start;gap:4px;margin-top:24px;padding-top:10px}
  .aim-sep{display:none}         /* the two links stack, so the divider goes */
  .aim-faq__head{margin-bottom:28px}
  .aim-faq__list summary{gap:16px;padding:18px 0}
  .aim-faq__q{font-size:18px;text-wrap:balance}
  .aim-tg{width:36px;height:36px;font-size:38px}
  .aim-tg__minus{font-size:52px}
  .aim .aim-faq__list details p{padding:0 0 24px}

  /* closing CTA */
  .aim-cta{padding:72px 0}
  /* the five-line statement: 10.5% of the content width (35.9px at 390) so the orange "advantage later." holds one line
     (95% of the width) instead of leaving "LATER." alone */
  .aim-cta__title{font-size:calc(var(--cw) * .105)}
  .aim-cta__title .aim-key{white-space:nowrap}
  .aim-cta .aim-kicker,.aim-journal__titles .aim-kicker{margin-bottom:28px}
  .aim-cta__row{margin-top:32px}

  /* Read More: the three cards stacked, then the list as compact rows */
  .aim-journal{padding:72px 0}
  .aim-journal__head{align-items:stretch;gap:28px;margin-bottom:40px}
  .aim-cards{grid-template-columns:minmax(0,1fr);gap:40px}
  .aim-card__media{aspect-ratio:3/2}
  .aim-card:first-child .aim-card__media img{object-position:50% 0}   /* square ChatGPT ads image: keep the phones' tops */
  .aim-card__title{font-size:20px}
  .aim-list{margin-top:48px}
  /* the arrow moves up to the category line (as on the cards above), so the title takes the full 262px and balances
     without a stranded last word */
  .aim-item{grid-template-columns:64px minmax(0,1fr) 20px;grid-template-areas:"thumb cat arr" "thumb title title";column-gap:16px;row-gap:4px}
  .aim-item .aim-cat,.aim-item .aim-arr{align-self:center}
  .aim-item__thumb{width:64px;height:48px}
  .aim-item__title{font-size:17px;line-height:1.35}
}
@media (max-width:374px){ .aim-item__title{font-size:16px} }   /* 360: "Performance Marketing —" still fits one line */
@media (max-width:639px){ .aim{--cw:calc(100vw - 48px)} }