/* ===== Design tokens (one source of truth for values that used to be one-offs) ===== */
:root {
  /* spacing between sections */
  --space-section: var(--_layout---section--padding);          /* the standard gap (4rem → 7.5rem) */
  --space-section-half: calc(var(--_layout---section--padding) / 2);
  --space-joined: 1.5rem;                                        /* a section that flows straight into the next */
  /* corners */
  --radius-sm: 2px;                                              /* photos, cards */
  --radius-pill: 99px;                                           /* buttons, tags, pills */
  /* elevation */
  --shadow-pop: 0 .75rem 2rem #00000040;
  --shadow-md: 0 1px 2px #0000000d, 0 4px 8px -2px #00000014, 0 12px 24px -6px #00000024, 0 28px 48px -16px #0000002e;
  --shadow-lg: 0 1px 1px #0000000a, 0 2px 4px #0000000d, 0 8px 16px -4px #00000014, 0 22px 40px -12px #0000002e, 0 48px 80px -28px #00000038;
  /* type */
  --track-label: .08em;                                          /* uppercase labels */
  /* colour */
  --paper: #fbfaf7;
  --ink: #1d1d1b;
}
/* Site-level additions on top of the Webflow stylesheet. Loaded after it on every page. */

/* Titles: more generous line spacing when headings wrap (paragraphs and labels keep their original spacing) */
:root, .u-theme-dark, .u-theme-light {
  --_typography---heading-1--line-height: 1.08;
  --_typography---heading-2--line-height: 1.12;
  --_typography---heading-3--line-height: 1.12;
  --_typography---heading-4--line-height: 1.2;
}

/* Nav gradient: taller than the bar, and its color follows whatever sits behind the nav (see assets/js/site.js). */
@property --nav-l { syntax: "<color>"; inherits: true; initial-value: #91d4ff; }
@property --nav-c { syntax: "<color>"; inherits: true; initial-value: #91d4ff; }
@property --nav-r { syntax: "<color>"; inherits: true; initial-value: #91d4ff; }
.navigation { background-image: none; --nav-l: #91d4ff; --nav-c: #91d4ff; --nav-r: #91d4ff; transition: color .8s; }
.navigation::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  height: calc(100% + 4.5rem);
  background-image: linear-gradient(90deg, var(--nav-l), var(--nav-c) 50%, var(--nav-r));
  -webkit-mask-image: linear-gradient(#000 0%, #0000008c 47%, transparent); mask-image: linear-gradient(#000 0%, #0000008c 47%, transparent);
  transition: --nav-l .9s ease, --nav-c .9s ease, --nav-r .9s ease;
}
.navigation:where(.w-variant-8e092ad3-0474-1212-fe97-fd6fc297d996) { --nav-l: #ffea00; --nav-c: #ffea00; --nav-r: #ffea00; }
.navigation.is-on-dark { color: var(--_colors---all--white); }
.navigation.is-on-dark .nav_link { color: inherit; }
/* Sun mark links to the home page */
.nav_sun { pointer-events: auto; display: block; color: inherit; z-index: 11; width: 3.4rem; cursor: pointer; }


/* Nav links: on hover a line draws in from the left and, as it travels, puffs into a soft blurred shadow under the word */
.nav_link { position: relative; }
.nav_link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.15em; height: 1px; border-radius: var(--radius-sm);
  background: currentColor; transform: scaleX(0); transform-origin: right center; opacity: 1;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), filter .5s ease, height .5s ease, bottom .5s ease, opacity .5s ease;
}
.nav_link:hover::after { transform: scaleX(1); transform-origin: left center; height: 5px; bottom: -0.35em; filter: blur(3.5px); opacity: .4;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .55s ease .05s, height .55s ease .05s, bottom .55s ease .05s, opacity .55s ease .05s; }

/* Home hero headline: wraps to two lines ("Shaping vision." / "Building with purpose.") */
.hero h1 { text-wrap: initial; line-height: 1.12; }
.hero.cc-photo h1 { text-shadow: 0 2px 28px #0a0d2866, 0 1px 4px #0a0d2840; } /* gentle shade so the headline lifts off the photo */

/* Home hero: on laptop/desktop, cap the height so the logo bar sits above the fold. */
@media (min-width: 992px) {
  .hero.section { aspect-ratio: auto; height: calc(100svh - 7.25rem); min-height: 34rem; max-height: 56.25vw; }
}

/* Home intro tagline sits 15px higher than its bottom-aligned row */
.u-nudge-up { position: relative; top: -15px; }

/* Clouds hero: two copies of the About page clouds drifting at different speeds over a sky gradient. */
.hero.cc-clouds { background: linear-gradient(#8fd2ff 0%, #bfe3fb 45%, #eef6fb 100%); color: var(--_colors---all--black); }
.hero.cc-clouds .hero_sky { overflow: hidden; }
.hero.cc-clouds .hero_clouds { position: absolute; inset: -6% -10%; width: 120%; max-width: none; height: 112%; object-fit: cover; will-change: transform; }
.hero.cc-clouds .hero_clouds.cc-back { opacity: .85; animation: hero-drift-back 90s ease-in-out infinite alternate; }
.hero.cc-clouds .hero_clouds.cc-front { inset: -12% -10% -4% -42%; width: 150%; opacity: .75; mix-blend-mode: screen; transform: scaleX(-1); animation: hero-drift-front 60s ease-in-out infinite alternate; }
@keyframes hero-drift-back { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-4%, 1.5%, 0) scale(1.06); } }
@keyframes hero-drift-front { from { transform: scaleX(-1) translate3d(0,0,0) scale(1.04); } to { transform: scaleX(-1) translate3d(5%, -1%, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hero.cc-clouds .hero_clouds { animation: none; } }

/* Homepage hero photo: stage shot, cropped to keep the speaker in view, with a soft wash for the white headline */
.hero.cc-photo { color: var(--_colors---all--white); background: #0b0f2a; }
.hero.cc-photo .hero_photo { object-fit: cover; object-position: 50% 55%; }
@media (max-width: 767px) { .hero.cc-photo .hero_photo { object-position: 50% 55%; } } /* phones: the hall framed dead centre, aisle under the headline */
.hero.cc-photo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #0a0d2899 0%, #0a0d2833 38%, #0a0d2833 62%, #0a0d2880 100%); }
.hero.cc-photo .container { position: relative; z-index: 1; }
/* Homepage hero: "Let's talk" fades in after the headline (only once the page is showing) */
html:not(.is-arriving) .hero .btn { animation: hero-btn-in 1.1s cubic-bezier(.22, 1, .36, 1) .9s both; }
html.is-arriving .hero .btn { opacity: 0; }
@keyframes hero-btn-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html:not(.is-arriving) .hero .btn { animation: none; } }
/* Hero "Let's talk": on hover the white fill clears to frosted glass, so the photo shows through blurred */
.hero .btn { -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition: background-color .6s cubic-bezier(.22, 1, .36, 1), color .6s ease, backdrop-filter .6s ease, -webkit-backdrop-filter .6s ease, box-shadow .6s ease; }
.hero .btn:hover { background-color: #ffffff2e; color: #fff; -webkit-backdrop-filter: blur(6px) saturate(1.15); backdrop-filter: blur(6px) saturate(1.15); box-shadow: inset 0 0 0 1px #ffffff59; }

/* Page transition wipe: white wave rising from the bottom when leaving a page */
.page-wipe { position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 200; pointer-events: none; transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform .75s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.page-wipe_wave { position: absolute; left: 0; right: 0; top: -35px; width: 100%; height: 36px; fill: var(--_colors---all--white); display: block; }
.page-wipe_body { position: absolute; inset: 0; background: var(--_colors---all--white); }
.page-wipe.is-entering { transform: translateY(0); visibility: visible; }

.page-wipe.is-covering { transform: translateY(0); visibility: visible; transition: none; }
.page-wipe.is-leaving { transform: translateY(calc(-100% - 40px)); visibility: visible; transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.page-wipe.is-leaving .page-wipe_wave { top: auto; bottom: -35px; transform: scaleY(-1); }

/* Arriving: the new page stays hidden on white until it is ready, then the white lifts away (html class set in <head>, cleared by site.js) */
html.is-arriving { background: var(--_colors---all--white); }
html.is-arriving .page-wrapper { visibility: hidden; }

/* Playground (Home + About): full-bleed grid of photos that starts as a pile, pins, deals into the grid, then holds.
   Hovering a card (once dealt) brings it to the center, larger, above the rest. Logic in assets/js/site.js. */
.pg { padding-bottom: 0; overflow-x: clip; }
.pg_track { position: relative; width: 100%; }
.pg_sticky { position: relative; }
.pg_grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(.75rem, 1.4vw, 1.25rem); width: 100%; padding: 0 var(--_layout---columns--gutter); align-items: center; justify-items: center; }
.pg_slot { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.pg_card { margin: 0; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); background: #e9e7e2; will-change: transform; transform-origin: center; position: relative; z-index: calc(40 - var(--i));
  box-shadow: var(--shadow-lg); }
.pg_card { pointer-events: none; }
.pg_card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg_card.cc-wide { aspect-ratio: 4 / 3; }
.pg_card.cc-tall { aspect-ratio: 3 / 4; }
.pg.is-pinned .pg_sticky { position: sticky; top: var(--pg-top, 10svh); }
@media (max-width: 991px) { .pg_grid { grid-template-columns: repeat(6, 1fr); } .pg_slot:nth-child(n+19) { display: none; } }
@media (max-width: 767px) { .pg_grid { grid-template-columns: repeat(3, 1fr); } .pg_slot:nth-child(n+10) { display: none; } }
/* hover focus */
.pg_card { transition: opacity .5s ease, box-shadow .7s ease, filter .35s ease; }
.pg_card.is-moving { transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .5s ease, box-shadow .7s ease, filter .35s ease; }
.pg.has-focus .pg_card { opacity: .35; }
.pg.has-focus .pg_card.is-focus { opacity: 1; z-index: 100; box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { .pg_card { transform: none !important; } }

/* Text links: a thin underline at rest that puffs into the same soft shadow on hover (replaces Webflow's dotted underline) */
a:not([class]) { text-decoration: none; padding-bottom: .05em; }
a:not([class])::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; border-radius: var(--radius-sm); background: currentColor; pointer-events: none;
  transition: filter .5s ease, height .5s ease, bottom .5s ease, opacity .5s ease; }
a:not([class]):hover { text-decoration: none; }
a:not([class]):hover::after { height: 5px; bottom: -.25em; filter: blur(3.5px); opacity: .4; }

/* Footer clouds: load with the page and fade in once decoded instead of popping in */
img.footer_bg { transition: opacity 1.2s ease; }
img.footer_bg:not(.is-loaded) { opacity: 0 !important; }

/* Rough paper edge along the top of the home logo bar, same torn edge as the quote section (clip-bg). */
.logo_marquee { position: relative; z-index: 2; background: var(--background--primary); padding-top: .875rem; }
.logo_marquee::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 2.75rem; pointer-events: none;
  background: var(--background--primary);
  -webkit-mask-image: url("../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg"); mask-image: url("../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg");
  -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* light arc: a warm glow hugging the curved edge, brightest at the crest, breathing slowly */
.logo_marquee::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 2.75rem; z-index: -1; pointer-events: none; transform: translateY(-3px);
  -webkit-mask-image: url("../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg"); mask-image: url("../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg");
  -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: radial-gradient(ellipse 50% 260% at 50% 0%, #fffaf0 0%, #ffe4bce0 45%, #ffe4bc00 100%);
  animation: logo-arc 9s ease-in-out infinite;
}
.logo_marquee > .container::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1rem - 3vw); height: calc(6rem + 12vw); z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 58% 100% at 50% 100%, #fff1dcaa 0%, #ffdcb055 38%, #ffdcb000 72%);
  mix-blend-mode: screen; animation: logo-arc 9s ease-in-out infinite;
}
@keyframes logo-arc { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .logo_marquee::after, .logo_marquee > .container::before { animation: none; } }

/* Contact: live LA cams over the mirror photo, toggled with arrows (logic in assets/js/site.js). */
.livecam { overflow: hidden; }
.livecam_screen { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; background: #000; overflow: hidden; }
.livecam_screen iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1.18); border: 0; pointer-events: none; }
.livecam.is-live .livecam_screen { opacity: 1; }
.livecam_ui { position: absolute; z-index: 3; left: var(--_layout---columns--size); right: var(--_layout---columns--size); bottom: clamp(1rem, 2vw, 2rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; color: var(--_colors---all--white); opacity: 0; transition: opacity .6s; }
.livecam.is-ready .livecam_ui { opacity: 1; }
.livecam_note { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: var(--radius-pill); background: #0000004d; backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem); }
.livecam_dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--_colors---all--white); opacity: .5; }
.livecam.is-live .livecam_dot { background: #ff4d3d; opacity: 1; animation: livecam-pulse 2s ease-in-out infinite; }
@keyframes livecam-pulse { 50% { opacity: .35; } }
.livecam_src { color: inherit; opacity: .7; text-decoration: none; border-left: 1px solid #ffffff4d; padding-left: .5rem; }
.livecam_src:hover { opacity: 1; }
.livecam:not(.is-live) .livecam_src { display: none; }
.livecam_btn { appearance: none; border: 1px solid #ffffff99; color: inherit; background: #0000004d; backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem); padding: 0; }

/* Project thumbnails: canvas overlay for the hover glitch (assets/js/site.js, section 7) */
.thumb-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; z-index: 0; image-rendering: pixelated; }
.thumb-fx.is-on { display: block; }

/* Password gate modal (assets/js/site.js, section 0) */
.gate-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.gate-modal[hidden] { display: none; }
.gate-modal_backdrop { position: absolute; inset: 0; background: #2e2e2e33; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s ease; }
.gate-modal_card { position: relative; width: min(33.6rem, 100%); background: #fff; color: var(--_colors---all--black); padding: clamp(2.4rem, 4.8vw, 3.6rem); display: flex; flex-direction: column; gap: 2.4rem;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.gate-modal.is-open .gate-modal_backdrop { opacity: 1; }
.gate-modal.is-open .gate-modal_card { opacity: 1; transform: none; }
.gate-modal_close { position: absolute; top: .9rem; right: .9rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; transition: background-color .3s, transform .6s cubic-bezier(.22, 1, .36, 1); }
.gate-modal_close:hover { transform: rotate(90deg); }
.gate-modal_error { color: #c2410c; align-self: flex-start; margin: 0; }
.gate-modal_card.is-shake { animation: gate-shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes gate-shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
html.has-gate, html.has-gate body { overflow: hidden; }

/* Links that aren't the nav: dim to 80% on hover. Nav and other links rise 2-3px with a soft shadow, slowly, like a breath in. */
a:not(.nav_link):not(.nav_sun):not(.btn):not(.totop):not(.project_link):not(.w-button) { transition: opacity .6s cubic-bezier(.22, 1, .36, 1), top .6s cubic-bezier(.22, 1, .36, 1), text-shadow .6s ease; }
a:not(.nav_link):not(.nav_sun):not(.btn):not(.totop):not(.project_link):not(.w-button):not(.footer_link):hover { opacity: .8; }
.nav_link, .footer_link, .accolade_link, .linktree-btn, a:not([class]) { position: relative; top: 0; }
.nav_link { transition: top .6s cubic-bezier(.22, 1, .36, 1), text-shadow .6s ease; }
.nav_link:hover, .linktree-btn:hover, a:not([class]):hover { top: -2.5px; }
.linktree-btn:hover { text-shadow: 0 3px 8px #00000024; }
/* Footer links stay put and just fade */
.footer_link { transition: opacity .5s cubic-bezier(.22, 1, .36, 1); }
.footer_link:hover, .footer_dd-label:focus-visible { opacity: .55; }

/* Larger, steady hover target: an invisible pad around lifting links (taller underneath, so the 2.5px lift never slips out from under the cursor) */
.nav_link::before, .footer_link::before, .linktree-btn::before, a:not([class])::before, .see-all::before {
  content: ""; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -12px; }

/* Project cards: the whole card, photo included, is the link */
.project .project_link { z-index: 3; }
.project .project_arrow { display: none; }

/* Speaking & awards: rows that are real links get a small up-right arrow */
a.accolade_link .col-lg-8 { display: flex; align-items: center; gap: .8rem; }
a.accolade_link .col-lg-8 > .eyebrow { min-width: 0; }
a.accolade_link .col-lg-8::after { content: ""; flex: none; display: inline-block; width: .6rem; height: .6rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9L9 3M4 3h5v5' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9L9 3M4 3h5v5' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Contact: a tighter intro so the live cams peek in above the fold on laptops */
.page-main > .section.contact-intro:first-child { padding-top: calc(var(--_custom---nav-height) + 2.5rem); padding-bottom: var(--space-section-half); }
.contact-intro .u-vgap-64-40 { grid-row-gap: 2rem; }
.contact-intro .u-vflex-stretch-top > .u-align-center { margin-top: -1.25rem; } /* "Book a call" sits close under the heading */
.contact-intro .input.cc-textarea, .contact-intro .input-group.cc-textarea { min-height: 6.5rem; }

/* Project cards: the brand's logo replaces the brand-name label */
.project_brand { line-height: 0; margin: 0; }
.project_logo { display: block; height: 2.6rem; width: auto; margin: -.95rem 0 -.75rem; }

/* Home projects carousel: native horizontal scroll (trackpad, touch, drag), bleeding off the right edge */
.swiper:has(> .swiper-wrapper.cc-project) { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-padding-left: 0; cursor: grab; }
.swiper:has(> .swiper-wrapper.cc-project)::-webkit-scrollbar { display: none; }
.swiper:has(> .swiper-wrapper.cc-project).is-dragging { cursor: grabbing; scroll-snap-type: none; }
.swiper:has(> .swiper-wrapper.cc-project).is-autoscroll { scroll-snap-type: none; }
.swiper:has(> .swiper-wrapper.cc-project).is-dragging .project { pointer-events: none; }
.swiper-slide.cc-project { scroll-snap-align: start; }


/* Carousel arrow pills: the Projects copy sits under its row; arrows fade at the ends */
.col:has(> .swiper > .swiper-wrapper.cc-project) { min-width: 0; }
.testimonial_pagination.cc-top { display: flex; width: fit-content; margin: 0 0 0 auto; }
.carousel-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title arrows" "link link"; align-items: center; column-gap: 1rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.carousel-head .carousel-title { grid-area: title; margin: 0; }
.carousel-head .testimonial_pagination { grid-area: arrows; }
.carousel-head .see-all { grid-area: link; justify-self: start; margin-top: .5rem; margin-left: 3px; }
/* cards come into focus one after another: soft blur clears as they settle up into place */
.swiper.is-waiting .swiper-slide.cc-project { opacity: 0; filter: blur(14px); transform: translateY(18px) scale(.97); }
.swiper.is-in .swiper-slide.cc-project { opacity: 1; filter: blur(0); transform: none; transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), filter 1.4s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), transform 1.6s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.testimonial_controls.is-disabled { opacity: .3; pointer-events: none; }
.testimonial_controls { transition: opacity .4s ease; }

/* Homepage PLAYGROUND tag reads horizontally */
.pg.cc-hmarker .section_marker { position: static; width: auto; height: auto; flex-direction: row-reverse; justify-content: flex-end; align-items: center; overflow: visible; margin-bottom: 1.5rem; }
.pg.cc-hmarker .section_marker .eyebrow.cc-marker { writing-mode: horizontal-tb; transform: none; white-space: nowrap; }

/* Mixed typefaces: accent words in Mondwest are scaled so their x-height matches PP Neue Montreal around them
   (measured from the font files: x-height 0.5156 vs 0.4531 of the em, ratio 1.138). x-height match */
span.cc-alt.cc-alt.cc-alt { font-size: 1.138em; line-height: 1; }

/* Form fields: a single flat line instead of a box (contact form, password modal) */
.input, .input.w-input, .input.cc-textarea { border: 0; border-bottom: 1px solid var(--background--invert); border-radius: 0; background-color: transparent; padding-left: 0; padding-right: 0; box-shadow: none;
  background-image: radial-gradient(ellipse 58% 100% at 50% 100%, #00000014 0%, #0000000a 38%, transparent 72%); background-repeat: no-repeat;
  background-size: 100% 3.25rem; background-position: 50% calc(100% + 3.5rem);
  transition: border-color .3s ease, box-shadow .3s ease, padding .35s cubic-bezier(.22, 1, .36, 1), background-position .5s cubic-bezier(.22, 1, .36, 1); }
/* text sits on the left edge at rest, and eases inward when the field is hovered or being typed in */
/* a soft arc of shadow rises from the line when hovered or being typed in */
.input:hover, .input:focus { background-position: 50% 100%; padding-left: .75rem; padding-right: .75rem; }
.input:focus, .input.w-input:focus, .input:focus-visible { outline: none; border-color: transparent; border-bottom-color: currentColor; box-shadow: 0 1px 0 0 currentColor; }
.input.cc-select { background-position: calc(100% - .5rem) 50%; }
/* Submit stays disabled until something is typed */
.form .btn:disabled, .form .btn.is-disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.form .btn { transition: opacity .3s ease; }

/* "See all" under the home projects carousel: eyebrow text with the same underline that puffs on hover */
.see-all { position: relative; display: inline-block; margin-top: clamp(1.5rem, 3vw, 2.25rem); text-decoration: none; color: inherit; top: 0;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), top .6s cubic-bezier(.22, 1, .36, 1); }
.see-all::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15em; height: 1px; border-radius: var(--radius-sm); background: currentColor; pointer-events: none;
  transition: filter .5s ease, height .5s ease, bottom .5s ease, opacity .5s ease; }
.see-all:hover { top: -2.5px; opacity: .8; }
.see-all:hover::after { height: 5px; bottom: -.4em; filter: blur(3.5px); opacity: .4; }

/* Arrow control: an arrow folds away when there is nothing more to scroll that way, and the pill closes into a circle */
.testimonial_pagination.cc-top { overflow: hidden; transition: opacity .45s ease; }
.testimonial_pagination.cc-top .testimonial_controls { flex: none; overflow: hidden; transition: width .55s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
.testimonial_pagination.cc-top .testimonial_controls.is-disabled { width: 0; opacity: 0; pointer-events: none; }
.testimonial_pagination.cc-top.is-empty { opacity: 0; pointer-events: none; }

/* Home "Hey, I'm Frank" intro: roomier line spacing */
.home-intro { line-height: 1.6; }

/* Lock icon before "Private work" */
.gate-title { display: flex; align-items: center; gap: .35em; }
.gate-lock { width: .72em; height: .72em; flex: none; position: relative; top: -.03em; }

/* Header sun softens into a blur on hover */
.nav_sun svg { transition: filter .6s cubic-bezier(.22, 1, .36, 1); }
.nav_sun:hover svg { filter: blur(2.5px); }

/* Back to top button */
  .totop{position:fixed;right:clamp(1rem,.76vw + .81rem,1.5rem);bottom:clamp(1rem,.76vw + .81rem,1.5rem);width:3rem;height:3rem;z-index:90;display:flex;align-items:center;justify-content:center;color:var(--_colors---all--black);background:#fff;border:0;border-radius:50%;box-shadow:0 1px 2px #0000000d,0 4px 8px -2px #00000014,0 12px 24px -6px #00000024,0 28px 48px -16px #0000002e;text-decoration:none;opacity:0;transform:translateY(.75rem);pointer-events:none;transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1),background-color .3s,color .3s}
  .totop.is-visible{opacity:.7;transform:none;pointer-events:auto;animation:totop-breathe 6s ease-in-out 1.2s infinite}
  @keyframes totop-breathe{50%{scale:1.04}}
  .totop.is-visible:hover{opacity:1}
  .totop:hover{background:var(--background--invert);color:var(--text--invert)}
  /* the circle is a soft orb behind the arrow: it breathes and its edge drifts, slowly */
  .totop{background:transparent!important;box-shadow:none!important;isolation:isolate;animation:none!important}
  .totop::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border-radius:50%;
    box-shadow:0 1px 2px #0000000d,0 4px 8px -2px #00000014,0 12px 24px -6px #00000024,0 28px 48px -16px #0000002e;
    transition:background .5s ease;animation:totop-orb 10s ease-in-out infinite}
  .totop:hover::before{background:var(--background--invert)}
  @keyframes totop-orb{
    0%,100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%;scale:1;box-shadow:0 1px 2px #0000000d,0 4px 8px -2px #00000014,0 12px 24px -6px #00000024,0 28px 48px -16px #0000002e}
    25%{border-radius:54% 46% 52% 48%/47% 53% 47% 53%;scale:1.05}
    50%{border-radius:47% 53% 46% 54%/53% 47% 54% 46%;scale:1.08;box-shadow:0 1px 2px #0000000d,0 6px 12px -2px #00000014,0 16px 32px -6px #00000026,0 36px 60px -16px #00000033}
    75%{border-radius:52% 48% 55% 45%/48% 54% 46% 52%;scale:1.04}}
  @media (prefers-reduced-motion:reduce){.totop::before{animation:none}}
  .totop_arrow{display:block;transition:translate .5s cubic-bezier(.22,1,.36,1)}
  .totop:hover .totop_arrow{translate:0 -2px}
  .totop_text{font-family:var(--_typography---eyebrow--font);font-size:21px;font-weight:var(--_typography---eyebrow--font-weight);letter-spacing:.16em;text-transform:uppercase;fill:currentColor}
  .u-theme-dark .totop{color:var(--_colors---all--black)}
  @media (prefers-reduced-motion:reduce){.totop_ring{transform:none!important}}


/* Carousel arrows: outlined pill; one black "ink" circle flows between the arrows on hover (site.js), arrow turns white */
.testimonial_pagination.cc-top { position: relative; isolation: isolate; }
.testimonial_pagination.cc-top .testimonial_controls { position: relative; z-index: 1; transition: width .55s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, color .35s ease; }
.testimonial_pagination.cc-top .testimonial_controls:hover, .testimonial_pagination.cc-top .testimonial_controls.is-inked { color: #fff; }
.arrow-ink { position: absolute; z-index: 0; top: var(--_spacing---rems--0-5rem); bottom: var(--_spacing---rems--0-5rem); left: 0; right: 0; border-radius: var(--radius-pill); background: #000; pointer-events: none;
  opacity: 0; transform: scale(.4);
  transition-property: left, right, opacity, transform; transition-duration: .5s, .5s, .3s, .4s;
  transition-timing-function: cubic-bezier(.65, 0, .25, 1), cubic-bezier(.65, 0, .25, 1), ease, cubic-bezier(.22, 1, .36, 1);
  transition-delay: 0s, .1s, 0s, 0s; } /* moving left: the left edge leads */
.testimonial_pagination.cc-top.ink-right .arrow-ink { transition-delay: .1s, 0s, 0s, 0s; } /* moving right: the right edge leads */
.testimonial_pagination.cc-top.ink-on .arrow-ink { opacity: 1; transform: none; }
.testimonial_pagination.cc-top.ink-jump .arrow-ink { transition: none; }
@media (prefers-reduced-motion: reduce) { .arrow-ink { transition: opacity .2s ease !important; } }

/* Vertical section eyebrows a touch quieter */
.eyebrow.cc-marker { opacity: .8; }

/* About: decorative clouds and illustration sit over the bio, so let clicks and hovers pass through to its links */
.about_clouds, .about_illustration { pointer-events: none; }

/* Courses "Coming soon" modal (site.js 0b): same card as the password gate */
.soon-modal_signup:empty { display: none; }
.soon-modal_msg { margin: 0; align-self: flex-start; color: #c2410c; }
.soon-modal_msg.is-ok { color: var(--_colors---all--black); font-family: inherit; font-size: 1.125rem; letter-spacing: normal; text-transform: none; line-height: 1.5; }
.soon-modal_form.is-done .input-group, .soon-modal_form.is-done input[type=submit] { display: none; }

/* Newsletter modal: face icon above the title */
.soon-modal .gate-modal_card .soon-modal_icon { display: block; flex: none; width: clamp(4rem, 8vw, 5rem); height: auto; max-width: none; aspect-ratio: 258 / 296; object-fit: contain; margin: -.5rem 0 -.25rem -.25rem; }
.soon-modal_icon[hidden] { display: none; }

/* Footer "Design & Dev": the city links slide out beside the label on hover, keyboard focus or tap */
.footer_dd { display: inline-flex; align-items: baseline; }
.footer_dd-label { cursor: default; outline: none; }
.footer_dd-cities { display: inline-grid; grid-template-columns: 0fr; transition: grid-template-columns .55s cubic-bezier(.22, 1, .36, 1); }
.footer_dd-inner { min-width: 0; overflow: hidden; white-space: nowrap; padding: 6px 0 12px; margin: -6px 0 -12px; opacity: 0; transform: translateX(-8px); transition: opacity .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
.footer_dd:hover .footer_dd-cities, .footer_dd:focus-within .footer_dd-cities, .footer_dd.is-open .footer_dd-cities { grid-template-columns: 1fr; }
.footer_dd:hover .footer_dd-inner, .footer_dd:focus-within .footer_dd-inner, .footer_dd.is-open .footer_dd-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .footer_dd-cities, .footer_dd-inner { transition: none; } }

/* About: podcast clip in the widescreen band (replaces the speaking photo) */
.about_video { left: 0; width: 100%; object-fit: cover; object-position: 35% 40%; }

/* pg-isolate: playground cards stack inside their own section, so the fixed nav and sun always sit above them */
.pg { isolation: isolate; }

/* About: drifting cloud video behind the top of the bio, fading into the page's white at the bottom */
.about.section { position: relative; isolation: isolate; }
.about.section > *:not(.about_sky) { position: relative; z-index: 1; }
.about_sky { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: min(120svh, 70rem); object-fit: cover; object-position: 50% 60%; pointer-events: none;
  filter: brightness(1.04);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); }

/* about-band: the podcast clip band is a shorter, wider strip on larger screens */
@media (min-width: 768px) { .section.u-aspect-widescreen:has(> .about_video) { aspect-ratio: 2.4 / 1; } }

/* ---- Tablet & mobile pass ---- */
/* stacked columns get breathing room when they fall under one another on phones */
@media (max-width: 767px) { .col.xs-stack-gap { margin-top: 2rem; } }
/* when the vertical section marker hides on phones, the content beside it takes the full width */
@media (max-width: 479px) { .col.u-xs-hidden + .col.col-lg-10, .col.u-xs-hidden + .col.col-lg-11 { flex-basis: 100%; max-width: 100%; } }
/* footer: below desktop the colophon stacks and the link row wraps, centered */
@media (max-width: 991px) {
  .footer_colophon { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .5rem; text-align: center; }
  .footer_list { flex-wrap: wrap; justify-content: center; row-gap: .35rem; max-width: 100%; }
}
/* quotes over photos stay readable when the text crosses bright parts of the image */
@media (max-width: 991px) { .section[data-css="clip-bg"] blockquote { text-shadow: 0 1px 2px #0000004d, 0 2px 18px #00000073; } }

/* ---- Responsive best practices ---- */
/* keep phones from inflating text on their own; type scales only through our own clamp() sizes */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* headings break into even lines at every width; paragraphs avoid a lone word on the last line */
h1, h2, h3, h4, blockquote { text-wrap: balance; overflow-wrap: break-word; }
.hero h1 { text-wrap: initial; } /* the hero keeps its deliberate two-line break */
p, li { text-wrap: pretty; }
/* phones: award / talk / press rows wrap onto two lines instead of cutting titles off with an ellipsis */
@media (max-width: 767px) {
  .accolade_link .u-clamp-1 { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; white-space: normal; }
  .accolade_link .row { align-items: baseline; }
}
/* touch screens: hover lifts stick after a tap, so links stay put there */
@media (hover: none) {
  .nav_link:hover, .linktree-btn:hover, a:not([class]):hover { top: 0; text-shadow: none; }
}
/* touch screens: small text links get a finger-sized (about 44px tall) invisible hit area */
@media (pointer: coarse) {
  .nav_link::before, .footer_link::before, .see-all::before, a:not([class])::before { top: -14px; bottom: -14px; left: -8px; right: -8px; }
  .footer_dd-label { position: relative; }
  .footer_dd-label::before { content: ""; position: absolute; top: -14px; bottom: -14px; left: -8px; right: -8px; }
}

/* ---- Mobile menu (site.js 0c) ---- */
@media (max-width: 767px) {
  .nav_menu { position: relative; z-index: 2; cursor: pointer; padding: 10px 0 10px 16px; margin: -10px 0 -10px -16px; -webkit-tap-highlight-color: transparent; user-select: none; }
  .nav_layout > .nav_link { position: relative; z-index: 2; }
  .navigation .nav_list { display: flex; z-index: 1; flex-direction: column; justify-content: center; align-items: flex-start; gap: .25rem;
    padding: 6rem var(--_layout---columns--size, 1rem) 3rem; background-color: var(--background--primary);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .45s; }
  .navigation.is-menu-open .nav_list { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .45s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
  .navigation .nav_list .nav_link { font-size: clamp(2.5rem, 12vw, 3.5rem); line-height: 1.15; letter-spacing: -.02em; color: var(--_colors---all--black, var(--ink)); padding: .2rem 0;
    opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
  .navigation.is-menu-open .nav_list .nav_link { opacity: 1; transform: none; transition-delay: calc(.08s + var(--i, 0) * .06s); }
  .navigation .nav_list .nav_link.w--current { opacity: .45; }
  .navigation.is-menu-open .nav_list .nav_link.w--current { opacity: .45; }
  .navigation.is-menu-open, .navigation.is-menu-open .nav_link, .navigation.is-menu-open .nav_menu { color: var(--_colors---all--black, var(--ink)); }
  html.has-menu .nav_sun { color: var(--_colors---all--black, var(--ink)); z-index: 12; }
  html.has-menu, html.has-menu body { overflow: hidden; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .navigation .nav_list, .navigation .nav_list .nav_link { transition: none !important; transform: none !important; } }

/* Phones: project and course grids sit two side by side, with type and logos sized for the half-width cards */
@media (max-width: 479px) {
  .row.w-dyn-items > .col.col-lg-6.col-xs-12.w-dyn-item { flex-basis: 50%; max-width: 50%; }
  .row.u-vgap-80-40.w-dyn-items { row-gap: 2rem; }
  .row.w-dyn-items .project .u-vgap-24 { grid-row-gap: .75rem; row-gap: .75rem; }
  .row.w-dyn-items .project h4:not(.u-sr-only) { font-size: 1rem; line-height: 1.25; }
  .row.w-dyn-items .project .eyebrow { font-size: .875rem; }
  .row.w-dyn-items .project_logo { height: 2.25rem; margin: -.8rem 0 -.6rem; }
}

/* Nav: the current page's link is greyed out and not clickable, on desktop and in the mobile menu */
.nav_list .nav_link.w--current { opacity: .45; pointer-events: none; cursor: default; }

/* Mobile home: logos sit still in a 2x2 grid (Anthropic, Instagram, DoorDash, Headspace) instead of scrolling */
@media (max-width: 767px) {
  .logo_marquee .logo_row { display: block; }
  .logo_marquee .logo_col { transform: none !important; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 6.25rem; gap: 0; justify-items: center; align-items: center; width: 100%; padding: .5rem 0 .25rem; }
  .logo_marquee .logo_col ~ .logo_col { display: none; }
  /* thin grey cross between the four logos, running edge to edge */
  .logo_marquee .logo_col::before, .logo_marquee .logo_col::after { content: ""; position: absolute; pointer-events: none; }
  .logo_marquee .logo_col::before { left: 50%; top: 0; bottom: 0; width: 1px; background: #e9e6e1; }
  .logo_marquee .logo_col::after { top: calc(50% + .125rem); left: 0; right: 0; height: 1px; background: #e9e6e1; } /* inset to the page margins */
  .logo_marquee .logo_img { display: none; max-width: 84%; height: 3.3rem; width: auto; object-fit: contain; }
  .logo_marquee .logo_img[alt="Anthropic"] { display: block; order: 1; height: 2.8rem; }
  .logo_marquee .logo_img[alt="Instagram"] { display: block; order: 2; }
  .logo_marquee .logo_img[alt="DoorDash"] { display: block; order: 3; height: 2.8rem; }
  .logo_marquee .logo_img[alt="Headspace"] { display: block; order: 4; }
}

/* Mobile menu: plain links (no hover underline, glow or lift), white panel to match the page transition sheet */
@media (max-width: 767px) {
  .navigation .nav_list { background-color: var(--_colors---all--white, #fff); }
  .navigation .nav_list .nav_link::after { display: none; }
  .navigation .nav_list .nav_link:hover { top: 0; text-shadow: none; }
  /* leaving through the menu: the links fade while the panel stays as the white cover */
  /* leaving through the menu: the other links simply vanish; only the one you tapped blurs and fades away */
  .navigation.is-menu-leaving .nav_list .nav_link { opacity: 0 !important; transition: none !important; }
  .navigation.is-menu-leaving .nav_list .nav_link.is-picked { transform: translateY(-6px); filter: blur(10px); transition: opacity .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1), filter .5s ease !important; }
  .navigation.is-menu-leaving .nav_menu, .navigation.is-menu-leaving .nav_layout > .nav_link { opacity: 0; transition: opacity .35s ease; }
  html.has-menu .navigation.is-menu-leaving ~ .nav_sun, html.has-menu:has(.is-menu-leaving) .nav_sun { opacity: 0; transition: opacity .35s ease; }
}

/* Nav: name, links and Menu sit level with the centre of the sun */
.nav_layout { padding-top: .825rem; }

/* About accolades (site.js 0d): quieter titles and rows; each list folds to three entries with a "Show all" toggle */
.acc-section h3 { font-size: clamp(1.15rem, 1.4vw, 1.35rem); letter-spacing: 0; }
.acc-section .accolade_link { opacity: .72; transition: opacity .4s ease; }
.acc-section .accolade_link:hover, .acc-section .accolade_link:focus-visible { opacity: 1; }
.acc-box { overflow: hidden; transition: height .9s cubic-bezier(.45, 0, .2, 1); }
/* rows beyond the first three drift in one after another as the list opens, and fade out together as it closes */
.acc-section .accolade_link.acc-extra { opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }
.acc-box.is-open .accolade_link.acc-extra { opacity: .72; transform: none; transition: opacity .55s ease calc(.12s + var(--k, 0) * 28ms), transform .7s cubic-bezier(.22, 1, .36, 1) calc(.12s + var(--k, 0) * 28ms); }
.acc-box.is-open .accolade_link.acc-extra:hover { opacity: 1; transition-delay: 0s; }
.acc-toggle { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; margin-top: -.25rem; padding: .5rem 0; background: none; border: 0; color: inherit; cursor: pointer; opacity: .55; transition: opacity .3s ease; }
.acc-section ul { margin-bottom: 0; }
.acc-toggle:hover, .acc-toggle:focus-visible { opacity: 1; }
/* plus / minus drawn like the up-right arrow on the rows: 12px grid, 1.2 stroke */
.acc-toggle_icon { width: .6rem; height: .6rem; position: relative; top: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.5v7M2.5 6h7' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.5v7M2.5 6h7' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.acc-toggle[aria-expanded="true"] .acc-toggle_icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .acc-box, .acc-section .accolade_link.acc-extra { transition: none !important; } }

/* Phones: the nav and sun slide up out of view while scrolling down, and back on scrolling up (site.js section 3) */
@media (max-width: 767px) {
  /* coming back: quicker and eased out; leaving: a slow, soft glide with a fade */
  .navigation, .nav_sun { transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, color .8s; }
  html.nav-hidden .navigation, html.nav-hidden .nav_sun { opacity: 0; transition: transform .9s cubic-bezier(.45, 0, .25, 1), opacity .7s ease .1s, color .8s; }
  html.nav-hidden .navigation { transform: translateY(calc(-100% - 2rem)); }
  html.nav-hidden .nav_sun { transform: translate(-50%, calc(-100% - 2.5rem)); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .navigation, .nav_sun { transition: none; } }

/* Spacing: phones and tablets tighter, desktop unchanged. Section padding (and the big gaps that use it) runs
   44px at 390 -> ~72px at 768 -> 120px from 1440, instead of 64 -> 84 -> 120 */
:root { --_layout---section--padding: clamp(2.75rem, 7.24vw + 1rem, 7.5rem); }

/* Touch: no blue tap flash on links and buttons; every link has its own pressed/hover treatment */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Phones: a shorter footer. The ray drawing is 1.1x the screen (was 2x), logo a bit narrower and the footer no longer fills a whole screen */
@media (max-width: 767px) {
  .footer { min-height: 0; }
  .footer_sun { width: 112%; margin-left: -6%; margin-right: -6%; }
  .footer_center-time { height: 250px; transform: scale(.84); } /* the clock's stacked labels keep their spacing inside the smaller ring */
  .footer_logo { width: 78%; }
}

/* Footer, pared back: no ray sun, LA time / dusk clock, coordinates or copyright; just the logo, links and email */
.footer .footer_center { display: none; }
.footer { min-height: 0; padding-top: clamp(4.5rem, 9vw, 9rem); }
.footer .footer_logo { margin-top: 0; }
.footer_colophon > div:first-child { visibility: hidden; } /* copyright: keeps its grid slot on desktop so the links stay centred */
@media (max-width: 991px) { .footer_colophon > div:first-child { display: none; } }

/* Phones: the hero's own centred crop (hero-loop-m / hero-stage-m) fills the frame as-is */
@media (max-width: 767px) { .hero.cc-photo .hero_photo { object-position: 50% 50%; } }
/* Phones: "Coming soon" sits snug above the course title */
@media (max-width: 767px) { .project .u-vflex-left-top.u-vgap-12 { grid-row-gap: .3rem; row-gap: .3rem; } }

/* Project cards: the brand logo sits snug above its description at every size (same treatment as Coming soon on courses) */
.project .project_brand + h4 { margin-top: -.3rem; }
@media (max-width: 767px) { .project .project_brand + h4 { margin-top: 0; } }
@media (max-width: 479px) { .row.w-dyn-items .project .project_brand + h4 { margin-top: .2rem; } }

/* Homepage hero: the content can never be wider than the screen. Safari can size a flex column to the headline's
   one-line width, which pushed the headline and button off to the right on iPhones; the column and headline are
   pinned to the container width so the headline wraps inside it and stays centred. */
.hero .container > .row { flex-wrap: wrap; }
.hero .container > .row > .col { min-width: 0; }
.hero .u-vflex-center-top { width: 100%; min-width: 0; }
.hero h1 { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 767px) { .hero .container > .row > .col { flex: 0 0 100%; max-width: 100%; } }

/* Mobile menu: the close control is the same thin X as the modals */
/* the word "Menu" and the X share one spot and cross-fade */
.nav_menu_label { display: grid; align-items: center; justify-items: end; }
.nav_menu_label > * { grid-area: 1 / 1; }
.nav_menu_word { transition: opacity .35s ease, filter .35s ease; }
.nav_menu_x { display: block; flex: none; width: 2.1rem; height: 2.1rem; max-width: none; margin: -.45rem -.45rem; opacity: 0; transform: rotate(-60deg) scale(.6); pointer-events: none;
  transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.navigation.is-menu-open .nav_menu_word { opacity: 0; filter: blur(4px); }
.navigation.is-menu-open .nav_menu_x { opacity: 1; transform: none; transition-delay: .08s; }
/* Phones: the Ram Dass quote section is left out */
@media (max-width: 767px) { .section.quote-ramdass { display: none; } }

/* ---- Contact Easter egg: the sun stamp and the Snail mail Q&A letter (site.js 0e) ---- */
.contact-intro > .container { position: relative; }
.snail-trigger { position: absolute; z-index: 2; top: -.5rem; right: clamp(0rem, 9vw, 9rem); padding: 6px; background: none; border: 0; cursor: pointer;
  opacity: .32; transform: rotate(9deg); transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); -webkit-tap-highlight-color: transparent; }
.snail-trigger:hover, .snail-trigger:focus-visible { opacity: 1; transform: rotate(-3deg) scale(1.08); }
.snail-trigger.is-found { opacity: .9; transform: rotate(-6deg) scale(.96); }
@media (max-width: 767px) { .snail-trigger { top: -3.1rem; right: -.25rem; } }
/* postage stamp: paper with perforated edges around a framed face */
.stamp { --paper: #fbf6ea; --hole: 3px; display: inline-block; padding: 5px; width: 3.4rem;
  background: radial-gradient(circle, transparent var(--hole), var(--paper) calc(var(--hole) + .5px)) -5px -5px / 10px 10px; filter: drop-shadow(0 1px 1.5px #0000002e); }
.stamp_face { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .35rem .3rem .3rem; background: var(--paper); outline: 1px solid #c9b88f; outline-offset: -3px; color: #b25a2a; }
.stamp_sun { display: block; width: 1.9rem; }
.stamp_sun svg { display: block; width: 100%; height: auto; color: #b25a2a; }
.stamp_value { font-size: .5rem; letter-spacing: var(--track-label); line-height: 1; white-space: nowrap; font-family: var(--_typography---font-families--secondary, monospace); }
/* the letter opens as a modal: same backdrop and close as the other modals, the card is the lined letter */
.snail-modal .snail_letter { position: relative; width: min(34rem, 100%); max-height: calc(100svh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: clamp(2.25rem, 5vw, 3rem) clamp(1.5rem, 4.5vw, 2.75rem) clamp(1.5rem, 4vw, 2.25rem); background-color: #fbf6ea; color: #2e2a24; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  --row: 1.75rem; --rule-y: 0px;
  background-image: linear-gradient(180deg, transparent calc(var(--row) - 1px), #e4d8bd 0); background-size: 100% var(--row); background-position: 0 var(--rule-y); background-attachment: local;
  opacity: 0; transform: translateY(36px) rotate(-3deg) scale(.97); transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .45s ease; outline: none; }
.snail-modal.is-open .snail_letter { opacity: 1; transform: rotate(-.6deg); }
.snail-modal .gate-modal_close { color: #2e2a24; top: .5rem; right: .5rem; }
.snail_eyebrow { margin: 0 0 .75rem; color: #b25a2a; }
.snail_title { margin: 0 0 .75rem; }
.snail_letter p { margin: 0 0 1rem; }
.snail_steps { margin: 0 0 1.5rem; padding-left: 1.2rem; }
.snail_steps li { margin-bottom: .35rem; }
.snail_envelope { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; margin: 0 0 1.25rem; padding: 1.25rem 1.25rem 1.5rem; background: #f1e6cf; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px #e2d3b2; }
.snail_envelope .stamp { grid-column: 2; grid-row: 1; transform: rotate(3deg); }
.snail_postmark { grid-column: 1; grid-row: 1; width: 7rem; color: #7b5a3c; opacity: .55; transform: rotate(-8deg); margin: .2rem 0 0 auto; }
.snail_address { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .15rem; font-style: normal; padding-left: 30%; font-family: var(--_typography---font-families--secondary, serif); font-size: 1.15rem; line-height: 1.35; }
.snail_address-todo { opacity: .55; }
.snail_ig { margin: 0; }
@media (max-width: 479px) { .snail_address { padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .snail-modal .snail_letter, .snail-trigger { transition: none; } }
.contact-intro .snail { display: none; } /* the letter lives in the modal; this inline copy only exists until site.js moves it */

/* Snail mail Q&A is parked until there is a mailing address: delete this line to bring the stamp back */
.snail-trigger { display: none !important; }

/* ruled letter: one line height for all running text so every line sits on a rule (site.js snaps block starts) */
.snail-modal .snail_letter > p, .snail-modal .snail_letter li, .snail-modal .snail_eyebrow { line-height: var(--row); }
.snail-modal .snail_letter > p { margin: 0 0 var(--row); }
.snail-modal .snail_letter > p:last-child { margin-bottom: 0; }
.snail-modal .snail_steps { margin: 0 0 var(--row); }
.snail-modal .snail_steps li { margin: 0; }
.snail-modal .snail_eyebrow { margin: 0; }
.snail-modal .snail_title { line-height: calc(var(--row) * 1.5); margin: 0 0 calc(var(--row) * .5); }
.snail-modal .snail_envelope { margin-bottom: var(--row); }

/* Homepage carousels: exactly three cards on screen at every size (card width set in site.js); phones get smaller type to suit */
@media (max-width: 767px) {
  .swiper-slide.cc-project .project .u-vgap-24 { grid-row-gap: .55rem; row-gap: .55rem; }
  .swiper-slide.cc-project .project h4:not(.u-sr-only) { font-size: .9rem; line-height: 1.25; }
  .swiper-slide.cc-project .project_logo { height: 1.85rem; margin: -.6rem 0 -.5rem; }
  .swiper-slide.cc-project .project .project_brand + h4 { margin-top: 0; }
}

/* Homepage "Take a pause": the rock photo is framed on the peak, the two people and the sky */
/* more sky: the photo sits narrower on the left and fades into a sky gradient sampled from its own right edge */
.section[data-svg="breath"] { background: linear-gradient(180deg, #488790 0%, #54939d 22%, #5fa2aa 42%, #6cb0b6 62%, #7dbfc4 82%, #8ac6c9 100%); }
.pause-photo { left: 0; right: auto; width: 74%; object-fit: cover; object-position: 50% 8%;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, #000 72%, transparent 100%); }
@media (max-width: 767px) { .pause-photo { width: 80%; object-position: 50% 4%; } }

/* Phones: the homepage "Work for brands people love" line is left out */
@media (max-width: 767px) { p.u-nudge-up { display: none; } }

/* Footer: the slashes between links get breathing room either side */
.footer_list-item:not(:last-child)::after { margin: 0 .55em; }

/* Homepage hero, centred for good: the headline column is plain block layout (no flex sizing for Safari to stretch),
   centred in the container, with the headline and button centred inside it */
.hero .container > .row { display: block; margin-left: 0; margin-right: 0; }
.hero .container > .row > .col { display: block; width: 100%; max-width: 100%; margin: 0 auto; padding-left: 0; padding-right: 0; }
.hero .u-vflex-center-top { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.hero h1 { text-align: center; margin-left: auto; margin-right: auto; }

/* ---- Phones ---- */
/* Carousel arrows about 10% smaller, outline circle included: the whole control scales from its right edge */
@media (max-width: 767px) { .testimonial_pagination.cc-top { transform: scale(.9); transform-origin: 100% 50%; } }

/* Phones: no 16:9 ratio on the homepage hero. With a height set as well, iPhone Safari sized the hero from its height
   (about 680px wide on a 390px screen), which pushed the headline and button off to the right. */
@media (max-width: 767px) { .hero.section { aspect-ratio: auto !important; width: 100%; max-width: 100vw; min-width: 0; } }

/* Phones: more room under "Let's talk" before the torn edge */
@media (max-width: 767px) { .page-main > .hero.section:first-child { padding-bottom: var(--space-section); } }

/* Phones: a soft white veil over the sky video so the About text stays legible */
@media (max-width: 767px) {
  .about.section::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto 0; height: min(120svh, 70rem); pointer-events: none;
    background: linear-gradient(180deg, #ffffff1f 0%, #ffffff4d 30%, #ffffff8c 55%, #ffffffa6 75%, #ffffff00 100%); }
}

/* Homepage testimonials (site.js 0f): quotes stacked in one spot and crossfaded */
.tm { display: grid; width: 100%; }
.tm_slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; opacity: 0; filter: blur(6px); transform: translateY(8px); pointer-events: none;
  transition: opacity .6s ease, filter .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1); }
.tm_slide.is-active { opacity: 1; filter: none; transform: none; pointer-events: auto; transition-delay: .15s; }
.testimonial_logo.tm_logo-invert { filter: brightness(0) invert(1); --ink-ratio: .36; } /* DoorDash's lettering fills ~36% of its file height */
@media (prefers-reduced-motion: reduce) { .tm_slide { transition: opacity .2s ease; filter: none; transform: none; } }

/* Testimonial logos: one visible height for every brand. Each file's lettering fills a different share of its box,
   so the box is sized from that share (--ink-ratio) and the width is left free. Set softer at 80%. */
.testimonial_logo { --logo-ink: 1.15rem; --ink-ratio: .95; height: calc(var(--logo-ink) / var(--ink-ratio)); max-height: none; width: auto; max-width: none; object-fit: contain; opacity: .8; }
.testimonial_logo.tm_logo-invert.tm_logo-headspace { --ink-ratio: .42; } /* Headspace: the round mark fills ~53% of the file; sized a touch larger so the wordmark reads like the others */

/* Testimonial arrows on either side of the quote, vertically centred, each in its own outlined circle */
.tm-wrap { position: relative; width: 100%; }
.tm-wrap .tm_slide { padding: 0 clamp(2.5rem, 5vw, 3.5rem); }
.tm-wrap .testimonial_pagination.tm-arrows { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0; border: 0; border-radius: 0; pointer-events: none; }
.tm-wrap .tm-arrows .testimonial_controls { pointer-events: auto; border: 0; border-radius: 0; background: none; opacity: .3; transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.tm-wrap .tm-arrows .testimonial_controls::after { display: none; } /* no circle, at rest or on hover */
.tm-wrap .tm-arrows .testimonial_controls:hover { opacity: 1; }
.tm-wrap .tm-arrows .cc-prev:hover { transform: translateX(-3px); } .tm-wrap .tm-arrows .cc-next:hover { transform: translateX(3px); }
@media (max-width: 479px) {
  .tm-wrap .tm_slide { padding: 0 2.25rem; }
  .tm-wrap .tm-arrows .testimonial_controls { width: 2.1rem; height: 2.1rem; }
  .tm-wrap { margin: 0 -.5rem; width: calc(100% + 1rem); }
}
@media (min-width: 768px) { .tm-wrap { margin: 0 -2.5rem; width: calc(100% + 5rem); } } /* desktop: arrows sit just beside the quote */

/* Phones: footer links float above the clouds: a little less room above the logo, links tucked under it, clouds get the space below */
@media (max-width: 767px) { .footer { padding-top: 3rem; padding-bottom: 5.5rem; } .footer .footer_colophon { margin-top: .4rem; } }

/* Tablet and desktop: a light white veil over the About sky video too */
@media (min-width: 768px) {
  .about.section::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto 0; height: min(120svh, 70rem); pointer-events: none;
    background: linear-gradient(180deg, #ffffff1a 0%, #ffffff40 35%, #ffffff66 60%, #ffffff00 100%); }
} /* light white veil over the sky video on larger screens */
.soon-modal .gate-modal_card .soon-modal_icon[hidden] { display: none; } /* only the newsletter popup shows the face icon */

/* No hairline gap above the footer: iPhone Safari can leave a sub-pixel white seam between the last section and the footer */
.footer { margin-top: -2px; position: relative; z-index: 1; }

/* Footer: the same torn paper edge as the logo bar, in the footer's top colour, on every page */
.footer { overflow: visible; }
.footer::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(100% - 1px); height: 2.75rem; pointer-events: none; background: #534d6a;
  -webkit-mask-image: url("../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg"); mask-image: url("../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg");
  -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* torn paper edge on top of the footer */

/* Homepage: the torn edge between Expertise and Testimonials overlaps both sides so no white seam shows on iPhone */
.blue-to-orange-gradient + svg { display: block; position: relative; z-index: 1; margin: -2px 0 -2px; }
.blue-to-orange-gradient + svg + .home-bottom-gradient { position: relative; }
.blue-to-orange-gradient + svg path { fill: #fa7d13 !important; } /* same sRGB orange as the gradient above (the inline display-p3 value renders more vivid on iPhones) */
.blue-to-orange-gradient + svg rect { fill: #0d1633 !important; }

/* About: caption under the podcast clip */
.about_video-note { padding-top: .9rem; }
.about_video-note p { margin: 0; opacity: .6; }

/* Torn edges run 2px past both sides so iPhone rounding never leaves white slivers at the screen edges */
.footer::before, .logo_marquee::before { left: -2px; right: -2px; -webkit-mask-size: calc(100% + 4px) auto; mask-size: calc(100% + 4px) auto; }
.page-wrapper { overflow-x: clip; } /* clip sideways overflow at the page, not on the footer (Safari would clip the torn edge too) */
/* Pages that end in text: room for the footer's torn edge so it never cuts into the last lines */
.page-main > .section:last-child:not(.u-p-0) { padding-bottom: calc(var(--_layout---section--padding) + 1rem); }

/* Phones: breathing room under the photo collage before "Hey, I'm Frank" */
@media (max-width: 767px) { h3.u-align-center.h2:has(+ .home-intro) { margin-top: 2.25rem; } }


/* Footer torn edge as an inline SVG (site.js 0g); the mask version stays as a fallback until it loads */
.footer_tear { position: absolute; z-index: 2; left: -2px; bottom: calc(100% - 1px); width: calc(100% + 4px); aspect-ratio: 1440 / 56; height: auto; display: block; pointer-events: none; overflow: hidden; }
.footer.has-tear::before { display: none; }

/* ---- Homepage hero: Morning glow (warm light falling from the top) ---- */
.hero.cc-photo.cc-glow { background: var(--paper); color: #2b2925; }
.hero.cc-glow::after { display: none; }
.hero.cc-glow h1 { color: #2b2925; text-shadow: none; }
.hero.cc-glow .btn { background-color: #2b2925; color: var(--paper); border-color: #2b2925; }
.hero.cc-glow .btn:hover { background-color: #45403a; color: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.hero_glow { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero_glow-sun, .hero_glow-haze { position: absolute; left: 50%; border-radius: 50%; will-change: transform, opacity; }
/* a reverse sunrise: the glow starts just above the frame and sinks into a round glow behind the headline */
.hero_glow-sun { top: 46%; width: min(78vw, 760px); aspect-ratio: 1; transform: translate(-50%, -50%); transform-origin: 0 0; /* origin = the sun's visual centre, so every scale grows it in place */
  background: radial-gradient(circle, #f2c98a 0%, #f4d6a6 26%, #f8e6c8 46%, rgba(251,250,247,0) 70%);
  animation: glow-set 4.2s cubic-bezier(.33, 0, .2, 1) both, glow-breathe 9s ease-in-out 4.2s infinite; }
@keyframes glow-set { from { top: -22%; opacity: .55; transform: scale(1.35) translate(-50%, -50%); } to { top: 46%; opacity: 1; transform: scale(1) translate(-50%, -50%); } }
@keyframes glow-breathe { 0%, 100% { opacity: 1; transform: scale(1) translate(-50%, -50%); } 50% { opacity: .8; transform: scale(1.06) translate(-50%, -50%); } }
@keyframes glow-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes glow-drift { from { transform: translate(-56%, -50%); } to { transform: translate(-44%, -47%); } }
.hero.cc-glow h1 { animation: glow-text 1.6s cubic-bezier(.22, 1, .36, 1) .25s both; }
@keyframes glow-text { from { opacity: 0; filter: blur(8px); translate: 0 10px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
html.is-arriving .hero.cc-glow h1, html.is-arriving .hero_glow > * { animation-play-state: paused; }
@media (max-width: 767px) { .hero_glow-sun { width: 175vw; } .hero_glow-haze { width: 280vw; } }
@media (prefers-reduced-motion: reduce) { .hero_glow-sun, .hero_glow-haze, .hero.cc-glow h1 { animation: none !important; } }
body:has(.hero.cc-glow) .navigation { --nav-l: var(--paper); --nav-c: var(--paper); --nav-r: var(--paper); } /* nav starts off-white over the glow hero (no blue flash) */

/* With the light glow hero: no warm rim on the logo-bar tear, and the hero fits its content instead of the full screen */
body:has(.hero.cc-glow) .logo_marquee::after, body:has(.hero.cc-glow) .logo_marquee > .container::before { display: none !important; }
.page-main > .hero.section.cc-glow { height: auto; min-height: 0; max-height: none; padding-bottom: clamp(5rem, 9vw, 8.5rem); } /* glow hero fits its content */

/* Glow hero: no torn edge between the hero and the logos; the glow runs behind the logos on one continuous surface */
.hero.cc-glow[data-css] { -webkit-mask-image: none !important; mask-image: none !important; overflow: visible; }
.hero.cc-glow .hero_glow { bottom: -45%; }
body:has(.hero.cc-glow) .logo_marquee { background: transparent; }
body:has(.hero.cc-glow) .logo_marquee::before { display: none !important; }
body:has(.hero.cc-glow) .page-main { background: var(--paper); }

/* tight tracking was eating the word gaps ("witha") on iOS: give spaces a little air */
.h1, .h2, .h3, h1, h2, h3 { word-spacing: .06em; }


/* pg-collage: on phones the nine photos are scattered like prints on a table: mixed sizes, staggered, a little overlap */
@media (max-width: 767px) {
  .pg .pg_grid { grid-template-columns: repeat(12, 1fr); column-gap: 0; row-gap: 0; align-items: start; padding-bottom: 2rem; }
  .pg .pg_slot { align-self: start; }
  .pg .pg_slot:nth-child(1) { grid-area: 1 / 1 / 2 / 7; }
  .pg .pg_slot:nth-child(2) { grid-area: 1 / 7 / 2 / 12; margin: 14vw 0 0 2vw; }
  .pg .pg_slot:nth-child(3) { grid-area: 2 / 3 / 3 / 8; margin-top: -10vw; }
  .pg .pg_slot:nth-child(4) { grid-area: 2 / 7 / 3 / 13; margin-top: 12vw; }
  .pg .pg_slot:nth-child(5) { grid-area: 3 / 1 / 4 / 6; margin-top: -4vw; }
  .pg .pg_slot:nth-child(6) { grid-area: 3 / 5 / 4 / 10; margin-top: 22vw; }
  .pg .pg_slot:nth-child(7) { grid-area: 4 / 3 / 5 / 13; margin-top: -6vw; }
  .pg .pg_slot:nth-child(8) { grid-area: 5 / 1 / 6 / 6; margin-top: -8vw; }
  .pg .pg_slot:nth-child(9) { grid-area: 5 / 6 / 6 / 11; margin: 6vw 0 0 3vw; }
}

/* section-break: below the logos, a thin torn edge opens a very pale paper tone that fades back to the page by the section's end */
.logo_marquee + .section { position: relative; margin-top: 2.25rem; background: linear-gradient(180deg, #f6f2ea 0%, #f7f4ed 45%, var(--paper) 100%); }
.logo_marquee + .section::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 2.5rem; background: #f6f2ea; pointer-events: none;
  -webkit-mask: url("../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg") center top / max(100%, 1100px) auto no-repeat;
          mask: url("../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg") center top / max(100%, 1100px) auto no-repeat; }

/* testimonials without a logo: the company name sits where the logo would, quietly */
.tm_company { font-size: 1.35rem; line-height: 1; font-weight: 600; letter-spacing: .01em; opacity: .8; }

.testimonial_logo.tm_logo-invert.tm_logo-meta { --ink-ratio: .38; } /* Meta: the mark and wordmark fill ~38% of the file height */
.testimonial_logo.tm_logo-invert.tm_logo-instagram { --ink-ratio: .36; } /* Instagram: the script fills ~36% of the file height */
.testimonial_logo.tm_logo-invert.tm_logo-netflix { --ink-ratio: .8; } /* Netflix: the wordmark fills its file; sized to match the others by eye */
.testimonial_logo.tm_logo-invert.tm_logo-soundcloud { --ink-ratio: .5; } /* SoundCloud: stacked cloud and name */
.testimonial_logo.tm_logo-invert.tm_logo-kickstarter { --ink-ratio: 1.05; } /* Kickstarter: the wordmark fills its file */
.testimonial_logo.tm_logo-invert.tm_logo-rain { --ink-ratio: .62; }
.testimonial_logo.tm_logo-invert.tm_logo-going { --ink-ratio: .64; }

/* testimonials: the logo tucks closer to the name line */
.tm_slide > .testimonial_logo, .tm_slide > .tm_company { margin-top: -.6rem; }
/* About, phones: the floating photos hang below the print, so give them room before the bio starts */
@media (max-width: 767px) { [data-gsap="collage"] > .u-p-relative { margin-bottom: 1.75rem; } }

/* accolades: the title takes the row and the year sits flush right, instead of floating at a fixed column mid-row */
.accolade_link .row { display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: 1.5rem; }
.accolade_link .row > .col-lg-8 { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
.accolade_link .row > .col-lg-4 { flex: none; width: auto; max-width: none; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }

/* phones: accolade titles a step larger (years stay as they are) */
@media (max-width: 767px) { .accolade_link .col-lg-8 .eyebrow { font-size: 1.15em; line-height: 1.08 !important; } a.accolade_link .col-lg-8 { align-items: flex-start; } a.accolade_link .col-lg-8::after { margin-top: .35em; } }

/* homepage hero: the "Let's talk" button is hidden for now (delete this rule to bring it back) */
.hero.cc-glow a.btn { display: none; } /* "Let's talk" hidden for now */

/* glow: its box ends below the logos; fade the bottom out so there is no hard line, and on phones the torn edge tucks up close */
.hero.cc-glow .hero_glow { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
@media (max-width: 767px) { .logo_marquee + .section { margin-top: .5rem; } }

/* Take a pause: the About page's drifting sky plays behind the rocks (the teal stays as a fallback) */
.section[data-svg="breath"] { position: relative; }
.pause_sky { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; pointer-events: none; }
/* the playground's gradient: its blue now matches that sky */
.blue-to-orange-gradient { background-image: linear-gradient(180deg, #fafafa 0%, #4d93da 18%, #8db8e4 34%, #d9b4ad 60%, #fa7d13 100%) !important; }
/* phones: five more playground collages; site.js picks a different one on each visit (layout 0 is the default above) */
@media (max-width: 767px) {
  .pg[data-lay="1"] .pg_slot:nth-child(1) { grid-area: 1 / 1 / 2 / 8; margin: 0vw 0 0 0; }
  .pg[data-lay="1"] .pg_slot:nth-child(2) { grid-area: 1 / 9 / 2 / 13; margin: 10vw 0 0 0; }
  .pg[data-lay="1"] .pg_slot:nth-child(3) { grid-area: 2 / 7 / 3 / 12; margin: -14vw 0 0 0; }
  .pg[data-lay="1"] .pg_slot:nth-child(4) { grid-area: 3 / 1 / 4 / 8; margin: -2vw 0 0 0; }
  .pg[data-lay="1"] .pg_slot:nth-child(5) { grid-area: 3 / 8 / 4 / 13; margin: 12vw 0 0 0; }
  .pg[data-lay="1"] .pg_slot:nth-child(6) { grid-area: 4 / 2 / 5 / 6; margin: -6vw 0 0 0; }
  .pg[data-lay="1"] .pg_slot:nth-child(7) { grid-area: 4 / 5 / 5 / 13; margin: 8vw 0 0 0; }
  .pg[data-lay="1"] .pg_slot:nth-child(8) { grid-area: 5 / 1 / 6 / 6; margin: -2vw 0 0 0; }
  .pg[data-lay="1"] .pg_slot:nth-child(9) { grid-area: 5 / 7 / 6 / 12; margin: -10vw 0 0 0; }
  .pg[data-lay="2"] .pg_slot:nth-child(1) { grid-area: 1 / 2 / 2 / 8; margin: 0vw 0 0 0; }
  .pg[data-lay="2"] .pg_slot:nth-child(2) { grid-area: 2 / 6 / 3 / 12; margin: -18vw 0 0 0; }
  .pg[data-lay="2"] .pg_slot:nth-child(3) { grid-area: 3 / 1 / 4 / 6; margin: -6vw 0 0 0; }
  .pg[data-lay="2"] .pg_slot:nth-child(4) { grid-area: 3 / 5 / 4 / 13; margin: 14vw 0 0 0; }
  .pg[data-lay="2"] .pg_slot:nth-child(5) { grid-area: 4 / 3 / 5 / 8; margin: -4vw 0 0 0; }
  .pg[data-lay="2"] .pg_slot:nth-child(6) { grid-area: 4 / 8 / 5 / 12; margin: 18vw 0 0 0; }
  .pg[data-lay="2"] .pg_slot:nth-child(7) { grid-area: 5 / 1 / 6 / 10; margin: -4vw 0 0 0; }
  .pg[data-lay="2"] .pg_slot:nth-child(8) { grid-area: 6 / 7 / 7 / 12; margin: -14vw 0 0 0; }
  .pg[data-lay="2"] .pg_slot:nth-child(9) { grid-area: 6 / 2 / 7 / 7; margin: 4vw 0 0 0; }
  .pg[data-lay="3"] .pg_slot:nth-child(1) { grid-area: 1 / 1 / 2 / 5; margin: 8vw 0 0 0; }
  .pg[data-lay="3"] .pg_slot:nth-child(2) { grid-area: 1 / 5 / 2 / 11; margin: 0vw 0 0 0; }
  .pg[data-lay="3"] .pg_slot:nth-child(3) { grid-area: 1 / 10 / 2 / 13; margin: 20vw 0 0 0; }
  .pg[data-lay="3"] .pg_slot:nth-child(4) { grid-area: 2 / 2 / 3 / 12; margin: -4vw 0 0 0; }
  .pg[data-lay="3"] .pg_slot:nth-child(5) { grid-area: 3 / 1 / 4 / 6; margin: -2vw 0 0 0; }
  .pg[data-lay="3"] .pg_slot:nth-child(6) { grid-area: 3 / 6 / 4 / 10; margin: 10vw 0 0 0; }
  .pg[data-lay="3"] .pg_slot:nth-child(7) { grid-area: 3 / 9 / 4 / 13; margin: -4vw 0 0 0; }
  .pg[data-lay="3"] .pg_slot:nth-child(8) { grid-area: 4 / 2 / 5 / 7; margin: -6vw 0 0 0; }
  .pg[data-lay="3"] .pg_slot:nth-child(9) { grid-area: 4 / 7 / 5 / 12; margin: 2vw 0 0 0; }
  .pg[data-lay="4"] .pg_slot:nth-child(1) { grid-area: 1 / 6 / 2 / 13; margin: 0vw 0 0 0; }
  .pg[data-lay="4"] .pg_slot:nth-child(2) { grid-area: 1 / 1 / 2 / 6; margin: 16vw 0 0 0; }
  .pg[data-lay="4"] .pg_slot:nth-child(3) { grid-area: 2 / 7 / 3 / 12; margin: -6vw 0 0 0; }
  .pg[data-lay="4"] .pg_slot:nth-child(4) { grid-area: 2 / 1 / 3 / 8; margin: 8vw 0 0 0; }
  .pg[data-lay="4"] .pg_slot:nth-child(5) { grid-area: 3 / 2 / 4 / 7; margin: -4vw 0 0 0; }
  .pg[data-lay="4"] .pg_slot:nth-child(6) { grid-area: 3 / 8 / 4 / 13; margin: 6vw 0 0 0; }
  .pg[data-lay="4"] .pg_slot:nth-child(7) { grid-area: 4 / 1 / 5 / 11; margin: -2vw 0 0 0; }
  .pg[data-lay="4"] .pg_slot:nth-child(8) { grid-area: 5 / 6 / 6 / 11; margin: -10vw 0 0 0; }
  .pg[data-lay="4"] .pg_slot:nth-child(9) { grid-area: 5 / 1 / 6 / 6; margin: 4vw 0 0 0; }
  .pg[data-lay="5"] .pg_slot:nth-child(1) { grid-area: 1 / 1 / 2 / 6; margin: 0vw 0 0 0; }
  .pg[data-lay="5"] .pg_slot:nth-child(2) { grid-area: 1 / 6 / 2 / 10; margin: 6vw 0 0 0; }
  .pg[data-lay="5"] .pg_slot:nth-child(3) { grid-area: 1 / 10 / 2 / 13; margin: 26vw 0 0 0; }
  .pg[data-lay="5"] .pg_slot:nth-child(4) { grid-area: 2 / 3 / 3 / 11; margin: -6vw 0 0 0; }
  .pg[data-lay="5"] .pg_slot:nth-child(5) { grid-area: 3 / 1 / 4 / 5; margin: -2vw 0 0 0; }
  .pg[data-lay="5"] .pg_slot:nth-child(6) { grid-area: 3 / 5 / 4 / 9; margin: 12vw 0 0 0; }
  .pg[data-lay="5"] .pg_slot:nth-child(7) { grid-area: 3 / 8 / 4 / 13; margin: -2vw 0 0 0; }
  .pg[data-lay="5"] .pg_slot:nth-child(8) { grid-area: 4 / 2 / 5 / 7; margin: -4vw 0 0 0; }
  .pg[data-lay="5"] .pg_slot:nth-child(9) { grid-area: 4 / 7 / 5 / 12; margin: 6vw 0 0 0; }
}
.section[data-svg="breath"] { background: #3d86d3; } /* sky-blue fallback under the video */

/* phones: the logo grid sits a little higher under the headline */
@media (max-width: 767px) { /* (folded into the hero rule below) */ }
/* About: the podcast clip opens the episode on Spotify; the caption below links too, led by a small play icon */
.about_video-link { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.about_video-cap { display: inline-flex; align-items: center; gap: .5em; color: inherit; text-decoration: none; opacity: .6; transition: opacity .25s ease; }
.about_video-cap:hover, .about_video-cap:focus-visible { opacity: 1; }
.about_video-play { width: .8em; height: .8em; flex: none; }

/* phones: the accolade group titles (Speaking, Awards, Interviews, Podcasts) step up so they lead the larger rows */
@media (max-width: 767px) { .acc-section h3, .u-vflex-stretch-top.u-vgap-16 > h3:has(+ .acc-box), .u-vflex-stretch-top.u-vgap-16 > h3:has(+ .accolade_link) { font-size: 1.75rem; line-height: 1.15; } }

/* phones: a dotted rule opens the courses section, between the projects and the courses statement */
@media (max-width: 767px) { .section.cc-courses { padding-top: 0; } .section.cc-courses > .container { border-top: 2px dotted #2b292524; padding-top: calc(var(--space-section-half) + .55rem); margin-top: -.55rem; } } /* line sits midway between the projects and the courses statement */

/* modals (password, newsletter, coming soon): the button sits inside the field, at its right end */
.gate-modal_form { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: .75rem; }
.gate-modal_form > .input-group { grid-row: 1; grid-column: 1 / -1; }
.gate-modal_form > input[type=submit] { grid-row: 1; grid-column: 2; position: relative; z-index: 1; margin: 0 0 .15rem; padding: .55rem 1.1rem; font-size: .875rem; }
.gate-modal_form > p { grid-row: 2; grid-column: 1 / -1; }
.gate-modal_form .input, .gate-modal_form .input:hover, .gate-modal_form .input:focus { padding-right: 8.5rem; }
.pause_sky { object-position: 20% 0%; transform: scale(1.6); transform-origin: 25% 10%; } /* zoomed into the open blue, clouds mostly out of frame */

/* company names in the bios read a touch heavier */
.co { font-weight: 600; }

/* modal buttons read as asleep until the field is filled in */
.gate-modal_form input[type=submit]:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* phones: the logo cross's vertical line fades in at the top and out at the bottom */
@media (max-width: 767px) { .logo_marquee .logo_col::before { background: linear-gradient(180deg, #e9e6e100 0%, #e9e6e1 22%, #e9e6e1 78%, #e9e6e100 100%); } }

/* Ram Dass quote: palms against the sky, framed on the treetops */
.quote-palms { object-fit: cover; object-position: 50% 45%; }
.quote-ramdass { text-shadow: 0 2px 30px #1d3b5233, 0 0 64px #1d3b521f; } /* faint, soft, puffy */

/* the orb reads as a circle: a fuller disc with a shorter soft edge, and on phones it fits the screen width */
.hero_glow-sun { background: radial-gradient(circle, #f2c98a 0%, #f3cf98 30%, #f6dcb6 48%, #f9ead6 58%, rgba(251,250,247,0) 68%); }
@media (max-width: 767px) { .hero_glow-sun { width: 118vw; } }


/* Ram Dass quote sits up in the open blue, above the palm crowns */
.section.quote-ramdass { justify-content: flex-start; }
.section.quote-ramdass > .container { padding-top: var(--space-section); }
.quote-palms { object-position: 50% 0%; }

/* footer: a soft dusk gradient rises from the bottom, over the clouds and under the links, so the links read clearly */
footer.footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #534d6a00 0%, #534d6a59 45%, #534d6aa6 100%); }
@media (max-width: 767px) { footer.footer::after { height: 55%; } }

/* About podcast clip: a frosted round play button in the middle (the caption below no longer has its own icon) */
.about_video-link { display: flex; align-items: center; justify-content: center; }
.about_video-btn { width: clamp(3.75rem, 6.5vw, 5.5rem); aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  background: #ffffff38; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.about_video-btn svg { width: 36%; height: 36%; margin: 0 0 0 6%; display: block; }
.about_video-link:hover .about_video-btn { transform: scale(1.1); background: #ffffff55; }

/* About: the playground follows the expertise list closely instead of after a long blank stretch */
.section:has(+ .pg[data-playground]) { padding-bottom: var(--space-joined); }
body:has(.about) .pg[data-playground] { padding-top: 0; }
@media (min-width: 768px) { body:has(.about) .pg[data-playground] { margin-top: 2rem; } }

/* contact form: the sent and failed notes match the site, not Webflow's grey box */
.w-form-done { background: transparent; border: 0; border-top: 1px solid currentColor; padding: 1.5rem 0 0; text-align: left; }
.w-form-done .form-done_title { margin: 0 0 .25rem; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; }
.w-form-done .form-done_text { margin: 0; opacity: .7; }
.w-form-fail { background: transparent; border: 0; padding: .75rem 0 0; color: #c2410c; }

/* Projects page: the side line sits on the middle of the "Select projects" heading */
.row.cc-intro-center { align-items: center; }
.row.cc-intro-center p { margin: 0; }

/* carousel arrows: the black ink dot is snappier, about twice as quick, with a crisper ease */
.arrow-ink { transition-duration: .26s, .26s, .16s, .22s; transition-timing-function: cubic-bezier(.5, 0, .1, 1), cubic-bezier(.5, 0, .1, 1), ease-out, cubic-bezier(.2, 1.2, .4, 1); transition-delay: 0s, .05s, 0s, 0s; }
.testimonial_pagination.cc-top.ink-right .arrow-ink { transition-delay: .05s, 0s, 0s, 0s; }
.testimonial_pagination.cc-top .testimonial_controls { transition: width .55s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, color .18s ease; }

/* the podcast caption sits on the clip, bottom left, as a small frosted tag */
.about_video-cap.cc-on-video { position: absolute; z-index: 3; left: var(--_layout---columns--size, 1.5rem); bottom: clamp(1rem, 2.5vw, 2rem); color: #fff; opacity: 1;
  padding: .45rem .8rem; border-radius: var(--radius-pill); background: #0000004d; -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem); }
.about_video-cap.cc-on-video:hover { background: #00000073; }

/* header sun on hover: a little blurrier and 10% larger (scaled on the svg, so the nav's own transform is untouched) */
.nav_sun svg { transition: filter .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); transform-origin: 50% 50%; }
.nav_sun:hover svg { filter: blur(3.5px); transform: scale(1.1); }

/* live cams: zoomed in further so the stream's own captions, logos and timestamps around the edges fall outside the frame */
.livecam_screen iframe { transform: translate(-50%, -50%) scale(1.5); }
@media (max-width: 767px) { .livecam_screen iframe { transform: translate(-50%, -50%) scale(1.7); } }

/* livecam-arrows: a clear left/right pair to change cams, and nothing from YouTube (pause, title) ever reacts to the pointer */
.livecam_screen::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.livecam_controls { display: flex; gap: .5rem; }
.livecam_btn { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.livecam_btn:hover { background: #00000080; transform: scale(1.06); }
.livecam_btn svg { width: 1.1rem; height: auto; }
.livecam:not(.is-live) .livecam_controls, .livecam.is-offline .livecam_controls { opacity: 0; pointer-events: none; }
.livecam_controls { transition: opacity .4s ease; }

/* livecam-overlay-arrows: the arrows sit over the camera view, one each side, and appear on hover (always on touch screens) */
.livecam .livecam_ui { inset: 0; left: 0; right: 0; bottom: 0; display: block; pointer-events: none; }
.livecam .livecam_note { position: absolute; left: var(--_layout---columns--size, 1.5rem); bottom: clamp(1rem, 2vw, 2rem); pointer-events: auto; }
.livecam .livecam_controls { position: static; }
.livecam .livecam_btn { position: absolute; top: 50%; translate: 0 -50%; pointer-events: auto; opacity: 0; transition: opacity .3s ease, background-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.livecam .livecam_btn[data-dir="-1"] { left: clamp(1rem, 3vw, 2.5rem); }
.livecam .livecam_btn[data-dir="1"] { right: clamp(1rem, 3vw, 2.5rem); }
.livecam.is-live:hover .livecam_btn, .livecam.is-live .livecam_btn:focus-visible { opacity: 1; }
@media (hover: none) { .livecam.is-live .livecam_btn { opacity: .85; } }
.livecam .livecam_src { display: none; }

/* Contact cams: no mirror photo; the section stays white until a live feed fades in */
.livecam .livecam_photo { display: none; }
.section.livecam { background: #fff; }
.livecam:not(.is-live) .livecam_note { opacity: 0; }
.livecam_note { transition: opacity .6s ease; }

/* cam label: LA time after the place, set off by a thin rule */
.livecam_time { border-left: 1px solid #ffffff4d; padding-left: .5rem; opacity: .8; font-variant-numeric: tabular-nums; }

/* Ram Dass palms: a slow breeze. The photo sways a touch from its base and drifts, like trees moving against the sky */
@keyframes palm-sway { 0%, 100% { rotate: 0deg; translate: 0 0; } 30% { rotate: .5deg; translate: .4% 0; } 65% { rotate: -.35deg; translate: -.3% 0; } }
.quote-palms { transform-origin: 50% 120%; scale: 1.06; animation: palm-sway 11s ease-in-out infinite; } /* rotate/translate/scale props, so GSAP's parallax transform still applies */
@media (prefers-reduced-motion: reduce) { .quote-palms { animation: none; } }

/* livecam-shield: a transparent layer over the feed catches the pointer, so YouTube never shows its pause control */
.livecam_screen::after { pointer-events: auto; }

/* cam-bleed: the torn footer edge runs a little past both sides, so no sliver of the feed shows at the right */
.footer_tear { left: -6px; width: calc(100% + 12px); }
/* password and newsletter popups: a little taller and roomier */
.gate-modal_card { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3.25rem, 6.5vw, 5rem); gap: 2.75rem; }

/* Contact cam tag 12px higher; the "Work for brands people love" line 6px lower (homepage and Projects) */
.livecam .livecam_note { bottom: calc(clamp(1rem, 2vw, 2rem) + 12px); }
.u-nudge-up { top: -9px; }
.row.cc-intro-center p { position: relative; top: 6px; }

/* beige section: a faint sand grain that shifts, like light moving over a beach */
.logo_marquee + .section::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .36 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px; animation: sand-drift 1.4s steps(6) infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 180px, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 180px, #000 55%, transparent 100%); } /* grain fades in below the torn edge, so there's no hard line */
.logo_marquee + .section > .container { position: relative; z-index: 1; }
@keyframes sand-drift { 0% { background-position: 0 0; } 17% { background-position: -40px 25px; } 33% { background-position: 30px -55px; } 50% { background-position: -75px -15px; } 67% { background-position: 55px 70px; } 83% { background-position: -20px 90px; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .logo_marquee + .section::after { animation: none; } }

/* About podcast: no frosted circle, just a clean white play triangle on the clip */
.about_video-btn { width: clamp(2.75rem, 4.5vw, 3.75rem); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; filter: drop-shadow(0 2px 10px #0000004d); }
.about_video-btn svg { width: 100%; height: 100%; margin: 0 0 0 8%; }
.about_video-link:hover .about_video-btn { background: none; transform: scale(1.1); }

/* Contact cams: a grey skeleton with a soft shimmer while the live feed loads */
.section.livecam { background: #ecebe8; }
.livecam::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, #ecebe800 30%, #f7f6f3 50%, #ecebe800 70%) 0 0 / 250% 100% no-repeat; animation: cam-shimmer 3.2s ease-in-out infinite; transition: opacity .6s ease; }
.livecam.is-live::before, .livecam.is-offline::before { opacity: 0; animation: none; }
@keyframes cam-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .livecam::before { animation: none; } }
.footer_tear { max-width: none; } /* the global svg max-width was capping the overhang */

/* contact form: the submit button fades in once you start typing; it stays dimmed until the form is complete */
form[data-contact] [type=submit] { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s; }
form[data-contact].is-typing [type=submit] { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
form[data-contact].is-typing [type=submit]:disabled { opacity: .35; cursor: not-allowed; }

/* pg-center-last: desktop playground on 14 half-columns so a short last row can be centred */
@media (min-width: 992px) { .pg .pg_grid { grid-template-columns: repeat(32, 1fr); width: calc(100% * 16 / 7); margin-left: calc(100% * -9 / 14); } .pg .pg_slot { grid-column-end: span 2; } } /* ten a row, wider than the screen, centred; edges pan it (site.js) */

/* About podcast: the frosted circle is back around the play triangle */
.about_video-btn { width: clamp(3.75rem, 6.5vw, 5.5rem); background: #ffffff38; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); filter: none; }
.about_video-btn svg { width: 36%; height: 36%; margin: 0 0 0 6%; }
.about_video-link:hover .about_video-btn { background: #ffffff55; transform: scale(1.1); }
.about_video-btn svg { width: 34%; height: 34%; margin: 0; transform: translateX(9%); color: #fff; } /* Tabler filled triangle, turned to point right */
/* play circle: brightens quickly on hover, then eases back to glass slowly and smoothly */
.about_video-btn { transition: transform .7s cubic-bezier(.22, 1, .36, 1), background-color .9s cubic-bezier(.4, 0, .2, 1); }
.about_video-link:hover .about_video-btn { transition: transform .45s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }

/* logo marquee: starts on Anthropic, then Claude, at the left (the row was centred, so the first logos began off screen) */
@media (min-width: 768px) { .logo_marquee .logo_row { justify-content: flex-start; } }

/* modal-typing: in the popups the button appears only once you start typing (dimmed until the entry looks complete) */
.gate-modal_form input[type=submit] { transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s; }
.gate-modal_form:not(.is-typing) input[type=submit] { opacity: 0; visibility: hidden; transform: translateX(6px); }
.gate-modal_form.is-typing input[type=submit] { visibility: visible; transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }

/* contact form errors: a quiet line under the field and a warm underline; they fade in on leaving the field, and out as soon as it's fixed */
.input-group { position: relative; }
.field-error { margin: .4rem 0 0; font-size: .8125rem; line-height: 1.35; color: #b4532a; opacity: 0; transform: translateY(-3px); transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.field-error.is-on { opacity: 1; transform: none; }
.input-group.has-error .input, .input-group.has-error .input:focus { border-bottom-color: #b4532a; box-shadow: 0 1px 0 0 #b4532a; }
/* podcast play circle: no glass, a plain soft dark disc */
.about_video-btn { background: #00000052; -webkit-backdrop-filter: none; backdrop-filter: none; }
.about_video-link:hover .about_video-btn { background: #00000073; }
.about_video-btn svg { width: 30.6%; height: 30.6%; } /* play icon 10% smaller */

/* playground: square photos get square cards instead of being cropped to portrait */
.pg_card.cc-square { aspect-ratio: 1; }

/* cam tag: top left, just below the torn top edge */
.livecam .livecam_note { top: calc(clamp(4rem, 7vw, 6rem) - 12px); bottom: auto; }

/* livecam-full: click the feed to fill the screen; an X sits top right */
.livecam.is-live .livecam_screen { pointer-events: auto; cursor: zoom-in; }
.livecam.is-full { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; -webkit-mask-image: none !important; mask-image: none !important; margin: 0; }
.livecam.is-full .livecam_screen { cursor: zoom-out; }
.livecam.is-full .livecam_screen iframe { width: max(100vw, 177.78vh); height: max(100vh, 56.25vw); transform: translate(-50%, -50%) scale(1.3); }
html.cam-full, html.cam-full body { overflow: hidden; }
html.cam-full .navigation, html.cam-full .nav_sun { opacity: 0; pointer-events: none; }
.livecam_close { position: absolute; top: clamp(1rem, 2.5vw, 2rem); right: clamp(1rem, 2.5vw, 2rem); width: 3rem; height: 3rem; border-radius: 50%; border: 0; color: #fff; background: #0000004d;
  -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s; }
.livecam_close:hover { transform: rotate(90deg); }
.livecam.is-full .livecam_close { opacity: 1; visibility: visible; transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.livecam.is-full .livecam_note { top: calc(clamp(1rem, 2.5vw, 2rem) - 12px); }

/* cam X: same look and hover as the arrows, no rotation, no focus ring on click */
.livecam_close { border: 1px solid #ffffff99; transition: opacity .3s ease, background-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s; }
.livecam.is-full .livecam_close { transition: opacity .3s ease, background-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.livecam_close:hover { transform: scale(1.06); background: #00000080; }
.livecam_close:focus { outline: none; }
.livecam_close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* an invisible layer over the whole feed: the pointer only ever touches this, so YouTube never sees a hover and never shows its pause button */
.livecam_shield { position: absolute; inset: 0; z-index: 2; background: transparent; opacity: 0; cursor: default; }
.livecam.is-live .livecam_shield { cursor: zoom-in; }
.livecam.is-full .livecam_shield { cursor: zoom-out; }
.livecam .livecam_screen, .livecam.is-live .livecam_screen, .livecam .livecam_screen iframe { pointer-events: none !important; }

/* Take a pause: a faint soft-blue veil over the sky video */
.section[data-svg="breath"]::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #86a9db73 0%, #95b6e173 100%); }
.section[data-svg="breath"] > .container { position: relative; z-index: 1; }

/* desktop: a taller glow hero, the headline centred in more open space with the logos still above the fold */
@media (min-width: 992px) { .page-main > .hero.section.cc-glow { padding-top: max(212px, 30vh); padding-bottom: max(130px, 25vh); } }
.w-form-done .form-done_title .form-done_text { display: inline; } /* sent note on one line */
.w-form-done { text-align: center; } /* sent note centred */

/* cam reveal: the feed stays hidden behind the skeleton while YouTube starts up, then settles in with a soft fade and a slight expand */
.livecam_screen { transform: scale(.97); transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.livecam.is-live .livecam_screen { transform: none; }
.w-form-done { border-top: 1px solid var(--background--border); } /* same soft grey rule as the dividers elsewhere */

/* changing cams: instead of jumping back to the light skeleton, the view dims to a soft dark screen while the next feed tunes in */
.livecam { transition: background-color .6s ease; }
.section.livecam.is-switching { background: #17181a; }
.livecam.is-switching::before { opacity: .12 !important; animation: cam-shimmer 3.2s ease-in-out infinite !important; }
.livecam.is-switching .livecam_screen { opacity: 0; transform: scale(1.02); filter: blur(8px); transition: opacity .5s ease, transform .9s cubic-bezier(.22, 1, .36, 1), filter .5s ease; }
.livecam .livecam_screen { filter: none; }
.livecam.is-switching .livecam_note { opacity: 1; }
.livecam.is-switching .livecam_btn { opacity: .85; }
.livecam.is-switching .livecam_dot { animation: livecam-pulse 1s ease-in-out infinite; background: #fff; opacity: .7; }
.livecam.is-switching .livecam_controls { opacity: 1; pointer-events: auto; }

/* playground: 4:5 prints get a 4:5 card so their edges aren't cropped */
.pg_card.cc-portrait { aspect-ratio: 4 / 5; }
.pg_card.cc-portrait img { object-position: 0 50%; }

/* playground credits: a small note along the bottom of the card, shown only when the card is zoomed */
.pg_credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4em .6em .5em; font-size: .5rem; line-height: 1.2; letter-spacing: .02em; color: #fff; text-align: left;
  background: linear-gradient(180deg, #0000 0%, #000a 100%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.pg_card.is-focus .pg_credit { opacity: 1; transition-delay: .15s; }

/* livecam-controls-on: visitors can use YouTube's own controls (pause/play) on the feed; full screen moves to a button */
.livecam .livecam_shield { display: none; }
.livecam.is-live .livecam_screen, .livecam.is-live .livecam_screen iframe { pointer-events: auto !important; cursor: auto; }
.livecam_screen::after { display: none !important; }
.livecam_expand { position: absolute; top: clamp(4rem, 7vw, 6rem); right: clamp(1rem, 2.5vw, 2rem); width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid #ffffff99; color: #fff;
  background: #0000004d; -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto;
  opacity: 0; transition: opacity .3s ease, background-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.livecam.is-live:hover .livecam_expand, .livecam_expand:focus-visible { opacity: 1; }
.livecam_expand:hover { transform: scale(1.06); background: #00000080; }
.livecam.is-full .livecam_expand, .livecam:not(.is-live) .livecam_expand { opacity: 0; pointer-events: none; }
@media (hover: none) { .livecam.is-live .livecam_expand { opacity: .85; } }

/* pg-no-dim: hovering a photo no longer fades the others or tints the background */
.pg.has-focus .pg_card { opacity: 1; }
.w-form-done .form-done_title .form-done_text { opacity: 1; color: inherit; } /* one colour: the full dark text colour */

/* the orb's resting place follows the headline (set by site.js) */
.hero_glow-sun { top: var(--orb-y, 46%); }
@keyframes glow-set { from { top: -22%; opacity: .55; transform: scale(1.35) translate(-50%, -50%); } to { top: var(--orb-y, 46%); opacity: 1; transform: scale(1) translate(-50%, -50%); } }

/* playground cards that link out: clickable, everything else about them stays the same */
.pg_card:has(.pg_link) { pointer-events: auto; cursor: pointer; }
.pg_link { display: block; width: 100%; height: 100%; }
.pg_link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonial_logo.tm_logo-invert.tm_logo-uxcon { --ink-ratio: .78; } /* UXCon: wordmark with "vienna" above */

/* captions scale with the card's height, so every card (tall, square or wide) shows its caption at the same size when zoomed */
.pg_card:has(.pg_credit) { container-type: size; }
.pg_credit { font-size: 3.3cqh; }
.pg_card.cc-wide .pg_credit { font-size: 4.1cqh; } /* wide cards zoom less, so their caption type is a touch larger to match */
.pg_credit-arrow { width: .8em; height: .8em; vertical-align: -.05em; margin-left: .1em; }

/* cam-idle: arrows, full screen and X only while the pointer is active over the cam (also in full screen, and after a tap on phones) */
.livecam .livecam_btn, .livecam .livecam_expand, .livecam .livecam_close { transition: opacity .45s ease, background-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1) !important; }
.livecam:not(:hover):not(.is-awake) .livecam_btn, .livecam:not(:hover):not(.is-awake) .livecam_expand, .livecam:not(:hover):not(.is-awake) .livecam_close { opacity: 0 !important; pointer-events: none !important; }
.livecam:is(:hover, .is-awake).is-live .livecam_btn, .livecam:is(:hover, .is-awake).is-live:not(.is-full) .livecam_expand, .livecam:is(:hover, .is-awake).is-full .livecam_close { opacity: 1 !important; visibility: visible; pointer-events: auto !important; }


/* logo marquee: scrolls on its own (desktop), starting on Anthropic, 48px further left */
@media (min-width: 768px) {
  .logo_marquee .logo_row { margin-left: -48px; }
  .logo_marquee .logo_col { animation: logo-marquee 70s linear infinite; }
  .logo_marquee:hover .logo_col { animation-play-state: paused; }
}
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .logo_marquee .logo_col { animation: none; } }

/* Contact on phones: the cam sits closer under the form */
@media (max-width: 767px) { .section:has(+ .livecam) { padding-bottom: var(--space-joined); } }

/* phones: no card in the collage gets taller than ~half the screen width, whatever slot it lands in */
@media (max-width: 767px) {
  .pg .pg_card { width: min(100%, 40vw); }
  .pg .pg_card.cc-portrait { width: min(100%, 42vw); }
  .pg .pg_card.cc-square { width: min(100%, 46vw); }
  .pg .pg_card.cc-wide { width: min(100%, 62vw); }
}

/* phones: less room under the footer links */
@media (max-width: 767px) { .footer { padding-bottom: 2.75rem; } }

/* modal X: no spin on hover, just a slight fade */
.gate-modal_close:hover, .nav_close:hover { transform: none !important; opacity: .7; }
.gate-modal_close { transition: opacity .25s ease; }

.footer_bgclip { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.footer_bgclip img.footer_bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); } /* cloud photos fade in at their top edge */
.footer_bgclip { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px); mask-image: linear-gradient(180deg, transparent 0, #000 220px); } /* clouds fade in below the torn edge, no hard line */

/* homepage logos: fade out softly toward both edges (desktop marquee) */
@media (min-width: 768px) { .logo_marquee { -webkit-mask-image: linear-gradient(90deg, #0000 0, #0003 3%, #000 16%, #000 84%, #0003 97%, #0000 100%); mask-image: linear-gradient(90deg, #0000 0, #0003 3%, #000 16%, #000 84%, #0003 97%, #0000 100%); } .logo_marquee > .container { max-width: none; } }
.pg_credit, .pg_card.cc-wide .pg_credit { font-size: var(--cap, 3.3cqh); }
@media (min-width: 768px) { .logo_marquee .logo_row { margin-left: 0; padding-left: 12vw; } } /* Anthropic starts just inside the faded edge */


/* nav over a video/photo section: no tinted band (it showed as a second edge against the moving picture) */
.navigation::before { transition: --nav-l .9s ease, --nav-c .9s ease, --nav-r .9s ease, opacity .5s ease; }
.navigation.is-over-media::before { opacity: 0; }

/* homepage sun: after you've been on the page a while (25s), it slowly drifts orange → pink → purple → blue,
   goes pale, and warms back to orange (90s per cycle, repeating) */
.hero.cc-glow .hero_glow-sun { animation: glow-set 4.2s cubic-bezier(.33, 0, .2, 1) both, glow-breathe 9s ease-in-out 4.2s infinite, sun-cycle 90s ease-in-out 25s infinite; }
/* the sun's colours are real colour stops (not a filter), so the blue phase can be a true vivid sky blue */
@property --s1 { syntax: '<color>'; inherits: false; initial-value: #f2c98a; }
@property --s2 { syntax: '<color>'; inherits: false; initial-value: #f3cf98; }
@property --s3 { syntax: '<color>'; inherits: false; initial-value: #f6dcb6; }
@property --s4 { syntax: '<color>'; inherits: false; initial-value: #f9ead6; }
.hero_glow-sun { background: radial-gradient(circle, var(--s1) 0%, var(--s2) 30%, var(--s3) 48%, var(--s4) 58%, rgba(251,250,247,0) 68%); }
@keyframes sun-cycle {
  0%   { --s1: #f2c98a; --s2: #f3cf98; --s3: #f6dcb6; --s4: #f9ead6; }   /* orange */
  9%   { --s1: #fbd6c4; --s2: #fcdccd; --s3: #fde8dd; --s4: #fef3ec; }   /* light blush, so orange never passes through red */
  20%  { --s1: #ff9fd3; --s2: #ffb3dc; --s3: #ffd2ea; --s4: #ffe9f4; }   /* bright pink */
  38%  { --s1: #b996f7; --s2: #c6a9f7; --s3: #dacbf9; --s4: #ede6fb; }   /* purple */
  52%  { --s1: #00bfff; --s2: #22c6ff; --s3: #8adfff; --s4: #d2f2ff; }   /* bright sky blue */
  64%  { --s1: #00bfff; --s2: #22c6ff; --s3: #8adfff; --s4: #d2f2ff; }   /* holds the blue a while */
  77%  { --s1: #e6edf3; --s2: #ebf0f4; --s3: #f1f4f6; --s4: #f7f8f9; }   /* pale */
  100% { --s1: #f2c98a; --s2: #f3cf98; --s3: #f6dcb6; --s4: #f9ead6; }   /* back to orange */
}
@media (prefers-reduced-motion: reduce) { .hero.cc-glow .hero_glow-sun { animation: none !important; } }

/* at the top of the page the nav floats with no tint; the tint fades in once you scroll */
html.at-top .navigation::before { opacity: 0; }

/* scrolling down: the sun snaps open into a full-width wash reaching the top of the header */
.hero.cc-glow.is-sun-moving .hero_glow-sun { transition: translate .55s cubic-bezier(.2, 1, .3, 1), scale .55s cubic-bezier(.2, 1, .3, 1); }
.hero.cc-glow.is-sun-burst .hero_glow-sun { translate: 0 var(--burst-y, -30%) !important; scale: var(--burst-scale, 2.6) !important; }
.hero.cc-glow.is-sun-moving.is-sun-burst .hero_glow-sun { transition-delay: .35s; }   /* a beat before it bursts open (settling back has no wait) */

/* cam controls: no white outlines */
.livecam_btn, .livecam_close, .livecam_expand { border: 0 !important; box-shadow: none; }

/* Ram Dass: hover (or focus) his name and a round photo of him pops up above it */
.rd-name { position: relative; display: inline-block; cursor: default; border-bottom: 1px dotted rgba(255, 255, 255, .4); outline: none; }
.rd-tip { position: absolute; left: 50%; bottom: calc(100% + .9rem); width: clamp(8rem, 13vw, 11rem); aspect-ratio: 1; object-fit: cover; object-position: 50% 30%;
  border-radius: 50%; box-shadow: var(--shadow-pop); pointer-events: none; z-index: 5;
  opacity: 0; transform: translate(-50%, .5rem) scale(.6) rotate(-6deg); transform-origin: 50% 100%;
  transition: opacity .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.rd-name:hover .rd-tip, .rd-name:focus-visible .rd-tip { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); }

/* during the burst, a tall soft fade to the page colour rises from the bottom so the wash ends cleanly */
.hero.cc-glow .hero_glow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80%; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, var(--paper) 0%, var(--paper) 22%, rgba(251, 250, 247, .85) 45%, rgba(251, 250, 247, 0) 100%);
  opacity: 0; transition: opacity .5s ease; }
.hero.cc-glow.is-sun-burst .hero_glow::after { opacity: 1; transition: opacity .6s ease .3s; }

/* footer: the metal logo swells 5% as it scrolls into view */
.footer .footer_logo { scale: 1; transition: scale 1.4s cubic-bezier(.22, 1, .36, 1); }
.footer .footer_logo.is-in { scale: 1.05; }
@media (prefers-reduced-motion: reduce) { .footer .footer_logo { transition: none; } }

.pg_slot:has(.pg_card.is-focus) { z-index: 100 !important; } /* the hovered photo rises above every other slot */

/* desktop: a little more air between the metal logo and the footer links */
@media (min-width: 992px) { .footer .footer_logo { margin-bottom: 24px; margin-top: -32px; } }

/* project card brand set as text (for projects without a logo file) */
.project_wordmark { display: block; line-height: 1; font-size: 1.05rem; letter-spacing: var(--track-label); text-transform: uppercase; padding: .15rem 0 0; margin-bottom: -.25rem; }

/* "Take a pause" sky fades out at the bottom instead of ending on a hard line (keeps the torn top edge) */
@media all {
  .section[data-svg="breath"] {
    -webkit-mask-image: url('../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg'), linear-gradient(180deg, #000 calc(100% - var(--pause-fade, 7rem)), transparent);
    mask-image: url('../68e01f11b96ed794c55e8e4d_be70b9722cafdb3a464777bdf72afc9f_quote-top-clip.svg'), linear-gradient(180deg, #000 calc(100% - var(--pause-fade, 7rem)), transparent);
    -webkit-mask-size: cover, 100% 100%; mask-size: cover, 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}
@media (min-width: 768px) { .section[data-svg="breath"] { --pause-fade: 16rem; } }
/* iOS shows a big play button over background videos when it won't autoplay (e.g. Low Power Mode): hide it, the poster stays */
video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-panel, video::-webkit-media-controls { display: none !important; -webkit-appearance: none; opacity: 0; }

/* phones: the live cams section is left out */
@media (max-width: 767px) { .livecam:not(.is-full) { display: none !important; } }

/* phones: playground carousel popup */
.pgx { position: fixed; inset: 0; z-index: 2000; background: #111111f2; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; opacity: 0; transition: opacity .25s ease; }
.pgx.is-open { opacity: 1; }
.pgx_track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; scroll-behavior: smooth; }
.pgx_track::-webkit-scrollbar { display: none; }
.pgx_slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 4.5rem 1.25rem 3.5rem; box-sizing: border-box; }
.pgx_slide img { max-width: 100%; max-height: calc(100% - 3rem); object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 20px 50px -10px #00000080; }
.pgx_cap, .pgx_link { margin: 0; font-size: .95rem; color: #ffffffd9; text-decoration: none; text-align: center; }
.pgx_link { border-bottom: 1px solid #ffffff59; padding-bottom: 2px; }
.pgx_close { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0 !important; box-shadow: none !important; outline: none; background: #ffffff1f; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }
.pgx_count { position: absolute; left: 0; right: 0; bottom: max(1.25rem, env(safe-area-inset-bottom)); margin: 0; text-align: center; opacity: .7; letter-spacing: var(--track-label); }
html.pgx-open, html.pgx-open body { overflow: hidden; }


/* cams: the fullscreen button sits in the bottom-right corner (clear of the torn footer edge) */
.livecam_expand { top: auto !important; bottom: calc(clamp(1rem, 2.5vw, 2rem) + 56px); right: clamp(1rem, 2.5vw, 2rem); } /* same inset as the × in full screen, lifted clear of the torn footer edge */


/* cam skeleton: a soft, grey, blurred daytime frame of the Venice boardwalk under the shimmer */
.section.livecam:not(.is-switching) { background: #ecebe8 url('../cam-skeleton.jpg?v=1794188864') center / cover no-repeat; }

/* phones have no cams, so the 'stare into the sunset' hint is left out there */


/* contact intro: three short lines (Talk / Read / Unwind) */
.ways { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: 0; }
.ways_row { display: block; }
.ways_k { color: inherit; }

/* contact, desktop: title and Talk / Read / Unwind on the left, the form on the right (phones keep the centred stack) */
@media (min-width: 992px) {
  .contact-intro .row > .col.col-lg-5 { flex: 0 0 83.333%; max-width: 83.333%; width: 83.333%; padding-top: clamp(2rem, 5vw, 4.5rem); }
  .contact-intro .col > .u-vflex-stretch-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: clamp(3rem, 8vw, 8rem); row-gap: 0; align-items: start; }
  .contact-intro .col > .u-vflex-stretch-top > .u-vflex-center-top { grid-column: 1; grid-row: 1; align-items: flex-start; }
  .contact-intro .col > .u-vflex-stretch-top > .u-align-center { grid-column: 1; grid-row: 2; text-align: left; margin-top: 1.25rem; }
  .contact-intro .col > .u-vflex-stretch-top > .w-form { grid-column: 2; grid-row: 1 / span 2; margin-top: .6rem; }
  .contact-intro .col > .u-vflex-stretch-top > .snail { grid-column: 1 / -1; grid-row: 3; }
  .contact-intro h1.u-align-center { text-align: left; }
  .contact-intro .ways { align-items: flex-start; }
}

/* contact form: the submit button is always there (dimmed until the form is complete) */
form[data-contact] [type=submit] { opacity: 1; visibility: visible; transform: none; }
form[data-contact] [type=submit]:disabled { opacity: .35; cursor: not-allowed; }

/* the cam link: plain text; after a beat a little sun pops in beside it */
.ways_sun { display: inline-block; margin-left: .3em; opacity: 0; transform: scale(.4) rotate(-40deg); animation: sun-pop .6s cubic-bezier(.34, 1.56, .64, 1) 1.4s forwards; }
@keyframes sun-pop { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ways_sun { animation: none; opacity: 1; transform: none; } }

/* desktop: Talk / Read / Unwind in one column, the links lined up in the next */
@media (min-width: 992px) {
  .contact-intro .ways { display: grid; grid-template-columns: max-content max-content; column-gap: .45em; row-gap: .3rem; justify-content: start; }
  .contact-intro .ways_row { display: contents; }
  .contact-intro .ways_row > a { justify-self: start; }
}

/* About: the Expertise eyebrow stays put while the podcast video slides over it, then the copy below takes over */
@media (min-width: 480px) {
  .marker-tuck { align-self: stretch; } /* its bottom margin is set in site.js (0r) */
  .section:has(> .about_video), .section:has(.about_video) { position: relative; z-index: 2; }
}

/* video tags (live cam label, podcast caption): a strip of black gaffer tape instead of a glassy pill —
   flat matte black, square, a slight tilt, and torn zig-zag ends */
.livecam .livecam_note, .about_video-cap.cc-on-video .tape {
  border-radius: 0 !important; background: #121212 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: .5rem 1.1rem !important; color: #f2f0eb;
  box-shadow: none;
  background-image: linear-gradient(180deg, #ffffff05, #ffffff00 40%, #00000014) !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5px) 22%, 100% 48%, calc(100% - 2px) 74%, 100% 100%, 0 100%, 1.5px 76%, 0 52%, 2px 27%);
  rotate: -1.2deg;
}
.about_video-cap.cc-on-video:hover .tape { background-color: #000 !important; }
.livecam .livecam_note .livecam_src, .livecam .livecam_note .livecam_time { border-left-color: #ffffff33; }

/* podcast caption: two separate pieces of tape, "Noun Project" and "Design Icons Podcast", with a gap between */
.about_video-cap.cc-on-video { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; border-radius: 0 !important; gap: .5rem; align-items: center; }
.about_video-cap.cc-on-video .tape { display: inline-block; }
.about_video-cap.cc-on-video .tape + .tape { rotate: .8deg; translate: 0 2px; }

/* touch screens: the close button is always showing in full screen (there is no hover to reveal it) */
@media (hover: none), (max-width: 767px) { .livecam.is-full .livecam_close { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } }

/* phones: the Talk / Read / Unwind links get more room, so each one is an easy, separate tap */
@media (max-width: 991px) { .contact-intro .ways { gap: 1.1rem; margin-top: .4rem; } .contact-intro .ways a::before { top: -11px; bottom: -11px; left: -12px; right: -12px; } }

/* full screen: no fullscreen button, and a small spinner in the middle until the stream is up */
.livecam.is-full .livecam_expand { display: none !important; }
.livecam.is-full::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 4; width: 1.75rem; height: 1.75rem; margin: -.875rem 0 0 -.875rem; border-radius: 50%;
  border: 2px solid #1d1d1d26; border-top-color: #1d1d1da6; animation: cam-spin .9s linear infinite; pointer-events: none; transition: opacity .4s ease; }
.livecam.is-full.is-switching::after { border-color: #ffffff2e; border-top-color: #ffffffbf; }
.livecam.is-full.is-live:not(.is-switching)::after, .livecam.is-full.is-offline::after { opacity: 0; animation: none; }
@keyframes cam-spin { to { transform: rotate(360deg); } }
.livecam.is-full .livecam_ui { opacity: 1 !important; } /* the close button is reachable right away, even before YouTube is ready */

/* phones: the cam tape tag sits at the top left */
@media (max-width: 767px), (pointer: coarse) and (max-height: 540px) { .livecam .livecam_note, .livecam.is-full .livecam_note { top: calc(env(safe-area-inset-top, 0px) + 1.4rem) !important; bottom: auto !important; left: 1rem !important; } }

/* phones held upright, full screen */
@media (max-width: 767px), (pointer: coarse) and (max-height: 540px) {
  /* player controls on phones, upright or sideways: the arrows sit together at the bottom right, just above the tape tag */
  .livecam.is-full .livecam_btn { top: auto !important; translate: none !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem) !important; width: 2.75rem; height: 2.75rem; }
  .livecam.is-full .livecam_btn[data-dir="-1"] { left: auto !important; right: calc(1rem + 2.75rem + 1rem) !important; }
  .livecam.is-full .livecam_btn[data-dir="1"] { right: 1rem !important; }
}

/* phones and tablets: contact title and Talk / Read / Unwind left-aligned, in line with the form */
@media (max-width: 991px) {
  .contact-intro .u-vflex-center-top { align-items: flex-start; }
  .contact-intro h1.u-align-center, .contact-intro .u-vflex-stretch-top > .u-align-center { text-align: left; }
  .contact-intro .ways { align-items: flex-start; }
}
@media (pointer: coarse) and (max-height: 540px) and (orientation: landscape) { .livecam.is-full .livecam_btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important; } } /* sideways: arrows on the same line as the tape tag */

.ways_sep { white-space: pre; }
@media (max-width: 991px) { .ways_sep { padding-right: .3em; } }

/* mobile menu: social icons along the bottom */
.nav_socials { display: none; }
@media (max-width: 767px) {
  .navigation .nav_list .nav_socials { display: flex; gap: 1.5rem; position: absolute; left: var(--_layout---columns--size, 1rem); bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
    opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
  .navigation.is-menu-open .nav_list .nav_socials { opacity: 1; transform: none; transition-delay: .35s; }
  .nav_social { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: -.6rem; color: var(--_colors---all--black, var(--ink)); opacity: .45; }
  .nav_social::after, .nav_social::before { display: none !important; }
  .navigation.is-menu-leaving .nav_list .nav_socials { opacity: 0 !important; transition: none !important; }
}


/* 404: the words sit top-left, left-aligned, out of the skater's way */
.page-wrapper.cc-utility .utility_container { position: absolute; top: clamp(7rem, 14vh, 10rem); left: var(--_layout---columns--gutter, 1.5rem); right: auto; bottom: auto;
  text-align: left; display: flex; flex-direction: column; align-items: flex-start; max-width: min(36rem, calc(100% - 3rem)); margin: 0; }
@media (min-width: 992px) { .page-wrapper.cc-utility .utility_container { left: clamp(2rem, 5vw, 5rem); } }
.page-wrapper.cc-utility .utility_container h1 { text-shadow: 0 2px 30px #0000004d; }

/* 404: a slim black band above and below the clip, to balance its baked-in side borders */
.page-wrapper.cc-utility { background: #000; }
.page-wrapper.cc-utility .w-background-video { top: clamp(1.5rem, 5vh, 3.5rem) !important; bottom: clamp(1.5rem, 5vh, 3.5rem) !important; height: auto !important; }

/* 404, phones: words centred in the clip, and smaller */
.page-wrapper.cc-utility .utility_container.is-centered { text-align: center; align-items: center; }
@media (max-width: 767px) {
  .page-wrapper.cc-utility .utility_container h1 { font-size: 1.7rem; line-height: 1.1; }
  .page-wrapper.cc-utility::after { content: ""; position: absolute; left: 0; right: 0; top: var(--shade-top, 0); height: var(--shade-h, 40%); z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, #000000d9 0%, #000000a6 55%, #00000000 100%); }
}

/* playground carousel: count bottom-left, prev/next arrows bottom-right */
.pgx_count { left: 1.25rem !important; right: auto !important; text-align: left !important; bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + .9rem) !important; }
.pgx_nav { position: absolute; right: 1rem; bottom: max(1.25rem, env(safe-area-inset-bottom)); display: flex; gap: 1rem; }
.pgx_arrow { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0 !important; box-shadow: none !important; background: #ffffff1f; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.pgx_arrow::before, .pgx_arrow::after { display: none !important; }
.pgx_slide.is-in img { animation: pgx-in .35s ease both; }
@keyframes pgx-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* phones: the line under "Select projects" / "Select courses" sits a little closer to the heading */
@media (max-width: 767px) { .section .row.row-between.row-bottom.u-vgap-24 > .col:has(> h1) + .col > p { margin-top: -.75rem; } }
/* mobile menu: bigger social icons */
@media (max-width: 767px) { .navigation .nav_list .nav_socials { gap: 1.75rem; } .nav_social { width: 3.25rem !important; height: 3.25rem !important; } .nav_social svg { width: 30px; height: 30px; } }

/* phones: more sky above the "Take a pause" sun, so its top rays clear the torn edge */
@media (max-width: 767px) { .section[data-svg="breath"] { aspect-ratio: auto !important; padding-top: 3.25rem !important; padding-bottom: 1rem !important; } }

/* testimonials: the projects carousel's round arrows, centred under the quote */
.tm-wrap .tm_slide { padding-left: 0 !important; padding-right: 0 !important; }
.tm-wrap { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
.tm-wrap .testimonial_pagination.tm-pag { position: relative; inset: auto; pointer-events: auto; margin: clamp(1.25rem, 2.5vw, 2rem) auto 0 !important; transform: none !important; border-color: #ffffff59; } /* fixed in one spot, under the longest quote */
.tm-pag .testimonial_controls { opacity: 1 !important; }
.tm-pag .arrow-ink { background: #fff; }
.tm-pag .testimonial_controls:hover, .tm-pag .testimonial_controls.is-inked { color: #1d1d1b !important; }

/* About: the podcast tape sits half on, half off the bottom edge of the video */
.about_tape { position: relative; z-index: 3; height: 0; }
.about_tape .about_video-cap.cc-on-video { position: absolute !important; top: 0 !important; bottom: auto !important; left: var(--_layout---columns--size, 1.5rem); translate: 0 -50%; }
/* phone gallery: the same arrow pill as the projects carousel and testimonials */
.pgx_nav { gap: 0 !important; padding: .4rem; border: 1px solid #ffffff59; border-radius: var(--radius-pill, 99px); }
.pgx_arrow { background: none !important; width: 2.6rem !important; height: 2.6rem !important; transition: background-color .2s ease, color .2s ease; }
.pgx_arrow:active { background: #fff !important; color: #1d1d1b; }

/* Home link: only in the phone menu */
@media (min-width: 768px) { .nav_list .nav_home { display: none !important; } }

/* phone gallery: plain X, no circle behind it */
.pgx_close { background: none !important; }

/* course popup: the course's thumbnail sits on top */
.soon-modal .gate-modal_card .soon-modal_thumb { display: block; aspect-ratio: 16 / 10; height: auto; max-width: none; object-fit: cover; border-radius: 0;
  /* full bleed: out to the card's top and side edges */
  width: calc(100% + 2 * clamp(2.4rem, 4.8vw, 3.6rem)); margin: calc(-1 * clamp(3rem, 6vw, 4.5rem)) calc(-1 * clamp(2.4rem, 4.8vw, 3.6rem)) -.5rem; }
.soon-modal.has-thumb .gate-modal_close { color: #1d1d1b; z-index: 2; background: #ffffffbf; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 50%; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; padding: 0; }
.soon-modal.has-thumb .gate-modal_close svg { width: 18px; height: 18px; }
.soon-modal_thumb[hidden] { display: none !important; }

/* course popup: torn paper edge where the photo meets the white card */
.soon-modal .gate-modal_card .soon-modal_tear { display: block; position: relative; z-index: 1; flex: none; height: clamp(14px, 2.4vw, 22px); max-width: none;
  width: calc(100% + 2 * clamp(2.4rem, 4.8vw, 3.6rem)); margin: calc(-1 * clamp(14px, 2.4vw, 22px) - 2.4rem + .5rem) calc(-1 * clamp(2.4rem, 4.8vw, 3.6rem)) 0; }

/* iPhone: no rubber-band bounce past the footer (iOS only honours this on the root element) */
html { overscroll-behavior-y: none; }
/* the page wipe is taken out of the page entirely while idle (iPhone Safari counted it, parked below the screen, as extra page length) */
.page-wipe:not(.is-armed):not(.is-entering):not(.is-covering):not(.is-leaving) { display: none; }

/* hairlines (.u-border): one real 1px border, so every line in a list renders the same weight (half-pixel lines came out thin or thick depending on where they fell) */
.u-border { border: 0; border-top: 1px solid var(--background--invert); height: 0; }

/* playground captions: a strip of black tape stuck near the bottom-left of the photo (same tape as the video labels) */
.pg_credit { left: .7em; right: auto; bottom: .8em; max-width: calc(100% - 1.4em); width: fit-content; padding: .45em .9em; background: #121212; color: #f2f0eb;
  text-transform: uppercase; letter-spacing: var(--track-label, .08em); line-height: 1.25; rotate: -1.2deg;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5px) 22%, 100% 48%, calc(100% - 2px) 74%, 100% 100%, 0 100%, 1.5px 76%, 0 52%, 2px 27%); }
/* phone gallery captions get the same tape */
.pgx_cap, .pgx_link { display: inline-block; padding: .5em 1em; background: #121212; color: #f2f0eb !important; border: 0 !important; text-transform: uppercase; letter-spacing: var(--track-label, .08em); font-size: .78rem; rotate: -1.2deg;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5px) 22%, 100% 48%, calc(100% - 2px) 74%, 100% 100%, 0 100%, 1.5px 76%, 0 52%, 2px 27%); }
.pgx_link::before, .pgx_link::after { display: none !important; }
.pgx_cap, .pgx_link { position: relative; z-index: 1; margin-top: -2.35rem; }

/* desktop: the playground sits closer under "Take a pause" */
@media (min-width: 768px) { .section.pg[data-playground] { padding-top: 0; margin-top: -1.5rem; } }

/* homepage expertise list: no divider under the last item (Mentoring designers) */
body:has(.hero.cc-glow) .expertise_list-item:last-child > .u-border { display: none; }

/* playground gallery on larger screens: photo centred with room around it, arrows and count along the bottom */
@media (min-width: 768px) {
  .pgx_slide { padding: 5rem 6rem 6.5rem; }
  .pgx_slide img { max-height: calc(100% - 2rem); max-width: min(100%, 72rem); }
  .pgx_close { top: 1.5rem !important; right: 1.5rem !important; }
  .pgx_nav { right: 1.5rem; bottom: 1.5rem; }
  .pgx_count { left: 1.75rem !important; bottom: 2.4rem !important; }
  .pgx_arrow:hover { background: #fff !important; color: #1d1d1b; }
}
.pg.is-settled .pg_stage, .pg .pg_sticky { cursor: zoom-in; }
@media (min-width: 768px) { .pgx_slide img { box-shadow: none; } } /* desktop gallery: no drop shadow around the photo */
.pgx_count { font-size: var(--_typography---eyebrow--font-size-large, 1.125rem); opacity: .85; } /* gallery count in the eyebrow pixel type, full size */

/* About: "Where I've been" — app-icon style logos, a little loose and hand-placed; hover one for a note and a scribbled circle */
.journey_title { margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.journey_list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.4vw, 2rem); margin: 0; padding: 2rem 0 0; }
.jr_item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem; width: clamp(5.5rem, 9.5vw, 8.5rem); outline: none; cursor: default;
  rotate: calc((var(--k) - 2) * 1.4deg); translate: 0 calc(sin(var(--k) * 1.7) * 7px); }
.jr_icon { display: block; width: 100%; aspect-ratio: 1; border-radius: 28%; overflow: hidden; box-shadow: 0 1px 2px #0000000f, 0 10px 24px -10px #00000040; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.jr_icon svg { display: block; width: 100%; height: 100%; }
.jr_item:nth-child(2) .jr_icon { border-radius: 4%; }
.journey_list { max-width: none; flex-wrap: nowrap; }
@media (max-width: 991px) { .journey_list { flex-wrap: wrap; } } /* the Bureau mark is square */
.jr_item:nth-child(odd) .jr_icon { animation: jr-bob 7s ease-in-out infinite; } .jr_item:nth-child(even) .jr_icon { animation: jr-bob 8s ease-in-out -3s infinite; }
@keyframes jr-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(.6deg); } }
.jr_label { font-size: var(--_typography---eyebrow--font-size-small, .875rem); text-align: center; }
/* the scribbled circle draws itself on hover */
.jr_mark { position: relative; display: block; width: 100%; }
.jr_circle { position: absolute; left: -16%; top: -16%; width: 132%; height: 132%; max-width: none; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .2s ease .3s; }
.jr_item:hover .jr_circle, .jr_item:focus-visible .jr_circle { opacity: 1; transition-delay: 0s; }
.jr_circle path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease; }
.jr_item:hover .jr_circle path, .jr_item:focus-visible .jr_circle path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.6, .1, .3, 1); }
.jr_item:hover .jr_icon, .jr_item:focus-visible .jr_icon { transform: scale(1.04) rotate(-1.5deg); animation-play-state: paused; }
/* the note: a white card above, tilted, popping in */
.jr_tip { position: absolute; bottom: calc(100% + 1rem); left: 50%; z-index: 5; width: max-content; max-width: min(26rem, 80vw); padding: 1.1rem 1.25rem 1.2rem; background: #fff; border-radius: 14px;
  box-shadow: 0 1px 2px #0000000d, 0 18px 40px -14px #00000040; display: flex; flex-direction: column; gap: .55rem; text-align: left; pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px) rotate(-3deg) scale(.96); transform-origin: 50% 100%; transition: opacity .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.jr_item:hover .jr_tip, .jr_item:focus-visible .jr_tip { opacity: 1; transform: translate(-50%, 0) rotate(-2deg) scale(1); }
.jr_tip-text { font-size: .95rem; line-height: 1.35; max-width: 22rem; }
.jr_item:first-child .jr_tip { left: 0; transform: translate(0, 8px) rotate(-3deg) scale(.96); transform-origin: 20% 100%; }
.jr_item:first-child:hover .jr_tip, .jr_item:first-child:focus-visible .jr_tip { transform: translate(0, 0) rotate(-2deg) scale(1); }
.jr_item:last-child .jr_tip { left: auto; right: 0; transform: translate(0, 8px) rotate(-3deg) scale(.96); transform-origin: 80% 100%; }
.jr_item:last-child:hover .jr_tip, .jr_item:last-child:focus-visible .jr_tip { transform: translate(0, 0) rotate(-2deg) scale(1); }
@media (max-width: 767px) { .journey_list { gap: 1.75rem 1.25rem; } .jr_item { width: calc(33% - 1rem); } .jr_tip { max-width: 78vw; } }
@media (prefers-reduced-motion: reduce) { .jr_icon { animation: none !important; } }

/* Where I've been: one straight, even row (no tilt or bob) */
.journey_list { justify-content: space-between; align-items: flex-start; gap: 1.25rem; padding-top: 2.5rem; }
.jr_item { rotate: none !important; translate: none !important; flex: 1 1 0; width: auto; max-width: 9.5rem; }
.jr_icon { animation: none !important; border-radius: 22%; box-shadow: inset 0 0 0 1px #00000010; }
.jr_item:nth-child(2) .jr_icon { border-radius: 0; }
.jr_item:hover .jr_icon, .jr_item:focus-visible .jr_icon { transform: none; }
.jr_label { font-size: var(--_typography---eyebrow--font-size-small, .875rem); margin-top: .3rem; }
@media (max-width: 991px) { .journey_list { flex-wrap: wrap; justify-content: center; } .jr_item { flex: 0 0 calc(33% - 1rem); max-width: none; } }
.jr_icon.cc-img { box-shadow: none; background: none; } .jr_icon.cc-img img { display: block; width: 100%; height: 100%; object-fit: cover; } /* exported app icons bring their own tile */
.pg_title { margin-bottom: .6rem; position: relative; z-index: 2; }
.pg_sub { margin: 0 0 clamp(3rem, 6vw, 5rem); position: relative; z-index: 2; color: var(--text--secondary, #2e2e2e99); }
/* every tile shares one corner radius (matching the exported icons); Bureau stays square */
.jr_icon { border-radius: 23% !important; }
.jr_item:nth-child(2) .jr_icon { border-radius: 0 !important; }
/* My journey: the icon row runs wider than the text column on desktop; phones leave the section out */
.journey > .journey_list { width: min(calc(100% - 4rem), 96rem); margin-left: auto; margin-right: auto; }
.jr_icon { box-shadow: 0 1px 2px #0000000d, 0 6px 12px -4px #00000014, 0 18px 36px -10px #00000026, 0 40px 70px -24px #00000033 !important; }
@media (max-width: 767px) { .section.journey { display: none; } }
.section.journey { padding-top: calc(var(--_layout---section--padding) * .5); } /* My journey sits a little closer to the section above */
.journey .journey_title { margin-bottom: 1.25rem; } .journey > .journey_list { padding-top: .5rem; } /* icons sit close under the title */
.section.journey { padding-bottom: calc(var(--_layout---section--padding) * 1.5); }
/* exported icons: zoomed a touch inside the tile so their own baked edges and corners never peek out */
.jr_icon.cc-img img { transform: scale(1.06); }
.jr_item:nth-child(2) .jr_icon.cc-img img { transform: scale(1.02); }
/* each tile a few degrees off kilter */
.jr_item:nth-child(7n+1) .jr_mark { rotate: -2.5deg; } .jr_item:nth-child(7n+2) .jr_mark { rotate: 2deg; } .jr_item:nth-child(7n+3) .jr_mark { rotate: -1.5deg; }
.jr_item:nth-child(7n+4) .jr_mark { rotate: 3deg; } .jr_item:nth-child(7n+5) .jr_mark { rotate: -2deg; } .jr_item:nth-child(7n+6) .jr_mark { rotate: 2.5deg; } .jr_item:nth-child(7n+7) .jr_mark { rotate: -3deg; }
/* About: real room between My journey and My playground */
@media (min-width: 768px) { .section.journey + .section.pg[data-playground] { margin-top: 0; padding-top: calc(var(--_layout---section--padding) * .5); } }
/* hover: the tile presses down, the shadow tucks in close, and the logo shrinks 10% */
.jr_icon { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease !important; }
.jr_item:hover .jr_icon, .jr_item:focus-visible .jr_icon { transform: translateY(2px) scale(.9) !important; box-shadow: 0 1px 1px #00000014, 0 3px 6px -2px #0000001f !important; }
/* My journey: always one row of seven that scales down smoothly with the window (never wraps into giant tiles); hidden on phones */
.journey > .journey_list { flex-wrap: nowrap !important; justify-content: center !important; gap: clamp(.75rem, 2vw, 2rem) !important; }
.journey .jr_item { flex: 0 1 auto !important; width: clamp(4.5rem, 10vw, 9rem) !important; max-width: 9rem !important; }
.journey .jr_label { font-size: clamp(.6rem, .9vw, .8rem); white-space: nowrap; }
.section.cc-love { padding-top: calc(var(--_layout---section--padding) * .5); } /* About: "I love building brands…" sits closer to the intro above */
.pg_title { margin-top: clamp(1.5rem, 3vw, 2.5rem); } /* My playground sits a little lower */
.ways_arrow { display: inline-block; width: 1.9em; height: 1.9em; margin-left: .15em; vertical-align: -.95em; overflow: visible; max-width: none; }
.ways_arrow path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .88; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ways_arrow-line { animation: arrow-draw .7s cubic-bezier(.6, .1, .3, 1) 1.9s forwards; }
.ways_arrow-head { animation: arrow-draw .3s ease-out 2.55s forwards; }
@keyframes arrow-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ways_arrow path { animation: none; stroke-dashoffset: 0; } }
.pg_title { margin-top: clamp(3rem, 6vw, 5rem); } /* My playground lower again */
.jr_icon.cc-img img[src*="jr-headspace"] { transform: scale(1.17); } /* Headspace smiley 10% larger */
.pg_title, .pg_sub { translate: 0 32px; } /* My playground title and line sit 32px lower; the photos stay put */
@media (max-width: 767px) { .ways_sun { animation: none; opacity: 1; transform: none; } .ways_arrow path { animation: none; stroke-dashoffset: 0; } } /* phones: sun and arrow just sit there */

/* project pages: case-study images fill their column */
.rb-img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm, 2px); }
.row.u-vgap + .row.u-vgap { margin-top: var(--_spacing---rems--1-5rem, 1.5rem); }

/* case study pages: once you scroll into the story, the page fades to pure black (images sit better on it) */
html[data-wf-item-slug] .page-main, html[data-wf-item-slug] .page-main .section { transition: background-color .9s ease, color .9s ease; }
html[data-wf-item-slug].case-dark body, html[data-wf-item-slug].case-dark .page-wrapper, html[data-wf-item-slug].case-dark .page-main { background-color: #000; }
html[data-wf-item-slug].case-dark .page-main .section {
  background-color: #000; color: #fff;
  --background--primary: #000; --text--primary: #fff; --text--secondary: #ffffffb3; --text--tertiary: #ffffff3d;
  --background--invert: #fff; --background--invert-secondary: #ffffffb3; --background--brand: #fff; --background--border: #ffffff26;
  --button-primary--border: #fff; --button-primary--background: #fff; --button-primary--text: #000;
  --button-secondary--border: #fff; --button-secondary--background: transparent; --button-secondary--text: #fff;
  --button-primary--border-hover: #fff; --button-primary--background-hover: transparent; --button-primary--text-hover: #fff;
  --button-secondary--border-hover: #fff; --button-secondary--background-hover: #fff; --button-secondary--text-hover: #000;
}
html[data-wf-item-slug].case-dark .page-main .u-border { border-color: #ffffff40; }
.rb-bleed img { object-fit: cover; } /* full-bleed case study media (images now, videos later) */

/* case studies: no sticky side eyebrow */
html[data-wf-item-slug] .section_marker { display: none !important; }
/* case study header: brand icon, external link */
.project_icon img { display: block; width: 2.5rem; height: 2.5rem; border-radius: 22%; }
.rb-ext { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3em; }
.rb-ext svg { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.rb-ext:hover svg { transform: translate(2px,-2px); }
.rb-list { margin: 0; padding: 0; list-style: none; }
/* case study building blocks */
.rb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.rb-cols { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.rb-cols.cc-2 { grid-template-columns: repeat(2, 1fr); }
.rb-cols.cc-3 { grid-template-columns: repeat(3, 1fr); }
.rb-cols.cc-4 { grid-template-columns: repeat(4, 1fr); }
.rb-cols > div { display: flex; flex-direction: column; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--background--border, #ffffff26); }
.rb-cols p { margin: 0; color: var(--text--secondary); }
.rb-stats > div { gap: 1rem; }
.rb-quote { display: flex; flex-direction: column; gap: 1.5rem; max-width: 52rem; }
.rb-quote blockquote { margin: 0; }
.rb-white { background: #fff; border-radius: var(--radius-sm, 2px); padding: clamp(1rem, 3vw, 2.5rem); }
.rb-white img { display: block; width: 100%; height: auto; }
.rb-white.rb-center { display: flex; align-items: center; justify-content: center; align-self: stretch; box-sizing: border-box; }
.rb-white.rb-center img { max-width: 70%; }
.rb-phones { display: flex; justify-content: center; gap: clamp(1.5rem, 8vw, 8rem); padding-block: clamp(2rem, 5vw, 4rem); }
.rb-phones img { width: min(36%, 280px); }
.rb-sign { margin: 0; }
@media (max-width: 767px) {
  .rb-grid2, .rb-cols.cc-3, .rb-cols.cc-4 { grid-template-columns: 1fr; }
  .rb-white.rb-center img { max-width: 100%; }
}
@media (min-width: 768px) and (max-width: 991px) { .rb-cols.cc-4 { grid-template-columns: repeat(2, 1fr); } }
/* cams full screen: the close button never hides (after clicking into the video, the page stops seeing the mouse, so it could vanish for good) */
.livecam.is-full .livecam_close { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
/* carousels: no card snapping, it pulled small leftward trackpad swipes straight back so you couldn't scroll left (the arrows still step one card) */
.swiper:has(> .swiper-wrapper.cc-project) { scroll-snap-type: none !important; }
/* headings: the tight display font read "with a" as "witha" */
h1, h2, h3, .h1, .h2, .h3 { word-spacing: .1em; }