/* ---------------------------------------------------------------------------
   Homepage
   ---------------------------------------------------------------------------
   Same editorial system as the service pages: full-bleed alternating bands, a
   micro index label beside each headline, hairline-divided grids, one red
   accent, and a red closing panel.
   Palette and type come from typography.css.
   --------------------------------------------------------------------------- */

.home-page {
    --pad-x: clamp(22px, 6vw, 104px);
    --band: clamp(38px, 4.2vw, 68px);
    --hair: rgba(26, 26, 26, .14);
    --hair-soft: rgba(26, 26, 26, .07);
    background: #fff;
    color: var(--ink, #1a1a1a);
    overflow-x: hidden;
}

.home-page .hp-wrap {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
}

.home-page section {
    padding: var(--band) var(--pad-x);
    background: #fff;
}

.home-page .hp-section-alt { background: var(--paper, #faf6f6); }

/* Micro index label */
.home-page .hp-index {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--red, #c02228);
}

/* Two-tone headlines */
.home-page h1 em,
.home-page h2 em {
    font-style: normal;
    color: var(--red, #c02228);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.home-page .hp-hero {
    --cell: clamp(64px, 7vw, 108px);
    position: relative;
    padding-top: clamp(40px, 4.6vw, 78px);
    padding-bottom: clamp(38px, 4.4vw, 72px);
    border-bottom: 1px solid var(--hair);
    overflow: hidden;
}

/* Faint measured grid behind the hero, fading out toward the baseline. */
.home-page .hp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--hair-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--hair-soft) 1px, transparent 1px);
    background-size: var(--cell) var(--cell);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: hpGridDrift 26s linear infinite;
}

/* Drift exactly one cell, so the loop is seamless. */
@keyframes hpGridDrift {
    from { background-position: 0 0; }
    to   { background-position: var(--cell) var(--cell); }
}

/* A soft red bloom that breathes behind the headline. */
.home-page .hp-hero::after {
    content: "";
    position: absolute;
    top: -18%;
    right: -8%;
    width: min(46vw, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 34, 40, .10) 0%, rgba(192, 34, 40, 0) 68%);
    pointer-events: none;
    z-index: 0;
    animation: hpBloom 14s ease-in-out infinite;
}

@keyframes hpBloom {
    0%, 100% { transform: scale(1); opacity: .85; }
    50%      { transform: scale(1.12); opacity: 1; }
}

.home-page .hp-hero > .hp-wrap { position: relative; z-index: 1; }

/* Minimal entrance: a short rise and fade, staggered down the hero. */
@keyframes hpRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.home-page .hp-hero .hp-index,
.home-page .hp-hero h1,
.home-page .hp-hero .hp-lead,
.home-page .hp-hero .hp-actions,
.home-page .hp-hero .hp-tags {
    animation: hpRise .62s cubic-bezier(.22, .61, .36, 1) both;
}

.home-page .hp-hero .hp-index  { animation-delay: .02s; }
.home-page .hp-hero h1         { animation-delay: .10s; }
.home-page .hp-hero .hp-lead   { animation-delay: .18s; }
.home-page .hp-hero .hp-actions{ animation-delay: .26s; }
.home-page .hp-hero .hp-tags   { animation-delay: .34s; }

.home-page .hp-tags li {
    transition: border-color .18s ease, color .18s ease;
}
.home-page .hp-tags li:hover {
    border-color: var(--red, #c02228);
    color: var(--red, #c02228);
}

/* Anyone who has asked for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
    .home-page .hp-hero::before,
    .home-page .hp-hero::after { animation: none; }
    .home-page .hp-hero .hp-index,
    .home-page .hp-hero h1,
    .home-page .hp-hero .hp-lead,
    .home-page .hp-hero .hp-actions,
    .home-page .hp-hero .hp-tags {
        animation: none;
    }
}

/* Longer headline, so it steps down from the global display size and is
   given more room per line. Scoped to the hero; other pages are unaffected. */
.home-page .hp-hero h1 {
    max-width: 29ch;
    margin: 0 0 26px;
    font-size: clamp(28px, 3.45vw, 52px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.03em !important;
    text-wrap: balance;
}

.home-page .hp-lead {
    max-width: 82ch;
    margin: 0;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.7;
}

.home-page .hp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

.home-page .hp-tags li {
    padding: 9px 15px;
    border: 1px solid var(--hair);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */
.home-page .hp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    margin-top: 30px;
}

.home-page .hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--red, #c02228);
    color: #fff;
    padding: 16px 21px;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1;
    transition: background .18s ease;
}

.home-page .hp-btn::after { content: "\2192"; font-weight: 700; }
.home-page .hp-btn:hover { background: var(--red-dark, #8e1117); color: #fff; }

.home-page .hp-btn-line {
    background: transparent;
    color: var(--ink, #1a1a1a);
    padding: 16px 0;
    border-bottom: 1px solid var(--ink, #1a1a1a);
}
.home-page .hp-btn-line:hover {
    background: transparent;
    color: var(--red, #c02228);
    border-bottom-color: var(--red, #c02228);
}

/* Inline red text link */
.home-page .hp-link {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--red, #c02228);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.home-page .hp-link::after { content: " \2192"; }
.home-page .hp-link:hover { border-bottom-color: var(--red, #c02228); }

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */
.home-page .hp-stats {
    padding-top: clamp(22px, 2.4vw, 34px);
    padding-bottom: clamp(22px, 2.4vw, 34px);
    border-bottom: 1px solid var(--hair);
}

.home-page .hp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.home-page .hp-stat {
    padding: 0 22px;
    border-left: 1px solid var(--hair);
}
.home-page .hp-stat:first-child { border-left: 0; padding-left: 0; }

.home-page .hp-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(26px, 2.7vw, 40px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
    margin-bottom: 4px;
}

.home-page .hp-stat span {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted, #6b6b6b);
}

/* --------------------------------------------------------------------------
   Section heading — index column beside the headline
   -------------------------------------------------------------------------- */
/* Label sits above the heading rather than in a side column. */
.home-page .hp-head {
    display: block;
    margin-bottom: clamp(22px, 2.2vw, 34px);
}

.home-page .hp-head .hp-index { padding-top: 0; margin-bottom: 14px; }
.home-page .hp-head h2 { max-width: 24ch; margin: 0 0 14px; }
.home-page .hp-head p { max-width: 68ch; margin: 0 0 14px; font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.7; }
.home-page .hp-head p:last-child { margin-bottom: 0; }



/* --------------------------------------------------------------------------
   Card grids — hairline divided
   -------------------------------------------------------------------------- */
.home-page .hp-grid {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--hair);
}

/* Fixed column counts so a row never leaves an empty track, and cells carry
   even internal padding. The first cell of each row drops its left padding so
   its text lines up with the section heading above. */
.home-page .hp-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-page .hp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.home-page .hp-card,
.home-page .hp-work,
.home-page .hp-post {
    padding: 26px 30px 28px;
    border-bottom: 1px solid var(--hair);
    border-right: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
}

/* The three-column edge rules must not reach the four-column services grid,
   which carries both classes. Without the exclusion, 3n+1 lands on cards 4 and
   7 and strips their left padding while their row-mates keep it. */
.home-page .hp-grid:not(.hp-grid-4) > *:nth-child(3n + 1) { padding-left: 0; }
.home-page .hp-grid:not(.hp-grid-4) > *:nth-child(3n)     { border-right: 0; padding-right: 0; }

@media (max-width: 900px) {
    .home-page .hp-grid-4,
    .home-page .hp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .hp-grid > * { border-right: 1px solid var(--hair); padding-left: 32px; padding-right: 32px; }
    .home-page .hp-grid:not(.hp-grid-4) > *:nth-child(2n + 1) { padding-left: 0; }
    .home-page .hp-grid:not(.hp-grid-4) > *:nth-child(2n)     { border-right: 0; padding-right: 0; }
}

@media (max-width: 620px) {
    .home-page .hp-grid-4,
    .home-page .hp-grid-3 { grid-template-columns: 1fr; }
    .home-page .hp-grid > * { border-right: 0; padding-left: 0; padding-right: 0; }
}

.home-page .hp-card h3,
.home-page .hp-work h3,
.home-page .hp-post h3 { margin: 0 0 10px; }

.home-page .hp-card p,
.home-page .hp-post p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted, #6b6b6b);
}

.home-page .hp-card .hp-link,
.home-page .hp-work .hp-link,
.home-page .hp-post .hp-link { margin-top: auto; align-self: flex-start; }

.home-page .hp-work img,
.home-page .hp-post img {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    border-radius: 0;
}

.home-page .hp-worklabel {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted, #6b6b6b);
}

.home-page .hp-post h3 a { color: inherit; text-decoration: none; }
.home-page .hp-post h3 a:hover { color: var(--red, #c02228); }

/* --------------------------------------------------------------------------
   Brand list and industries
   -------------------------------------------------------------------------- */
.home-page .hp-brandlist {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hair);
    text-align: center;
}

.home-page .hp-brandlist li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    padding: 18px 14px;
    border-bottom: 1px solid var(--hair);
    border-right: 1px solid var(--hair);
    font-family: var(--font-display);
    font-size: clamp(13px, 1.15vw, 17px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.25;
    text-align: center;
}

.home-page .hp-brandlist li:nth-child(6n) { border-right: 0; }

/* Row two: three names, then the prompt fills the remaining three columns. */
.home-page .hp-brandlist .hp-nextup {
    grid-column: span 3;
    border-right: 0;
    padding: 18px 20px;
}

.home-page .hp-brandlist .hp-nextup a {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(15px, 1.5vw, 22px);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--red, #c02228);
    text-decoration: none;
    border-bottom: 2px solid var(--red, #c02228);
    padding-bottom: 3px;
}

.home-page .hp-brandlist .hp-nextup a::after { content: " \2192"; }

.home-page .hp-brandlist .hp-nextup a:hover {
    color: var(--red-dark, #8e1117);
    border-bottom-color: var(--red-dark, #8e1117);
}

@media (max-width: 900px) {
    .home-page .hp-brandlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-page .hp-brandlist li { border-right: 1px solid var(--hair); }
    .home-page .hp-brandlist li:nth-child(6n) { border-right: 1px solid var(--hair); }
    .home-page .hp-brandlist li:nth-child(3n) { border-right: 0; }
    .home-page .hp-brandlist .hp-nextup { grid-column: span 3; border-right: 0; }
}

@media (max-width: 560px) {
    .home-page .hp-brandlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .hp-brandlist li:nth-child(3n) { border-right: 1px solid var(--hair); }
    .home-page .hp-brandlist li:nth-child(2n) { border-right: 0; }
    .home-page .hp-brandlist .hp-nextup { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   Careers — dark band
   -------------------------------------------------------------------------- */
.home-page .hp-careers {
    background: var(--ink, #1a1a1a);
    color: #fff;
}

.home-page .hp-careers .hp-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 26px 60px;
    align-items: start;
}

.home-page .hp-careers .hp-index { grid-column: 1 / -1; }
.home-page .hp-careers h2 { color: #fff; max-width: 14ch; margin: 0; grid-column: 1; }
.home-page .hp-careers p { color: #fff; opacity: .84; max-width: none; margin: 0; grid-column: 2; font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.7; }
.home-page .hp-careers .hp-actions { grid-column: 2; margin-top: 6px; }

.home-page .hp-careers .hp-roles {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.home-page .hp-careers .hp-roles li {
    padding: 20px 24px 0;
    border-right: 1px solid rgba(255, 255, 255, .18);
    font-size: 13.5px;
    line-height: 1.6;
    opacity: .84;
}

.home-page .hp-careers .hp-roles li:first-child { padding-left: 0; }
.home-page .hp-careers .hp-roles li:last-child { border-right: 0; padding-right: 0; }

.home-page .hp-careers .hp-roles strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 700;
    letter-spacing: -.03em;
    opacity: 1;
}

@media (max-width: 860px) {
    .home-page .hp-careers .hp-wrap { grid-template-columns: 1fr; }
    .home-page .hp-careers h2,
    .home-page .hp-careers p,
    .home-page .hp-careers .hp-actions { grid-column: 1; }
    .home-page .hp-careers .hp-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .hp-careers .hp-roles li { padding-left: 24px; padding-right: 24px; }
    .home-page .hp-careers .hp-roles li:nth-child(2n + 1) { padding-left: 0; }
    .home-page .hp-careers .hp-roles li:nth-child(2n) { border-right: 0; padding-right: 0; }
}
.home-page .hp-careers .hp-index { color: #fff; }
.home-page .hp-careers .hp-btn { background: #fff; color: var(--ink, #1a1a1a); }
.home-page .hp-careers .hp-btn:hover { background: var(--red, #c02228); color: #fff; }

/* --------------------------------------------------------------------------
   Closing panel — red
   -------------------------------------------------------------------------- */
.home-page .hp-cta {
    background: var(--red, #c02228);
    color: #fff;
    padding-top: clamp(40px, 4.6vw, 76px);
    padding-bottom: clamp(40px, 4.6vw, 76px);
}

.home-page .hp-cta h2 { color: #fff; max-width: 18ch; margin: 0 0 18px; }
.home-page .hp-cta h2 em { color: #fff; }
.home-page .hp-cta p { color: #fff; opacity: .92; max-width: 54ch; margin: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; }
.home-page .hp-cta .hp-index { color: #fff; }
.home-page .hp-cta .hp-btn { background: #fff; color: var(--ink, #1a1a1a); }
.home-page .hp-cta .hp-btn:hover { background: var(--ink, #1a1a1a); color: #fff; }
.home-page .hp-cta .hp-btn-line { background: transparent; color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.home-page .hp-cta .hp-btn-line:hover { color: #fff; border-bottom-color: #fff; }

/* --------------------------------------------------------------------------
   Three-point summary
   -------------------------------------------------------------------------- */
.home-page .hp-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    margin: 30px 0 26px;
    padding: 0;
    border-top: 1px solid var(--hair);
}

.home-page .hp-points li {
    padding: 26px 30px 28px;
    border-bottom: 1px solid var(--hair);
    border-right: 1px solid var(--hair);
}

.home-page .hp-points li:first-child { padding-left: 0; }
.home-page .hp-points li:last-child { border-right: 0; padding-right: 0; }

.home-page .hp-points strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.35vw, 20px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.25;
}

.home-page .hp-points span {
    display: block;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted, #6b6b6b);
}

@media (max-width: 820px) {
    .home-page .hp-points { grid-template-columns: 1fr; }
    .home-page .hp-points li { border-right: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   Office row
   -------------------------------------------------------------------------- */
.home-page .hp-offices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 26px;
    padding: 0;
    max-width: none;
    border-bottom: 1px solid var(--hair);
}

.home-page .hp-offices a {
    display: block;
    padding: 24px 30px 26px;
    border-right: 1px solid var(--hair);
    text-decoration: none;
    color: var(--ink, #1a1a1a);
}

.home-page .hp-offices a:first-child { padding-left: 0; }
.home-page .hp-offices a:last-child { border-right: 0; padding-right: 0; }

.home-page .hp-offices strong {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red, #c02228);
}

.home-page .hp-offices span {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(15px, 1.3vw, 19px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.3;
}

.home-page .hp-offices a:hover span { color: var(--red, #c02228); }

@media (max-width: 700px) {
    .home-page .hp-offices { grid-template-columns: 1fr; }
    .home-page .hp-offices a { border-right: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--hair); }
    .home-page .hp-offices a:last-child { border-bottom: 0; }
}

/* The About column runs the full measure so the band does not trail off into
   empty space on the right. */
.home-page .hp-head h2 { max-width: 26ch; }
.home-page .hp-head p { max-width: 88ch; }

/* The office row is a <p>, so it must opt out of the measure cap above. */
.home-page .hp-head p.hp-offices,
.home-page p.hp-offices { max-width: none; }

/* --------------------------------------------------------------------------
   Blog cards
   -------------------------------------------------------------------------- */
.home-page .hp-post img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin-bottom: 18px;
    transition: opacity .22s ease;
}

.home-page .hp-post:hover img { opacity: .88; }

.home-page .hp-post h3 {
    font-size: clamp(16px, 1.35vw, 20px) !important;
    line-height: 1.32 !important;
    margin-bottom: 12px;
}

.home-page .hp-post p {
    margin-bottom: 20px;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   FAQ — numbered rows divided by hairlines
   -------------------------------------------------------------------------- */
.home-page .hp-faq { border-top: 1px solid var(--hair); }

.home-page .hp-faq-item {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 0 clamp(28px, 3.4vw, 64px);
    align-items: start;
    padding: 26px 0 28px;
    border-bottom: 1px solid var(--hair);
}

.home-page .hp-faq-item h3 {
    margin: 0;
    max-width: none;
    font-size: clamp(16px, 1.35vw, 20px) !important;
    line-height: 1.32 !important;
}

.home-page .hp-faq-item p {
    margin: 0;
    max-width: none;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted, #6b6b6b);
}

.home-page .hp-faq + .hp-actions { margin-top: 34px; }

@media (max-width: 860px) {
    .home-page .hp-faq-item { grid-template-columns: 1fr; gap: 10px; padding: 22px 0 24px; }
}

/* --------------------------------------------------------------------------
   About — copy and supporting points run in parallel columns
   -------------------------------------------------------------------------- */
.home-page .hp-about {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0 60px;
    align-items: start;
}

.home-page .hp-about-copy h2 { max-width: 22ch; margin: 0 0 20px; }
.home-page .hp-about-copy p { max-width: 54ch; margin: 0 0 16px; font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.7; }

.home-page .hp-offices-line {
    margin: 22px 0 18px !important;
    padding-top: 18px;
    border-top: 1px solid var(--hair);
    font-family: var(--font-display);
    font-size: clamp(15px, 1.3vw, 19px);
    font-weight: 700;
    letter-spacing: -.03em;
}

/* Points stack in the right column, each divided by a hairline. */
.home-page .hp-about .hp-points {
    grid-template-columns: 1fr;
    margin: 0;
    border-top: 1px solid var(--hair);
}

.home-page .hp-about .hp-points li {
    padding: 26px 0 26px 30px;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
}

.home-page .hp-about .hp-points li:last-child { border-bottom: 0; }

@media (max-width: 900px) {
    .home-page .hp-about { grid-template-columns: 1fr; gap: 30px; }
    .home-page .hp-about .hp-points li { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Services — hover response and a staggered reveal
   -------------------------------------------------------------------------- */
.home-page .hp-grid-4 .hp-card {
    position: relative;
    transition: background-color .28s ease, transform .28s ease;
}

/* A red rule grows along the top edge on hover. */
.home-page .hp-grid-4 .hp-card::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--red, #c02228);
    transition: width .34s cubic-bezier(.22, .61, .36, 1);
}

.home-page .hp-grid-4 .hp-card:hover { background: rgba(255, 255, 255, .72); }
.home-page .hp-grid-4 .hp-card:hover::after { width: 100%; }
.home-page .hp-grid-4 .hp-card:hover h3 { color: var(--red, #c02228); }
.home-page .hp-grid-4 .hp-card h3 { transition: color .22s ease; }

.home-page .hp-grid-4 .hp-card .hp-link {
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.home-page .hp-grid-4 .hp-card:hover .hp-link { transform: translateX(5px); }

/* Reveal on scroll, staggered a card at a time. */
.home-page .hp-grid-4 .hp-card {
    opacity: 0;
    transform: translateY(16px);
    animation: hpRise .6s cubic-bezier(.22, .61, .36, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
}

@supports not (animation-timeline: view()) {
    .home-page .hp-grid-4 .hp-card { opacity: 1; transform: none; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hp-grid-4 .hp-card { opacity: 1; transform: none; animation: none; }
    .home-page .hp-grid-4 .hp-card,
    .home-page .hp-grid-4 .hp-card::after,
    .home-page .hp-grid-4 .hp-card .hp-link { transition: none; }
}

/* --------------------------------------------------------------------------
   Industries — icon tiles
   -------------------------------------------------------------------------- */
.home-page .hp-industries {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hair);
}

.home-page .hp-industries li {
    border-bottom: 1px solid var(--hair);
    border-right: 1px solid var(--hair);
}

.home-page .hp-industries li:nth-child(4n) { border-right: 0; }
.home-page .hp-industries li:nth-child(4n + 1) a { padding-left: 0; }
.home-page .hp-industries li:nth-child(4n) a { padding-right: 0; }

@media (max-width: 980px) {
    .home-page .hp-industries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-page .hp-industries li:nth-child(4n) { border-right: 1px solid var(--hair); }
    .home-page .hp-industries li:nth-child(3n) { border-right: 0; }
    .home-page .hp-industries li a { padding-left: 26px; padding-right: 26px; }
    .home-page .hp-industries li:nth-child(3n + 1) a { padding-left: 0; }
    .home-page .hp-industries li:nth-child(3n) a { padding-right: 0; }
}

@media (max-width: 640px) {
    .home-page .hp-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .hp-industries li:nth-child(3n) { border-right: 1px solid var(--hair); }
    .home-page .hp-industries li:nth-child(2n) { border-right: 0; }
    .home-page .hp-industries li:nth-child(3n + 1) a { padding-left: 26px; }
    .home-page .hp-industries li:nth-child(2n + 1) a { padding-left: 0; }
    .home-page .hp-industries li:nth-child(2n) a { padding-right: 0; }
}

.home-page .hp-industries a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 26px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    text-decoration: none;
    transition: background-color .24s ease, color .24s ease;
}

.home-page .hp-industries svg {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--red, #c02228);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.home-page .hp-industries a:hover { background: rgba(192, 34, 40, .05); color: var(--red, #c02228); }
.home-page .hp-industries a:hover svg { transform: translateY(-3px) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .home-page .hp-industries a,
    .home-page .hp-industries svg { transition: none; }
}

/* --------------------------------------------------------------------------
   Heading row — label and headline left, the section's own link on the right,
   so a short heading no longer leaves an empty band down the right edge.
   -------------------------------------------------------------------------- */
.home-page .hp-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hair);
    margin-bottom: 0;
}

.home-page .hp-head-row > div { min-width: 0; }
.home-page .hp-head-row h2 { margin: 0; max-width: 26ch; }
.home-page .hp-head-row .hp-link { flex: 0 0 auto; padding-bottom: 4px; }

/* The grid immediately below a heading row carries its own top hairline. */
.home-page .hp-head-row + .hp-grid { border-top: 0; }

/* Two sections sharing a background read as one long gap. Halve the join and
   mark it with a hairline instead. */
.home-page .hp-section-join { padding-top: clamp(30px, 3.2vw, 52px); }
.home-page .hp-section-join > .hp-wrap { padding-top: clamp(30px, 3.2vw, 52px); border-top: 1px solid var(--hair); }

/* --------------------------------------------------------------------------
   Services — eight cards across four columns, so no row ends short
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
    .home-page .hp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* One gutter value for every card, so the copy in each column starts at the
       same distance from its own divider. Only the outer edges flush to the
       content measure. */
    .home-page .hp-grid-4 > * {
        padding-left: 34px;
        padding-right: 34px;
        border-right: 1px solid var(--hair);
    }

    .home-page .hp-grid-4 > *:nth-child(4n + 1) { padding-left: 0; }
    .home-page .hp-grid-4 > *:nth-child(4n)     { border-right: 0; padding-right: 0; }
    .home-page .hp-grid-4 > *:nth-last-child(-n + 4) { border-bottom: 0; }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .home-page .hp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .hp-grid-4 > * { border-right: 1px solid var(--hair); padding-left: 32px; padding-right: 32px; }
    .home-page .hp-grid-4 > *:nth-child(2n + 1) { padding-left: 0; }
    .home-page .hp-grid-4 > *:nth-child(2n)     { border-right: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   Our offices — the closing point in the about column, given emphasis
   -------------------------------------------------------------------------- */
.home-page .hp-point-offices {
    position: relative;
    margin-top: 4px;
    padding-left: 30px !important;
    background: var(--rose, #fce7e7);
    border-bottom: 0 !important;
}

.home-page .hp-about .hp-points li.hp-point-offices { padding: 22px 24px 22px 24px !important; }
.home-page .hp-point-offices::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--red, #c02228);
}
.home-page .hp-point-offices strong { color: var(--red, #c02228); }
.home-page .hp-point-offices span {
    color: var(--ink, #1a1a1a);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(15px, 1.25vw, 18px);
    letter-spacing: -.03em;
}

/* --------------------------------------------------------------------------
   Shopify partner — the one credential worth its own band
   -------------------------------------------------------------------------- */
.home-page .hp-partner {
    background: var(--ink, #1a1a1a);
    color: #fff;
    padding-top: clamp(40px, 4.4vw, 70px);
    padding-bottom: clamp(40px, 4.4vw, 70px);
}

.home-page .hp-partner-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0 60px;
    align-items: start;
}

.home-page .hp-partner .hp-index { color: #f2a5a8; }
.home-page .hp-partner h2 { color: #fff; max-width: 18ch; margin: 0 0 20px; }
.home-page .hp-partner h2 em { color: #f2a5a8; }
.home-page .hp-partner p {
    color: rgba(255, 255, 255, .78);
    max-width: 64ch;
    margin: 0 0 16px;
    font-size: clamp(14.5px, 1.05vw, 16.5px);
    line-height: 1.7;
}
.home-page .hp-partner .hp-partner-lead { color: #fff; font-size: clamp(15.5px, 1.15vw, 18px); }
.home-page .hp-partner .hp-actions { margin-top: 26px; }
.home-page .hp-partner .hp-btn { background: #fff; color: var(--ink, #1a1a1a); }
.home-page .hp-partner .hp-btn:hover { background: var(--red, #c02228); color: #fff; }
.home-page .hp-partner .hp-btn-line { background: transparent; color: #fff; border-bottom-color: rgba(255,255,255,.55); }
.home-page .hp-partner .hp-btn-line:hover { color: #fff; border-bottom-color: #fff; }

.home-page .hp-partner-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.home-page .hp-partner-facts li {
    padding: 20px 0 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    transition: padding-left .26s cubic-bezier(.22, .61, .36, 1);
}
.home-page .hp-partner-facts li:last-child { border-bottom: 0; }
.home-page .hp-partner-facts li:hover { padding-left: 40px; }

.home-page .hp-partner-facts strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: clamp(15px, 1.2vw, 17.5px);
    font-weight: 700;
    letter-spacing: -.03em;
    color: #fff;
}

.home-page .hp-partner-facts span {
    display: block;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 900px) {
    .home-page .hp-partner-inner { grid-template-columns: 1fr; gap: 34px; }
    .home-page .hp-partner-facts li { padding-left: 0; }
    .home-page .hp-partner-facts li:hover { padding-left: 10px; }
}

/* --------------------------------------------------------------------------
   Closing panel — two soft discs behind the copy
   -------------------------------------------------------------------------- */
.home-page .hp-cta { position: relative; overflow: hidden; }

.home-page .hp-cta::before,
.home-page .hp-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
    z-index: 0;
}

.home-page .hp-cta::before {
    width: min(42vw, 460px);
    aspect-ratio: 1;
    top: -22%;
    right: 4%;
}

.home-page .hp-cta::after {
    width: min(26vw, 280px);
    aspect-ratio: 1;
    bottom: -18%;
    right: 26%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 70%);
}

.home-page .hp-cta > .hp-wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Hero — a restrained response to the pointer
   -------------------------------------------------------------------------- */
.home-page .hp-hero::before {
    transition: opacity .5s ease;
    opacity: 1;
}
.home-page .hp-hero:hover::before { opacity: .55; animation-duration: 16s; }

.home-page .hp-hero::after { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.home-page .hp-hero:hover::after { transform: scale(1.06) translateX(-2%); }

.home-page .hp-hero h1 em {
    background-image: linear-gradient(var(--red, #c02228), var(--red, #c02228));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size .55s cubic-bezier(.22, .61, .36, 1);
}
.home-page .hp-hero:hover h1 em { background-size: 100% 2px; }

.home-page .hp-tags li { transform: translateY(0); }
.home-page .hp-tags li:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .home-page .hp-hero:hover::before,
    .home-page .hp-hero:hover::after,
    .home-page .hp-hero:hover h1 em,
    .home-page .hp-tags li:hover,
    .home-page .hp-partner-facts li:hover { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Hero headline — the keyword line reads as a standfirst above the statement
   -------------------------------------------------------------------------- */
.home-page .hp-hero h1.hp-h1-split {
    max-width: none;
    font-size: inherit !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
}

.home-page .hp-h1-kw {
    display: block;
    max-width: none;
    white-space: nowrap;
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: clamp(9px, 1.24vw, 18px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--muted, #6b6b6b);
    text-wrap: balance;
}

.home-page .hp-h1-lead {
    display: block;
    max-width: none;
    font-family: var(--font-display);
    font-size: clamp(38px, 5.4vw, 82px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.045em;
    color: var(--ink, #1a1a1a);
    text-wrap: balance;
}

.home-page .hp-h1-lead em { font-style: normal; color: var(--red, #c02228); }

/* "We Provide Complete" holds one line and sets the block width; the red
   phrase takes the line below it. */
.home-page .hp-h1-line {
    display: block;
    white-space: nowrap;
}

.home-page .hp-h1-lead em { display: block; }

@media (max-width: 700px) {
    .home-page .hp-h1-kw { max-width: none; }
    .home-page .hp-h1-lead { max-width: none; }
}

/* Below this the headline is scaled off the viewport instead of the clamp
   floor, so the single line still fits on a 320px screen. */
/* The display line is nowrap, so below tablet its size is derived from the
   viewport rather than the clamp floor, keeping the longest line inside the
   column instead of being clipped by the section's overflow. */
@media (max-width: 760px) {
    .home-page .hp-h1-lead { font-size: clamp(19px, 7.4vw, 34px); }
}

/* --------------------------------------------------------------------------
   Service cards — a common baseline so a row reads as a row
   --------------------------------------------------------------------------
   Titles reserve two lines, so every body paragraph in a row starts level
   even when one title is short. The link keeps a minimum clear space above
   it rather than floating wherever the copy happens to end.
   -------------------------------------------------------------------------- */
.home-page .hp-grid-4 .hp-card h3 {
    min-height: calc(2 * 1.24em);
    margin-bottom: 12px;
}

.home-page .hp-grid-4 .hp-card p {
    margin: 0 0 22px;
}

.home-page .hp-grid-4 .hp-card .hp-link {
    margin-top: auto;
    padding-top: 4px;
}

@media (max-width: 620px) {
    .home-page .hp-grid-4 .hp-card h3 { min-height: 0; }
}

/* --------------------------------------------------------------------------
   Pointer response
   --------------------------------------------------------------------------
   The hero bloom and grid track the cursor a few pixels; cards lift a faint
   highlight under it. Driven by --mx/--my, set once per frame in home.js.
   -------------------------------------------------------------------------- */
.home-page .hp-hero {
    --mx: 50%;
    --my: 50%;
    --px: 0px;
    --py: 0px;
}

.home-page .hp-hero::after {
    will-change: translate;
    translate: calc(var(--px) * -1.6) calc(var(--py) * -1.6);
    transition: translate .5s cubic-bezier(.22, .61, .36, 1);
}

.home-page .hp-hero:hover::after { transition-duration: .18s; }

.home-page .hp-hero::before {
    translate: calc(var(--px) * .35) calc(var(--py) * .35);
    transition: translate .6s cubic-bezier(.22, .61, .36, 1), opacity .5s ease;
}

.home-page .hp-card,
.home-page .hp-work,
.home-page .hp-post {
    --mx: 50%;
    --my: 50%;
}

.home-page .hp-card::before,
.home-page .hp-work::before,
.home-page .hp-post::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(220px circle at var(--mx) var(--my), rgba(192, 34, 40, .07), transparent 70%);
    transition: opacity .3s ease;
    z-index: 0;
}

.home-page .hp-work,
.home-page .hp-post { position: relative; }

.home-page .hp-card:hover::before,
.home-page .hp-work:hover::before,
.home-page .hp-post:hover::before { opacity: 1; }

.home-page .hp-card,
.home-page .hp-work,
.home-page .hp-post { position: relative; }

.home-page .hp-card > *,
.home-page .hp-work > *,
.home-page .hp-post > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .home-page .hp-hero::before,
    .home-page .hp-hero::after { translate: none !important; transition: none; }
    .home-page .hp-card::before,
    .home-page .hp-work::before,
    .home-page .hp-post::before { display: none; }
}

/* --------------------------------------------------------------------------
   Closing panel — copy left, what-happens-next right
   --------------------------------------------------------------------------
   The band previously ran a capped headline down the left and left half its
   width empty. The right column now carries the steps and the direct lines.
   -------------------------------------------------------------------------- */
.home-page .hp-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 clamp(40px, 5vw, 88px);
    align-items: start;
}

.home-page .hp-cta-copy h2 { max-width: 15ch; }
.home-page .hp-cta-copy > p { max-width: 48ch; }
.home-page .hp-cta .hp-actions { margin-top: 30px; }

.home-page .hp-cta-side {
    padding-left: clamp(0px, 3vw, 52px);
    border-left: 1px solid rgba(255, 255, 255, .24);
}

.home-page .hp-cta-sidelabel {
    margin: 0 0 20px !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    opacity: .72;
}

.home-page .hp-cta-steps {
    counter-reset: ctastep;
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.home-page .hp-cta-steps li {
    counter-increment: ctastep;
    position: relative;
    padding: 0 0 20px 44px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.home-page .hp-cta-steps li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.home-page .hp-cta-steps li::before {
    content: counter(ctastep, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1px;
    width: 30px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #fff;
    opacity: .6;
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.home-page .hp-cta-steps li:hover::before { opacity: 1; transform: translateX(3px); }

.home-page .hp-cta-steps strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: clamp(15px, 1.2vw, 17.5px);
    font-weight: 700;
    letter-spacing: -.03em;
    color: #fff;
}

.home-page .hp-cta-steps span {
    display: block;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
}

.home-page .hp-cta-contact {
    list-style: none;
    margin: 34px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .24);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.home-page .hp-cta-contact li {
    display: block;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, .24);
}

.home-page .hp-cta-contact li:last-child { border-right: 0; padding-right: 0; }
.home-page .hp-cta-contact li + li { padding-left: 20px; }

.home-page .hp-cta-contact span {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
}

.home-page .hp-cta-contact a {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(14px, 1.05vw, 16.5px);
    font-weight: 700;
    letter-spacing: -.03em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}

.home-page .hp-cta-contact a:hover { border-bottom-color: #fff; }

@media (max-width: 900px) {
    .home-page .hp-cta-inner { grid-template-columns: 1fr; gap: 38px; }
    .home-page .hp-cta-side { padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.24); }
    .home-page .hp-cta-copy h2 { max-width: none; }
}

/* --------------------------------------------------------------------------
   Closing panel motion — the discs drift, the steps arrive in sequence
   -------------------------------------------------------------------------- */
@keyframes hpDriftA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-26px, 18px, 0) scale(1.06); }
}

@keyframes hpDriftB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(20px, -16px, 0) scale(1.09); }
}

.home-page .hp-cta::before { animation: hpDriftA 22s ease-in-out infinite; }
.home-page .hp-cta::after  { animation: hpDriftB 18s ease-in-out infinite; }

@keyframes hpStepIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
    .home-page .hp-cta-steps li,
    .home-page .hp-cta-contact li {
        animation: hpStepIn .5s cubic-bezier(.22, .61, .36, 1) both;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hp-cta::before,
    .home-page .hp-cta::after { animation: none; }
    .home-page .hp-cta-steps li,
    .home-page .hp-cta-contact li { animation: none; opacity: 1; transform: none; }
    .home-page .hp-cta-steps li:hover::before { transform: none; }
}

/* Contacts stack on narrow screens rather than squeezing three across. */
@media (max-width: 620px) {
    .home-page .hp-cta-contact { grid-template-columns: 1fr; gap: 14px; }
    .home-page .hp-cta-contact li,
    .home-page .hp-cta-contact li + li {
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* A slow sheen across the closing panel, behind the copy. */
@keyframes hpSheen {
    0%, 100% { opacity: 0; transform: translateX(-30%) skewX(-12deg); }
    50%      { opacity: .5; transform: translateX(30%) skewX(-12deg); }
}

.home-page .hp-cta-inner::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 0;
    width: 26%;
    height: 120%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.07) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 0;
    animation: hpSheen 12s ease-in-out infinite;
}

.home-page .hp-cta-inner { position: relative; }
.home-page .hp-cta-copy,
.home-page .hp-cta-side { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .home-page .hp-cta-inner::before { animation: none; opacity: 0; }
}

/* The keyword line is one line by design. Below tablet the nowrap line would
   overflow, so it releases and wraps rather than pushing the page sideways. */
@media (max-width: 760px) {
    .home-page .hp-h1-kw { white-space: normal; font-size: clamp(12px, 3.2vw, 15px); }
}

/* --------------------------------------------------------------------------
   Services — a fuller hover response
   --------------------------------------------------------------------------
   Previously only a top rule grew and the heading turned red. The card now
   lifts, the rule sweeps in from the left edge, the heading carries its own
   underline, and the arrow separates from its label.
   -------------------------------------------------------------------------- */
.home-page .hp-grid-4 .hp-card {
    transition: background-color .3s ease, transform .34s cubic-bezier(.22, .61, .36, 1),
                box-shadow .34s cubic-bezier(.22, .61, .36, 1);
}

.home-page .hp-grid-4 .hp-card:hover {
    background: #fff;
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(26, 26, 26, .07);
}

.home-page .hp-grid-4 .hp-card h3 {
    background-image: linear-gradient(var(--red, #c02228), var(--red, #c02228));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: color .26s ease, background-size .42s cubic-bezier(.22, .61, .36, 1);
    display: inline;
}

.home-page .hp-grid-4 .hp-card:hover h3 { background-size: 100% 1px; }

.home-page .hp-grid-4 .hp-card .hp-link {
    position: relative;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), color .2s ease;
}

.home-page .hp-grid-4 .hp-card:hover .hp-link { transform: translateX(6px); }

/* The arrow pulls a little further than the label it follows. */
.home-page .hp-grid-4 .hp-card .hp-link::after {
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.home-page .hp-grid-4 .hp-card:hover .hp-link::after { transform: translateX(4px); }

.home-page .hp-grid-4 .hp-card p {
    transition: color .3s ease;
}
.home-page .hp-grid-4 .hp-card:hover p { color: var(--ink, #1a1a1a); }

@media (prefers-reduced-motion: reduce) {
    .home-page .hp-grid-4 .hp-card,
    .home-page .hp-grid-4 .hp-card h3,
    .home-page .hp-grid-4 .hp-card .hp-link,
    .home-page .hp-grid-4 .hp-card .hp-link::after {
        transition: none;
    }
    .home-page .hp-grid-4 .hp-card:hover { transform: none; box-shadow: none; }
    .home-page .hp-grid-4 .hp-card:hover .hp-link,
    .home-page .hp-grid-4 .hp-card:hover .hp-link::after { transform: none; }
}

/* Reading measure: ch is narrower than an average glyph in Poppins, so these
   caps are set from measured characters per line rather than the unit. Target
   is roughly 70-78 characters. */
.home-page .hp-lead { max-width: 60ch; }
.home-page .hp-head p { max-width: 62ch; }
.home-page .hp-faq-item p { max-width: 64ch; }