/*
Theme Name: Stage Ham Creative
Theme URI: https://creative.stageham.com
Author: Stage Ham
Description: Lean, plugin-free custom theme for Stage Ham Creative. Native WP templates and blocks, no page builder.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: stageham-creative
*/

/* ---------- Color Style: Dark (default, "Stage Ham Creative") ---------- */
:root{
  --stage:#0E0D0F;
  --panel:#17161A;
  --panel-line:#2A2830;
  --ivory:#F5F0E6;
  --ivory-dim:#B8B3A8;
  --amber:#E8A33D;
  --tally:#D6402C;
  --overlay-bg:rgba(14,13,15,.85);
  --content-width:100vw;
}

/* ---------- Adjustable content width ---------- */
/* Default is 100vw (full-bleed). Set globally in Customizer → Stage Ham Network,
   or per-page in Page Settings → Content width override. */
.hero, .section-head, .work-grid, .work-more, .services, .marquee-section,
.manifesto, .contact, .page-head, .filters, .full-work-grid, .lede, .stats,
.how-we-work, .team-grid, .service-detail, .cta-strip, .tracklist, .partners,
.roster, .slate-grid, .strip, .intro, .testimonial, .work{
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Color Style: Light ("Dreamr Productions" palette) ----------
   Toggle in Customizer → Stage Ham Network → Color Style.
   Same structure/markup, tokens swapped — nothing else changes. */
body.style-light{
  --stage:#F3EEE2;
  --panel:#EBE2D2;
  --panel-line:#D8CEB8;
  --ivory:#1B1712;
  --ivory-dim:#6E6656;
  --amber:#C6862E;
  --tally:#B23E24;
  --overlay-bg:rgba(243,238,226,.85);
}

:root{
    --page-max-width:1400px;
    --content-max-width:640px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}

  /* Page width — controlled from Customizer → Stage Ham Network → Page Width.
     Full-bleed elements (marquee track, poster grid backgrounds) are excluded on purpose. */
  .hero, .section-head, .work-grid, .services, .marquee-section .mono,
  .contact-grid, .page-head, .filters, .full-work-grid, .team-grid, .stats,
  .how-we-work, .service-detail, .lede, footer, .cta-strip{
    max-width:var(--page-max-width);
    margin-left:auto;
    margin-right:auto;
  }
  html{scroll-behavior:smooth;}
  body{
    background:var(--stage);
    color:var(--ivory);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
  }
  ::selection{background:var(--tally);color:var(--ivory);}
  .grain{
    position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  h1,h2,h3,.display{
    font-family:'Big Shoulders Display',sans-serif;
    text-transform:uppercase;
    letter-spacing:.01em;
    font-weight:900;
    line-height:.92;
  }
  .mono{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:12px;
  }
  .wrap{max-width:1320px;margin:0 auto;padding:0 40px;}
  a{color:inherit;text-decoration:none;}

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:26px 40px;
    background:linear-gradient(to bottom, var(--overlay-bg), transparent);
  }
  .logo{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:900;font-size:22px;letter-spacing:.02em;text-transform:uppercase;
    display:flex;align-items:center;gap:10px;
  }
  .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--tally);animation:pulse 1.6s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
  .navlinks{display:flex;gap:34px;align-items:center;}
  .navlinks a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory-dim);transition:color .2s;}
  .navlinks a:hover{color:var(--amber);}
  .navlinks .cta{
    border:1px solid var(--ivory-dim);padding:9px 18px;border-radius:2px;color:var(--ivory);
  }
  .navlinks .cta:hover{border-color:var(--amber);color:var(--amber);}
  .clock{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ivory-dim);}

  /* ---------- STUDIO SWITCHER (shared across Stage Ham / Dreamr) ---------- */
  .studio-bar{
    position:fixed;top:0;left:0;right:0;z-index:101;
    display:flex;justify-content:center;gap:0;
    padding:10px 0;background:var(--stage);border-bottom:1px solid var(--panel-line);
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  }
  .studio-bar a{color:var(--ivory-dim);padding:0 16px;transition:color .2s;}
  .studio-bar a.current{color:var(--ivory);border-bottom:1px solid var(--amber);padding-bottom:2px;}
  .studio-bar span.sep{color:var(--panel-line);}
  nav{top:37px;}
  .hero{padding-top:196px;}

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:flex-end;
    position:relative;
    padding:160px 40px 120px;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,163,61,.10), transparent 60%),
      var(--stage);
    border-bottom:1px solid var(--panel-line);
  }
  .hero-eyebrow{
    display:flex;align-items:center;gap:10px;margin-bottom:28px;color:var(--ivory-dim);
  }
  .hero-eyebrow .rec{color:var(--tally);}
  .hero h1{
    font-size:clamp(52px,9vw,132px);
    max-width:1180px;
  }
  .hero h1 .accent{color:var(--amber);}
  .hero-sub{
    display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
    margin-top:48px;padding-top:32px;border-top:1px solid var(--panel-line);
    flex-wrap:wrap;
  }
  .hero-sub p{max-width:420px;color:var(--ivory-dim);font-size:16px;line-height:1.55;}
  .btn-slate{
    display:inline-flex;align-items:center;gap:14px;
    background:var(--ivory);color:var(--stage);
    padding:16px 26px;border-radius:2px;font-family:'IBM Plex Mono',monospace;
    font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;
    transition:background .2s;white-space:nowrap;
  }
  .btn-slate:hover{background:var(--amber);}
  .btn-slate::before{content:"▶";font-size:10px;}

  /* ---------- SECTION LABEL ---------- */
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    padding:100px 40px 40px;border-bottom:1px solid var(--panel-line);
    flex-wrap:wrap;gap:20px;
  }
  .section-head .tc{color:var(--tally);}
  .section-head h2{font-size:clamp(34px,5vw,64px);}
  .section-head .desc{max-width:340px;color:var(--ivory-dim);font-size:14px;line-height:1.6;padding-bottom:6px;}

  /* ---------- WORK GRID ---------- */
  .work-grid{
    padding:0 40px 60px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--panel-line);
  }
  .work-card{
    background:var(--panel);position:relative;aspect-ratio:4/5;
    overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
    padding:22px;cursor:pointer;
  }
  .work-card .poster{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(14,13,15,0) 40%, rgba(14,13,15,.92) 100%),
      var(--swatch, #201d24);
    transition:transform .5s ease;
  }
  .work-card:hover .poster{transform:scale(1.06);}
  .work-card .tag{position:relative;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--amber);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
  .work-card h3{position:relative;z-index:2;font-size:26px;}
  .work-card .client{position:relative;z-index:2;color:var(--ivory-dim);font-size:13px;margin-top:6px;}
  .work-card:nth-child(1){--swatch:#241c1a;}
  .work-card:nth-child(2){--swatch:#1a2024;}
  .work-card:nth-child(3){--swatch:#221f16;}
  .work-card:nth-child(4){--swatch:#1c1a24;}
  .work-card:nth-child(5){--swatch:#241a1e;}
  .work-card:nth-child(6){--swatch:#1a2420;}
  .work-more{padding:0 40px 100px;}
  .link-arrow{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory);border-bottom:1px solid var(--ivory-dim);padding-bottom:4px;}
  .link-arrow:hover{color:var(--amber);border-color:var(--amber);}

  /* ---------- SERVICES (three acts) ---------- */
  .services{padding:0 40px 40px;}
  .service-row{
    display:grid;grid-template-columns:110px 1fr 340px;gap:40px;
    align-items:center;padding:44px 0;border-top:1px solid var(--panel-line);
    transition:background .25s;
  }
  .service-row:last-child{border-bottom:1px solid var(--panel-line);}
  .service-row:hover{background:var(--panel);}
  .service-row .scene{font-family:'IBM Plex Mono',monospace;color:var(--tally);font-size:14px;}
  .service-row h3{font-size:clamp(28px,3.4vw,44px);}
  .service-row p{color:var(--ivory-dim);font-size:14.5px;line-height:1.6;}
  .service-row .learn{margin-top:14px;display:inline-block;}

  /* ---------- MARQUEE CLIENTS ---------- */
  .marquee-section{padding:90px 0;border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line);overflow:hidden;}
  .marquee-section > .mono{padding:0 40px;margin-bottom:36px;display:block;}
  .marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:scroll 26s linear infinite;}
  .marquee-track:hover{animation-play-state:paused;}
  .marquee-item{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;}
  .marquee-logo{margin:0;filter:grayscale(1) brightness(1.6) contrast(.8);opacity:.75;transition:opacity .2s,filter .2s;}
  .marquee-item:hover .marquee-logo{filter:none;opacity:1;}
  .marquee-logo img{height:34px;width:auto;max-width:180px;object-fit:contain;display:block;}
  .marquee-name{color:var(--ivory-dim);white-space:nowrap;margin:0;}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ---------- MANIFESTO ---------- */
  .manifesto{padding:130px 40px;text-align:center;}
  .manifesto p{
    font-family:'Big Shoulders Display',sans-serif;font-weight:500;
    font-size:clamp(28px,4.2vw,56px);line-height:1.15;max-width:1000px;margin:0 auto;
    text-transform:none;
  }
  .manifesto .accent{color:var(--amber);}

  /* ---------- CONTACT ---------- */
  .contact{
    background:var(--panel);border-top:1px solid var(--panel-line);
    padding:110px 40px 90px;
  }
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
  .contact h2{font-size:clamp(40px,6vw,84px);}
  .contact-left p{color:var(--ivory-dim);margin-top:20px;max-width:380px;line-height:1.6;}
  .contact-info{margin-top:50px;display:flex;flex-direction:column;gap:6px;}
  .contact-info .mono{color:var(--ivory-dim);}
  .budget-pills{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 30px;}
  .budget-pills span{
    border:1px solid var(--panel-line);padding:10px 16px;border-radius:999px;
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ivory-dim);
  }
  .budget-pills span.active{border-color:var(--amber);color:var(--amber);}
  .field{border-bottom:1px solid var(--panel-line);padding:16px 0;margin-bottom:4px;}
  .field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ivory-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;}
  .field .fake-input{color:var(--ivory-dim);font-size:14px;opacity:.5;}

  /* ---------- FOOTER ---------- */
  footer{padding:60px 40px 130px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;}
  footer .mono{color:var(--ivory-dim);}
  footer .cols{display:flex;gap:70px;flex-wrap:wrap;}
  footer .cols a{display:block;color:var(--ivory-dim);font-size:14px;margin-bottom:10px;}
  footer .cols a:hover{color:var(--amber);}

  /* ---------- TIMELINE SCRUBBER (signature element) ---------- */
  .scrubber{
    position:fixed;bottom:0;left:0;right:0;height:34px;z-index:150;
    background:var(--overlay-bg);backdrop-filter:blur(6px);
    border-top:1px solid var(--panel-line);
    display:flex;align-items:center;padding:0 40px;
  }
  .scrubber-track{position:relative;flex:1;height:2px;background:var(--panel-line);}
  .scrubber-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--tally);}
  .scrubber-marks{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;}
  .scrubber-marks span{
    font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ivory-dim);background:var(--stage);padding:0 6px;transform:translateY(-11px);
    transition:color .2s;
  }
  .scrubber-marks span.active{color:var(--amber);}
  .scrubber-time{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ivory-dim);margin-left:16px;white-space:nowrap;}

  @media(max-width:900px){
    .work-grid{grid-template-columns:1fr 1fr;}
    .service-row{grid-template-columns:1fr;gap:10px;}
    .service-row .meta-col{max-width:none;}
    .contact-grid{grid-template-columns:1fr;}
    .navlinks{display:none;}
    .scrubber-marks span{display:none;}
    .hero{padding-top:140px;}
  }
  @media(max-width:560px){
    .work-grid{grid-template-columns:1fr;}
    .wrap,.hero,.section-head,.work-grid,.work-more,.services,.manifesto,.contact,footer{padding-left:22px;padding-right:22px;}
    nav{padding:20px 22px;}
    .scrubber{padding:0 22px;}
  }

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

/* --- from work.html --- */
.page-head{padding:190px 40px 60px;border-bottom:1px solid var(--panel-line);}
  .page-head h1{font-size:clamp(52px,9vw,110px);max-width:900px;}
  .page-head p{color:var(--ivory-dim);max-width:520px;margin-top:24px;font-size:16px;line-height:1.6;}

  .filters{display:flex;gap:0;flex-wrap:wrap;padding:34px 40px;border-bottom:1px solid var(--panel-line);}
  .filters button{
    background:none;border:none;color:var(--ivory-dim);font-family:'IBM Plex Mono',monospace;
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:8px 18px;cursor:pointer;
    border-right:1px solid var(--panel-line);
  }
  .filters button:first-child{padding-left:0;}
  .filters button.active{color:var(--amber);}

  .full-work-grid{padding:0 40px 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--panel-line);}
  .full-work-grid .work-card{aspect-ratio:4/5;}
  .full-work-grid .work-card:nth-child(6n+1){--swatch:#241c1a;}
  .full-work-grid .work-card:nth-child(6n+2){--swatch:#1a2024;}
  .full-work-grid .work-card:nth-child(6n+3){--swatch:#221f16;}
  .full-work-grid .work-card:nth-child(6n+4){--swatch:#1c1a24;}
  .full-work-grid .work-card:nth-child(6n+5){--swatch:#241a1e;}
  .full-work-grid .work-card:nth-child(6n+6){--swatch:#1a2420;}

  .cta-strip{padding:100px 40px;text-align:center;border-top:1px solid var(--panel-line);}
  .cta-strip h2{font-size:clamp(32px,5vw,58px);margin-bottom:26px;}

  @media(max-width:900px){.full-work-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){
    .page-head,.filters,.full-work-grid,.cta-strip{padding-left:22px;padding-right:22px;}
    .full-work-grid{grid-template-columns:1fr;}
  }

/* --- from about.html --- */
.page-head{padding:190px 40px 0;}
  .page-head h1{font-size:clamp(52px,9vw,110px);max-width:1000px;}

  .lede{padding:60px 40px 120px;border-bottom:1px solid var(--panel-line);}
  .lede p{font-family:'Big Shoulders Display',sans-serif;font-weight:500;font-size:clamp(26px,3.6vw,44px);line-height:1.2;max-width:1000px;text-transform:none;}
  .lede .accent{color:var(--amber);}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--panel-line);}
  .stat{padding:44px 40px;border-right:1px solid var(--panel-line);}
  .stat:last-child{border-right:none;}
  .stat .num{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:56px;color:var(--amber);}
  .stat .label{margin-top:6px;}

  .how-we-work{padding:0 40px;}

  .team-grid{padding:0 40px 60px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--panel-line);}
  .team-card{background:var(--panel);padding:28px 22px;}
  .team-card .photo{aspect-ratio:1;background:#201d24;margin-bottom:18px;}
  .team-card h3{font-size:22px;}
  .team-card .role{color:var(--amber);margin:6px 0 10px;}
  .team-card p{color:var(--ivory-dim);font-size:13px;line-height:1.5;}

  .cta-strip{padding:100px 40px;text-align:center;border-top:1px solid var(--panel-line);}
  .cta-strip h2{font-size:clamp(32px,5vw,58px);margin-bottom:26px;}

  @media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr);}.team-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){
    .page-head,.lede,.how-we-work,.team-grid,.cta-strip{padding-left:22px;padding-right:22px;}
    .stat{padding:32px 22px;}
    .team-grid{grid-template-columns:1fr;}
  }

/* --- from services.html --- */
.page-head{padding:190px 40px 60px;border-bottom:1px solid var(--panel-line);}
  .page-head h1{font-size:clamp(52px,9vw,110px);max-width:900px;}
  .page-head p{color:var(--ivory-dim);max-width:520px;margin-top:24px;font-size:16px;line-height:1.6;}

  .service-detail{border-bottom:1px solid var(--panel-line);padding:90px 40px;}
  .service-detail-grid{display:grid;grid-template-columns:90px 1fr 1fr;gap:50px;}
  .service-detail .scene{font-family:'IBM Plex Mono',monospace;color:var(--tally);font-size:14px;}
  .service-detail h2{font-size:clamp(38px,5.4vw,68px);margin-bottom:20px;}
  .service-detail .col p{color:var(--ivory-dim);font-size:15px;line-height:1.65;margin-bottom:18px;}
  .deliverables{list-style:none;margin-top:8px;}
  .deliverables li{
    padding:14px 0;border-top:1px solid var(--panel-line);
    font-size:14px;color:var(--ivory-dim);display:flex;justify-content:space-between;
  }
  .deliverables li:last-child{border-bottom:1px solid var(--panel-line);}
  .deliverables li span.n{font-family:'IBM Plex Mono',monospace;color:var(--amber);}

  .cta-strip{padding:100px 40px;text-align:center;}
  .cta-strip h2{font-size:clamp(32px,5vw,58px);margin-bottom:26px;}

  @media(max-width:900px){.service-detail-grid{grid-template-columns:1fr;gap:20px;}}
  @media(max-width:560px){.page-head,.service-detail,.cta-strip{padding-left:22px;padding-right:22px;}}

/* ---------- Hero background video ---------- */
.hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
.hero > *:not(.hero-bg-video){ position:relative; z-index:1; }

/* Hero pattern now renders on core/cover so video backgrounds are a native
   block-toolbar option — these rules make Cover's own markup lay out the
   same way the original hand-coded hero did. */
.wp-block-cover.hero{
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:160px 40px 120px !important;
}
.wp-block-cover.hero .wp-block-cover__inner-container{ width:100%; max-width:none; color:inherit; }
.wp-block-cover.hero .wp-block-cover__background{ background:var(--stage); }

/* =========================================================
   About page — richer layout
   ========================================================= */
.intro-split{
  display:grid; grid-template-columns:1.3fr 1fr; gap:60px;
  padding:60px 40px 100px; border-bottom:1px solid var(--panel-line); align-items:end;
}
.intro-split .statement{
  font-family:'Big Shoulders Display',sans-serif;font-weight:500;
  font-size:clamp(26px,3.6vw,44px);line-height:1.2;text-transform:none;
}
.intro-split .statement .accent{color:var(--amber);}
.pull-quote-box{
  background:var(--panel);border:1px solid var(--panel-line);padding:32px;position:relative;
}
.pull-quote-box::before{
  content:"\201C";position:absolute;top:8px;left:20px;font-family:'Big Shoulders Display',sans-serif;
  font-size:64px;color:var(--amber);line-height:1;opacity:.5;
}
.pull-quote-box p{position:relative;font-size:17px;line-height:1.6;color:var(--ivory);margin-top:20px;}
.pull-quote-box .attr{margin-top:18px;color:var(--ivory-dim);}

.milestones{display:flex;overflow-x:auto;border-bottom:1px solid var(--panel-line);}
.milestone{
  flex:1 0 200px;padding:40px;border-right:1px solid var(--panel-line);position:relative;
}
.milestone:last-child{border-right:none;}
.milestone .yr{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:38px;color:var(--amber);}
.milestone p{color:var(--ivory-dim);font-size:13.5px;margin-top:8px;line-height:1.5;}

.bento-team{padding:0 40px 60px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1px;background:var(--panel-line);}
.bento-team .team-card.lead{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;}
.bento-team .team-card.lead .photo{aspect-ratio:auto;flex:1;margin-bottom:18px;}
.bento-team .team-card.lead h3{font-size:28px;}

/* =========================================================
   Services page — richer layout
   ========================================================= */
.service-overview{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--panel-line);
  margin:0 40px 0;border:1px solid var(--panel-line);
}
.overview-card{background:var(--panel);padding:30px;transition:background .2s;}
.overview-card:hover{background:var(--stage);}
.overview-card .n{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:34px;color:var(--amber);}
.overview-card h4{margin:10px 0 8px;font-size:19px;}
.overview-card p{color:var(--ivory-dim);font-size:13px;line-height:1.5;margin-bottom:14px;}

.service-meta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 22px;}
.service-meta span{
  border:1px solid var(--panel-line);padding:7px 14px;border-radius:999px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ivory-dim);text-transform:uppercase;letter-spacing:.05em;
}
.service-detail.reverse .service-detail-grid{grid-template-columns:90px 1fr 1fr;}
.service-detail.reverse .col:nth-child(2){order:3;}
.service-detail.reverse .col:nth-child(3){order:2;}

.deliverables li{display:flex;align-items:center;gap:14px;justify-content:flex-start;}
.deliverables li span.n{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--amber);
  display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;
}
.deliverables li span:last-child:not(.n){margin-left:auto;}

@media(max-width:900px){
  .intro-split{grid-template-columns:1fr;}
  .bento-team{grid-template-columns:1fr 1fr;}
  .bento-team .team-card.lead{grid-column:span 2;grid-row:span 1;}
  .service-overview{grid-template-columns:1fr;}
  .service-detail.reverse .col:nth-child(2),.service-detail.reverse .col:nth-child(3){order:0;}
}
@media(max-width:560px){
  .intro-split,.milestones,.bento-team,.service-overview{padding-left:22px;padding-right:22px;margin-left:0;margin-right:0;}
  .bento-team{grid-template-columns:1fr;}
  .bento-team .team-card.lead{grid-column:span 1;}
}

/* ---------- Pattern-block adjustments ---------- */
/* Bento team photos are now real Image blocks, not empty placeholder divs */
.bento-team figure.photo{aspect-ratio:1;overflow:hidden;margin:0 0 18px;}
.bento-team figure.photo img{width:100%;height:100%;object-fit:cover;display:block;}
.bento-team .team-card.lead figure.photo{aspect-ratio:auto;flex:1;}

/* Deliverables is now a real core/list block — numbered circles via CSS counters */
ul.deliverables.wp-block-list{list-style:none;counter-reset:deliv;padding-left:0;margin-top:8px;}
ul.deliverables.wp-block-list li{
  counter-increment:deliv;position:relative;padding:14px 0 14px 40px;
  border-top:1px solid var(--panel-line);font-size:14px;color:var(--ivory-dim);
}
ul.deliverables.wp-block-list li:last-child{border-bottom:1px solid var(--panel-line);}
ul.deliverables.wp-block-list li::before{
  content:counter(deliv, decimal-leading-zero);position:absolute;left:0;top:11px;
  width:24px;height:24px;border-radius:50%;border:1px solid var(--amber);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--amber);
}

/* Services overview card is a div now (not an anchor) — jump link lives inside */
.overview-card .link-arrow{margin-top:4px;display:inline-block;}
.overview-card .link-arrow a{color:inherit;border-bottom:1px solid var(--ivory-dim);padding-bottom:2px;}
.overview-card .link-arrow a:hover{color:var(--amber);border-color:var(--amber);}