@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Archivo+Black&display=swap');

  :root{
    --dark:#202022; --dark-2:#1A1A1C; --cream:#F7F5F2;
    --text-muted:#9A9AA0; --gold:#E8A849; --teal:#17B8A6;
    /* services accordion timings and metrics */
    --fin:0.35s; --plate:0.6s; --open:0.5s; --dial:46px; --rail:22px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:#F7F5F2; color:var(--cream);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  .stage{max-width:1720px; margin:0 auto; padding:88px 48px 104px;}

  .eyebrow{
    font-size:11px; font-weight:600; letter-spacing:2.6px; text-transform:uppercase;
    color:var(--gold); margin-bottom:18px;
  }
  h1{
    font-weight:300; font-size:clamp(30px,3.6vw,54px); line-height:1.04;
    letter-spacing:-0.022em; margin:0 0 46px; max-width:18ch;
  }
  .deck{
    font-size:15px; line-height:1.6; color:var(--text-muted);
    max-width:58ch; margin:0 0 46px;
  }

  .split{display:grid; grid-template-columns:400px minmax(0,1fr); gap:56px; align-items:start;}

  /* ── left panel: article, client, caption ───────────────────── */
  .panel{display:grid; gap:14px;}

  .quad-main{
    position:relative; aspect-ratio:3/2; border-radius:10px; overflow:hidden;
    background:var(--dark-2) center/cover no-repeat; background-image:var(--shot);
    border:1px solid rgba(247,245,242,0.08);
    transition:background-image .35s ease;
  }
  /* keeps the meta legible whatever the screenshot is doing underneath */
  .quad-main::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(26,26,28,0.94) 0%, rgba(26,26,28,0.55) 34%, rgba(26,26,28,0) 62%);
  }
  .quad-meta{
    position:absolute; left:0; right:0; bottom:0; z-index:1; padding:16px 18px;
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  }
  .quad-outlet{font-size:13px; font-weight:600; letter-spacing:-0.01em;}
  .quad-edition{font-size:11px; color:var(--teal); letter-spacing:.4px;}
  .quad-date{font-size:11px; color:var(--text-muted); margin-left:auto;}

  .quad-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

  .quad-client{
    position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
    background:var(--dark-2) center/cover no-repeat; background-image:var(--client);
    border:1px solid rgba(247,245,242,0.08);
    transition:background-image .35s ease;
  }
  .quad-client span{
    position:absolute; left:0; right:0; bottom:0; padding:9px 11px;
    background:linear-gradient(to top, rgba(26,26,28,0.95), rgba(26,26,28,0));
    font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  }

  .quad-cap{
    aspect-ratio:1/1; border-radius:10px; padding:18px;
    background:var(--dark-2); border:1px solid rgba(247,245,242,0.08);
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .quad-cap b{
    display:block; font-size:9.5px; font-weight:600; letter-spacing:2.2px;
    text-transform:uppercase; color:var(--gold); margin-bottom:10px;
  }
  .quad-cap p{margin:0; font-size:13px; line-height:1.5;}
  .quad-cap a{
    margin-top:14px; display:inline-flex; align-items:center; gap:7px;
    font-size:10.5px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase;
    color:var(--cream); text-decoration:none; border-top:1px solid rgba(232,168,73,0.4);
    padding-top:12px;
  }
  .quad-cap a:hover{color:var(--gold);}
  .quad-cap svg{width:11px; height:11px;}

  /* ── right: 5 x 3 coverage wall ─────────────────────────────── */
  .wall{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}

  .logo{
    position:relative; background:none; border:0; padding:22px 12px 20px;
    cursor:pointer; border-radius:8px; display:grid; place-items:center;
    transition:background .25s ease;
  }
  .logo::after{                       /* the click affordance */
    content:''; position:absolute; left:12px; right:12px; bottom:0; height:1px;
    background:rgba(247,245,242,0.10); transition:background .25s ease;
  }
  .logo:hover,.logo:focus-visible{background:rgba(247,245,242,0.035); outline:none;}
  .logo:hover::after,.logo:focus-visible::after,.logo.on::after{background:var(--teal);}
  .logo.on{background:rgba(247,245,242,0.05);}

  .logo-mark{
    display:block; width:100%; background:var(--cream); opacity:.9;
    -webkit-mask:var(--m) no-repeat center/contain;
            mask:var(--m) no-repeat center/contain;
    transition:background .25s ease, opacity .25s ease;
  }
  .logo:hover .logo-mark,.logo.on .logo-mark{background:var(--teal); opacity:1;}

  /* per-logo heights: equal optical weight, not equal height.
     aspect ratios here run 1.05 to 7.84, so one global value would
     let Hypebeast bully the row while Oprah Daily vanished. */
  .h21{height:21px}.h23{height:23px}.h25{height:25px}.h26{height:26px}
  .h27{height:27px}.h30{height:30px}.h32{height:32px}.h33{height:33px}
  .h34{height:34px}.h40{height:40px}.h46{height:46px}.h48{height:48px}

  @media (max-width:1180px){
    .split{grid-template-columns:1fr; gap:34px;}
    .panel{max-width:520px;}
  }
  @media (max-width:820px){
    .stage{padding:64px 24px 76px;}
    .wall{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:520px){
    .stage{padding:52px 18px 64px;}
    .wall{grid-template-columns:repeat(2,1fr);}
    .quad-cap{aspect-ratio:auto;}
  }
  @media (prefers-reduced-motion:reduce){
    .quad-main,.quad-client{transition:none;}
  }
  .sec {
    background: var(--dark);
    max-width: 1600px;
    margin: 0 auto;
    padding: 96px 48px 104px;
  }

  .svc-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }

  .sec h2 {
    font-weight: 300;
    font-size: clamp(30px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 15ch;
    margin-bottom: 64px;
  }

  /* Plate left, rows right. Aker runs the plate at roughly 29% of the
     stage; 460px against a 1600 max lands in the same place. */
  .svc-split {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }

  /* ── the plate ───────────────────────────────────────────────────── */
  .plate {
    /* sticky, not relative: it still establishes the containing block the
       absolutely positioned .frame layers need, and it holds the plate in
       view while the rows are worked through */
    position: sticky;
    top: 48px;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    background: var(--dark-2);
  }
  .frame {
    position: absolute;
    inset: 0;
    background-image: var(--img);
    background-size: cover;
    background-position: center;
    /* the same light hold-back the hero portraits use, so the plate sits
       in the palette without looking washed */
    filter: contrast(0.96) saturate(0.98) brightness(0.97);
    opacity: 0;
    transform: scale(1.03);
    transition: opacity var(--plate) ease, transform 1.1s ease;
  }
  .frame.is-on { opacity: 1; transform: scale(1); }
  /* a floor of shadow so the rounded corner reads against the dark */
  .plate::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(247,245,242,0.07);
    border-radius: inherit;
  }

  /* ── the rows ────────────────────────────────────────────────────── */
  .list { border-top: 1px solid rgba(247,245,242,0.10); }
  .item { border-bottom: 1px solid rgba(247,245,242,0.10); }

  .row-h { font-weight: inherit; font-size: inherit; }

  .row {
    appearance: none;
    background: none;
    border: 0;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    width: 100%;
    display: grid;
    grid-template-columns: var(--dial) minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--rail);
    padding: 26px 0;
    text-align: left;
  }
  .row:focus-visible { outline: none; }
  .row:focus-visible .dial {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-color: var(--gold);
  }

  .dial {
    width: var(--dial);
    height: var(--dial);
    border-radius: 50%;
    border: 1px solid rgba(232,168,73,0.42);
    display: grid;
    place-items: center;
    color: var(--gold);
    transition: border-color var(--fin), background var(--fin);
  }
  .dial svg { width: 20px; height: 20px; display: block; }
  /* the plus becomes a minus by collapsing the upright, which is cheaper
     and steadier than swapping two icons */
  .dial .v {
    transform-origin: 12px 12px;
    transition: transform var(--open) cubic-bezier(0.4, 0, 0.2, 1);
  }
  .item.is-open .dial .v { transform: scaleY(0); }
  .item.is-open .dial { border-color: var(--gold); background: rgba(232,168,73,0.10); }
  .row:hover .dial { border-color: var(--gold); }

  .num {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--text-muted);
    padding-top: 2px;
  }

  .title {
    font-size: clamp(19px, 2vw, 30px);
    font-weight: 300;
    letter-spacing: -0.015em;
    line-height: 1.15;
    transition: color var(--fin);
  }
  .item:not(.is-open) .title { color: rgba(247,245,242,0.82); }
  .row:hover .title { color: var(--cream); }

  /* 0fr to 1fr animates a height the browser measures itself, so the copy
     can be any length without JS reading scrollHeight */
  .pane {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--open) cubic-bezier(0.4, 0, 0.2, 1);
  }
  .item.is-open .pane { grid-template-rows: 1fr; }
  .pane-in {
    overflow: hidden;
    /* the copy lags the height slightly, so the reveal reads as one move
       rather than text appearing in a box that is still growing */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.34s ease, transform 0.34s ease;
  }
  .item.is-open .pane-in {
    opacity: 1;
    transform: none;
    transition-delay: 0.14s;
  }

  .body {
    font-size: 15px;
    line-height: 1.62;
    color: var(--text-muted);
    max-width: 46ch;
    margin-left: calc(var(--dial) + var(--rail));   /* lines up under the title */
    padding-bottom: 20px;
  }

  .tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: calc(var(--dial) + var(--rail));
    padding-bottom: 30px;
  }
  .tags li {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid rgba(247,245,242,0.14);
    border-radius: 100px;
    padding: 6px 12px;
  }

  @media (max-width: 1180px) {
    .svc-split { grid-template-columns: 360px minmax(0, 1fr); gap: 40px; }
  }

  @media (max-width: 900px) {
    .sec { padding: 64px 24px 72px; --dial: 40px; --rail: 16px; }
    .svc-split { grid-template-columns: 1fr; gap: 36px; }
    /* relative, never static: static would remove the containing block and
       the .frame layers would position against the page instead */
    .plate { position: relative; top: auto; max-width: 420px; }
    .sec h2 { margin-bottom: 40px; }
    .row { grid-template-columns: var(--dial) minmax(0, 1fr); gap: 0 16px; padding: 22px 0; }
    .dial svg { width: 17px; height: 17px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .frame { transform: none; }
  }

  /* ── divider between the coverage wall and the services accordion ── */
  .sec { border-top: 1px solid rgba(247,245,242,0.10); }

  /* ══ LIGHT HERO ═══════════════════════════════════════════════════
     The coverage wall runs on the cream ground, the services accordion
     below stays dark. Rather than rewrite every rule, the section
     rebinds its own tokens: the hero CSS already reads --cream for ink
     and --dark for ground, so inverting the pair inverts the section.

     Gold and teal are darkened here on purpose. #E8A849 on #F7F5F2 is
     about 1.9:1 and #17B8A6 about 2.4:1, both well under the 4.5:1
     needed for small text. The dark section keeps the bright originals.

     Type sitting ON the screenshots keeps its light values, because it
     reads against the tile's own dark gradient, not against the page. */
  .stage{
    --dark:#F7F5F2;          /* ground, was near-black */
    --dark-2:#FFFFFF;        /* tiles */
    --cream:#202022;         /* ink, was near-white */
    --text-muted:#67676E;
    --gold:#A9741A;          /* darkened for cream, 4.6:1 */
    --teal:#0E8A7C;          /* darkened for cream, 4.5:1 */
    background:var(--dark);
    color:var(--cream);
  }

  /* hairlines and washes: invert the tint from light-on-dark to dark-on-light */
  .stage .logo::after{background:rgba(32,32,34,0.14);}
  .stage .logo:hover, .stage .logo:focus-visible{background:rgba(32,32,34,0.035);}
  .stage .logo.on{background:rgba(32,32,34,0.05);}
  .stage .quad-main,
  .stage .quad-client,
  .stage .quad-cap{border-color:rgba(32,32,34,0.12);}
  .stage .quad-cap a{border-top-color:rgba(169,116,26,0.45);}

  /* meta sits over the screenshot's own dark gradient, so it stays light */
  .stage .quad-meta{color:#F7F5F2;}
  .stage .quad-edition{color:#4FD8C8;}
  .stage .quad-date{color:rgba(247,245,242,0.72);}
  .stage .quad-client span{color:#F7F5F2;}

  /* the ground change is the divider; the rule is redundant now */
  .sec{border-top:0;}

/* ---- grafted footer ---- */
.pbmg-graft{background:#202022;color:#F7F5F2;font-family:'Inter',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;margin:0;padding:0;box-sizing:border-box;}
.pbmg-graft *{box-sizing:border-box;}
.pbmg-graft{
    --dark: #202022;
    --gold: #E8A849;
    --gold-hover: #d4963e;
    --cream: #F7F5F2;
    --white: #FFFFFF;
    --text-muted: #9A9AA0;
    --green-cta: #193F32;
    --teal: #17B8A6;      
    --fin: 0.35s;
  }
.pbmg-graft .eyebrow{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
  }
.pbmg-graft .cta-band{
    padding: 140px 48px;
    text-align: center;
    border-top: 1px solid rgba(232,168,73,0.08);
  }
.pbmg-graft .cta-band h2{
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 400;
    color: var(--cream);
    margin-bottom: 16px;
  }
.pbmg-graft .cta-band p{
    font-size: 15px;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: 1.6;
  }
.pbmg-graft .cta-btn{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--gold);
    padding: 16px 52px;
    text-decoration: none;
    transition: background var(--fin), transform 0.2s;
  }
.pbmg-graft .cta-btn:hover{ background: var(--gold-hover); transform: translateY(-2px); }
.pbmg-graft .cta-btn:focus-visible{
    outline: 2px solid var(--teal);
    outline-offset: 4px;
  }
.pbmg-graft .cta-reply{
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted);
  }
.pbmg-graft .footer{
    padding: 60px 48px;
    border-top: 1px solid rgba(232,168,73,0.08);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
  }
.pbmg-graft .footer-wordmark{
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 16px;
  }
.pbmg-graft .footer-addr{
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
  }
.pbmg-graft .footer-addr a{
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--fin);
  }
.pbmg-graft .footer-addr a:hover,.pbmg-graft .footer-addr a:focus-visible{ color: var(--teal); }
.pbmg-graft .footer-links{ display: flex; gap: 56px; }
.pbmg-graft .footer-col h4{
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
  }
.pbmg-graft .footer-col a{
    display: block; font-size: 13px; color: var(--text-muted);
    text-decoration: none; margin-bottom: 10px;
    transition: color var(--fin);
  }
.pbmg-graft .footer-col a:hover,.pbmg-graft .footer-col a:focus-visible{ color: var(--cream); }
.pbmg-graft .footer-copy{
    width: 100%; padding-top: 36px;
    border-top: 1px solid rgba(154,154,160,0.1);
    font-size: 12px; color: rgba(154,154,160,0.78);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
  }
.pbmg-graft .footer-copy a{
    color: rgba(154,154,160,0.78);
    text-decoration: none;
    transition: color var(--fin);
  }
.pbmg-graft .footer-copy a:hover,.pbmg-graft .footer-copy a:focus-visible{ color: var(--cream); }
.pbmg-graft a:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 700px) {
.pbmg-graft .cta-band{ padding: 100px 24px; }
.pbmg-graft .footer{ padding: 48px 24px; }
.pbmg-graft .footer-links{ gap: 36px; }
}
@media (max-width: 560px) {
.pbmg-graft .footer-links{ flex-direction: column; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.pbmg-graft .cta-btn:hover{ transform: none; }
}

  /* ══ f-wheel : go-to-market section ═══════════════════════ */
  #f-wheel .fw{
    background:var(--cream); color:var(--dark);
    padding:clamp(4.5rem,9vw,8.5rem) clamp(1.5rem,5vw,4.5rem);
    border-top:1px solid rgba(32,32,34,.10);
  }
  #f-wheel .fw-inner{
    max-width:1240px; margin:0 auto; display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(2.5rem,6vw,6rem); align-items:center;
  }
  #f-wheel .fw-copy{max-width:34rem;}
  #f-wheel .fw-lede{
    font-size:clamp(1rem,1.15vw,1.125rem); line-height:1.72; font-weight:400;
    color:var(--dark); margin:0 0 clamp(2.25rem,4vw,3rem); text-wrap:pretty;
  }
  #f-wheel .fw-lede em{font-style:normal; font-weight:300; color:var(--text-muted);}
  #f-wheel .fw-eyebrow{
    display:block; font-size:.72rem; font-weight:600; letter-spacing:.24em;
    text-transform:uppercase; color:var(--gold); margin:0 0 1.1rem;
  }
  #f-wheel .fw-h{
    font-family:'Archivo Black','Arial Black',sans-serif; font-weight:400;
    font-size:clamp(2.15rem,3.9vw,3.25rem); line-height:1.08;
    letter-spacing:-.015em; color:var(--dark); margin:0;
  }
  #f-wheel .fw-h span{display:block;}
  #f-wheel .fw-fig{margin:0;}
  #f-wheel .fw-art{
    display:block; width:100%; aspect-ratio:1/1;
    background:#2C2C30;
    -webkit-mask:var(--m) no-repeat center / contain;
            mask:var(--m) no-repeat center / contain;
  }
  #f-wheel .fw-cap{
    margin-top:clamp(1.5rem,2.5vw,2.25rem); padding-top:1.1rem;
    border-top:1px solid rgba(32,32,34,.12);
    font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(32,32,34,.5); text-align:center;
  }
  #f-wheel [data-rise],#f-brands [data-rise]{
    opacity:0; transform:translateY(14px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  }
  #f-wheel [data-rise].is-in,#f-brands [data-rise].is-in{opacity:1; transform:none;}
  #f-wheel .fw-fig[data-rise]{transition-delay:.12s;}
  @media (prefers-reduced-motion:reduce){
    #f-wheel [data-rise],#f-brands [data-rise]{opacity:1;transform:none;transition:none;}
  }
  @media (max-width:900px){
    #f-wheel .fw-inner{grid-template-columns:1fr; gap:clamp(2.5rem,7vw,3.5rem);}
    #f-wheel .fw-copy{max-width:none; order:2;}
    #f-wheel .fw-fig{order:1;}
    #f-wheel .fw-cap{text-align:left;}
  }
  @media (max-width:520px){
    #f-wheel .fw-h span{display:inline;}
    #f-wheel .fw-cap{letter-spacing:.14em;}
  }

  /* ══ f-brands : client logo band ══════════════════════════ */
  #f-brands .fb{
    background:var(--cream);
    padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,4.5rem) clamp(4rem,8vw,7rem);
    border-top:1px solid rgba(32,32,34,.10);
  }
  #f-brands .fb-inner{max-width:1240px; margin:0 auto;}
  #f-brands .fb-eyebrow{
    display:block; font-size:.7rem; font-weight:600; letter-spacing:.22em;
    text-transform:uppercase; color:rgba(32,32,34,.45);
    text-align:center; margin:0 0 clamp(2.5rem,5vw,4rem);
  }
  #f-brands .fb-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:clamp(2rem,4vw,3.25rem) clamp(1.5rem,3vw,2.5rem);
    align-items:center; justify-items:center;
  }
  #f-brands .fb-cell{display:flex; align-items:center; justify-content:center; width:100%; min-height:56px;}
  #f-brands .fb-mark{
    display:block; width:100%; background:var(--dark);
    -webkit-mask:var(--m) no-repeat center / contain;
            mask:var(--m) no-repeat center / contain;
    opacity:.58; transition:opacity var(--fin);
  }
  #f-brands .fb-cell:hover .fb-mark{opacity:1;}
  @media (max-width:520px){ #f-brands .fb-grid{grid-template-columns:repeat(2,1fr);} }