/**
 * HRMG Portfolio — front end.
 *
 * Ported from the approved mockup (brand-portfolio-v3.html). The annotation
 * chrome from that file — the dark .anno bars, the .sys palette strip, the
 * italic .aside notes, the .opts decision section — was scaffolding for the
 * review and is deliberately NOT here.
 *
 * EVERYTHING IS SCOPED UNDER .hrmg-pf. The7 ships its own .card, .grid, .shot,
 * .wrap and .more; unscoped rules here would collide with the theme in both
 * directions. The scope is what keeps the two apart.
 *
 * THE PALETTE IS THE LOGO'S OWN. HRMG's site has been running on one colour
 * (ember) pulled out of a four-colour mark since 2019. The teal and indigo have
 * been sitting unused in the fan the whole time. The full four-stop gradient
 * appears exactly once — as the 3px signature rule on top of the Hinge band. It
 * is a structural element, never a large fill; as a fill it reads as a 2014
 * startup, as a hairline it reads as a mark.
 */

.hrmg-pf {
    --ember:  #F15A29;  /* the only colour the live site currently uses */
    --amber:  #F7941D;
    --teal:   #3E92A3;  /* in the logo, unused on the site */
    --indigo: #3A2E6E;  /* in the logo, unused on the site */
    --ink:    #14161C;
    --ink-2:  #464C5A;
    --ink-3:  #8A90A0;
    --paper:  #FFFFFF;
    --paper-2:#F8F6F3;  /* warm off-white, NOT a cold gray */
    --rule:   #E6E2DC;

    background: var(--paper-2);
    color: var(--ink);
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.hrmg-pf *,
.hrmg-pf *::before,
.hrmg-pf *::after { box-sizing: border-box; }

.hrmg-pf h2,
.hrmg-pf h3,
.hrmg-pf h4,
.hrmg-pf h5 { color: var(--ink); }

.hrmg-pf img { max-width: 100%; height: auto; display: block; }

.hrmg-pf .wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
}

.hrmg-pf .eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember);
    font-weight: 600;
    margin-bottom: 20px;
}

.hrmg-pf .sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 38px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 14px;
}
.hrmg-pf .sechead h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0;
}
.hrmg-pf .sechead .c {
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* Tech chip. A link in zone 2 (to the term archive — that is the SEO surface),
   a plain span inside the grid card, which is itself one big anchor. */
.hrmg-pf .t {
    font-size: 11px;
    padding: 3px 10px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--ink-2);
    background: #fff;
    letter-spacing: .02em;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
}
.hrmg-pf a.t:hover { border-color: var(--ink-3); color: var(--ink); }
.hrmg-pf .t.hot {
    border-color: rgba(241, 90, 41, .35);
    color: var(--ember);
    background: rgba(241, 90, 41, .05);
    font-weight: 500;
}

/* ---------- Zone 1: positioning ---------- */
.hrmg-pf .hero {
    background: var(--paper);
    padding: 78px 0 66px;
    border-bottom: 1px solid var(--rule);
}
.hrmg-pf .hero h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0 0 22px;
    max-width: 820px;
}
.hrmg-pf .hero h2 em { font-style: italic; color: var(--ember); }
.hrmg-pf .hero .lede {
    font-size: 16.5px;
    color: var(--ink-2);
    max-width: 620px;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}
.hrmg-pf .facts {
    display: flex;
    gap: 44px;
    margin-top: 38px;
    padding-top: 26px;
    border-top: 1px solid var(--rule);
    flex-wrap: wrap;
}
.hrmg-pf .fact .n {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
}
.hrmg-pf .fact .l {
    font-size: 11.5px;
    color: var(--ink-3);
    margin-top: 5px;
    letter-spacing: .02em;
}

/* ---------- Zone 2: selected work ---------- */
.hrmg-pf .sel { background: var(--paper-2); padding: 66px 0 56px; }

.hrmg-pf .feat {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 44px;
    align-items: center;
    margin-bottom: 54px;
}
/* Alternating sides. `order` only — the DOM order stays correct for
   screen readers and for the mobile single-column stack. */
.hrmg-pf .feat.flip { grid-template-columns: 1fr 1.3fr; }
.hrmg-pf .feat.flip .shotwrap { order: 2; }

.hrmg-pf .shotwrap { position: relative; }
.hrmg-pf .browser {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 22, 28, .06), 0 12px 32px -8px rgba(20, 22, 28, .16);
    border: 1px solid var(--rule);
    background: #fff;
}
.hrmg-pf .bbar {
    height: 26px;
    background: #F1EEEA;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-bottom: 1px solid var(--rule);
}
.hrmg-pf .bbar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D6D1CA;
    display: block;
    flex: 0 0 8px;
}
.hrmg-pf .bbar .url {
    margin-left: 10px;
    font-size: 9.5px;
    color: #A29B92;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The gradient is the EMPTY state, visible only when there is no image —
   a project awaiting its first capture. With an image it is covered. */
.hrmg-pf .shot {
    aspect-ratio: 16 / 10.5;
    background: linear-gradient(160deg, #DDE3EA, #F2F5F8);
    overflow: hidden;
}
.hrmg-pf .shot img {
    width: 100%;
    height: 100%;
    /* top: a full-page capture is very tall. Anchor to the hero, which is the
       part of the page a visitor actually recognises. */
    object-fit: cover;
    object-position: top center;
}

.hrmg-pf .yr-tab {
    position: absolute;
    top: -11px;
    left: -11px;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    z-index: 2;
}
.hrmg-pf .feat h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 29px;
    line-height: 1.24;
    letter-spacing: -.01em;
    margin: 0 0 14px;
}
.hrmg-pf .feat .who {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 11px;
    font-weight: 500;
}
.hrmg-pf .feat p {
    font-size: 14.5px;
    color: var(--ink-2);
    font-weight: 300;
    line-height: 1.7;
    margin: 0 0 18px;
}
.hrmg-pf .stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
}
.hrmg-pf .cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 2px solid var(--ember);
    padding-bottom: 3px;
    letter-spacing: .02em;
    display: inline-block;
}
.hrmg-pf .cta:hover { color: var(--ember); }

/* ---------- Zone 3: recent grid ---------- */
.hrmg-pf .recent {
    background: var(--paper);
    padding: 62px 0 58px;
    border-top: 1px solid var(--rule);
}
.hrmg-pf .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.hrmg-pf .card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .18s, transform .18s;
}
.hrmg-pf .card:hover {
    box-shadow: 0 10px 28px -10px rgba(20, 22, 28, .18);
    transform: translateY(-2px);
}
/* The whole card is one link. Chips inside it are spans, never anchors —
   see HRMG_PF_Template::tech_chips(). */
.hrmg-pf .cardlink {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.hrmg-pf .card .shot {
    aspect-ratio: 16 / 10;
    border-radius: 0;
}
.hrmg-pf .card .m {
    padding: 15px 16px 17px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.hrmg-pf .card .who {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.hrmg-pf .card h5 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    margin: 0 0 7px;
    letter-spacing: -.005em;
    line-height: 1.35;
}
.hrmg-pf .card p {
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 300;
    margin: 0 0 12px;
    line-height: 1.55;
}
.hrmg-pf .card .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--rule);
    padding-top: 10px;
    margin-top: auto; /* pins the footer to the bottom of an uneven card */
    gap: 10px;
}
.hrmg-pf .card .foot .yy {
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

/* Load More */
.hrmg-pf .loadwrap {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.hrmg-pf .more {
    display: inline-block;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: none;
    border: 0;
    border-bottom: 2px solid var(--ember);
    border-radius: 0;
    padding: 0 0 3px;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: .02em;
}
.hrmg-pf .more:hover { color: var(--ember); }
.hrmg-pf .more[disabled] { opacity: .5; cursor: default; }
.hrmg-pf .loadmsg { font-size: 12.5px; color: var(--ink-3); }

/* ---------- Zone 3.5: the hinge ---------- */
.hrmg-pf .hinge {
    background: var(--ink);
    color: #fff;
    padding: 76px 0 70px;
    position: relative;
    overflow: hidden;
}
/* THE SIGNATURE RULE. The logo mark's four stops, 3px tall. This is the only
   place the full gradient appears on the page, and it stays a hairline. */
.hrmg-pf .hinge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ember), var(--amber), var(--teal), var(--indigo));
}
.hrmg-pf .hinge .eyebrow { color: var(--amber); }
.hrmg-pf .hinge h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -.015em;
    margin: 0 0 26px;
    max-width: 760px;
    color: #fff;
}
.hrmg-pf .hinge h3 em { font-style: italic; color: var(--amber); }
.hrmg-pf .hinge .cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    max-width: 900px;
}
.hrmg-pf .hinge p {
    font-size: 14.5px;
    color: #B6BCC8;
    font-weight: 300;
    line-height: 1.78;
    margin: 0;
}
.hrmg-pf .hinge p b { color: #fff; font-weight: 500; }
.hrmg-pf .hinge p em.lit { color: #fff; font-style: italic; }

/* ---------- Zone 4: legacy roll call ---------- */
.hrmg-pf .legacy { background: var(--paper-2); padding: 62px 0 70px; }
.hrmg-pf .legacy h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 30px;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.hrmg-pf .legacy .sub {
    font-size: 14px;
    color: var(--ink-2);
    font-weight: 300;
    max-width: 640px;
    margin: 0 0 30px;
    line-height: 1.7;
}
.hrmg-pf .roll {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 52px;
}
.hrmg-pf .lr {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    transition: background .14s, padding .14s;
}
.hrmg-pf .lr:hover {
    background: #fff;
    padding-left: 9px;
    padding-right: 9px;
    border-radius: 4px;
}
/* 62x42 IS THE DESIGN, not a placeholder value. Big enough that the band feels
   alive and clickable; small enough that nobody stops to critique the typography
   on a 2018 build. These thumbnails are the original Photoshop mockups. */
.hrmg-pf .lt {
    width: 62px;
    height: 42px;
    flex: 0 0 62px;
    border-radius: 3px;
    background: linear-gradient(150deg, #DDE3EA, #EFF2F5);
    border: 1px solid var(--rule);
    overflow: hidden;
    display: block;
}
.hrmg-pf .lt img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hrmg-pf .lr .nm {
    flex: 1;
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -.005em;
    min-width: 0;
}
.hrmg-pf .lr .cat {
    font-size: 11.5px;
    color: var(--ink-3);
    width: 86px;
    flex: 0 0 86px;
}
.hrmg-pf .lr .yy {
    font-size: 11.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    width: 34px;
    flex: 0 0 34px;
    text-align: right;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hrmg-pf .feat,
    .hrmg-pf .feat.flip,
    .hrmg-pf .grid,
    .hrmg-pf .roll,
    .hrmg-pf .hinge .cols { grid-template-columns: 1fr; }

    .hrmg-pf .feat.flip .shotwrap { order: 0; }

    .hrmg-pf .grid { gap: 20px; }
    .hrmg-pf .hero { padding: 54px 0 46px; }
    .hrmg-pf .hero h2 { font-size: 38px; }
    .hrmg-pf .hinge h3 { font-size: 30px; }
    .hrmg-pf .hinge .cols { gap: 24px; }
    .hrmg-pf .facts { gap: 28px; }
}

@media (max-width: 560px) {
    .hrmg-pf .wrap { padding: 0 18px; }
    .hrmg-pf .hero h2 { font-size: 31px; }
    .hrmg-pf .legacy h3 { font-size: 25px; }
    .hrmg-pf .facts { flex-direction: column; gap: 18px; }
    .hrmg-pf .lr .cat { display: none; } /* the name and the year are what matter */
}

@media (prefers-reduced-motion: reduce) {
    .hrmg-pf .card,
    .hrmg-pf .lr { transition: none; }
    .hrmg-pf .card:hover { transform: none; }
}


/* ============================================================================
   THEME INTEGRATION — The7
   ----------------------------------------------------------------------------
   THE MASTHEAD RULES THAT USED TO LIVE HERE ARE GONE, AND SO IS THE MASTHEAD.
   templates/portfolio-page.php no longer calls get_header()/get_footer(); it
   requires templates/parts/header.php and footer.php, so The7's masthead, its
   top bar and its page-title strip are never emitted on this page at all. The
   rules that forced a solid background onto .masthead, recoloured .main-nav
   links from white back to ink, and hid #page-title were all fighting markup
   that no longer exists. Fighting it was unwinnable; not rendering it is free.
   (The7's ASSETS are still enqueued and must stay that way — wp_head() is where
   Yoast/LiteSpeed/consent/analytics live. We drop its markup, never its files.)

   WHAT SURVIVES: the un-boxing. The7 nests page content as

          .masthead → .page-inner → #main → .wf-wrap → .wf-container-main → OURS

   and `.wf-wrap` is a max-width container with side padding. Our sections would
   inherit it, so the dark Hinge band and the Legacy roll call stop short of the
   viewport edge and the page reads as a card floating on a background. The Hinge
   only works full-bleed — it is a hard cut between two eras, and a hard cut with
   margins is just a rectangle. So we un-clamp the container and let our own
   `.wrap` (max-width 1080px, centered) do the measuring. That is cleaner than the
   usual `width:100vw; margin-left:calc(50% - 50vw)` trick, which double-counts
   the scrollbar and gives a horizontal scroll on Windows.

   These rules are kept deliberately even though our own template does not print
   `#main > .wf-wrap` today: they are inert when the wrappers are absent, and they
   are the difference between a working page and a boxed one the moment any part
   of this page is rendered inside a theme template again. Scoped to
   body.hrmg-pf-page, so no other page on the site is touched either way.
   ========================================================================== */

/* `width`, not just `max-width`. The site's own custom.css:697 carries
   `#main > .wf-wrap { width: 1250px; }` — a HARD width. Overriding only
   `max-width` leaves that 1250px standing and the box survives. We win on
   specificity here (body.hrmg-pf-page #main > .wf-wrap beats #main > .wf-wrap),
   so no !important is needed regardless of stylesheet load order. */
body.hrmg-pf-page #main > .wf-wrap {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

body.hrmg-pf-page #main .wf-container-main {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* The7 paints a gradient wash behind #main. Ours is a designed surface; two
   backgrounds fighting reads as a rendering bug. */
body.hrmg-pf-page .main-gradient {
    display: none;
}

body.hrmg-pf-page #main {
    padding-top: 0;
    padding-bottom: 0;
}


/* ============================================================================
   THE CHROME — header + footer
   ----------------------------------------------------------------------------
   Styles templates/parts/header.php and templates/parts/footer.php. This is the
   pattern the rest of the hrmg.agency rebuild reuses, so it is written to be
   theme-independent: it inherits NOTHING from The7 and depends on nothing but
   the two webfonts.

   THE CUSTOM PROPERTIES ARE REDECLARED HERE ON PURPOSE. The originals are
   declared on `.hrmg-pf`, which is the page body — the chrome sits OUTSIDE it
   and would inherit nothing. Same values, and they must stay the same values.
   ========================================================================== */

.hrmg-hdr,
.hrmg-hdr-ovl,
.hrmg-ftr {
    --ember:  #F15A29;
    --amber:  #F7941D;
    --teal:   #3E92A3;
    --indigo: #3A2E6E;
    --ink:    #14161C;
    --ink-2:  #464C5A;
    --ink-3:  #8A90A0;
    --paper:  #FFFFFF;
    --paper-2:#F8F6F3;
    --rule:   #E6E2DC;

    --hdr-h:  72px;   /* the header's height in flow. Referenced by the overlay. */

    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

.hrmg-hdr *,
.hrmg-hdr *::before,
.hrmg-hdr *::after,
.hrmg-hdr-ovl *,
.hrmg-hdr-ovl *::before,
.hrmg-hdr-ovl *::after,
.hrmg-ftr *,
.hrmg-ftr *::before,
.hrmg-ftr *::after { box-sizing: border-box; }

/* Keyboard users get a real way past the nav. Visible only when focused. */
.hrmg-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--ink, #14161C);
    color: #fff;
    font: 500 13px/1 'Poppins', system-ui, sans-serif;
    text-decoration: none;
}
.hrmg-skip:focus {
    left: 8px;
    top: 8px;
}

/* ---------- Header shell ---------- */

/* NOT position:fixed. Sticky keeps the header in normal flow, so it reserves its
   own 72px and the hero below it needs no magic top padding — which is exactly
   the class of bug that made The7's overlay masthead unwinnable on this page. */
.hrmg-hdr {
    position: sticky;
    top: 0;
    z-index: 900;

    /* AT REST THE HEADER IS NOT A BAR.
       ------------------------------------------------------------------------
       It used to be a cream (#F8F6F3) band sitting on a white (#FFFFFF) hero:
       two stacked surfaces with a hard seam between them. That seam is what made
       it read as chrome bolted on above the page rather than as part of it.

       Transparent at rest, it IS the hero surface. On scroll it materialises —
       colour, blur, shadow, and the gradient hairline (see ::after). The header
       earns its presence at the moment content starts passing beneath it, which
       is the only moment it needs one. */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    /* THE BORDER IS ALWAYS HERE, TRANSPARENT AT REST. .is-scrolled only changes
       its COLOUR. If you "add" the border on scroll instead, the header grows 1px
       the instant the user moves and the entire page shifts under a sticky
       element — which reads as a rendering bug, not a design. Never do that. */
    border-bottom: 1px solid transparent;
    box-shadow: 0 0 0 rgba(20, 22, 28, 0);
    transition: border-color .22s ease,
                background-color .22s ease,
                backdrop-filter .22s ease,
                box-shadow .22s ease;
}
.hrmg-hdr.is-scrolled {
    background: rgba(248, 246, 243, 0.88);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom-color: rgba(20, 22, 28, .08);
    box-shadow: 0 8px 28px -18px rgba(20, 22, 28, .45);
}

/* The logo condenses as the page moves. 40 -> 32 is small enough that nobody
   consciously notices it and large enough that the header feels alive. The
   height var drives the bar, so both animate together and nothing jumps. */
.hrmg-hdr { --hdr-h: 84px; --hdr-logo: 40px; }
.hrmg-hdr.is-scrolled { --hdr-h: 66px; --hdr-logo: 32px; }

.hrmg-hdr-in { transition: height .22s ease; }

.hrmg-pf-hdr .hrmg-hdr-logo img,
.hrmg-pf-hdr .custom-logo-link img,
.hrmg-hdr .hrmg-hdr-logo img,
.hrmg-hdr .custom-logo-link img {
    height: var(--hdr-logo, 40px);
    width: auto;
    max-width: none;
    display: block;
    transition: height .22s ease;
}

/* Someone who has asked the OS to stop moving things gets a header that simply
   is what it is. */
@media (prefers-reduced-motion: reduce) {
    .hrmg-hdr,
    .hrmg-hdr-in,
    .hrmg-hdr::after,
    .hrmg-hdr .hrmg-hdr-logo img { transition: none; }
}

/* Blur is not universal. Without this the scrolled header is 88% transparent on
   older Firefox and the hero scrolls legibly through it. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .hrmg-hdr { background: transparent; }
    .hrmg-hdr.is-scrolled { background: #F8F6F3; }
}

/* THE SIGNATURE RULE — now a REVEAL, not a permanent stripe.
   ---------------------------------------------------------------------------
   It used to sit across the top edge of the header at all times. Two problems.
   First, a coloured line pinned to the very top of the viewport reads as a
   browser artifact or a loading bar, not as a mark. Second, the Hinge band also
   carries it — and a gesture used in two places at once is not a signature, it
   is a stripe.

   So: it lives on the BOTTOM edge of the header, and it is invisible until you
   scroll. At rest the header is part of the hero. The moment the page moves, the
   header separates from it and draws its own line. Same ink, earned rather than
   asserted. */
.hrmg-hdr::after {
    content: '';
    position: absolute;
    bottom: -1px;          /* sit ON the border, not under it */
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ember), var(--amber), var(--teal), var(--indigo));
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}
.hrmg-hdr.is-scrolled::after { opacity: 1; }

.hrmg-hdr-in {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    height: var(--hdr-h);
    display: flex;
    align-items: center;
    gap: 32px;
}

/* ---------- Brand ---------- */
.hrmg-hdr-brand {
    flex: 0 0 auto;
    margin-right: auto;   /* everything else is pushed right */
    display: flex;
    align-items: center;
    line-height: 0;
}

/* 44px, HARD. The7 was painting this logo at ~150px, which is the single reason
   it dominated the page. `width: auto` is what preserves the aspect ratio once
   the height is clamped — without it a wide mark squashes. */
.hrmg-hdr-brand img,
.hrmg-hdr-brand .custom-logo {
    height: 44px;
    max-height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}
/* The IMAGE link only. Do NOT loosen this to `.hrmg-hdr-brand a` — the wordmark
   fallback is also an <a> in here, and line-height:0 collapses it to nothing. */
.hrmg-hdr-brand .custom-logo-link { display: block; line-height: 0; }

.hrmg-hdr-word {
    display: inline-block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -.01em;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.25;
}
.hrmg-hdr-word:hover { color: var(--ember); }

/* ---------- Nav ---------- */
.hrmg-hdr-nav { flex: 0 0 auto; }

.hrmg-hdr-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hrmg-hdr-menu li { margin: 0; padding: 0; list-style: none; }

.hrmg-hdr-menu a {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--ink);
    text-decoration: none;
    transition: color .16s ease;
}

/* The underline animates in from the left. A 2px rule that grows is restrained;
   a colour swap on the whole word is a supermarket sign. */
.hrmg-hdr-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--ember);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
.hrmg-hdr-menu a:hover,
.hrmg-hdr-menu a:focus-visible { color: var(--ember); }

.hrmg-hdr-menu a:hover::after,
.hrmg-hdr-menu a:focus-visible::after { transform: scaleX(1); }

/* The current page keeps the underline. `.current_page_item` is what
   wp_list_pages() emits in the fallback — both classes, or the fallback nav
   silently loses its you-are-here marker. */
.hrmg-hdr-menu .current-menu-item > a,
.hrmg-hdr-menu .current_page_item > a,
.hrmg-hdr-menu .current-menu-ancestor > a { color: var(--ember); }

.hrmg-hdr-menu .current-menu-item > a::after,
.hrmg-hdr-menu .current_page_item > a::after,
.hrmg-hdr-menu .current-menu-ancestor > a::after { transform: scaleX(1); }

/* ---------- Phone CTA ---------- */
/* Outline, not solid. A solid ember pill at 14px next to four ink nav links is
   the loudest thing on a page whose whole argument is restraint. */
.hrmg-hdr-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* The phone, demoted. Quiet, tabular, no box. It is there for the person who
   wants it and invisible to the person who doesn't. */
.hrmg-hdr-tel {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: color .16s ease;
}
.hrmg-hdr-tel:hover { color: var(--ink); }

/* The primary action. SOLID INK, not an ember outline.
   Ember is the accent that marks things — the eyebrow, the italic in the
   headline, the active nav underline. A solid ember button would put the loudest
   colour on the page onto its most ordinary object. Ink is quieter and reads as
   more expensive, and it lets ember keep meaning "look here". */
.hrmg-hdr-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--ink);
    border-radius: 3px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
/* Ember arrives on interaction, not before. The button is ink at rest and the
   brand colour is the reward for reaching for it. */
.hrmg-hdr-cta:hover,
.hrmg-hdr-cta:focus-visible {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
    transform: translateY(-1px);
}
.hrmg-hdr-cta:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .hrmg-hdr-cta,
    .hrmg-hdr-cta:hover { transform: none; }
}

/* ---------- Hamburger (mobile only) ---------- */
.hrmg-hdr-burger {
    display: none;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 11px 9px;
    margin-right: -9px;
    background: none;
    border: 0;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
.hrmg-hdr-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink);
    border-radius: 2px;
}

/* ---------- Mobile overlay ---------- */
/* visibility:hidden, not display:none — display:none kills the transition, and
   visibility is what takes the links OUT OF THE TAB ORDER while closed. Without
   it, a sighted keyboard user tabs through four invisible nav links on desktop. */
.hrmg-hdr-ovl {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--ink);
    visibility: hidden;
    opacity: 0;
    transition: opacity .22s ease, visibility 0s linear .22s;
    overflow-y: auto;
}
.hrmg-hdr-ovl.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity .22s ease, visibility 0s linear 0s;
}

.hrmg-hdr-ovl-in {
    min-height: 100%;
    padding: calc(var(--hdr-h) + 24px) 28px 44px;
    display: flex;
    flex-direction: column;
}

/* The same four stops, on the overlay's own top edge — it is the header, still. */
.hrmg-hdr-ovl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ember), var(--amber), var(--teal), var(--indigo));
}

.hrmg-hdr-close {
    position: absolute;
    top: 16px;
    right: 22px;
    width: 40px;
    height: 40px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.hrmg-hdr-close span {
    position: absolute;
    left: 8px;
    top: 19px;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.hrmg-hdr-close span:first-child { transform: rotate(45deg); }
.hrmg-hdr-close span:last-child  { transform: rotate(-45deg); }

.hrmg-hdr-mmenu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hrmg-hdr-mmenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hrmg-hdr-mmenu a {
    display: block;
    padding: 16px 0;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 28px;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: #fff;
    text-decoration: none;
}
.hrmg-hdr-mmenu a:hover,
.hrmg-hdr-mmenu a:focus-visible { color: var(--amber); }

.hrmg-hdr-mmenu .current-menu-item > a,
.hrmg-hdr-mmenu .current_page_item > a { color: var(--ember); }

/* `margin-top:auto` pins the phone to the bottom of the panel on a tall screen
   and lets it sit right under the last link on a short one. */
.hrmg-hdr-mcta {
    margin-top: auto;
    padding-top: 32px;
    display: block;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--ember);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

/* The body scroll lock. Set by the JS while the overlay is open; the JS also
   pads the body by the scrollbar width, or the sticky header jumps sideways by
   the gutter the instant the menu opens. */
body.hrmg-nav-lock {
    overflow: hidden;
}

/* ---------- Footer ---------- */
.hrmg-ftr {
    background: var(--ink);
    color: #fff;
    padding: 44px 0 40px;
}
.hrmg-ftr-in {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.hrmg-ftr-word {
    flex: 0 0 auto;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
    line-height: 1.2;
}
.hrmg-ftr-word:hover { color: var(--amber); }

.hrmg-ftr-nav { flex: 1 1 auto; }

.hrmg-ftr-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hrmg-ftr-menu li { margin: 0; padding: 0; list-style: none; }
.hrmg-ftr-menu a {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: .01em;
    color: #B6BCC8;
    text-decoration: none;
    transition: color .16s ease;
}
.hrmg-ftr-menu a:hover,
.hrmg-ftr-menu a:focus-visible { color: #fff; }

/* Pushed right when there is no footer menu to do it — hence margin-left:auto. */
.hrmg-ftr-line {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    font-size: 12.5px;
    font-weight: 300;
    color: #8A90A0;
    letter-spacing: .01em;
}
.hrmg-ftr-line .sep { color: #464C5A; margin: 0 2px; }
.hrmg-ftr-line a {
    color: #B6BCC8;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.hrmg-ftr-line a:hover { color: var(--ember); }

/* ---------- Chrome responsive ---------- */
@media (max-width: 900px) {

    /* Both, not just the header — the overlay reads --hdr-h off ITSELF (custom
       properties inherit from the ancestor chain, and the overlay is a sibling
       of the header, not a child of it). Override one and the overlay's top
       padding silently keeps the desktop value. */
    .hrmg-hdr,
    .hrmg-hdr-ovl { --hdr-h: 64px; }

    .hrmg-hdr-in { gap: 12px; }

    /* The nav and the desktop CTA are not "hidden" so much as MOVED — the same
       WP menu is rendered again inside the overlay. One menu, two renderings. */
    .hrmg-hdr-nav,
    .hrmg-hdr-cta { display: none; }

    .hrmg-hdr-burger { display: flex; }

    .hrmg-hdr-brand img,
    .hrmg-hdr-brand .custom-logo { height: 36px; max-height: 36px; }

    .hrmg-hdr-word { font-size: 21px; }

    .hrmg-ftr-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .hrmg-ftr-line { margin-left: 0; }
}

@media (max-width: 560px) {
    .hrmg-hdr-in,
    .hrmg-hdr-ovl-in,
    .hrmg-ftr-in { padding-left: 18px; padding-right: 18px; }

    .hrmg-hdr-ovl-in { padding-right: 18px; }
    .hrmg-hdr-mmenu a { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .hrmg-hdr,
    .hrmg-hdr-ovl,
    .hrmg-hdr-menu a,
    .hrmg-hdr-menu a::after,
    .hrmg-hdr-cta,
    .hrmg-ftr-menu a { transition: none; }
}


/* ============================================================================
   THE CASE STUDY — templates/single-project.php
   ----------------------------------------------------------------------------
   Styles ONE page shape: a drafted /project/<slug>/. Undrafted and legacy
   projects never load this stylesheet at all — HRMG_PF_Template::enqueue() is
   gated on exactly the same condition as the template swap, so a legacy project
   gets The7's template AND The7's assets, unchanged. Nothing in this block can
   reach one.

   IT REUSES THE PAGE'S COMPONENTS, IT DOES NOT REBUILD THEM. .wrap, .eyebrow,
   .browser, .bbar, .shot, .t, .stack, .sechead, .grid, .card and .cta are all
   the existing classes, doing the existing job, under the existing --tokens.
   Everything below is either a new arrangement of them (.cs-cols) or genuinely
   new furniture with no analogue on the portfolio page (the phone frame). If you
   find yourself writing a second .browser here, stop.
   ========================================================================== */

.hrmg-pf .cs h1,
.hrmg-pf .cs h2 { color: var(--ink); }

/* ---------- 1: hero ---------- */
.hrmg-pf .cs-hero {
    background: var(--paper);
    padding: 66px 0 40px;
}

/* THE H1 IS THE PAGE. It is the problem stated as a sentence — "They were
   reshaping how they worked to fit what Wix allowed." — and every other element
   here is subordinate to it. Fraunces at 300 is the same voice as the portfolio
   hero's h2, one step up in size because this time it is the top of the document.
   max-width 900px, NOT the full 1280: a display line that runs the whole
   container stops being a sentence and starts being a banner. */
.hrmg-pf .cs-hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 54px;
    line-height: 1.09;
    letter-spacing: -.018em;
    margin: 0 0 18px;
    max-width: 900px;
}

/* The client, demoted. The prospect is here for the problem, not the logo — but
   the name is the proof that the problem was a real one, at a real organization. */
.hrmg-pf .cs-client {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
    margin: 0 0 26px;
}

/* .stack + .t are the portfolio page's chips, unchanged. Linked here — no
   ancestor anchor on this page, so they finally get to be the SEO surface they
   were built as. */
.hrmg-pf .cs-hero .stack { margin-bottom: 24px; }

/* .cta is the existing ink-with-ember-underline link. Only the arrow's spacing
   is new. */
.hrmg-pf .cs-live span { margin-left: 2px; }

/* ---------- 2: the capture ---------- */
/* The bottom padding closes the WHITE band (hero + capture) — it is not a gap
   between two sections. Put it on .cs-story as a margin instead and the cream
   shows through above that section's own top rule, leaving a hairline floating in
   space 60px below the screenshot. The bands butt directly against each other and
   the colour change IS the seam, exactly as .hero/.sel do on the portfolio page. */
.hrmg-pf .cs-cap {
    background: var(--paper);
    padding: 0 0 66px;
}

/* THE ONLY OVERRIDE .browser NEEDS, AND IT IS LOAD-BEARING.
   The default .shot is 16/10.5 — tuned for the old full-page capture, which was a
   very tall strip that had to be cropped to its hero. The desktop capture is now a
   1440x900 VIEWPORT at retina (2880x1800): exactly 16:10, nothing below the fold,
   nothing to crop. Match the box to the image and `object-fit: cover` becomes a
   no-op — the frame shows the whole capture, pixel-exact.
   Leave it at 16/10.5 and you slice ~5% off the bottom of every screenshot on the
   site's most scrutinised page. Do not "simplify" this away. */
.hrmg-pf .cs-cap .shot { aspect-ratio: 16 / 10; }

/* ---------- 3 + 4: narrative and phone ---------- */
.hrmg-pf .cs-story {
    background: var(--paper-2);
    padding: 66px 0 70px;
    border-top: 1px solid var(--rule);
}

/* THE MEASURE IS THE LAYOUT.
   .wrap is 1280px. Prose set to 1280px is a ~160-character line: the eye finishes
   a line and cannot find the start of the next one, and people stop reading — on
   the three paragraphs the entire page exists to deliver. So the prose column is
   capped at 680px (~85 characters at 17px, the top of the comfortable range), and
   the ~540px that frees up is not wasted margin — it is exactly where the phone
   goes. One decision, two payoffs. */
.hrmg-pf .cs-cols {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}
.hrmg-pf .cs-prose { max-width: 680px; }

.hrmg-pf .cs-block {
    border-top: 1px solid var(--rule);
    padding-top: 20px;
    margin-bottom: 40px;
}
.hrmg-pf .cs-block:first-child { border-top: 0; padding-top: 0; }
.hrmg-pf .cs-block:last-child  { margin-bottom: 0; }

/* Small-caps ember labels, NOT three more Fraunces headings. The h1 above is
   already a large serif statement; repeating that voice three times down the page
   would make the section headings compete with the thesis instead of indexing it.
   These are signposts. The prose is the voice. */
.hrmg-pf .cs-block h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember);
    margin: 0 0 14px;
}
.hrmg-pf .cs-block p {
    font-size: 17px;
    color: var(--ink-2);
    font-weight: 300;
    line-height: 1.75;
    margin: 0 0 18px;
}
.hrmg-pf .cs-block p:last-child { margin-bottom: 0; }

/* Sticky, but only where there is a second column for it to be sticky IN. The
   offset clears the scrolled header (66px) with room to breathe. */
.hrmg-pf .cs-aside { position: sticky; top: 96px; }

/* THE PHONE FRAME. The one genuinely new component on this page, and it earns the
   line count: everything else here is a claim, and this is the only one a visitor
   can check for free by pulling out their own phone. The capture inside it is a
   real 390x844 viewport (780x1688 at retina) — never a mockup, never the desktop
   shot squeezed. HRMG_PF_Template::mobile_image() returns '' rather than falling
   back to anything, and the template drops this whole block when it does. An empty
   phone frame would be a lie in the shape of a proof. */
/* THE SCREEN IS ABSOLUTELY POSITIONED. It used to be padding + height:100%, and
   the screenshot spilled out of the bottom of the mold.

   Why: the frame's height comes from `aspect-ratio`, not from a stated length. A
   percentage height on a child resolves against a DEFINITE parent height — and an
   aspect-ratio-derived height is not definite in every engine. So `height: 100%`
   silently failed to resolve, the screen fell back to its content height, the
   844px-tall image rendered at its natural size, and it ran straight out of the
   bottom of a phone that was only as tall as its aspect ratio said.

   `position: absolute; inset: 9px` needs no percentage resolution at all: the
   screen is pinned to the frame's box, 9px in on every side. That IS the bezel.
   Plus `overflow: hidden` on the frame itself as a hard backstop — nothing
   escapes the mold, ever, whatever the image turns out to be. */
.hrmg-pf .cs-phone {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 390 / 844;
    border-radius: 30px;
    background: #fff;
    border: 1px solid var(--rule);
    box-shadow: 0 1px 2px rgba(20, 22, 28, .06), 0 18px 44px -14px rgba(20, 22, 28, .22);
    margin: 0 auto;
    overflow: hidden;
}
.hrmg-pf .cs-phone-screen {
    position: absolute;
    inset: 9px;
    border-radius: 22px;
    overflow: hidden;
    /* Same empty-state gradient as .shot — visible only in the impossible case of
       an attachment that exists but will not render. */
    background: linear-gradient(160deg, #DDE3EA, #F2F5F8);
}
.hrmg-pf .cs-phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.hrmg-pf .cs-phone-cap {
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: .02em;
    text-align: center;
    margin: 14px 0 0;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 5: FAQ ---------- */
/* A REAL SECTION, NOT AN ACCORDION. It is rendered flat and always open: the
   answers are the indexable half of the FAQPage schema emitted alongside them, and
   schema describing content a crawler cannot see in the markup is a structured-data
   violation. It is also just better — nobody clicks four times to read four
   answers. No JS on this page at all beyond the shared header script. */
.hrmg-pf .cs-faq {
    background: var(--paper);
    padding: 62px 0 66px;
    border-top: 1px solid var(--rule);
}
.hrmg-pf .cs-qa { max-width: 820px; }
.hrmg-pf .cs-q {
    border-bottom: 1px solid var(--rule);
    padding: 22px 0;
}
.hrmg-pf .cs-q:first-child { padding-top: 0; }
.hrmg-pf .cs-q:last-child  { border-bottom: 0; padding-bottom: 0; }
.hrmg-pf .cs-q h4 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.005em;
    margin: 0 0 9px;
}
.hrmg-pf .cs-q p {
    font-size: 14.5px;
    color: var(--ink-2);
    font-weight: 300;
    line-height: 1.72;
    margin: 0 0 10px;
    max-width: 680px; /* the same measure as the narrative. Same reason. */
}
.hrmg-pf .cs-q p:last-child { margin-bottom: 0; }

/* ---------- 6: related work ---------- */
/* .grid and .card are the portfolio page's own — HRMG_PF_Template::card() renders
   these, exactly as it does for the Recent grid and for Load More. Three callers,
   one renderer, one set of rules. Nothing to style here but the "All work" link in
   the .sechead, which is an anchor where that component normally holds a count. */
.hrmg-pf .cs-rel {
    background: var(--paper-2);
    padding: 62px 0 66px;
}
.hrmg-pf .cs-rel .sechead a.c {
    text-decoration: none;
    transition: color .16s ease;
}
.hrmg-pf .cs-rel .sechead a.c:hover { color: var(--ember); }

/* ---------- 7: closing CTA ---------- */
/* A PAPER BAND, NOT AN INK ONE — and that is a decision, not a default. The brief
   is "solid-ink button, like the header CTA", and a solid-ink button on an ink
   band is invisible. Reversing the button to white or ember instead would put the
   page's loudest object at its quietest moment, and ember is the accent that MARKS
   things (the eyebrow, the section labels, the active nav underline); spend it on
   a background and it stops meaning "look here". So: white band, ink button,
   identical to the header. The footer immediately below is ink and closes the page
   dark anyway — two stacked dark bands would just be one blurry one. */
.hrmg-pf .cs-end {
    background: var(--paper);
    padding: 70px 0 78px;
    border-top: 1px solid var(--rule);
}
.hrmg-pf .cs-end h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: -.015em;
    margin: 0 0 14px;
    max-width: 680px;
}
.hrmg-pf .cs-end p {
    font-size: 15.5px;
    color: var(--ink-2);
    font-weight: 300;
    line-height: 1.7;
    margin: 0 0 28px;
    max-width: 620px;
}

/* Deliberately the same rules as .hrmg-hdr-cta. They are not merged into one
   selector because the header lives OUTSIDE .hrmg-pf and carries its own copy of
   the tokens — the two elements are in different cascades by construction. Ink at
   rest; ember is the reward for reaching for it. */
.hrmg-pf .cs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border: 1px solid var(--ink);
    border-radius: 3px;
    background: var(--ink);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.hrmg-pf .cs-btn:hover,
.hrmg-pf .cs-btn:focus-visible {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
    transform: translateY(-1px);
}
.hrmg-pf .cs-btn:active { transform: translateY(0); }

/* ---------- Case-study responsive ---------- */
@media (max-width: 900px) {
    /* One column. The phone drops BELOW the narrative rather than beside it — and
       it must stop being sticky, or it pins itself to the top of the viewport in a
       single-column flow and follows the user down the page. */
    .hrmg-pf .cs-cols { grid-template-columns: 1fr; gap: 44px; }
    .hrmg-pf .cs-aside { position: static; top: auto; }

    .hrmg-pf .cs-hero { padding: 44px 0 32px; }
    .hrmg-pf .cs-hero h1 { font-size: 38px; }
    .hrmg-pf .cs-cap { padding-bottom: 48px; }
    .hrmg-pf .cs-block p { font-size: 16px; }
    .hrmg-pf .cs-end h3 { font-size: 28px; }
}

@media (max-width: 560px) {
    .hrmg-pf .cs-hero h1 { font-size: 30px; }
    .hrmg-pf .cs-phone { max-width: 260px; }
    .hrmg-pf .cs-end h3 { font-size: 25px; }
    .hrmg-pf .cs-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hrmg-pf .cs-btn,
    .hrmg-pf .cs-btn:hover,
    .hrmg-pf .cs-rel .sechead a.c { transition: none; transform: none; }
}