/* Apple-inspired site layer. Loaded last on every public page. Typeface stays Archivo.
   Type sizes, tracking and leading follow apple.com's type scale:
   large viewport (>=1069px), medium (735-1068px), small (<=734px).
   Brand artwork, specimens and the CFX wordmark keep their own faces. */

 /* Sacramento (SIL OFL 1.1, Astigmatic): the script accent for Bonolo's name on the Work page only. */
@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/Sacramento-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  --a-font-display: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --a-font-text: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --site-font: var(--a-font-text);
  --w-display: 112%;

  --a-ink: #1d1d1f;
  --a-ink-2: #6e6e73;
  --a-ink-3: #86868b;
  --a-bg: #fff;
  --a-bg-alt: #f5f5f7;
  --a-bg-dark: #000;
  --a-bg-dark-alt: #161617;
  --a-rule: #d2d2d7;
  /* Apple's blue role, filled with the CFX blue. */
  --a-blue: #2944ff;
  --a-blue-hover: #1f36e6;
  --a-link: #2944ff;
  --a-link-dark: #8593ff;
  --a-content: 980px;
  --a-content-wide: 1260px;
  --a-gutter: max(22px, calc((100vw - var(--a-content)) / 2));
  --a-radius: 18px;
  --a-radius-lg: 28px;
  --a-nav: 44px;
  --a-ease: cubic-bezier(.28, .11, .32, 1);

  /* Type scale: [size, leading, tracking] per Apple's typography tokens. */
  --a-hero-size: 80px;      --a-hero-lh: 1.05;      --a-hero-ls: -.015em;
  --a-headline-size: 56px;  --a-headline-lh: 1.0714; --a-headline-ls: -.005em;
  --a-headline-sm-size: 48px;
  --a-tile-size: 40px;      --a-tile-lh: 1.1;       --a-tile-ls: 0;
  --a-subhead-size: 28px;   --a-subhead-lh: 1.1429; --a-subhead-ls: .007em;
  --a-card-size: 28px;
  --a-eyebrow-size: 21px;   --a-eyebrow-lh: 1.1905; --a-eyebrow-ls: .011em;
  --a-intro-size: 21px;     --a-intro-lh: 1.381;    --a-intro-ls: .011em;
  --a-body-size: 17px;      --a-body-lh: 1.4706;    --a-body-ls: -.022em;
  --a-small-size: 14px;     --a-small-lh: 1.4286;   --a-small-ls: -.016em;
  --a-micro-size: 12px;     --a-micro-lh: 1.3334;   --a-micro-ls: -.01em;
}
@media (max-width: 1068px) {
  :root {
    --a-content: 692px;
    --a-hero-size: 64px;     --a-hero-lh: 1.0625;
    --a-headline-size: 48px; --a-headline-lh: 1.0834; --a-headline-ls: -.003em;
    --a-headline-sm-size: 40px;
    --a-tile-size: 32px;     --a-tile-lh: 1.125;
    --a-subhead-size: 24px;  --a-subhead-lh: 1.1667; --a-subhead-ls: .009em;
    --a-card-size: 24px;
    --a-eyebrow-size: 19px;  --a-eyebrow-lh: 1.2105; --a-eyebrow-ls: .012em;
    --a-intro-size: 19px;    --a-intro-lh: 1.4211;   --a-intro-ls: .012em;
  }
}
@media (max-width: 734px) {
  :root {
    --a-content: 87.5vw;
    --a-gutter: 6.25vw;
    --a-hero-size: 48px;     --a-hero-lh: 1.0834;    --a-hero-ls: -.003em;
    --a-headline-size: 40px; --a-headline-lh: 1.1;   --a-headline-ls: 0;
    --a-headline-sm-size: 32px;
    --a-tile-size: 28px;     --a-tile-lh: 1.1429;    --a-tile-ls: .007em;
    --a-subhead-size: 21px;  --a-subhead-lh: 1.1905; --a-subhead-ls: .011em;
    --a-card-size: 24px;
    --a-eyebrow-size: 17px;  --a-eyebrow-lh: 1.2353; --a-eyebrow-ls: -.022em;
    --a-intro-size: 17px;    --a-intro-lh: 1.4706;   --a-intro-ls: -.022em;
  }
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--a-font-text);
  font-stretch: 100%;
  font-size: var(--a-body-size);
  line-height: var(--a-body-lh);
  letter-spacing: var(--a-body-ls);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}
body:is(.apple-page, .work-page, .conversion-page, .bonolo-page) { color: var(--a-ink); background: var(--a-bg); }
h1, h2 { font-family: var(--a-font-display); font-stretch: var(--w-display); font-weight: 600; text-wrap: balance; }
h3, h4 { font-family: var(--a-font-display); font-stretch: 100%; }
p { text-wrap: pretty; }

/* ---------- Global nav: 44px translucent bar ---------- */
.site-nav#siteNav, .conversion-nav#siteNav {
  position: sticky; top: 0; z-index: 9999;
  height: var(--a-nav); min-height: 0;
  padding: 0;
  background: rgba(250, 250, 252, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 0; box-shadow: none;
  color: var(--a-ink);
  transition: background .32s var(--a-ease);
}
.site-nav#siteNav::before, .site-nav#siteNav::after { display: none !important; }
.site-nav .nav-inner {
  width: min(var(--a-content-wide), calc(100% - 44px)); max-width: none;
  height: 100%; margin: 0 auto; padding: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-nav .brand-mark {
  font-size: 15px; line-height: 1; letter-spacing: 0; color: var(--a-ink);
  text-transform: uppercase; white-space: nowrap; text-decoration: none;
}
.site-nav .brand-mark .brand-accent { color: var(--a-blue); }
.site-nav .brand-mark small { font-size: 10px; letter-spacing: .04em; opacity: .7; }
.site-nav .nav-links { display: flex; align-items: center; gap: 0 clamp(18px, 3vw, 36px); background: none; border: 0; padding: 0; }
.site-nav .nav-links a {
  min-height: var(--a-nav); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  font-family: var(--a-font-text); font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: -.01em;
  text-transform: none; color: rgba(0, 0, 0, .8); text-decoration: none;
  transition: color .32s var(--a-ease);
}
.site-nav .nav-links a:hover, .site-nav .nav-links a[aria-current] { color: #000; }
.site-nav .nav-links a[aria-current] { text-decoration: none; font-weight: 600; }
.site-nav .nav-links a.nav-cta {
  min-height: 0; padding: 5px 12px; border-radius: 980px;
  background: var(--a-blue); color: #fff; font-weight: 400;
}
.site-nav .nav-links a.nav-cta:hover { background: var(--a-blue-hover); color: #fff; }
.site-nav .nav-links a::before, .site-nav .nav-links a::after { display: none !important; }
@media (max-width: 600px) {
  html:has(.conversion-nav) { --nav-height: var(--a-nav); }
  .conversion-nav#siteNav { height: var(--a-nav); }
  .conversion-nav .nav-inner { flex-direction: row; align-items: center; gap: 12px; width: calc(100% - 32px); }
  .conversion-nav .nav-links { width: auto; justify-content: flex-end; gap: 16px; }
  .site-nav .brand-mark { font-size: 13px; }
  .site-nav .brand-mark small { display: none; }
  .site-nav .nav-links a[href$="#about"] { display: none; }
}

/* ---------- Shared type roles (used on every page) ---------- */
.a-display, .work-page-hero h1, .case-hero h1, .bonolo-page h1 {
  font-family: var(--a-font-display);
  font-size: var(--a-hero-size); line-height: var(--a-hero-lh); letter-spacing: var(--a-hero-ls);
  font-weight: 600; font-stretch: var(--w-display); text-transform: none;
}
.a-headline, .display-title, .collection-heading h2 {
  font-family: var(--a-font-display);
  font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls);
  font-weight: 600; font-stretch: var(--w-display); text-transform: none;
}
.a-headline--sm { font-size: var(--a-headline-sm-size); }
.a-subhead {
  font-family: var(--a-font-display);
  font-size: var(--a-subhead-size); line-height: var(--a-subhead-lh); letter-spacing: var(--a-subhead-ls);
  font-weight: 400;
}
.a-eyebrow, .section-label, .eyebrow {
  font-family: var(--a-font-display);
  font-size: var(--a-eyebrow-size); line-height: var(--a-eyebrow-lh); letter-spacing: var(--a-eyebrow-ls);
  font-weight: 600; font-stretch: 100%; text-transform: none; opacity: 1;
}
.a-intro, .lead, .section-intro {
  font-family: var(--a-font-display);
  font-size: var(--a-intro-size); line-height: var(--a-intro-lh); letter-spacing: var(--a-intro-ls);
  font-weight: 400; color: var(--a-ink-2);
}
.a-body { font-size: var(--a-body-size); line-height: var(--a-body-lh); letter-spacing: var(--a-body-ls); }
.micro-label {
  font-family: var(--a-font-text); font-size: var(--a-small-size); line-height: var(--a-small-lh);
  letter-spacing: var(--a-small-ls); font-weight: 600; text-transform: none; font-stretch: 100%;
}
.a-accent { color: var(--a-blue); }
/* Retire decorative accents so headlines read in one voice, as on apple.com. */
.section-word-accent, .hero-word-accent { color: inherit; font-style: normal; font-family: inherit; background: none; -webkit-text-fill-color: currentColor; }
.work-hero-title-outline { -webkit-text-stroke: 0 !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }

/* ---------- Buttons and links ---------- */
.a-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px; margin-top: 34px; }
.a-ctas--left { justify-content: flex-start; }
.a-button, .button, .button--primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 0; padding: 11px 21px;
  border: 1px solid transparent; border-radius: 980px;
  background: var(--a-blue); color: #fff;
  font-family: var(--a-font-text); font-size: 17px; line-height: 1.1765; letter-spacing: -.022em;
  font-weight: 400; text-transform: none; text-decoration: none; white-space: nowrap;
  box-shadow: none; cursor: pointer;
  transition: background-color .2s var(--a-ease), transform .1s ease-out;
}
.a-button:hover, .button:hover, .button--primary:hover { background: var(--a-blue-hover); color: #fff; }
.a-button:active, .button:active { transform: scale(.97); }
.a-button--lg { padding: 14px 28px; font-size: 17px; min-width: 200px; }
.button--ghost { background: transparent; color: var(--a-link); border-color: var(--a-link); }
.button--ghost:hover { background: var(--a-link); color: #fff; }
.a-button:focus-visible, .button:focus-visible, .a-link:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 4px; }
.button::before, .button::after, .button .liquid-glint { display: none !important; }

.a-link, .text-link, .case-cross-link a, .case-back, .case-browse {
  color: var(--a-link); font-size: inherit; text-decoration: none; letter-spacing: inherit;
}
.a-link { font-size: 17px; line-height: 1.1765; letter-spacing: -.022em; }
.a-link:hover, .text-link:hover { text-decoration: underline; text-underline-offset: .15em; }
/* Apple's trailing chevron. */
.a-link::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .32em;
  border: solid currentColor; border-width: .1em .1em 0 0; transform: translateY(-.1em) rotate(45deg);
}

/* ---------- Footer: 12px directory, light grey ---------- */
.site-footer, .site-footer.page-shell {
  background: var(--a-bg-alt); color: var(--a-ink-2);
  font-family: var(--a-font-text); font-size: var(--a-micro-size); line-height: var(--a-micro-lh); letter-spacing: var(--a-micro-ls);
  border: 0; padding: 0; margin: 0; width: 100%; max-width: none;
}
.site-footer a { color: var(--a-ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--a-ink); text-decoration: underline; }
.site-footer .cfx-footer-nav.cfx-footer-nav {
  width: min(var(--a-content), calc(100% - 44px)); padding: 20px 0 12px; gap: 8px;
  border-bottom: 1px solid var(--a-rule);
}
.site-footer .cfx-footer-label { font-size: 12px; font-weight: 600; letter-spacing: -.01em; text-transform: none; opacity: 1; color: var(--a-ink); }
.site-footer .cfx-footer-links { gap: 4px 28px; }
.site-footer .cfx-footer-nav .cfx-footer-links a {
  min-height: 0; padding: 0; font-size: 12px; font-weight: 400; letter-spacing: -.01em; line-height: 2.2; color: var(--a-ink-2);
}
.site-footer .cfx-footer-nav .cfx-footer-links a[aria-current] { color: var(--a-ink); text-decoration: none; }
.site-footer .footer-inner {
  width: min(var(--a-content), calc(100% - 44px)); max-width: none; margin: 0 auto; padding: 14px 0 22px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; color: var(--a-ink-2);
  font-size: 12px; line-height: 1.3334; border: 0;
}
.site-footer .footer-inner > p { margin: 0 auto 0 0; }
.site-footer .footer-links { display: flex; gap: 22px; }
@media (max-width: 600px) {
  .site-footer .cfx-footer-links { display: flex; gap: 0 22px; }
  .site-footer .cfx-footer-nav .cfx-footer-links a { font-size: 12px; }
}

/* ---------- Scroll reveal: fade + 24px rise, critically damped feel ---------- */
.a-reveal { opacity: 1; transform: none; }
.a-js .a-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--a-ease), transform .9s var(--a-ease); }
.a-js .a-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .a-js .a-reveal { transform: none; transition: opacity .3s ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-nav#siteNav { background: #fbfbfd; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =========================================================================
   Interior pages: Work index and case studies, reshaped on Apple's product
   page pattern. Centred hero copy on black, the artwork below it as one
   large rounded image, feature cards on white, a centred sign-off.
   ========================================================================= */
.work-page .work-page-hero {
  display: flex; flex-direction: column; align-items: center;
  min-height: 0; padding: 72px 0 0; overflow: hidden;
  background: #000; color: #f5f5f7; text-align: center;
}
.work-page .work-page-hero::before, .work-page .work-page-hero::after { display: none !important; }
.work-page .work-page-hero-layout {
  order: 1; position: relative; width: var(--a-content); max-width: none; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.work-page .work-page-hero-copy { width: 100%; max-width: none; margin: 0; }
.work-page .work-page-hero .section-label { color: #f5f5f7; margin: 0 0 12px; }
.work-page .work-page-hero h1 { margin: 0 auto; max-width: 11em; width: auto; color: #f5f5f7; }
.work-page .work-page-hero h1 span { display: inline; }
.work-page .work-hero-foot {
  display: block; margin: 18px auto 0; padding: 0; border: 0; max-width: 30ch; text-align: center;
}
.work-page .work-hero-foot > p:first-child {
  margin: 0; font-family: var(--a-font-display); font-size: var(--a-subhead-size); line-height: var(--a-subhead-lh); letter-spacing: var(--a-subhead-ls); color: #f5f5f7; max-width: none;
}
.work-page .work-hero-foot .micro-label { margin: 14px 0 0; color: var(--a-ink-3); font-weight: 400; }
.work-page .work-page-hero .case-back { display: inline-flex; margin: 0 0 18px; color: var(--a-link-dark); font-size: 14px; text-decoration: none; }
.work-page .work-hero-portrait {
  order: 2; position: relative; inset: auto; top: auto; right: auto; left: auto; bottom: auto;
  width: min(var(--a-content-wide), calc(100% - 24px)); height: auto; max-width: none; aspect-ratio: 2 / 1;
  margin: 56px auto 12px; border-radius: var(--a-radius-lg); overflow: hidden;
  transform: none !important; clip-path: none !important; background: var(--a-bg-dark-alt); box-shadow: none;
}
.work-page .work-hero-portrait::before, .work-page .work-hero-portrait::after { display: none !important; }
.work-page .work-hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; border-radius: 0; transform: none !important; filter: none; mask: none; -webkit-mask: none; }

/* Scope chips continue the black hero. */
.work-page .case-scope-strip { background: #000; color: #f5f5f7; padding: 20px 0 64px; text-align: center; border: 0; }
.work-page .case-scope-strip .page-shell { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.work-page .case-scope-strip .micro-label { color: var(--a-ink-3); font-weight: 400; }
.work-page .case-scope { justify-content: center; }
.work-page .case-scope li { border-radius: 980px; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); color: #f5f5f7; font-size: 14px; letter-spacing: -.016em; text-transform: none; }

/* Case body: centred section head, then 2-up feature cards. */
.work-page :is(.case-study-body, .case-study-support, .case-ending-wrap) { background: var(--a-bg); color: var(--a-ink); }
.work-page .case-study-body { padding: 110px 0 60px; }
.work-page .capabilities-intro {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  grid-template-columns: none; width: var(--a-content); max-width: none; margin: 0 auto 64px;
}
.work-page .capabilities-intro .section-label { color: var(--a-ink-2); }
.work-page .capabilities-intro .lead { max-width: 34ch; margin: 0; }
.work-page .capability-list.case-study-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  width: min(var(--a-content-wide), calc(100% - 2 * var(--a-gutter))); margin: 0 auto; border: 0;
}
.work-page .capability.case-study-panel {
  display: flex; flex-direction: column; gap: 14px; min-height: 280px;
  padding: 40px; border: 0; border-radius: var(--a-radius-lg); background: var(--a-bg-alt); color: var(--a-ink);
}
.work-page .capability.case-study-panel::before, .work-page .capability.case-study-panel::after { display: none; }
.work-page .case-study-panel .capability-number {
  font-size: var(--a-small-size); line-height: var(--a-small-lh); letter-spacing: var(--a-small-ls);
  font-weight: 600; color: var(--a-blue); width: auto;
}
.work-page .case-study-panel h3 {
  margin: 0; font-size: var(--a-card-size); line-height: 1.1429; letter-spacing: .007em; font-weight: 600;
  text-transform: none; font-stretch: 100%; color: inherit;
}
.work-page .case-study-panel ul { margin: auto 0 0; padding: 0; list-style: none; }
.work-page .case-study-panel li { padding: 0; color: var(--a-ink-2); font-size: var(--a-body-size); line-height: var(--a-body-lh); }
.work-page .case-study-panel li::before { display: none; }
.work-page .case-study-panel--result { background: #000; color: #f5f5f7; }
.work-page .case-study-panel--result li { color: #f5f5f7; }
.work-page .case-study-panel--result .capability-number { color: var(--a-link-dark); }

/* Supporting media: rounded, generous, centred headings. */
.work-page .case-study-support { padding: 60px 0 100px; }
.work-page .case-study-support .section-heading-row {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; margin: 0 auto 48px;
}
.work-page .case-study-support .section-heading-row .section-label { color: var(--a-ink-2); }
.work-page :is(.case-carousel-media, .case-gallery-static-slide figure > div, .case-gallery-static img, .case-media, .case-film) { border-radius: var(--a-radius); overflow: hidden; }
.work-page .case-gallery-static-slide figcaption { font-size: var(--a-small-size); color: var(--a-ink-2); letter-spacing: var(--a-small-ls); }
.work-page .case-gallery-static-slide figcaption span { color: var(--a-ink); font-weight: 600; margin-right: 8px; }
.work-page .case-credits { background: transparent; padding: 56px 0 0; margin-top: 72px; border-top: 1px solid var(--a-rule); }
.work-page .case-credits .micro-label { color: var(--a-ink); }
.work-page .case-credits-copy p { font-size: var(--a-body-size); line-height: var(--a-body-lh); color: var(--a-ink-2); }
.work-page .case-credits-copy strong { color: var(--a-ink); font-weight: 600; }
.work-page .case-credits-copy a { color: var(--a-link); text-decoration: none; }

/* Case sign-off: centred, Apple "Which one is right for you" energy. */
.work-page .case-ending-wrap { padding: 20px 0 110px; }
.work-page .case-ending { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 72px 0 0; border-top: 1px solid var(--a-rule); }
.work-page .case-role-line { font-family: var(--a-font-display); font-size: var(--a-intro-size); line-height: var(--a-intro-lh); color: var(--a-ink); }
.work-page .case-role-line span { color: var(--a-ink-2); }
.work-page .case-ending-actions { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 24px; }
.work-page .case-next-project { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--a-ink); text-decoration: none; }
.work-page .case-ending-label { font-size: var(--a-small-size); font-weight: 600; letter-spacing: var(--a-small-ls); text-transform: none; color: var(--a-ink-2); }
.work-page .case-ending-title { font-family: var(--a-font-display); font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls); font-weight: 600; text-transform: none; }
.work-page .case-next-project:hover .case-ending-title { color: var(--a-link); }
.work-page .case-brief { min-height: 0; padding: 11px 21px; border-radius: 980px; background: var(--a-blue); color: #fff; font-size: 17px; letter-spacing: -.022em; text-transform: none; }
.work-page .case-brief:hover { background: var(--a-blue-hover); }
.work-page .case-browse { font-size: 14px; color: var(--a-link); }

/* Work index: Apple store-style product cards. */
.work-page #archive { background: var(--a-bg); padding-top: 100px; }
.work-page .project-image { border-radius: var(--a-radius-lg); background: var(--a-bg-alt); }
.work-page .project-image img { transition: transform .8s var(--a-ease); }
.work-page .project-open:hover .project-image img { transform: scale(1.03); }
.work-page :is(.project-index, .project-film, .project-view) { background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); text-transform: none; letter-spacing: -.01em; font-size: 12px; border: 0; }
.work-page .project-meta { margin-top: 18px; text-transform: none; font-size: var(--a-micro-size); letter-spacing: var(--a-micro-ls); color: var(--a-ink-2); font-weight: 600; }
.work-page .project-title {
  margin-top: 6px; font-family: var(--a-font-display); font-size: var(--a-card-size); line-height: 1.1429; letter-spacing: .007em;
  font-weight: 600; text-transform: none; font-stretch: 100%;
}
.work-page .project-summary { margin-top: 6px; font-size: var(--a-body-size); line-height: var(--a-body-lh); letter-spacing: var(--a-body-ls); color: var(--a-ink-2); }
.work-page .filter-button { text-transform: none; font-size: 14px; letter-spacing: -.016em; border-radius: 980px; padding: 8px 16px; background: var(--a-bg-alt); color: var(--a-ink); border: 0; }
.work-page .filter-button:is([aria-pressed="true"], .is-active, [aria-selected="true"]) { background: var(--a-ink); color: #fff; }
.work-page :is(.collection-heading, .archive-heading) h2 { text-transform: none; }

@media (max-width: 734px) {
  .work-page .work-page-hero { padding-top: 48px; }
  .work-page .work-hero-portrait { aspect-ratio: 4 / 5; margin-top: 40px; }
  .work-page .capability-list.case-study-grid { grid-template-columns: 1fr; gap: 16px; }
  .work-page .capability.case-study-panel { min-height: 0; padding: 28px 24px; }
  .work-page .case-study-body { padding-top: 72px; }
}

/* Specificity fixes against the legacy build. */
html body :is(.section-label, .eyebrow) {
  display: block; font-family: var(--a-font-display); font-size: var(--a-eyebrow-size); line-height: var(--a-eyebrow-lh);
  letter-spacing: var(--a-eyebrow-ls); font-weight: 600; text-transform: none; font-stretch: 100%;
}
html body .work-page-hero .section-label { text-align: center; margin: 0 0 12px; padding: 0; background: none; border: 0; }
html body .work-page-hero .section-label::before, html body .work-page-hero .section-label::after { display: none; }
.work-page .work-hero-foot { max-width: none; }
.work-page .work-hero-foot > p:first-child { max-width: 22em; margin-inline: auto; }
.work-page .work-hero-foot .micro-label { padding: 0; border: 0; background: none; border-radius: 0; letter-spacing: var(--a-small-ls); text-transform: none; }
.work-page .capability.case-study-panel--result { background: #000; color: #f5f5f7; }
.site-footer .footer-inner, .site-footer .footer-inner * { text-transform: none; letter-spacing: -.01em; font-size: 12px; font-weight: 400; }
.site-nav .nav-links a.nav-cta { white-space: nowrap; }
@media (max-width: 600px) {
  .site-nav .brand-mark { font-size: 12px; }
  .site-nav .nav-links { gap: 14px; }
}
@media (max-width: 420px) {
  .site-nav .nav-links a[href$="branding/index.html"] { display: none; }
}

/* Utility pages (404, thanks): Apple's plain centred message on white. */
body.utility-page { background: var(--a-bg); color: var(--a-ink); }
.utility-page :is(.error-page, .thanks-page) {
  display: grid; place-items: center; min-height: calc(100vh - var(--a-nav) - 140px); padding: 96px var(--a-gutter);
  background: var(--a-bg); color: var(--a-ink); text-align: center;
}
.utility-page :is(.error-page, .thanks-page) > div { max-width: var(--a-content); display: flex; flex-direction: column; align-items: center; }
.utility-page .error-page strong {
  display: block; margin-bottom: 12px; color: var(--a-ink-3);
  font-family: var(--a-font-display); font-size: var(--a-eyebrow-size); line-height: var(--a-eyebrow-lh); font-weight: 600; letter-spacing: var(--a-eyebrow-ls);
}
.utility-page :is(.error-page, .thanks-page) h1 {
  margin: 0; color: var(--a-ink); text-transform: none;
  font-size: var(--a-hero-size); line-height: var(--a-hero-lh); letter-spacing: var(--a-hero-ls); font-weight: 600; font-stretch: var(--w-display);
  background: none; -webkit-text-fill-color: currentColor;
}
.utility-page :is(.error-page, .thanks-page) p {
  margin: 20px 0 0; max-width: 30em; color: var(--a-ink-2);
  font-family: var(--a-font-display); font-size: var(--a-intro-size); line-height: var(--a-intro-lh); letter-spacing: var(--a-intro-ls);
}
.utility-page .thanks-page .thanks-direct { font-size: var(--a-body-size); margin-top: 14px; }
.utility-page .thanks-page a:not(.a-button) { color: var(--a-link); text-decoration: none; }
.utility-page .thanks-page a:not(.a-button):hover { text-decoration: underline; }
.utility-page :is(.error-page, .thanks-page) .a-button { margin-top: 36px; }

/* Work index: filter, door, sign-off. */
.work-page .filter-toggle {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: 980px; background: var(--a-bg-alt); color: var(--a-ink);
  font-size: 14px; letter-spacing: -.016em; text-transform: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.work-page .filter-toggle *, .work-page .filter-current { font-size: 14px !important; letter-spacing: -.016em !important; text-transform: none !important; color: inherit; }
.work-page .filter-toggle > span:first-child { color: var(--a-ink-2); }
.work-page .section-door { text-align: center; margin: 72px auto 0; font-size: 17px; }
.work-page .section-door a { color: var(--a-link); text-decoration: none; }
.work-page .section-door a:hover { text-decoration: underline; }
.work-page .case-close {
  background: var(--a-bg-alt) !important; color: var(--a-ink) !important; padding: 110px 0 120px; text-align: center;
}
.work-page .case-close .chapter-sky { display: none; }
.work-page .case-close-grid { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.work-page .case-close .display-title { color: var(--a-ink); font-size: var(--a-hero-size); line-height: var(--a-hero-lh); letter-spacing: var(--a-hero-ls); }
.work-page .case-close .lead { margin: 18px auto 0; max-width: 26em; color: var(--a-ink); font-size: var(--a-subhead-size); line-height: var(--a-subhead-lh); }
.work-page .case-close .case-profile-links { margin-top: 16px; font-size: 14px; color: var(--a-ink-2); }
.work-page .case-close .case-profile-links a { color: var(--a-link); text-decoration: none; }

/* Small labels: never below Apple's 12px, never uppercase. */
.work-page :is(.work-card-badge, .project-film, .project-index) { text-transform: none !important; font-size: 12px !important; letter-spacing: -.01em !important; }
.work-page .case-gallery-static-slide figcaption span, .work-page .case-carousel figcaption span { font-size: 12px; }
.brand-world :is(.craft-tabs span, .craft-position, .craft-panel span) { font-size: 12px !important; letter-spacing: -.01em !important; text-transform: none !important; }

/* Work project pop-up: Apple modal sheet. */
.work-page .project-dialog { border: 0; border-radius: var(--a-radius-lg); background: var(--a-bg); color: var(--a-ink); box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.work-page .project-dialog::backdrop { background: rgba(0, 0, 0, .48); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.work-page .project-dialog .dialog-media { background: var(--a-bg-alt); }
.work-page .project-dialog .dialog-body { padding-top: 36px; }
.work-page .project-dialog :is(.dialog-kicker, h2, .case-link, .dialog-cta a, figcaption) { text-transform: none !important; letter-spacing: normal; }
.work-page .project-dialog .dialog-kicker { font-size: 14px; font-weight: 600; letter-spacing: -.016em; color: var(--a-ink-2); }
.work-page .project-dialog h2 { font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls); font-weight: 600; font-stretch: var(--w-display); }
.work-page .project-dialog .dialog-intro { font-size: var(--a-intro-size); line-height: var(--a-intro-lh); color: var(--a-ink-2); }
.work-page .project-dialog .dialog-case-panel { border-radius: var(--a-radius); background: var(--a-bg-alt); padding: 24px; border: 0; }
.work-page .project-dialog .dialog-case-panel--result { background: #000; color: #f5f5f7; }
.work-page .project-dialog .dialog-support img { border-radius: var(--a-radius); }
.work-page .project-dialog figcaption { font-size: 12px; letter-spacing: -.01em; color: var(--a-ink-2); }
.work-page .project-dialog .case-link { font-size: 17px; letter-spacing: -.022em; color: var(--a-link); text-decoration: none; }
.work-page .project-dialog .dialog-cta a {
  display: inline-flex; padding: 11px 21px; border-radius: 980px; background: var(--a-blue); color: #fff;
  font-size: 17px; letter-spacing: -.022em; text-decoration: none;
}
.work-page .project-dialog .dialog-close { background: rgba(0, 0, 0, .06); color: var(--a-ink); border: 0; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.work-page .project-dialog .dialog-case-panel :is(h3, h4, p:first-child, span:first-child) { text-transform: none !important; letter-spacing: -.016em !important; }
.work-page .project-dialog .dialog-case-panel h3 { font-size: 17px; font-weight: 600; color: var(--a-ink); }
.work-page .project-dialog .dialog-case-panel--result, .work-page .project-dialog .dialog-case-panel--result * { color: #f5f5f7 !important; }

/* Work hero: memorial dedication set as live text over the photograph.
   Always landscape; the words sit centred in the left half, clear of her face,
   and scale with the image width (container query units). */
.work-page .work-hero-portrait:has(.work-hero-memoriam) { aspect-ratio: 2.35 / 1; container-type: inline-size; }
.work-page .work-hero-portrait:has(.work-hero-memoriam) img { object-position: 50% 30%; }
.work-page .work-hero-portrait:has(.work-hero-memoriam)::after {
  content: ""; display: block !important; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,0) 62%);
}
.work-hero-memoriam {
  position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 60%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center; text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.work-hero-memoriam .memoriam-lead { font-family: var(--a-font-display); font-size: max(12px, 2.35cqw); line-height: 1.2; font-weight: 500; letter-spacing: -.005em; }
.work-hero-memoriam .memoriam-name {
  margin-top: .3em; font-family: "Sacramento", "Snell Roundhand", "Brush Script MT", cursive;
  font-size: max(34px, 7.4cqw); line-height: 1; font-weight: 400; letter-spacing: 0;
}
.work-hero-memoriam .memoriam-years { font-family: var(--a-font-text); font-size: max(11px, 1.65cqw); line-height: 1.2; letter-spacing: .01em; }
.work-hero-memoriam .memoriam-quote { margin-top: 1.4em; font-family: var(--a-font-display); font-size: max(12px, 2.05cqw); line-height: 1.2; font-weight: 400; }
@media (max-width: 1068px) {
  .work-page .work-hero-portrait:has(.work-hero-memoriam) { aspect-ratio: 16 / 9; }
}
@media (max-width: 734px) {
  .work-page .work-hero-portrait:has(.work-hero-memoriam) { aspect-ratio: 4 / 3; }
  .work-page .work-hero-portrait:has(.work-hero-memoriam) img { object-position: 62% 30%; }
  .work-hero-memoriam { width: 58%; }
  .work-hero-memoriam .memoriam-name { font-size: max(30px, 8.4cqw); }
  .work-hero-memoriam .memoriam-lead { font-size: max(12px, 3cqw); }
  .work-hero-memoriam .memoriam-quote { font-size: max(12px, 2.8cqw); }
}
.work-page .work-hero-portrait:has(.work-hero-memoriam) img { filter: grayscale(1) contrast(1.05) !important; }
.work-hero-memoriam .memoriam-button { margin-top: max(14px, 2.2cqw); padding: max(8px, .8cqw) max(16px, 1.6cqw); font-size: max(14px, 1.35cqw); text-shadow: none; }
/* Soft blurred pool behind the dedication: a blurred copy of the photograph,
   masked to the text area and feathered, so the leaves under the words go soft. */
.work-page .work-hero-portrait:has(.work-hero-memoriam) img.memoriam-blur {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%; border-radius: 0;
  filter: grayscale(1) contrast(1.05) blur(8px) brightness(.86) !important; transform: scale(1.03) !important;
  -webkit-mask: radial-gradient(ellipse 34% 46% at 30% 50%, #000 55%, transparent 100%);
          mask: radial-gradient(ellipse 34% 46% at 30% 50%, #000 55%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 734px) {
  .work-page .work-hero-portrait:has(.work-hero-memoriam) img.memoriam-blur { object-position: 62% 30%; }
}
/* Hovering or focusing "About Bonolo" brings the photograph back to colour. */
.work-page .work-hero-portrait:has(.work-hero-memoriam) img { transition: filter .7s var(--a-ease); }
.work-page .work-hero-portrait:has(.memoriam-button:is(:hover, :focus-visible)) img:not(.memoriam-blur) { filter: none !important; }
.work-page .work-hero-portrait:has(.memoriam-button:is(:hover, :focus-visible)) img.memoriam-blur { filter: blur(8px) brightness(.86) !important; }
@media (prefers-reduced-motion: reduce) {
  .work-page .work-hero-portrait:has(.work-hero-memoriam) img { transition: none; }
}
/* The black hero ends at the middle of the dedication photo; the page below is white. */
.work-page .work-page-hero:has(.work-hero-memoriam) {
  --memo-ar: 2.35; --memo-w: min(var(--a-content-wide), calc(100vw - 24px));
  --memo-cut: calc(var(--memo-w) / var(--memo-ar) / 2 + 12px);
  background: linear-gradient(to bottom, #000 calc(100% - var(--memo-cut)), var(--a-bg) 0) !important;
}
@media (max-width: 1068px) { .work-page .work-page-hero:has(.work-hero-memoriam) { --memo-ar: 1.7778; } }
@media (max-width: 734px) { .work-page .work-page-hero:has(.work-hero-memoriam) { --memo-ar: 1.3333; } }
/* Retire the legacy hero hover (drop shadow and shift): it painted a grey band on the white page. */
.work-page .work-page-hero:hover .work-hero-portrait,
.work-page .work-page-hero .work-hero-portrait { box-shadow: none !important; transform: none !important; }
.work-page .work-page-hero:hover::after { transform: none !important; filter: none !important; }
/* Wide displays: the dedication photo takes two thirds of the page width, centred. */
@media (min-width: 1069px) {
  .work-page .work-hero-portrait:has(.work-hero-memoriam) { width: calc(100vw * 2 / 3); margin-inline: auto; }
  .work-page .work-page-hero:has(.work-hero-memoriam) { --memo-w: calc(100vw * 2 / 3); }
}

/* House rule: no stroked shapes. Shapes read through shade and subtle colour, never outlines. */
.button--ghost { border-color: transparent; background: rgba(41, 68, 255, .08); color: var(--a-link); }
.button--ghost:hover { background: rgba(41, 68, 255, .14); color: var(--a-link); }
.work-page .case-scope li { border: 0 !important; background: rgba(255, 255, 255, .1); }
.work-page .project-dialog .dialog-close { box-shadow: none; }
/* Smallest phones (≤360px): keep the top bar inside the screen. */
@media (max-width: 360px) {
  .site-nav .nav-inner { width: calc(100% - 24px); gap: 8px; }
  .site-nav .brand-mark { font-size: 11px; }
  .site-nav .nav-links { gap: 10px; }
  .site-nav .nav-links a.nav-cta { padding: 5px 10px; }
}
@media (max-width: 360px) {
  html body .site-nav .brand-mark { font-size: 11px !important; letter-spacing: 0; }
  html body .site-nav .nav-links a.nav-cta { font-size: 12px; padding: 5px 10px; }
}

/* Work archive intro: centred, and never wider than Bonolo's memorial card above it
   (same width rules as the card: two thirds of the page on wide screens). */
.work-page .archive-section .filter-control,
.work-page .archive-section .archive-credit-note {
  width: min(var(--a-content-wide), calc(100% - 24px)); max-width: 100%;
  margin-left: auto; margin-right: auto; text-align: center;
}
@media (min-width: 1069px) {
  .work-page .archive-section .filter-control,
  .work-page .archive-section .archive-credit-note { width: calc(100vw * 2 / 3); }
}
.work-page .archive-section .filter-control { display: flex; flex-direction: column; align-items: center; }
.work-page .archive-section .filter-bar { justify-content: center; }
.work-page .archive-section .archive-credit-note { margin-top: 18px; text-wrap: balance; }
.work-page .archive-section .page-shell { max-width: none; }

/* Filter head: "Filter Work" opens the options; "Reset" returns to all work. */
.work-page .filter-head { display: inline-flex; align-items: center; gap: 8px; }
.work-page .filter-head .filter-toggle { min-height: 36px; padding: 0 18px; font-weight: 600; }
.work-page .filter-head .filter-toggle > span:first-child { color: var(--a-ink); }
.work-page .filter-reset {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: 980px; background: transparent; color: var(--a-link);
  font: inherit; font-size: 14px; letter-spacing: -.016em; cursor: pointer; transition: background .2s var(--a-ease), color .2s;
}
.work-page .filter-reset:hover { background: rgba(41, 68, 255, .08); }
.work-page .filter-reset[aria-pressed="true"] { color: var(--a-ink-3); cursor: default; }
.work-page .filter-reset[aria-pressed="true"]:hover { background: transparent; }
.work-page .filter-reset:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(41, 68, 255, .35); }
.work-page .archive-credit-note strong { font-weight: 600; color: var(--a-ink); }

/* Filter options: a centred, wrapping row of tinted chips (no dark bar, nothing clipped). */
html body.work-page .archive-section .filter-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0;
  max-width: 100%; overflow: visible; background: none !important; border: 0; border-radius: 0; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask: none; mask: none;
}
html body.work-page .archive-section .filter-bar[hidden] { display: none; }
html body.work-page .archive-section .filter-bar::before, html body.work-page .archive-section .filter-bar::after { display: none !important; }
html body.work-page .archive-section .filter-button {
  flex: none; min-height: 36px; padding: 0 16px; border: 0 !important; border-radius: 980px; box-shadow: none !important;
  background: var(--a-bg-alt) !important; color: var(--a-ink) !important; font-size: 14px; letter-spacing: -.016em; text-transform: none;
}
html body.work-page .archive-section .filter-button:hover { background: #e8e8ed !important; }
html body.work-page .archive-section .filter-button[aria-pressed="true"] { background: var(--a-ink) !important; color: #fff !important; font-weight: 600; }
html body.work-page .archive-section .filter-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(41, 68, 255, .35) !important; }

/* Reset lives inside the filter pill and only appears when a filter is active. */
html body.work-page .filter-head {
  display: inline-flex; align-items: center; gap: 0; padding: 0 4px; min-height: 36px;
  border-radius: 980px; background: var(--a-bg-alt); transition: background .2s var(--a-ease);
}
html body.work-page .filter-head:hover { background: #ececf0; }
html body.work-page .filter-head .filter-toggle { background: transparent !important; padding: 0 14px; }
html body.work-page .filter-head .filter-reset { min-height: 28px; padding: 0 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); color: var(--a-link); }
html body.work-page .filter-head .filter-reset:hover { background: #fff; color: var(--a-blue-hover); }
html body.work-page .filter-head .filter-reset[aria-pressed="true"] { display: none; }
html body.work-page .filter-head { width: max-content !important; max-width: 100%; flex: none; }
html body.work-page .filter-head .filter-toggle { display: inline-flex !important; width: auto !important; min-width: 0 !important; grid-template-columns: none; }
/* Small phones, every page: keep logo, Work and the CTA; the Branding link lives in the footer. */
@media (max-width: 420px) {
  .site-nav .nav-links a:not(.nav-cta):is([href*="branding"], [href*="services"]), .site-nav .nav-links a:not(.nav-cta)[href="index.html"][aria-current] { display: none; }
}

/* ---------- One measure, site-wide ----------
   Every page's copy, headlines and containers share the nav's width, so the site keeps a
   uniform margin either side on every screen. Full-bleed colour bands can still run edge to edge. */
:root { --a-measure: min(var(--a-content-wide), calc(100vw - 44px)); }
.work-page .page-shell, .work-page .archive-section .page-shell { width: var(--a-measure) !important; max-width: none !important; margin-inline: auto; padding-inline: 0; }
.work-page .work-hero-portrait:has(.work-hero-memoriam),
.work-page .archive-section :is(.filter-control, .archive-credit-note) { width: min(calc(100vw * 2 / 3), var(--a-measure)) !important; }

/* Work hero on phones: the dedication photo runs edge to edge below the black hero, taller
   than the desktop crop, with the words left-aligned in its left half and the name on one line. */
@media (max-width: 734px) {
  .work-page .work-hero-portrait:has(.work-hero-memoriam) {
    width: 100vw !important; max-width: none; margin: 40px 0 0 !important;
    aspect-ratio: 1.43 / 1; border-radius: 0 !important;
  }
  .work-page .work-hero-portrait:has(.work-hero-memoriam) img { border-radius: 0 !important; }
  .work-page .work-page-hero:has(.work-hero-memoriam) { --memo-cut: 0px; background: #000 !important; }
  .work-hero-memoriam { width: 62%; align-items: flex-start; padding-left: 13%; text-align: left; }
  .work-hero-memoriam .memoriam-lead { font-size: 13px; font-weight: 400; }
  .work-hero-memoriam .memoriam-name { margin-top: .15em; font-size: 27px; white-space: nowrap; }
  .work-hero-memoriam .memoriam-years { font-size: 13px; }
  .work-hero-memoriam .memoriam-quote { margin-top: .2em; font-size: 13px; }
  .work-hero-memoriam .memoriam-button { margin-top: 22px; }
  .work-page .work-hero-portrait:has(.work-hero-memoriam) img.memoriam-blur {
    -webkit-mask: radial-gradient(ellipse 46% 52% at 28% 50%, #000 55%, transparent 100%);
            mask: radial-gradient(ellipse 46% 52% at 28% 50%, #000 55%, transparent 100%);
  }
}

/* Work cards: titles run the full card width (the inherited 18-character cap split short
   titles over two lines), and descriptions avoid a lone word on the last line. */
.work-page .project-title { max-width: none; }
.work-page .project-summary { text-wrap: pretty; }

/* Wordmark: the full "Creative Fixer .Studio" on wide screens, "CFX" on phones and narrow windows. */
.site-nav .brand-mark .brand-short { display: none; }
@media (max-width: 734px) {
  html body .site-nav .brand-mark .brand-full { display: none; }
  html body .site-nav .brand-mark .brand-short { display: inline; font-size: 17px; letter-spacing: .02em; }
}

/* Buttons are always pills, site-wide (the inherited "liquid-surface" effect squared some). */
html body :is(.a-button, .button, .button--primary, .button--ghost, .case-brief, .memoriam-button, .nav-cta, .skip-link, a.skip) { border-radius: 980px !important; }