/* CirclStdio mobile parity sweep.
   Loaded after page-local styles so the static build inherits the previous
   Astro deployment's phone navigation and responsive structure. */

.tb-burger {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 2px solid rgba(236, 231, 221, .25);
  cursor: pointer;
  padding: 0;
  transition: border-color .15s;
}

.tb-burger:hover { border-color: var(--bone); }

.tb-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--bone);
  transition: transform .25s, opacity .2s;
}

.tb-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.tb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.tb-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.tb-mobile {
  display: none;
  background: var(--ink);
  color: var(--bone);
  border-top: 1px solid var(--hairline-on-ink);
  padding: 8px 24px 24px;
  flex-direction: column;
}

.tb-mobile a {
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  padding: 14px 0;
  min-height: 51px;
  border-bottom: 1px solid var(--hairline-on-ink);
  transition: color .15s, padding-left .15s;
}

.tb-mobile a:hover,
.tb-mobile a[aria-current="page"] {
  color: var(--red);
}

.tb-mobile a:hover { padding-left: 6px; }

.tb-mobile-sub {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-on-ink);
}

.tb-mobile-sub .label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-3);
  padding: 4px 0;
}

.tb-mobile-sub a {
  font-size: 14px;
  font-family: var(--f-mono);
  letter-spacing: .04em;
  padding: 10px 0;
  min-height: 44px;
}

.tb-mobile-sub .tb-mobile-cta {
  background: var(--red);
  color: var(--bone);
  padding: 14px 16px;
  margin-top: 8px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .04em;
  border-bottom: none;
  min-height: 51px;
}

.tb-mobile-sub .tb-mobile-cta:hover {
  background: var(--red-deep, var(--red-blood));
  padding-left: 16px;
}

body.partner-attentive .tb-mobile-sub .tb-mobile-cta,
body.partner-attentive .tb-mobile-sub .tb-mobile-cta:hover {
  color: var(--ink);
}

@keyframes tb-mobile-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

body.tb-locked { overflow: hidden; }

.tbl,
.icp-tbl {
  border-top: 2px solid var(--ink) !important;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll > .tbl,
.table-scroll > .icp-tbl {
  min-width: 620px;
  margin-top: 0;
}

@media (max-width: 1100px) {
  .tb nav,
  .tb .tb-nav,
  .tb-actions {
    display: none !important;
  }

  .tb {
    height: 64px;
    padding: 0 24px;
    gap: 20px;
  }

  .brand img,
  .brand .wordmark,
  .tb .brand .wordmark {
    height: 24px !important;
    width: auto !important;
    max-width: 136px !important;
    object-fit: contain;
  }

  .brand .mark,
  .tb .brand .mark {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    flex: 0 0 24px !important;
  }

  .tb-burger { display: inline-flex; }

  .topbar.is-open {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10060;
  }

  .topbar.is-open .tb-mobile {
    display: flex;
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10055;
    width: 100%;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 24px max(24px, env(safe-area-inset-bottom));
    box-shadow: 0 22px 48px rgba(0, 0, 0, .62);
    animation: tb-mobile-in .25s ease-out;
  }
}

@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .wrap { padding-left: 16px !important; padding-right: 16px !important; }

  .brand,
  .ft .lg a,
  .ct-email,
  .ct-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .announce {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    gap: 5px 10px !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
    line-height: 1.22 !important;
  }

  .announce b {
    order: 1;
    padding: 2px 7px !important;
    letter-spacing: .16em !important;
  }

  .announce span {
    order: 3;
    flex: 0 0 100%;
    max-width: min(100%, 56ch);
    text-align: center;
  }

  .announce a {
    order: 2;
    flex: 0 0 auto;
    min-height: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    text-decoration: none !important;
  }

  .hz {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    white-space: normal !important;
  }

  .hz .d { flex-wrap: wrap !important; gap: 8px 12px !important; }

  .hero .wrap { padding-top: 0 !important; padding-bottom: 36px !important; }

  .hero,
  .band,
  section.cta,
  footer {
    overflow: hidden !important;
  }

  .hero {
    padding-top: 28px !important;
  }

  .hero .glyph,
  .band .glyph,
  section.cta .glyph,
  footer .glyph {
    max-width: 100vw;
  }

  /* Harbor plate, narrow framing. The wide rule stretches the plate over the
     whole band with a cover fit, which cannot work here: at 393x960 the footer
     is 0.41 wide for every 1 tall against the art's 1.83, so cover becomes
     height-driven and shows a 22%-wide vertical slice of the painting — a strip
     of cobblestone, not a harbor. Sizing the plate off the viewport at the art's
     native aspect and sitting it on the bottom edge is the only framing that
     shows the scene undistorted. It still spans the full width; 240vw means both
     side edges are off-screen, so what the plate gives up here is band height,
     not width.

     top/left back to auto because the wide rule's inset:0 pins all four sides,
     and left:0 plus an explicit width would over-constrain the box and win over
     right:0 — the plate would hang off the left edge instead of the right, and
     top:0 with bottom:0 would override the aspect ratio. Serves index.html as
     well, which links this file but not circl.css.

     Geometry only. Opacity and the mask are deliberately not restated here: the
     wide rule's values are already the ones this framing wants, and the plate's
     alpha is a measured number that lives in four stylesheets as it is —
     re-declaring it in the overrides would make that six places to keep in step
     and one of them would eventually drift. Restating a property in an override
     arm is only right when the arm needs a different value. */
  footer::after {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    width: 240vw;
    aspect-ratio: 1199/654;
    background-position: 62% 50%;
  }

  .hero h1:not(.cst-h1),
  .hero.thin h1,
  .eng-hero h1 {
    margin: 44px 0 32px !important;
    font-size: clamp(30px, 9vw, 56px) !important;
    line-height: .92 !important;
    letter-spacing: -.03em !important;
    word-break: keep-all;
    hyphens: none;
    text-wrap: balance;
  }

  .hero h1 .l2 { text-align: left !important; }

  .hero h1.home-hero-title {
    margin: 38px 0 26px !important;
    font-size: clamp(27px, 8.1vw, 50px) !important;
    line-height: .9 !important;
  }

  .hero-top {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    gap: 4px 12px !important;
    font-size: 9px !important;
    letter-spacing: .12em !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .hero-top > * { flex: 0 0 auto; }
  .hero-top .c,
  .hero-top .r { text-align: left !important; }

  .hero-sub {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .hero-sub .lead,
  .eng-dek,
  .cst-dek,
  .post-dek {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .hero-ctas,
  .ea-cta-actions {
    width: 100%;
  }

  .hero-ctas .btn,
  .ea-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .compare .mid {
    height: 56px !important;
    min-height: 56px !important;
    transform: none !important;
    font-size: 0 !important;
  }

  .compare .mid::before {
    content: "↓";
    font-family: var(--f-display);
    font-size: 36px;
    line-height: 1;
    color: var(--bone);
  }

  body.partner-attentive .compare .mid::before {
    color: var(--ink);
  }

  .hero-intake .wrap {
    padding-bottom: 42px !important;
  }

  .hero-intake-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 28px !important;
  }

  .hero-intake .hero-intake-copy h1 {
    margin: 0 !important;
  }

  .hero-intake-divider {
    margin: 24px 0 18px !important;
  }

  .hero-intake-copy .lead {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .hero-intake-panel .partner-form-card {
    padding: 18px !important;
    box-shadow: 4px 4px 0 var(--red) !important;
  }

  .hero-intake-panel .partner-form-head {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-intake-actions {
    grid-template-columns: 1fr !important;
  }

  .hero-intake-actions .partner-submit,
  .hero-intake-actions .btn {
    width: 100%;
    min-height: 50px;
  }

  .hero-intake .metrics {
    margin-top: 32px !important;
  }

  .btn,
  .cf-submit,
  .sr-box button,
  .news button {
    min-height: 44px;
  }

  .sec-head {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 36px 0 12px !important;
  }

  .sec-head h2 {
    text-align: left !important;
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: .95 !important;
    letter-spacing: 0 !important;
  }

  .sec-head .jp { text-align: left !important; }
  .sec-body { padding: 24px 0 16px !important; }

  .metrics,
  .metrics.four,
  .process,
  .process.four,
  .proof,
  .checklist,
  .compare,
  .platforms,
  .services,
  .eng-items,
  .related,
  .eng-detail,
  .eng-other,
  .bl-grid,
  .cs-grid,
  .rel-grid,
  .ct-grid,
  .ct-steps,
  .as-grid,
  .as-steps,
  .oa-grid,
  .gap-note,
  .icp-meta,
  .icp-cards,
  .icp-cards.three {
    grid-template-columns: 1fr !important;
  }

  .about,
  .ab-team-card,
  .sv-deep,
  .phase,
  .arch {
    grid-template-columns: 1fr !important;
  }

  .metrics .m,
  .pcard,
  .svc,
  .pstep,
  .proof .cell,
  .eng-item,
  .related a,
  .eng-other a,
  .bl-card,
  .cs-card,
  .rel-grid a,
  .ct-step,
  .as-step,
  .gap-note .g,
  .icp-card {
    min-height: 0 !important;
    border-right: none !important;
    border-bottom: 2px solid var(--ink) !important;
  }

  .metrics .m:last-child,
  .pcard:last-child,
  .svc:last-child,
  .pstep:last-child,
  .proof .cell:last-child,
  .eng-item:last-child,
  .related a:last-child,
  .eng-other a:last-child,
  .bl-card:last-child,
  .cs-card:last-child,
  .rel-grid a:last-child,
  .ct-step:last-child,
  .as-step:last-child,
  .gap-note .g:last-child,
  .icp-card:last-child {
    border-bottom: none !important;
  }

  .rung .body,
  .rung .price {
    min-width: 0 !important;
  }

  .rung .price {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .pcard,
  .svc,
  .bl-card,
  .cs-card,
  .post-card,
  .eng-item,
  .eng-other a {
    padding: 24px 22px !important;
  }

  .pcard h3,
  .svc h3,
  .bl-card h3,
  .cs-card h3,
  .eng-item h5,
  .eng-other h4 {
    font-size: 26px !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  .manifesto { padding: 42px 0 !important; margin-top: 40px !important; }
  .manifesto .row { grid-template-columns: 1fr !important; gap: 18px !important; }
  .manifesto .who { text-align: left !important; }
  .manifesto .line { font-size: clamp(30px, 9vw, 44px) !important; }

  section.cta { margin-top: 48px !important; }
  section.cta .row { grid-template-columns: 1fr !important; gap: 22px !important; padding: 48px 0 !important; }
  section.cta .right { align-items: flex-start !important; text-align: left !important; }
  section.cta h2 { font-size: clamp(34px, 10vw, 58px) !important; line-height: .92 !important; letter-spacing: 0 !important; }

  footer { padding: 48px 0 96px !important; }
  .ft { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ft .big { font-size: clamp(36px, 9vw, 56px) !important; line-height: .92 !important; }
  .ft .lg { gap: 2px !important; }
  .ft .lg a {
    min-height: 22px !important;
    line-height: 1.2;
    transition: color .16s ease, transform .16s ease, opacity .16s ease;
  }
  .ft .lg a:hover,
  .ft .lg a:focus-visible,
  .ft .lg a:active {
    color: var(--red) !important;
    transform: translateX(2px);
  }
  .ft-bot { align-items: flex-start !important; flex-direction: column !important; gap: 5px !important; text-align: left !important; }
  .ft-bot .links { display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 2px 3px !important; line-height: 1.15 !important; }
  .ft-bot .links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    color: inherit;
    text-decoration: none !important;
    transition: color .16s ease, transform .16s ease, opacity .16s ease;
  }
  .ft-bot .links a:hover,
  .ft-bot .links a:focus-visible,
  .ft-bot .links a:active {
    color: var(--red) !important;
    transform: translateX(2px);
  }

  .news .row { grid-template-columns: 1fr !important; }
  .news form,
  .sr-box {
    width: 100%;
    max-width: none;
    flex-direction: column;
  }

  .news input,
  .sr-box input {
    min-width: 0 !important;
    width: 100% !important;
  }

  .news button,
  .sr-box button {
    width: 100%;
    padding: 14px 18px !important;
  }

  .q {
    grid-template-columns: 34px 1fr 24px !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .q .a { grid-column: 1 / -1 !important; }

  .cf-row,
  .sig-grid {
    grid-template-columns: 1fr !important;
  }

  .ct-form-wrap,
  .as-form-wrap,
  .oa-form-wrap,
  .ct-block,
  .as-block,
  .oa-block {
    padding: 22px 20px !important;
  }

  .post-head,
  .post-wrap,
  .post-figure,
  .cst-head,
  .cst-body,
  .cst-quote .cst-qwrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .post-body { font-size: 16px !important; line-height: 1.68 !important; }
  .post-body p.lede { font-size: 18px !important; }
  .post-h1 { font-size: clamp(30px, 9vw, 42px) !important; line-height: 1.02 !important; }
  .post-author { align-items: flex-start !important; padding: 18px 16px !important; }
  .post-figure .ph { aspect-ratio: 4 / 3 !important; }

  .cst-facts { gap: 14px !important; }
  .cst-quote { padding: 38px 0 !important; }
  .cst-quote blockquote { font-size: clamp(24px, 8vw, 34px) !important; letter-spacing: 0 !important; }

  .eng-tags,
  .eng-hero-meta,
  .cst-stack,
  .bl-cats {
    gap: 8px !important;
  }

  .eng-tags .et,
  .eng-hero-meta span,
  .cst-stack span,
  .bl-cat,
  .badge {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .icp-callout { grid-template-columns: 1fr !important; gap: 14px !important; padding: 22px 20px !important; }
  .icp-callout .tag { white-space: normal !important; }
  .icp-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .partners .prt-grid {
    grid-template-columns: 1fr !important;
  }

  .partners .prt-cell {
    border-right: none !important;
    border-bottom: 2px solid var(--ink) !important;
    min-height: 168px;
  }

  .partners .prt-cell:last-child {
    border-bottom: none !important;
  }

  #research .research-teaser {
    grid-template-columns: 1fr !important;
  }

  #research .research-teaser .post-card {
    border-right: none !important;
    border-bottom: 2px solid var(--ink) !important;
  }

  #research .research-teaser .post-card:last-child {
    border-bottom: none !important;
  }

  .partner-lead {
    padding-top: 48px !important;
  }

  .partner-lead-shell {
    grid-template-columns: 1fr !important;
  }

  .partner-lead-copy {
    border-right: none !important;
    border-bottom: 2px solid var(--ink) !important;
    padding: 24px 20px !important;
  }

  .partner-lead-copy h2 {
    max-width: 9ch !important;
    font-size: clamp(34px, 13vw, 58px) !important;
  }

  .partner-form-card {
    padding: 20px !important;
  }

  .partner-form-head {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .partner-form-logo {
    min-height: 54px !important;
    justify-content: flex-start !important;
  }

  .partner-cf-row {
    grid-template-columns: 1fr !important;
  }

  .partner-submit {
    min-height: 50px !important;
  }

  .cw-x {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cw-inputrow input,
  .cw-send {
    min-height: 44px !important;
  }

  .cw-send {
    min-width: 48px !important;
  }
}

@media (max-width: 480px) {
  /* The waterline marquee scales itself off --u; the old per-item padding and
     font-size overrides fought that and are gone. */

  .sr-result {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .sr-result b {
    text-align: left !important;
  }

  .splash-frame {
    width: calc(100vw - 28px) !important;
    padding: 22px 18px !important;
  }

  .splash-top,
  .splash-bot {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .splash-tag.c { display: none !important; }
}