/* Tokens from SoCreative Brand Guidelines V1.0 (Figma boj5vIUQvfkpmoBOwqZinV) */
:root {
  /* Everyday five */
  --purple: #7852D4;
  --lavender: #DFD9F6;
  --black: #1B1B1B;
  --white: #FFFFFF;
  --grey: #F6F6F6;
  /* Supporting */
  --label: #787878;
  --body: #55555C; /* subheadings and supporting copy, darker than label grey */
  --border: #DCE0E5;
  --purple-deep: #704CC7;
  /* Accents: illustration and icon tiles only, never the logo */
  --coral: #E86FAF;
  --cobalt: #4F73E8;
  --teal: #2AAE9B;
  --orange: #F29A5A;
  /* Functional */
  --success: #33B074;

  /* Approved gradients (stops and opacities from the guideline, direction adjusted) */
  --grad-primary: radial-gradient(130% 130% at 0% 0%, #DFD9F6 0%, #7852D4 45%, rgba(120, 82, 212, .6) 85%, #DFD9F6 100%);
  --grad-secondary: radial-gradient(130% 130% at 0% 0%, #FFFFFF 0%, #DFD9F6 45%, rgba(223, 217, 246, .8) 65%, #FFFFFF 100%);
  --grad-grey: radial-gradient(130% 130% at 0% 0%, #FFFFFF 0%, #DCE0E5 45%, rgba(220, 224, 229, .65) 55%, #FFFFFF 100%);

  --wrap: 1280px;
  --r-panel: 32px;
  --r-card: 24px;
  --r-ui: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-ui: 0 16px 40px rgba(27, 27, 27, .10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 500; color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; }
a { -webkit-user-drag: none; }
.dlogo, .logo-marquee img { pointer-events: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
svg { flex-shrink: 0; }

/* Text selection: brand lavender, same as the live site */
::selection { background-color: #DFD9F6; color: #1B1B1B; }
::-moz-selection { background-color: #DFD9F6; color: #1B1B1B; }

/* ---------- Type scale (guideline: Typography hierarchy) ---------- */
h1, h2, h3 { text-wrap: balance; }
p, blockquote { text-wrap: pretty; }
.hero h1 { font-size: 88px; line-height: 90px; font-weight: 800; letter-spacing: -0.04em; }
.h2 { font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.04em; }
.sing-head .h2, .stories-panel .h2 { font-size: 48px; line-height: 52px; letter-spacing: -0.04em; }
.h3 { font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.04em; }
.lead { font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--body); }
.micro { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--label); }
.micro a { color: var(--black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.eyebrow { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--label); }
.muted { color: var(--label); }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.section { padding-block: 128px; }
.center-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 820px; margin: 0 auto 64px; padding-inline: 16px; }
.center-head .lead { max-width: 600px; }
.center-head .btn, .center-head .link { margin-top: 8px; }
.panel { margin: 0 16px; border-radius: var(--r-panel); background: var(--grey); }

/* ---------- Buttons: colour change on hover only ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 136px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 15px; line-height: 20px; white-space: nowrap; transition: background-color .15s; }
.btn:active { outline: 2px solid var(--lavender); }
.btn-lg { height: 41px; min-width: 143px; padding: 0 22px; border-radius: 9px; }
.btn-purple { background: var(--purple); color: var(--white); border-radius: 9px; }
.btn-purple:hover { background: var(--purple-deep); }
.btn-black { background: var(--black); color: var(--white); }
.btn-black:hover { background: #3A3A3A; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; color: var(--purple); transition: color .2s; }
.link:hover { color: var(--purple-deep); }
.link.dark { color: var(--black); }
.link.dark:hover { color: var(--purple); }
.link.light { color: var(--white); }
.link.light:hover { color: var(--lavender); }
.ulink { align-self: flex-start; font-weight: 600; font-size: 16px; color: var(--purple); transition: color .2s; }
.ulink:hover { color: var(--purple-deep); }

/* ---------- Icon tiles (Calendly product marks, Dovetail-style depth) ----------
   Rounded tile in a brand colour, soft top highlight and bottom shade,
   white rounded-outline glyph (guideline icon rule: rounded outline, white). */
.ico { --c: var(--purple); position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; color: var(--white); font-style: normal;
  background: var(--c); }
.ico svg { width: 18px; height: 18px; stroke-width: 2.2; }
.ico.md { width: 44px; height: 44px; border-radius: 13px; }
.ico.md svg { width: 22px; height: 22px; }
.c-purple { --c: var(--purple); } .c-cobalt { --c: var(--cobalt); } .c-coral { --c: var(--coral); } .c-teal { --c: var(--teal); } .c-orange { --c: var(--orange); }

/* ---------- Header + Service menu ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; transition: background-color .3s, transform .45s var(--ease); }
/* Scrolled: full-width frosted bar across the top (live site) */
.site-header.scrolled { background: rgba(255, 255, 255, .75); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 72px; margin: 0 auto; width: 100%; padding-inline: max(40px, calc((100vw - 1280px) / 2)); border-radius: 20px; background: transparent; transition: width .45s var(--ease), margin .45s var(--ease), padding .45s var(--ease), background-color .3s, box-shadow .3s, height .45s var(--ease); }
.brand { justify-self: start; }
.brand img { width: 140px; height: auto; transform: translateY(1px); }
.main-nav { display: flex; align-items: center; gap: 36px; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: #111827; white-space: nowrap; transition: color .15s; }
.nav-link:hover, .nav-link[aria-expanded="true"] { color: #4B5563; }
.chev { transition: transform .3s var(--ease); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
/* One shared dropdown card (like the live site): it resizes to fit each menu while the contents crossfade */
.menu-shell { position: absolute; left: 50%; top: 76px; width: 860px; height: 300px; max-width: calc(100vw - 32px); background: var(--white); border: 1px solid rgba(27, 27, 27, .06); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(27, 27, 27, .03), 0 12px 32px -8px rgba(27, 27, 27, .08), 0 32px 64px -16px rgba(27, 27, 27, .10); overflow: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, -8px); transition: opacity .25s var(--ease), transform .35s var(--ease), width .55s cubic-bezier(.45, 0, .2, 1), height .55s cubic-bezier(.45, 0, .2, 1); }
.menu-shell.open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.menu-shell.instant { transition: opacity .25s var(--ease), transform .35s var(--ease); }
.menu-panel { position: absolute; left: 0; top: 0; width: 860px; max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.menu-panel.open { opacity: 1; pointer-events: auto; transition: opacity .35s ease .15s; }
.menu-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 12px; font-size: 13px; font-weight: 600; }
.menu-top .link { font-size: 13px; }
.menu-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 22px 20px; }
/* Neutral grey tiles (James 2026-10-14); the illustrations carry the only colour */
.menu-tile { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 18px; border-radius: 16px; background-color: var(--grey); transition: background-color .3s ease; }
.menu-tile:hover { background-color: #EEEEF0; }
/* Each tile carries its pillar colour (same tints as the pillar tabs) */
.menu-illus { position: relative; height: 128px; display: grid; place-items: center; overflow: hidden; margin-bottom: 6px; }
.menu-illus img { position: relative; height: 108px; width: auto; }
/* Tone-on-tone pillar pattern behind each character (bars, dots, stripes, as on the pillar tabs) */
.mi-pat { display: none; }
.menu-tile strong { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; padding: 0 6px; }
.menu-tile > span { color: var(--body); font-size: 13px; line-height: 19px; padding: 0 6px; }
/* List-style dropdowns (Use cases, Resources) */
.menu-list { width: 640px; }
.mlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding: 20px; }
.mlist-col { display: flex; flex-direction: column; gap: 2px; }
.mlist-col > .muted { font-size: 13px; font-weight: 600; padding: 4px 10px 8px; }
.mlist-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; transition: background .2s; }
.mlist-item:hover { background: var(--grey); }
.mlist-item .ico.md { width: 36px; height: 36px; border-radius: 10px; }
.mlist-item .ico svg { width: 18px; height: 18px; }
.mlist-item span { display: flex; flex-direction: column; }
.mlist-item strong { font-size: 15px; font-weight: 700; }
.mlist-item small { font-size: 13px; color: var(--label); white-space: nowrap; }
.menu-scrim { position: fixed; inset: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 40; }
.menu-scrim.open { opacity: 1; pointer-events: auto; }

/* ---------- Hero ---------- */
main { padding-top: 72px; }
.hero { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 80px 16px 0; }
.hero h1 { max-width: 980px; }
.hero .lead { max-width: 600px; }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; }
/* .load-up kept as a hook only: hero text shows immediately, no slide or fade (James 2026-10-14) */

.logos { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 72px; }
.logos .micro { font-weight: 600; color: var(--black); }
.marquee { overflow: hidden; width: 100%; }
.marquee-track { display: flex; align-items: center; width: max-content; animation: slide 70s linear infinite; }
.marquee-track.back { animation-direction: reverse; }
.logos-band { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 0 0 48px; margin-top: calc(80px - (100vh - min(704px, 100vh - 186px)) / 2 - max(0px, (100vh - min(704px, 100vh - 186px)) / 2 - 56px)); }
.logos-band .micro { font-weight: 600; color: var(--black); margin-bottom: 8px; }
.logos-band .logo-marquee { max-width: 1180px; }
.logos-band .marquee-track.back { margin-left: -60px; }
@keyframes slide { to { transform: translateX(-50%); } }
.logo-marquee { max-width: 1040px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logo-marquee img { margin-right: 72px; flex-shrink: 0; width: auto; }

/* ---------- Pillars: Calendly-style expanding stage ---------- */
.grad-primary { background: var(--grad-primary); }
.grad-secondary { background: var(--grad-secondary); }
/* Hero: full-bleed, no box edge. White under the header, easing into grey (like How it works),
   then fading back to white behind the pillar card so there is no defined line anywhere */
.hero-panel { padding-bottom: 180px; margin: 0; border-radius: 0;
  background: linear-gradient(180deg, var(--white) 0%, #FAFAFA 140px, var(--grey) 380px, var(--grey) 72%, var(--white) 100%); }
.pscroll { position: relative; height: 410vh; margin-top: -200px; }
.psticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.pstage { position: relative; width: min(1180px, 100vw - 64px); height: 640px; border-radius: 32px; overflow: hidden; isolation: isolate; will-change: width, height; }
.pbg, .pbg i { position: absolute; inset: 0; }
.pbg i { opacity: 0; transition: opacity 1s ease; background-size: 160% 160%; animation: drift 16s ease-in-out infinite alternate; }
.pbg i.on { opacity: 1; }
/* Brand purple gradient base; a different glow per tab so the stage shifts colour */
.pbg .l0 { background: radial-gradient(55% 60% at 88% 12%, rgba(79, 115, 232, .75), transparent 62%), radial-gradient(50% 55% at 8% 92%, rgba(223, 217, 246, .95), transparent 60%), var(--grad-primary); }
.pbg .l1 { background: radial-gradient(55% 60% at 12% 10%, rgba(232, 111, 175, .6), transparent 62%), radial-gradient(55% 55% at 92% 90%, rgba(223, 217, 246, .9), transparent 60%), var(--grad-primary); }
.pbg .l2 { background: radial-gradient(60% 60% at 80% 85%, rgba(223, 217, 246, .95), transparent 60%), radial-gradient(50% 55% at 15% 15%, rgba(112, 76, 199, .9), transparent 60%), var(--grad-primary); }
/* Gentle, always-on movement: each layer's glows wander slowly around the stage.
   (Size is set here, after the per-tab "background" shorthand, which would otherwise reset it.) */
.pbg i.l0, .pbg i.l1, .pbg i.l2 { background-size: 200% 200%; }
.pbg i.l1 { animation-duration: 19s; animation-delay: -6s; }
.pbg i.l2 { animation-duration: 22s; animation-delay: -11s; }
@keyframes drift { 0% { background-position: 0% 0%; } 33% { background-position: 70% 30%; } 66% { background-position: 40% 90%; } 100% { background-position: 100% 60%; } }
.pclose { position: absolute; right: 24px; top: 24px; z-index: 3; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--white); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); opacity: 0; pointer-events: none; transition: opacity .3s, background .2s; text-align: center; }
.pclose:hover { background: rgba(255, 255, 255, .24); }
.pstage.full .pclose { opacity: 1; pointer-events: auto; }
.pinner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }

/* Icon tabs: chunky tiles with a white rim; the active one fills and grows a stem into the card */
.ptabs { display: flex; gap: 10px; position: relative; z-index: 2; }
/* Calendly-style tabs: white squircle, coloured inner squircle, active tab drips into the card */
.ptab { position: relative; width: 56px; height: 56px; display: grid; place-items: center; color: #8A8A92; background: none; transition: color .35s; }
.ptab .pt-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.ptab .pt-in { fill: #ECECEF; transition: fill .45s cubic-bezier(.5, 0, .5, 1); }
.ptab.on .pt-in { fill: var(--c); }
/* Short, wide stem (Calendly): a 24px neck that flares into the card across a 12px gap */
.ptab .pt-neck { position: absolute; left: 50%; top: calc(100% - 2px); width: 56px; height: 16px; margin-left: -28px; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .3s ease, clip-path .5s cubic-bezier(.22, 1, .36, 1); }
.ptab.on .pt-neck { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .35s ease .1s, clip-path .55s cubic-bezier(.22, 1, .36, 1) .1s; }
.ptab > svg.lucide { position: relative; width: 24px; height: 24px; }
.ptab:hover { color: var(--black); }
.ptab.on { color: var(--white); }
.pfit { width: 1040px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; transform-origin: center; }
.pcard { position: relative; width: 100%; height: 460px; margin-top: 12px; background: var(--white); border-radius: 28px; box-shadow: 0 30px 70px rgba(27, 27, 27, .16); }
.pane { position: absolute; inset: 0; display: grid; grid-template-columns: .9fr 1.3fr; gap: 36px; padding: 36px; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.pane.on { opacity: 1; pointer-events: auto; }
.ptext { display: flex; flex-direction: column; gap: 18px; justify-content: flex-start; padding: 76px 0 0 16px; }
.ptext h2 { font-size: 40px; line-height: 43px; font-weight: 700; letter-spacing: -0.04em; }
.ptext p { color: var(--body); font-size: 16px; line-height: 24px; max-width: 380px; }
.ptext .ulink { margin-top: 4px; font-size: 14px; }
.ptext > * { transform: translateY(10px); opacity: 0; transition: transform .55s var(--ease), opacity .55s var(--ease); }
.pane.on .ptext > * { transform: none; opacity: 1; }
.pane.on .ptext > :nth-child(2) { transition-delay: .06s; } .pane.on .ptext > :nth-child(3) { transition-delay: .12s; } .pane.on .ptext > :nth-child(4) { transition-delay: .18s; }
.ico.sm { width: 26px; height: 26px; border-radius: 8px; }
.ico.sm svg { width: 15px; height: 15px; }
.badge { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; align-self: flex-start; }
.tag { font-style: normal; font-size: 13px; font-weight: 600; background: var(--grey); padding: 4px 9px; border-radius: 7px; color: var(--label); }
.ulink.dark { color: var(--black); }
.ulink.dark:hover { color: var(--purple); }

/* Right panel: accent tint, animated bars either side, UI in the middle */
.pvis { position: relative; border-radius: 20px; background: color-mix(in srgb, var(--c) 14%, white); display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.bars { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 6px; }
.bars i { width: 18px; height: 46%; border-radius: 12px; background: color-mix(in srgb, var(--c) 32%, white); transform-origin: center; animation: eq 2.4s ease-in-out infinite alternate; }
.bars i:nth-child(2) { height: 64%; animation-delay: -.6s; } .bars i:nth-child(3) { height: 38%; animation-delay: -1.2s; } .bars i:nth-child(4) { height: 56%; animation-delay: -1.8s; }
.bars:first-child { margin-left: -14px; } .bars:last-child { margin-right: -14px; flex-direction: row-reverse; }
@keyframes eq { from { transform: scaleY(.6); } to { transform: scaleY(1.15); } }
/* Team: two columns of soft dots that bob */
.bars.dots { display: grid; grid-template-columns: repeat(2, 30px); gap: 12px; align-content: center; padding: 0 10px; }
.bars.dots i { width: 30px; height: 30px; border-radius: 50%; animation: bob 2.6s ease-in-out infinite alternate; }
.bars.dots i:nth-child(2n) { animation-delay: -1.3s; } .bars.dots i:nth-child(3n) { animation-delay: -.7s; }
@keyframes bob { from { transform: translateY(-5px) scale(.9); } to { transform: translateY(5px) scale(1); } }
/* Platform: thin stripes that shimmer */
.bars.stripes { gap: 10px; padding: 0 12px; }
.bars.stripes i, .bars.stripes i:nth-child(n) { width: 5px; height: 70%; border-radius: 3px; animation: shimmer 2.2s ease-in-out infinite alternate; }
.bars.stripes i:nth-child(2n) { animation-delay: -.5s; } .bars.stripes i:nth-child(3n) { animation-delay: -1.1s; }
@keyframes shimmer { from { opacity: .45; transform: scaleY(.9); } to { opacity: 1; transform: scaleY(1); } }
.pvis .ui { position: relative; z-index: 1; transform: translateY(18px) scale(.97); opacity: 0; transition: transform .7s var(--ease) .1s, opacity .5s var(--ease) .1s; }
.pane.on .pvis .ui { transform: none; opacity: 1; }
.ui { background: var(--white); border-radius: var(--r-ui); box-shadow: var(--shadow-ui); padding: 20px; font-size: 14px; line-height: 20px; }
.ui strong { font-weight: 700; font-size: 15px; }
.ui small { color: var(--label); font-size: 12px; }

/* Network: booking calendar */
.cal { position: relative; display: flex; gap: 16px; width: 420px; }
.cal-l { flex: 1.25; }
.cal-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; }
.cal-h span { width: 22px; height: 22px; border-radius: 50%; background: var(--grey); display: grid; place-items: center; color: var(--label); }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 11px; }
.cal-g .wd { color: var(--label); font-size: 10px; font-weight: 600; }
.cal-g span { height: 24px; display: grid; place-items: center; border-radius: 50%; color: #B4B4BA; }
.cal-g span.av { color: var(--cobalt); background: color-mix(in srgb, var(--cobalt) 12%, white); font-weight: 600; }
.cal-g span.sel { background: var(--cobalt); color: var(--white); }
.pane.on .cal-g span.sel { animation: popday .6s var(--ease) .6s both; }
@keyframes popday { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.cal-r { flex: 1; min-width: 132px; display: flex; flex-direction: column; gap: 7px; text-align: center; }
.cal-r b { font-size: 14px; }
.cal-r small { margin-bottom: 4px; }
.t { display: flex; height: 34px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--cobalt) 35%, white); color: var(--cobalt); font-weight: 700; font-size: 12px; align-items: center; justify-content: center; gap: 4px; opacity: 0; transform: translateY(8px); transition: all .45s var(--ease); }
.pane.on .t { opacity: 1; transform: none; transition-delay: calc(.7s + var(--i) * .1s); }
.t em, .t strong { font-style: normal; display: grid; place-items: center; height: 100%; border-radius: 8px; transition: all .5s var(--ease); }
.t em { flex: 1; }
.t strong { width: 0; overflow: hidden; color: var(--white); background: var(--cobalt); font-size: 12px; }
.split { border: 0; gap: 4px; }
.split em { border: 1px solid color-mix(in srgb, var(--cobalt) 35%, white); }
.pane.on .split em { background: #6E717A; color: var(--white); border-color: #6E717A; transition-delay: 1.5s; }
.pane.on .split strong { width: 50%; transition-delay: 1.5s; }
.booked { position: absolute; left: 50%; bottom: -16px; transform: translate(-50%, 10px); white-space: nowrap; background: var(--black); color: var(--white); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 999px; opacity: 0; transition: all .5s var(--ease); }
.pane.on .booked { opacity: 1; transform: translate(-50%, 0); transition-delay: 2.4s; }

/* Team: photos + skeleton recap (Calendly Notetaker style) */
.crew { display: flex; gap: 14px; width: 400px; padding: 12px; }
.crew-ph { display: flex; flex-direction: column; gap: 8px; }
.crew-ph img { width: 118px; height: 118px; object-fit: cover; border-radius: 12px; opacity: 0; transform: translateX(-12px); transition: all .6s var(--ease); }
.pane.on .crew-ph img { opacity: 1; transform: none; transition-delay: .3s; }
.pane.on .crew-ph img + img { transition-delay: .45s; }
.crew-txt { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.crew-t { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.crew-t svg { color: var(--label); }
.crew-txt small { color: var(--black); font-weight: 600; font-size: 12px; margin-top: 4px; }
.crew-txt small em { font-style: normal; font-size: 10px; background: color-mix(in srgb, var(--coral) 18%, white); color: var(--coral); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.sk { display: flex; flex-direction: column; gap: 7px; padding-left: 10px; border-left: 2px solid var(--coral); }
.sk i { display: block; height: 6px; width: 0; border-radius: 3px; background: #E4E4E8; transition: width .7s var(--ease); }
.pane.on .sk i { width: var(--w); transition-delay: calc(.5s + var(--i) * .12s); }

/* Platform: review */
.rev { width: 380px; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.rv-frame { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 8.5; }
.rv-frame img { width: 100%; height: 100%; object-fit: cover; }
.rv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--purple); display: grid; place-items: center; }
.rv-bar { position: relative; height: 6px; background: var(--grey); border-radius: 3px; }
.rv-bar b { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--purple); border-radius: 3px; }
.pane.on .rv-bar b { animation: playbar 5s linear .4s infinite; }
@keyframes playbar { from { width: 0; } to { width: 100%; } }
.rv-bar i { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); border: 2px solid var(--white); z-index: 1; }
.rv-c { display: flex; gap: 10px; align-items: flex-start; opacity: 0; transform: translateY(8px) scale(.97); transition: all .5s var(--ease); }
.pane.on .rv-c { opacity: 1; transform: none; transition-delay: 1s; }
.rv-c p, .cmt p { background: var(--grey); padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 18px; }
.cmt { display: flex; gap: 10px; align-items: flex-start; }
.av { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: var(--white); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.av.b { background: var(--cobalt); } .av.g { background: var(--teal); } .av.ok { background: var(--success); font-size: 14px; }
.rv-actions { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--label); }
.rv-actions em { position: relative; font-style: normal; background: var(--purple); color: var(--white); padding: 6px 14px; border-radius: 999px; font-weight: 600; display: grid; transition: background .4s; }
.rv-actions em span { grid-area: 1 / 1; transition: opacity .3s; }
.rv-actions .a2 { opacity: 0; }
.pane.on .rv-actions em { background: var(--success); transition-delay: 2.2s; }
.pane.on .rv-actions .a1 { opacity: 0; transition-delay: 2.2s; }
.pane.on .rv-actions .a2 { opacity: 1; transition-delay: 2.2s; }

/* Header steps aside while the stage covers the screen */
.site-header { transition: background-color .3s, transform .45s var(--ease), opacity .35s ease; }
/* Hide cleanly: slide up and fade, and skip the frosted fill so no white bar flashes on the way out */
body.covered .site-header { transform: translateY(-100%); opacity: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- Reveal ---------- */

/* ---------- Never spoke (white, text centred, cards orbiting) ---------- */
.sing { height: 340vh; position: relative; margin-top: 32px; }
.sing-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 96px 24px 40px; overflow: hidden; }
.stage { position: relative; flex-shrink: 0; }
.stage-inner { position: absolute; left: 0; top: 0; width: 1280px; height: 780px; transform-origin: 0 0; }
.sing-head { position: absolute; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; will-change: opacity, transform; }
.sing-head .h2 { font-size: 68px; line-height: 70px; letter-spacing: -0.04em; }
.sing-head .lead { font-size: 21px; line-height: 30px; }
.head-a { left: 230px; width: 820px; top: 296px; }
.head-b { left: 0; width: 1280px; top: 72px; opacity: 0; }
.connectors { position: absolute; inset: 0; }
.connectors g { stroke: var(--border); animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -26; } }
.tool { position: absolute; width: 364px; padding: 16px 18px; background: var(--white); border-radius: 16px; display: flex; flex-direction: row; align-items: flex-start; gap: 14px; will-change: transform, opacity;
  box-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 12px 24px -6px rgba(27, 27, 27, .08), 0 32px 64px -12px rgba(27, 27, 27, .12); }
.tool em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--label); }
.tool strong { font-size: 18px; font-weight: 700; line-height: 24px; }
.tool small { font-size: 14px; color: var(--label); }
.workspace { position: absolute; left: 210px; top: 244px; width: 860px; height: 460px; display: flex; background: var(--white); border-radius: 24px; box-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 24px 48px -12px rgba(27, 27, 27, .12), 0 60px 120px -24px rgba(27, 27, 27, .16); overflow: hidden; opacity: 0; transform: scale(.9); }
/* Condensed rail (Talha's Simplified Platform UI): icons only */
.ws-rail { width: 76px; flex-shrink: 0; background: #FAFAFA; border-right: 1px solid #EEEEF0; padding: 22px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rail-add { width: 42px; height: 42px; border-radius: 12px; background: var(--purple); color: var(--white); display: grid; place-items: center; margin-bottom: 6px; }
.rail-i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #8A8A92; }
.rail-i svg { width: 19px; height: 19px; }
.rail-i.on { background: var(--lavender); color: var(--purple); }
.rail-av { width: 32px; height: 32px; border-radius: 50%; background: var(--cobalt); margin-top: auto; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ws-main { position: relative; flex: 1; overflow: hidden; }
.credits { display: inline-flex; align-items: center; height: 36px; background: var(--lavender); color: var(--purple); font-weight: 700; font-size: 13px; padding: 0 14px; border-radius: 999px; }
.ws-head { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 6px; }
.ws-actions { display: flex; align-items: center; gap: 8px; }
.ws-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.ws-new { display: inline-flex; align-items: center; gap: 6px; height: 36px; background: var(--purple); color: var(--white); font-weight: 700; font-size: 13px; padding: 0 16px; border-radius: 999px; }
.ws-label { font-size: 12px; font-weight: 700; color: var(--label); margin-top: 4px; }
.status { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; padding: 5px 12px 5px 22px; border-radius: 999px; background: var(--lavender); color: var(--purple); position: relative; }
.status::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
@keyframes statusIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.status.done { background: #EFEFF1; color: #55555C; }
.status.done::before { background: #A0A0A8; }
.status.ok { background: #E3F6EA; color: #1F8A4C; }
.status.flash { animation: statusIn .35s var(--ease); }

/* Workspace demo: dashboard -> brief -> review -> approved */
/* Calendly-style state changes: the next screen grows in softly over the last one, no slides or cuts */
.ws-view { position: absolute; inset: 0; padding: 26px 32px 24px; display: flex; flex-direction: column; gap: 10px; background: var(--white); opacity: 0; transform: scale(.965) translateY(10px); filter: blur(4px); transform-origin: 50% 40%; pointer-events: none;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), filter .7s cubic-bezier(.22, 1, .36, 1); }
.ws-view.on { opacity: 1; transform: none; filter: none; z-index: 1; }
.ws-view > * { transition: opacity .6s cubic-bezier(.22, 1, .36, 1) .12s, transform .7s cubic-bezier(.22, 1, .36, 1) .12s; }
.ws-view:not(.on) > * { opacity: 0; transform: translateY(8px); }
.rail-add.press, .ws-new.press, .wsubmit.press, .wapprove.press, .ws-q4.press { transform: scale(.95); }
.ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; margin-top: 4px; }
.ws-card { display: flex; flex-direction: column; min-width: 0; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ws-card.show, .ws-q4 { opacity: 1; transform: none; }
.wc-thumb { position: relative; height: 128px; border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.wc-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.wc-meta .status { font-size: 11px; padding: 3px 9px 3px 19px; white-space: nowrap; }
.wc-meta .status::before { left: 8px; width: 5px; height: 5px; margin-top: -2.5px; }
.ws-card b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-card small { font-size: 12px; color: var(--label); }
.ws-q4 { display: none; }
.ws-q4.in { display: flex; }
.rail-add, .ws-new, .wsubmit, .wapprove, .ws-q4 { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s; }
.ws-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--label); }
.ws-back svg { width: 14px; height: 14px; }
.ws-brief label { font-size: 12px; font-weight: 700; color: var(--label); margin-top: 4px; }
.wf { min-height: 40px; padding: 10px 12px; border-radius: 10px; background: var(--grey); font-size: 14px; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s; }
.wf.focus { box-shadow: inset 0 0 0 1.5px var(--purple); background: var(--white); }
.wf.tall { min-height: 62px; line-height: 20px; }
.wf.focus .wt::after { content: ""; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -2px; background: var(--purple); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wopts { display: flex; gap: 6px; }
.wopts span { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: var(--grey); transition: background .25s, color .25s; }
.wopts span.sel { background: var(--purple); color: var(--white); }
.wfoot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.wprice { font-size: 13px; color: var(--label); opacity: 0; transition: opacity .4s; }
.wprice.show { opacity: 1; }
.wprice b { color: var(--purple); }
.wsubmit, .wapprove { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--purple); color: var(--white); font-weight: 700; font-size: 14px; }
.wr-top { display: flex; justify-content: space-between; align-items: center; }
.wr-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; flex: 1; min-height: 0; }
.wr-frame { position: relative; border-radius: 14px; overflow: hidden; background: var(--black); }
.wr-frame img { width: 100%; height: 100%; object-fit: cover; }
.wr-play { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--purple); display: grid; place-items: center; }
.wr-play svg { width: 18px; height: 18px; }
.wr-bar { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
.wr-bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--purple); }
.wr-bar i { position: absolute; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); border: 2px solid var(--white); }
.wr-side { display: flex; flex-direction: column; gap: 10px; }
.wr-side small { font-size: 12px; font-weight: 600; color: var(--label); }
.wr-c { display: flex; gap: 8px; align-items: flex-start; }
.wr-c p { background: var(--grey); padding: 8px 10px; border-radius: 12px; font-size: 13px; line-height: 18px; }
.wr-c.me { opacity: 0; transform: translateY(8px); transition: all .4s var(--ease); }
.wr-c.me.show { opacity: 1; transform: none; }
.wapprove { margin-top: auto; align-self: flex-start; }
.wapprove.done { background: var(--success); }
.ws-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .8s; }
.ws-cursor.show { opacity: 1; }
.ws-cursor.click svg { transform: scale(.85); }
.ws-cursor svg { transition: transform .12s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }

/* App icons on the tool cards (familiar apps, iOS-style tiles) */
.tool-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.appi { flex-shrink: 0; width: 48px; height: 48px; border-radius: 11px; display: grid; place-items: center; box-shadow: inset 0 0 0 .5px rgba(27, 27, 27, .08), 0 4px 10px -2px rgba(27, 27, 27, .18); overflow: hidden; }
.appi svg { width: 26px; height: 26px; }
.a-gmail { background: #fff; } .a-gmail svg { width: 30px; height: 30px; }
.a-whatsapp { background: linear-gradient(180deg, #5FFC7B, #28D146); }
.a-dropbox { background: linear-gradient(180deg, #1A75FF, #0061FE); }
.a-pdf { background: linear-gradient(180deg, #F2443B, #D7261E); }
.a-excel { background: linear-gradient(180deg, #21A366, #107C41); }
.a-slack { background: #fff; } .a-slack svg { width: 28px; height: 28px; }
.a-xero { background: linear-gradient(180deg, #2FC4F4, #13A6DD); } .a-xero svg { width: 30px; height: 30px; }
.a-cal { background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 0; line-height: 1; }
.a-cal .cal-m { font-size: 9px; font-weight: 700; color: #F23B30; letter-spacing: .02em; }
.a-cal .cal-d { font-size: 22px; font-weight: 500; color: #1B1B1B; margin-top: 1px; }

/* ---------- Workflow cards ---------- */
/* Calendly-style soft entry: no hard top edge, the tint fades in from the page */
.flow-panel { padding: 128px 0 0; overflow: hidden; margin-top: 0; border-radius: 0 0 var(--r-panel) var(--r-panel);
  background: linear-gradient(180deg, var(--white) 0%, #FAFAFA 90px, var(--grey) 280px); }
.flow { display: flex; gap: 12px; width: min(1180px, 100% - 32px); margin: 0 auto; height: 480px; }
.fcard { position: relative; flex: 0 0 236px; min-width: 0; background: var(--white); border-radius: var(--r-card) var(--r-card) 0 0; padding: 28px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; overflow: hidden; transition: flex .85s cubic-bezier(.65, 0, .25, 1); }
.fcard.on { flex: 0 0 calc(100% - 3 * 236px - 3 * 12px); }
.fcard .ico { margin-bottom: 10px; }
.fcard h3 { font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.fcard > p { color: var(--body); font-size: 15px; line-height: 22px; width: 180px; }
.fcard ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .7s var(--ease); }
.fcard li { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; white-space: nowrap; }
.fcard li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: var(--lavender) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237852D4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.fcard.on ul { opacity: 1; transform: none; transition-delay: .35s; }
.fui { position: absolute; left: 20px; right: 20px; bottom: 0; height: 180px; border-radius: var(--r-ui) var(--r-ui) 0 0; display: grid; place-items: center; padding: 20px; background: var(--grad-secondary); opacity: .45; transition: opacity .9s; }
.fcard:nth-child(2) .fui, .fcard:nth-child(4) .fui { background: var(--grad-grey); }
.fcard.on .fui { opacity: 1; }
.fui .ui { width: 100%; max-width: 340px; transform: translateY(20px); opacity: 0; transition: all .8s var(--ease); }
.fcard.on .fui .ui { transform: none; opacity: 1; transition-delay: .4s; }
.mini { display: flex; flex-direction: column; gap: 8px; }
.mini .field { background: var(--grey); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.pricechip { align-self: flex-start; background: var(--lavender); font-weight: 600; font-size: 12px; padding: 5px 10px; border-radius: 999px; }
.mini.note { flex-direction: row; align-items: center; gap: 12px; }
.mini.note div { display: flex; flex-direction: column; }
.mini.check span { font-size: 13px; font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--border); }
.mini.check span:last-child { border: 0; }

/* ---------- Feature rows ---------- */
.feature { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; margin-top: 24px; padding: 88px max(48px, calc((100vw - 1280px) / 2 + 48px)); }
.feature + .feature { margin-top: 24px; }
.feature.flip .ftext { order: 2; }
.ftext { display: flex; flex-direction: column; gap: 14px; }
.ftext .h3 { font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.04em; max-width: 520px; }
.acc { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.acc-item { position: relative; display: flex; flex-direction: column; width: 100%; padding: 16px 18px; border-radius: 16px; color: var(--label); background: transparent; overflow: hidden; transition: background .3s, color .3s; }
.acc-item:hover { color: var(--black); }
.acc-item.on { color: var(--black); background: var(--white); box-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 8px 24px -8px rgba(27, 27, 27, .08); }
.ai-head { display: flex; align-items: center; gap: 12px; }
.ai-head svg { width: 20px; height: 20px; color: var(--label); transition: color .3s; }
.acc-item.on .ai-head svg { color: var(--purple); }
.ai-head b { font-size: 17px; line-height: 24px; font-weight: 700; }
.ai-body { padding-left: 32px; font-size: 15px; line-height: 22px; color: var(--body); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.acc-item.on .ai-body { max-height: 80px; opacity: 1; margin-top: 4px; }
.ai-bar { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; width: 0; background: var(--purple); border-radius: 2px; }
.acc-item.on .ai-bar { animation: fillbar var(--dur, 5s) linear forwards; }
@keyframes fillbar { to { width: calc(100% - 36px); } }
.acc.paused .acc-item.on .ai-bar { animation-play-state: paused; }
.fvis { position: relative; height: 500px; border-radius: var(--r-card); overflow: hidden; background: var(--white); }
.fvis.grad-secondary { background: var(--grad-secondary); }
.vis { position: absolute; inset: 0; display: grid; place-items: center; padding: 56px; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.vis.on { opacity: 1; transform: none; }
.card-lg { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; }
.card-lg label { font-size: 12px; color: var(--label); font-weight: 600; }
.card-lg .field { background: var(--grey); border-radius: 10px; padding: 11px 12px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opts span { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--grey); color: var(--black); }
.opts .sel { background: var(--purple); color: var(--white); }
.total { font-size: 13px; color: var(--label); }
.total b { color: var(--purple); }
.submit { background: var(--purple); color: var(--white); text-align: center; border-radius: 999px; padding: 11px; font-weight: 600; }
.chat .msg { background: var(--grey); padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 19px; }
.chat .msg.me { align-self: flex-end; background: var(--purple); color: var(--white); max-width: 80%; }
.chat ol { margin: 6px 0 0 18px; }
.storage .folders { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.storage .folders span { background: var(--grey); border-radius: 12px; padding: 24px 12px 12px; font-weight: 600; font-size: 13px; position: relative; }
.storage .folders span::before { content: ""; position: absolute; left: 12px; top: 10px; width: 18px; height: 6px; border-radius: 3px; background: var(--lavender); }
.members { display: flex; align-items: center; }
.members i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid var(--white); margin-right: -8px; }
.members em { font-style: normal; margin-left: 16px; font-size: 13px; color: var(--label); }
.swatches { display: flex; gap: 8px; }
.swatches i { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--border); }
.font-row { display: flex; gap: 12px; align-items: center; }
.font-row b { font-size: 34px; font-weight: 800; }
.checks { display: flex; flex-direction: column; }
.checks span { padding: 9px 0; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.meter { height: 10px; border-radius: 5px; background: var(--grey); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--purple); border-radius: 5px; }

/* ---------- Stats (Deel style) ---------- */
.stats-band { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 56px; padding: 128px 16px; }
.stats-band .h2 { font-size: 48px; line-height: 52px; letter-spacing: -0.04em; max-width: 820px; }
.sband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; width: min(1180px, 100%); }
.sitem { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sitem .num { font-size: 80px; line-height: 84px; font-weight: 800; letter-spacing: -0.05em; color: var(--black); }
.sitem .num small { font-size: .45em; letter-spacing: -0.02em; color: var(--label); }
.sitem .num .plus { font-size: .72em; position: relative; top: -.3em; margin-left: .02em; line-height: 0; }
.sitem .lbl { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--black); max-width: 220px; }
/* ---------- Capabilities (bento grid) ---------- */
.caps { padding: 96px 16px 32px; display: flex; flex-direction: column; align-items: center; }
.caps .center-head { margin-bottom: 48px; }
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 240px); gap: 16px; width: min(1280px, 100%);
  grid-template-areas: "v v g g" "v v p m" "s pr r a"; }
.cap-v { grid-area: v; } .cap-g { grid-area: g; } .cap-p { grid-area: p; } .cap-m { grid-area: m; }
.cap-s { grid-area: s; } .cap-pr { grid-area: pr; } .cap-r { grid-area: r; } .cap-a { grid-area: a; }
.cap { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--grey); }
.cap img, .cap video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.cap:hover img, .cap:hover video { transform: scale(1.05); }
.cap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 27, 27, 0) 40%, rgba(27, 27, 27, .6) 78%, rgba(27, 27, 27, .8) 100%); pointer-events: none; }
.cap-label { position: absolute; z-index: 1; left: 24px; bottom: 22px; right: 24px; display: flex; flex-direction: column; gap: 4px; color: var(--white); }
.cap-v .cap-label, .cap-g .cap-label { right: auto; max-width: 440px; }
.cap-label > span { display: flex; flex-direction: column; min-width: 0; }
.cap-label strong { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -0.01em; }
.cap-v .cap-label strong { font-size: 26px; line-height: 32px; letter-spacing: -0.02em; }
.cap-label small { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .85); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22, 1, .36, 1), opacity .4s; }
.cap-v .cap-label small, .cap-g .cap-label small, .cap:hover .cap-label small { max-height: 40px; opacity: 1; }
.cap-go { position: absolute; z-index: 2; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: var(--white); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: background .25s, color .25s; }
.cap-go svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.cap:hover .cap-go { background: rgba(255, 255, 255, .9); color: var(--black); }
.cap:hover .cap-go svg { transform: translate(2px, -2px); }

/* ---------- Customer stories (Deel style) ---------- */
.dstories { margin-top: 128px; overflow-x: clip; }
.dhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; width: min(720px, 86vw); }
.dhead .eyebrow { display: block; margin-bottom: 14px; }
.dhead .h2 { font-size: 48px; line-height: 52px; letter-spacing: -0.04em; }
.arrows { display: flex; gap: 8px; }
.arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); font-size: 18px; text-align: center; transition: background .2s; }
.arrow:hover { background: var(--grey); }
.arrow:disabled { opacity: .35; cursor: default; background: none; }
.dtrack { --cw: min(720px, 86vw); position: relative; touch-action: pan-y; cursor: grab; user-select: none; }
.dtrack.dragging { cursor: grabbing; }
.dtrack.dragging .dstory { transition: opacity .5s var(--ease), filter .5s var(--ease); }
.dstory { position: absolute; left: 50%; top: 0; width: var(--cw); transform-origin: center top; filter: blur(3px) grayscale(.3); opacity: .45; transition: transform .7s var(--ease), opacity .5s var(--ease), filter .5s var(--ease); cursor: pointer; }
.dstory.on { opacity: 1; filter: none; cursor: default; }
.dstory:not(.on) .dfoot { visibility: hidden; }
.dmedia { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--black); }
.dmedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.dmedia .dprev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .7s var(--ease); }
.dstory.on .dmedia:hover .dprev { transform: scale(1.03); }
.dstory.on .dmedia:hover img { transform: scale(1.03); }
.dplay { position: absolute; left: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--white); background: rgba(27, 27, 27, .55); backdrop-filter: blur(6px); padding-left: 3px; transition: background .2s; }
.dmedia:hover .dplay { background: var(--purple); }
.dmedia:focus:not(:focus-visible) { outline: none; }
.dquote { background: var(--lavender); color: var(--black); display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 56px 64px; }
.dq { width: 50px; height: 31px; color: var(--purple); }
.dq svg { width: 100%; height: 100%; }
.dquote blockquote { font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.035em; max-width: 640px; }
.dwho { display: flex; align-items: center; gap: 12px; color: var(--black); font-weight: 700; font-size: 16px; }
.dwho img, .dav { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.dav { display: grid; place-items: center; background: var(--purple); color: #fff; font-size: 17px; }
.dquote blockquote em { font-style: normal; color: var(--purple); }
.dfoot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 36px 0 0; }
.dlogo { display: block; width: auto; margin-bottom: 18px; filter: brightness(0); opacity: .9; }
.dtext p { color: var(--body); font-size: 17px; line-height: 26px; max-width: 540px; }
.dmore { flex-shrink: 0; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border); display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; transition: background .2s, border-color .2s; }
.dmore:hover { background: var(--grey); border-color: #C7CCD3; }

/* ---------- Services ---------- */
.svc-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(16px, (100vw - 1280px) / 2) 8px; scrollbar-width: none; }
.svc-track::-webkit-scrollbar { display: none; }
.svc { position: relative; flex: 0 0 280px; height: 360px; border-radius: var(--r-card); overflow: hidden; scroll-snap-align: start; }
.svc img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc:hover img { transform: scale(1.05); }
.svc-chip { position: absolute; left: 14px; bottom: 14px; background: var(--white); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; }

/* ---------- Footer (matches the live site) ---------- */
.site-foot { position: relative; background: #1E1E1E; padding-top: 0; }
.foot-lip { height: 33px; background: var(--white); border-radius: 0 0 32px 32px; margin: -1px 0 64px; }
.foot-cols { max-width: 1200px; margin: 0 auto; padding: 0 40px 56px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.fcol { display: block; }
.fcol summary { list-style: none; color: var(--white); font-size: 14px; font-weight: 700; margin-bottom: 2px; cursor: default; }
.fcol summary::-webkit-details-marker { display: none; }
.fcol-links { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.fcol a { color: #A0A0A0; font-size: 14px; transition: color .2s; }
.fcol a:hover { color: var(--white); }
.foot-bar { display: flex; justify-content: space-between; align-items: center; padding: 24px 120px; }
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-brand img { height: 20px; }
.foot-brand span { color: #A0A0A0; font-size: 12px; }
.foot-social { display: flex; gap: 18px; }
.foot-social img { width: 22px; height: 22px; opacity: .9; transition: opacity .2s; }
.foot-social a:hover img { opacity: 1; }
/* ---------- Dovetail-inspired pieces ---------- */
/* Small tilted icon tile set inside a headline */
.hico { display: inline-grid; place-items: center; width: .92em; height: .92em; margin: 0 .06em; border-radius: .26em; vertical-align: -.1em; color: var(--white); transform: rotate(-7deg);
  background: var(--c); }
.hico svg { width: .5em; height: .5em; }
@keyframes wiggle { 0% { transform: rotate(-7deg) scale(.6); opacity: 0; } 55% { transform: rotate(6deg) scale(1.08); opacity: 1; } 100% { transform: rotate(-7deg) scale(1); } }




/* Giant wordmark at the foot of the footer (logo kept white, bottom left) */

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(27, 27, 27, .85); opacity: 0; transition: opacity .45s cubic-bezier(.22, 1, .36, 1); }
.modal-box { position: relative; width: min(1120px, 100% - 32px); padding: 16px; background: var(--white); border-radius: 32px; box-shadow: 0 40px 80px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); will-change: transform, opacity; }
.modal.open .modal-scrim { opacity: 1; }
.modal.open .modal-box { opacity: 1; transform: none; }
.modal-media { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; position: relative; }
.modal-media video, .modal-media img { width: 100%; height: 100%; object-fit: cover; }
.modal-video { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.modal-video.ready { opacity: 1; }
.modal-pending { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(27, 27, 27, .5); color: var(--white); font-weight: 700; font-size: 20px; }
.modal-close { position: absolute; right: 32px; top: 32px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--white); transition: background .2s; }
.modal-close:hover { background: #3A3A3A; }
.modal-close:focus:not(:focus-visible) { outline: none; }
.modal-close:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .header-inner { grid-template-columns: 1fr auto; height: 64px; padding-inline: 16px; }
  .header-actions .nav-link { display: none; }
  .hero h1 { font-size: min(52px, 9vw); line-height: 1.08; }
  .h2, .h3, .stories-panel .h2, .stats-band .h2 { font-size: 32px; line-height: 40px; }
  .panel { margin: 0 8px; border-radius: 24px; }
  .hero-panel { margin: 0; border-radius: 0; }
  .pfit { width: 100%; }
  .pstage { height: 760px; }
  .pcard { height: 640px; }
  .pane { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .ptext { padding: 0; }
  .ptext h2 { font-size: 28px; line-height: 34px; }
  .pvis { min-height: 300px; }
  .bars, .bars.dots, .bars.stripes { display: none; }
  /* Team card on phones: the two crew photos sit side by side on top and the copy runs full width underneath,
     so the title stays on one line instead of wrapping word by word in a narrow column */
  .crew { flex-direction: column; gap: 14px; max-width: 300px; padding: 14px; }
  .crew-ph { flex-direction: row; gap: 8px; }
  .crew-ph img { flex: 1; width: 0; height: 120px; }
  .crew-txt { padding-top: 0; gap: 7px; }
  .crew-t { white-space: nowrap; font-size: 15px; }
  .pvis { justify-content: center; }
  .cal, .crew, .rev { width: 100%; }
  /* The calendar keeps its two-column layout on phones, scaled to fit rather than squeezed */
  .pvis .cal { width: 400px; zoom: .68; }
  .flow { flex-direction: column; height: auto; padding-bottom: 16px; }
  .fcard, .fcard.on { flex: none; border-radius: var(--r-card); min-height: 110px; }
  .fcard > p { width: auto; }
  .fcard.on { min-height: 0; }
  .fcard li { white-space: normal; }
  /* Mobile: closed cards are compact (icon, title, line); the open one shows its checklist and preview in flow */
  .fcard { min-height: 0; padding: 22px; cursor: pointer; }
  .fcard ul { display: none; }
  .fcard.on ul { display: flex; }
  .fcard .fui { display: none; }
  .fcard.on .fui { display: grid; position: relative; left: auto; right: auto; margin: 18px -2px -22px; height: 200px; }
  .feature { grid-template-columns: 1fr; gap: 40px; padding-block: 80px 16px; }
  .feature.flip .ftext { order: 0; }
  .menu-tiles { grid-template-columns: 1fr; }
  .dhead .arrows { display: none; }
  .dquote { padding: 28px; }
  .dquote blockquote { font-size: 20px; line-height: 25px; }
  .dfoot { flex-direction: column; align-items: flex-start; }
  .cap-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 280px repeat(3, 200px); grid-template-areas: "v v" "g g" "p m" "s pr"; }
  .cap-r, .cap-a { display: none; }
  .sband { grid-template-columns: 1fr 1fr; gap: 40px 16px; }
  .sitem .num { font-size: 56px; line-height: 60px; }
  /* Footer on phones: one column of collapsible rows (Ramp), chevron turns when open */
  .foot-cols { grid-template-columns: 1fr; gap: 0; padding: 0 16px 32px; }
  .fcol { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .fcol summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; margin: 0; font-size: 16px; font-weight: 600; cursor: pointer; }
  .fcol summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid #A0A0A0; border-bottom: 2px solid #A0A0A0; transform: rotate(-45deg); transition: transform .25s var(--ease); }
  .fcol[open] summary::after { transform: rotate(45deg); }
  .fcol-links { margin: 0; padding: 0 0 20px; gap: 14px; }
  .fcol-links a { font-size: 15px; }
  .foot-bar { flex-direction: column; gap: 20px; padding: 24px 16px 32px; }
  .foot-lip { height: 20px; border-radius: 0 0 20px 20px; margin-bottom: 48px; }

  /* ---- Phone proportions pass (2026-10-14) ---- */
  /* Pillars: full-screen stage, card fills the height under the tabs; text and mock-up share it */
  .pscroll { height: 340vh; margin-top: -160px; }
  .pclose { display: none; }
  .pinner { padding: 28px 12px 16px; }
  .pcard { height: min(620px, calc(100svh - 16px - 44px - 50px - 12px)); margin-top: 12px; border-radius: 22px; }
  .ptab { width: 50px; height: 50px; }
  .ptabs { gap: 8px; }
  .pane { grid-template-rows: auto minmax(0, 1fr); padding: 18px; gap: 16px; }
  .ptext { gap: 12px; }
  .ptext h2 { font-size: 26px; line-height: 30px; }
  .ptext p { font-size: 15px; line-height: 22px; }
  .pvis { min-height: 0; }
  .pvis .cal { zoom: .76; }
  .logos-band { margin-top: 40px; gap: 16px; padding-bottom: 24px; }
  /* How it works: tighter section top and compact step cards */
  .flow-panel { padding-top: 72px; }
  .fcard { padding: 18px 20px; gap: 4px; }
  .fcard .ico { margin-bottom: 8px; }
  .fcard h3 { font-size: 20px; line-height: 26px; }
  .fcard > p { font-size: 14px; line-height: 20px; }
  /* Capabilities: smaller tiles keep labels short and legible over the image */
  .caps { padding-top: 72px; }
  .caps .center-head { margin-bottom: 32px; }
  .cap-grid { grid-template-rows: 260px 220px repeat(2, 180px); gap: 10px; }
  .cap-label { left: 16px; right: 16px; bottom: 14px; }
  .cap-label strong { font-size: 16px; line-height: 20px; }
  .cap-v .cap-label strong, .cap-g .cap-label strong { font-size: 22px; line-height: 28px; }
  .cap::after { background: linear-gradient(180deg, rgba(27, 27, 27, 0) 30%, rgba(27, 27, 27, .7) 75%, rgba(27, 27, 27, .88) 100%); }
  .cap-go { top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; }
  .cap-p .cap-label small, .cap-m .cap-label small, .cap-s .cap-label small, .cap-pr .cap-label small { display: none; }
  /* Stories: same heading scale as the rest of the page; the track eases to each card's height */
  .dstories { margin-top: 72px; }
  /* Same 16px gutter as every other section (was 7vw, which pushed the heading in further than the rest) */
  .dhead { margin-bottom: 24px; width: calc(100% - 32px); }
  .dtrack { --cw: calc(100vw - 32px); }
  .dstories .dfoot { padding-inline: 0; }
  /* Hero lead: 17px keeps it to three lines under the headline */
  .hero .lead { font-size: 17px; line-height: 25px; }
  .dhead .h2 { font-size: 32px; line-height: 38px; }
  .dtrack { transition: height .5s var(--ease); }
  .dfoot { padding-top: 24px; gap: 16px; }
  /* Stats */
  .stats-band { padding: 72px 16px; gap: 40px; }
  .sitem .num { font-size: 52px; line-height: 56px; }
  .sitem .lbl { font-size: 15px; line-height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after { animation: none; transition: none; }
  .reveal, .load-up { opacity: 1; transform: none; }
  .sing, .pscroll { height: auto; }
  .sing-sticky, .psticky { position: static; height: auto; padding-block: 40px; }
}

/* Smaller laptops: keep the header row breathing */
@media (max-width: 1180px) and (min-width: 961px) {
  .main-nav { gap: 22px; }
  .header-actions { gap: 18px; }
  .header-inner { padding-inline: 24px; }
}

/* Lucide (Talha's icon library) sizes where the old inline icons carried their own */
.rail-add svg { width: 20px; height: 20px; }
.ws-new svg { width: 16px; height: 16px; }

/* ---------- Mobile menu (shared shell) ---------- */
.burger { display: none; width: 40px; height: 40px; border-radius: 10px; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: var(--black); transition: transform .3s var(--ease), top .3s var(--ease); }
/* Three lines; the middle one fades as the outer two cross into an X */
.burger span:nth-child(1) { top: 13px; } .burger span:nth-child(2) { top: 19px; transition: opacity .2s; } .burger span:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
.mnav { position: fixed; top: 64px; left: 0; right: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); z-index: 49; background: var(--white); display: flex; flex-direction: column; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .3s var(--ease); }
.mnav.open { opacity: 1; transform: none; }
.mnav-body { flex: 1; overflow-y: auto; padding: 8px 16px 24px; }
.mnav-group, .mnav-link { display: block; border-bottom: 1px solid #EEEEF0; }
.mnav-group summary, .mnav-link { list-style: none; padding: 18px 4px; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.mnav-group summary::-webkit-details-marker { display: none; }
.mnav-group summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.mnav-group[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.mnav-group a { display: block; padding: 10px 4px; font-size: 16px; color: var(--body); }
.mnav-group a:last-child { margin-bottom: 12px; }
.mnav-sub { display: block; font-size: 13px; font-weight: 600; color: var(--label); padding: 10px 4px 2px; }
/* Buttons sit inside the visible area on phones (dynamic viewport + home-indicator inset), never under browser bars */
.mnav-foot { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px 16px max(20px, env(safe-area-inset-bottom)); background: var(--white); }
/* Rows and buttons rise in one after another on open; on close everything fades together, quickly */
.mnav-body > *, .mnav-foot > * { opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
.mnav.open .mnav-body > *, .mnav.open .mnav-foot > * { opacity: 1; transform: none; transition: opacity .45s ease calc(var(--i, 0) * 40ms + 60ms), transform .55s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 40ms + 60ms); }
.mnav-group { overflow: hidden; }
.mnav-group.closing summary::after { transform: rotate(45deg) translateY(-3px); }
.btn-outline { background: var(--white); color: var(--black); box-shadow: inset 0 0 0 1px var(--border); }
.btn-outline:hover { background: var(--grey); }
/* Two full-width buttons: Log in outlined on top, Book a demo purple underneath */
.mnav-foot .btn { justify-content: center; width: 100%; height: 52px; border-radius: 12px; font-size: 16px; font-weight: 600; }
body.mnav-open { overflow: hidden; }
body.mnav-open .site-header { background: var(--white); }
@media (max-width: 960px) {
  .burger { display: block; }
  .header-actions { gap: 8px; }
  /* Phones: logo and menu only; Book a demo lives in the menu footer */
  .header-actions .btn-black { display: none; }
  .burger:focus:not(:focus-visible) { outline: none; }
}


/* ---------- "Never spoke / work as one" on phones: stacked, readable, no pinning (JS adds .m) ---------- */
.sing.m { height: auto; margin-top: 0; }
.sing.m .sing-sticky { position: static; height: auto; display: block; padding: 64px 16px 48px; overflow: hidden; }
.sing.m .stage { width: 100%; height: auto; }
.sing.m .stage-inner { position: static; width: 100%; height: auto; transform: none; display: flex; flex-direction: column; align-items: center; }
.sing.m .connectors { display: none; }
.sing.m .sing-head { position: static; width: 100%; opacity: 1; transform: none; }
.sing.m .sing-head .h2 { font-size: 34px; line-height: 38px; }
.sing.m .sing-head .lead { font-size: 16px; line-height: 24px; text-wrap: balance; }
.sing.m .head-a { order: 1; margin-bottom: 28px; }
.sing.m .tool { order: 2; position: relative; left: auto; top: auto; width: calc(100% - 16px); max-width: 340px; padding: 12px 14px; opacity: 1; }
.sing.m .tool + .tool { margin-top: -6px; }
.sing.m .tool:nth-child(odd) { transform: rotate(-1deg); }
.sing.m .tool:nth-child(even) { transform: rotate(1deg); }
.sing.m .tool:nth-child(n+9) { display: none; }
.sing.m .tool strong { font-size: 16px; line-height: 22px; }
.sing.m .tool em, .sing.m .tool small { font-size: 13px; }
.sing.m .head-b { order: 3; margin: 64px 0 24px; }
.sing.m .workspace { order: 4; position: relative; left: auto; top: auto; width: 100%; max-width: 420px; height: 440px; margin-inline: auto; opacity: 1; transform: none; }
.sing.m .ws-rail { width: 52px; padding: 16px 0; gap: 10px; }
.sing.m .rail-add, .sing.m .rail-i { width: 34px; height: 34px; border-radius: 10px; }
.sing.m .ws-view { padding: 18px 16px; }
.sing.m .ws-title { font-size: 20px; }
.sing.m .credits { height: 28px; padding: 0 10px; font-size: 11px; }
.sing.m .ws-grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.sing.m .wc-thumb { height: 92px; }
.sing.m .ws-card b { font-size: 13px; }
.sing.m .wopts { flex-wrap: wrap; }
.sing.m .wr-body { grid-template-columns: 1fr; grid-template-rows: 170px auto; gap: 12px; }
.sing.m .wr-side { gap: 8px; }
/* Current page in the menus */
/* The mobile menu's flex display must not override the hidden attribute (it would sit invisibly over the page) */
.mnav[hidden] { display: none; }

/* In-card scroll areas scroll without a visible scrollbar (soft fades signal there's more); Safari needs the -webkit rule */
.dm-slots, .pr-compare-wrap, .pr-tabs, .wf-tabs, .wchips, .blog-chips, .uc-opts, .svc-track, .mnav-body { scrollbar-width: none; }
.dm-slots::-webkit-scrollbar, .pr-compare-wrap::-webkit-scrollbar, .pr-tabs::-webkit-scrollbar, .wf-tabs::-webkit-scrollbar, .wchips::-webkit-scrollbar, .blog-chips::-webkit-scrollbar, .uc-opts::-webkit-scrollbar, .svc-track::-webkit-scrollbar, .mnav-body::-webkit-scrollbar { display: none; }

/* Product mock-ups and graphic cards are pictures, not copy: never selectable (real form fields excepted) */
:is(.ui, .pvis, .fui, .fvis, .workspace, .tool, .stage-inner, .menu-illus,
    .sl-ui, .sl-stage, .sl-vis, .sl-panes, .nw-flow, .rvw-frame, .rv-frame, .wr-frame,
    .sreel-stage, .sreel-ui, .ui-card, .uc-stage, .uc-visual, .uc-frame, .cr-stage, .cr-how-panel,
    .cs-stage, .br-panes, .ai-panel, .tm-card, .wf-stage, .speed-card .r-art, .r-art, .cov-card .bars)
  { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:is(.ui, .sl-ui, .ui-card, .ai-panel, .workspace, .cr-how-panel) :is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }

/* Focus glow for every field (matches the newsletter input): purple border + soft lavender ring */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) { transition: border-color .2s ease, box-shadow .2s ease; }
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus,
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus-visible {
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 18%, transparent); }
/* Borderless inputs that sit inside a styled control keep their own focus treatment (the wrapper glows instead).
   Same :not() chain as the rule above so this one is more specific and wins without !important. */
:is(.stepper, .ws-view, .cr-search, .field) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):is(:focus, :focus-visible) { box-shadow: none; }

/* ---------- Cookie consent (js/consent.js) ---------- */
.ck { position: fixed; z-index: 70; right: 24px; bottom: 24px; width: min(400px, calc(100vw - 32px)); padding: 22px; border-radius: 20px; background: var(--white);
  box-shadow: 0 20px 50px -18px rgba(27, 27, 27, .3), 0 0 0 1px rgba(27, 27, 27, .05); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .3s var(--ease); }
.ck.in { opacity: 1; transform: none; }
.ck-h { font-size: 16px; line-height: 22px; font-weight: 700; }
.ck-p { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--body); }
.ck-p a { color: var(--black); text-decoration: underline; text-underline-offset: 2px; }
.ck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.ck-actions .btn { min-width: 0; width: 100%; }
.ck-manage { display: block; margin: 12px auto 0; padding: 4px; background: none; font-size: 13px; font-weight: 600; color: var(--label); transition: color .2s; }
.ck-manage:hover { color: var(--black); }
.ck-list { list-style: none; margin-top: 8px; }
.ck-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid #EEEEF0; }
.ck-list li:first-child { border-top: 0; }
.ck-list b { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.ck-list small { font-size: 12px; font-weight: 600; color: var(--label); }
.ck-list span { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--body); }
.ck-sw { flex: none; position: relative; width: 40px; height: 24px; margin-top: 2px; border-radius: 999px; background: #D9D9DE; transition: background-color .2s; }
.ck-sw i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--ease); }
.ck-sw[aria-checked="true"] { background: var(--purple); }
.ck-sw[aria-checked="true"] i { transform: translateX(16px); }
.ck-sw:disabled { opacity: .55; cursor: default; }
.ck-sw:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.foot-legal-link { background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
@media (max-width: 600px) { .ck { right: 16px; bottom: 16px; padding: 18px; } }
.ck .btn { font-weight: 600; }
.ck-alt { background: #EFEFF2; color: var(--black); }
.ck-alt:hover { background: #E3E3E8; }
.nw { white-space: nowrap; }
/* Footer bottom bar: legal links sit between the brand and the social icons */
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-legal a { color: #A0A0A0; font-size: 12px; transition: color .2s; }
.foot-legal a:hover { color: var(--white); }
@media (max-width: 960px) { .foot-bar { align-items: flex-start; } .foot-legal { gap: 8px 16px; } }
.crew-ph img { object-position: center 20%; }
/* Team card: headshots as small avatars (64px desktop, 48px overlapping on phones), so the card reads as a project, not a photo grid */
.crew { align-items: flex-start; }
.crew-ph img { width: 64px; height: 64px; border-radius: 50%; }
@media (max-width: 960px) {
  .crew-ph { flex-direction: row; gap: 0; }
  .crew-ph img { flex: none; width: 48px; height: 48px; box-shadow: 0 0 0 3px var(--white); }
  .crew-ph img + img { margin-left: -10px; }
}
.cap-g img { object-position: 40% center; }
/* Capabilities: Videography joins the grid; Graphic design and Videography share the top right row as single tiles */
.cap-y { grid-area: y; }
.cap-grid { grid-template-areas: "v v g y" "v v p m" "s pr r a"; }
.cap-g .cap-label { max-width: none; right: 24px; }
.cap-g .cap-label strong { font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
.cap-g .cap-label small { max-height: 0; opacity: 0; }
.cap-g:hover .cap-label small { max-height: 40px; opacity: 1; }
.cap-v img[src*="videographer-tripod"] { object-position: 70% 30%; }
@media (max-width: 960px) {
  .cap-grid { grid-template-rows: 260px repeat(3, 180px); grid-template-areas: "v v" "g y" "p m" "s pr"; }
}
.caps-all { margin-top: 40px; }
/* Ad creative sits in the top row next to Video editing; Graphic design moves to the bottom row */
.cap-grid { grid-template-areas: "v v s y" "v v p m" "g pr r a"; }
@media (max-width: 960px) { .cap-grid { grid-template-areas: "v v" "s y" "p m" "g pr"; } }
/* Team card (landing "Dedicated creative team" pane): named people with roles, then next steps */
.crew2 { width: 360px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.c2-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.c2-head b { font-size: 16px; }
.c2-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--coral) 16%, white); color: var(--coral); }
.c2-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #F0F0F3; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(.25s + var(--i) * .1s); }
.c2-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.c2-row span { flex: 1; display: flex; flex-direction: column; }
.c2-row b { font-size: 14px; } .c2-row small { font-size: 12px; color: var(--label); }
.c2-row em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--label); background: var(--grey); padding: 3px 8px; border-radius: 999px; }
.c2-next { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--grey); }
.c2-next small { font-size: 12px; font-weight: 600; color: var(--label); }
.c2-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .5s ease; transition-delay: calc(.25s + var(--i) * .1s); }
.c2-step i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #D5D5DC; flex: none; }
.c2-step.done i { border: 0; background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; }
.pane.on .c2-row { opacity: 1; transform: none; }
.pane.on .c2-step { opacity: 1; }
@media (max-width: 960px) { .crew2 { width: 100%; max-width: 320px; } }
@media (prefers-reduced-motion: reduce) { .c2-row, .c2-step { opacity: 1; transform: none; } }
/* Play button sits bottom-left so it never covers a face in the thumbnail */
.rv-play { left: 12px; top: auto; bottom: 12px; transform: none; width: 36px; height: 36px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.rv-frame img[src*="review-team-office"] { object-position: 50% 0; }
/* Trusted by: the purple stage now finishes centred in the window (no lift), so the band starts 96px below its
   bottom edge and keeps 96px under the logos before the next section */
@media (min-width: 961px) {
  .logos-band { margin-top: calc(96px - (100vh - min(704px, 100vh - 186px)) / 2); padding-bottom: 40px; }
}
/* Resources menu: Learn, Tools and Join us side by side */
#resources-menu .mlist { grid-template-columns: repeat(3, 1fr); }
#resources-menu.menu-list { width: 860px; }
/* Phones: even 16px lavender frame around the mock-up cards, and the comment bubble fills the row */
@media (max-width: 960px) {
  .pvis { padding: 16px; align-self: start; }
  .pane { grid-template-rows: auto auto; align-content: center; }
  .pvis .rev, .pvis .crew2 { width: 100%; max-width: none; }
  .cmt > :last-child { flex: 1; }
}
/* Phones: all three pillar panels share one size; text block reserves the same height and the mock-up panel fills the rest */
@media (max-width: 960px) {
  .pane { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .ptext { min-height: 210px; }
  .pvis { align-self: stretch; padding: 16px; }
  .crew2 { padding: 14px; gap: 2px; }
  .c2-head { margin-bottom: 4px; }
  .c2-row { padding: 6px 0; }
  .c2-row img { width: 32px; height: 32px; }
  .c2-next { margin-top: 4px; padding: 10px 12px; gap: 6px; }
  .fcard { overflow: hidden; }
}
/* Phones: pinned two-act scene. Act 1 = heading + stacked tool cards; act 2 = heading B + workspace over the same spot */
.sing.m:not(.m-static) { height: 260vh; }
.sing.m:not(.m-static) .sing-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 88px 16px 24px; display: flex; flex-direction: column; justify-content: flex-start; }
.sing.m:not(.m-static) .stage-inner { position: relative; }
.sing.m:not(.m-static) .head-b { position: absolute; top: 0; left: 0; right: 0; margin: 0; opacity: 0; }
.sing.m:not(.m-static) .workspace { position: absolute; left: 50%; height: 540px; top: 128px; opacity: 0; transform-origin: 50% 0; will-change: transform, opacity; }
.sing.m:not(.m-static) .tool { will-change: transform, opacity; transition: none; }
.sing.m:not(.m-static) .tool.m-hide { display: none; }
.sing.m:not(.m-static) .tool { padding: 10px 12px; gap: 12px; }
.sing.m:not(.m-static) .tool + .tool { margin-top: -10px; }
.sing.m:not(.m-static) .tool .appi { width: 40px; height: 40px; border-radius: 11px; }
.sing.m:not(.m-static) .tool strong { font-size: 15px; line-height: 20px; }
.sing.m:not(.m-static) .tool em, .sing.m:not(.m-static) .tool small { font-size: 12px; line-height: 16px; }
.sing.m:not(.m-static) .head-a { margin-bottom: 20px; }
/* Footer bottom bar: same width and edges as the link columns, a thin divider above, brand left, legal and socials right */
@media (min-width: 961px) {
  .foot-bar { max-width: 1200px; margin: 0 auto; padding: 28px 40px 36px; border-top: 1px solid rgba(255, 255, 255, .1); gap: 32px; }
  .foot-brand { flex: 1; }
  .foot-legal { gap: 24px; }
  .foot-social { gap: 14px; }
  .foot-social img { width: 22px; height: 22px; }
}
@media (min-width: 961px) {
  /* Tighter, even link rhythm: 8px between rows, 14px under each column heading */
  .fcol-links { gap: 8px; margin-top: 14px; }
  .fcol-links a { font-size: 14px; line-height: 22px; }
  .foot-cols { padding-bottom: 48px; }
}
/* Long file names in the tool cards wrap instead of spilling out */
.tool strong { overflow-wrap: anywhere; }
/* Phones: the first act (heading + tool cards) sits centred in the pinned frame, no empty band underneath;
   the second act (heading B + workspace) stays anchored to the top of the same frame */
.sing.m:not(.m-static) .stage { height: calc(100svh - 88px - 24px); }
.sing.m:not(.m-static) .stage-inner { height: 100%; justify-content: center; }
/* Phones: stories show a sliver of the next and previous card, plus dots, so it reads as swipeable */
.ddots { display: none; }
@media (max-width: 960px) {
  .dtrack { --cw: calc(100vw - 80px); }
  .ddots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
  .ddots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; background: #D5D5DC; transition: width .35s var(--ease), background-color .35s; }
  .ddots button.on { width: 22px; background: var(--purple); }
}
/* Phones: quote cards grow to fit the quote and the person (the track follows the open card's height) */
@media (max-width: 960px) {
  .dmedia.dquote, .dquote.dmedia { aspect-ratio: auto; min-height: 0; padding: 22px 20px; gap: 14px; }
  .dquote blockquote { font-size: 18px; line-height: 24px; }
  .dq { width: 36px; height: 22px; }
}
/* No hairline between the page and the footer: the top 4px behind the white lip is white too, so a sub-pixel seam
   can never show the dark footer through (the lip's rounded corners below stay on dark) */
.site-foot { background: linear-gradient(180deg, var(--white) 0, var(--white) 4px, #1E1E1E 4px); }
.foot-lip { margin-top: -2px; }

/* Phones: the booking calendar stacks (dates on top, times underneath) at full size, so it fills its panel like the
   team and review cards instead of shrinking to a tiny two-column card */
@media (max-width: 960px) {
  .pvis .cal { zoom: 1; width: 100%; max-width: 300px; flex-direction: column; gap: 12px; padding: 14px; }
  .pvis .cal .cal-r { min-width: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; text-align: center; }
  .pvis .cal .cal-r b, .pvis .cal .cal-r small { grid-column: 1 / -1; }
  .pvis .cal .cal-r small { margin: -4px 0 2px; }
  .pvis .cal-g span { height: 26px; }
}
@media (max-width: 960px) {
  .pvis .cal .cal-r { grid-template-columns: 1fr 1fr; padding-bottom: 16px; }
  .pvis .cal .cal-r .split { grid-column: 1 / -1; }
}

/* Phones: compact booking calendar. Round date chips (fixed size, so the picked day is a circle, not an oval), the
   three times on one row, and the "booked" badge inside the card instead of hanging off its bottom edge. app.js then
   scales the whole calendar to the space its panel has on that phone, so nothing is ever clipped. */
@media (max-width: 960px) {
  .pvis:has(.cal) { align-items: center; justify-content: center; }
  .pvis:has(.cal) .bars { display: none; }
  .pvis .cal { position: relative; padding: 14px 14px 12px; gap: 10px; transform-origin: 50% 50%; }
  .pvis .cal-h { margin-bottom: 6px; }
  .pvis .cal-g { gap: 3px 2px; }
  .pvis .cal-g span { width: 26px; height: 26px; justify-self: center; }
  .pvis .cal-g .wd { height: 18px; }
  .pvis .cal .cal-r { grid-template-columns: 1fr 1fr 1.5fr; gap: 6px; padding-bottom: 0; }
  .pvis .cal .cal-r .split { grid-column: auto; }
  .pvis .cal .t { height: 32px; font-size: 11px; }
  .pvis .cal .t strong { font-size: 11px; }
  .pvis .cal .booked { position: static; grid-column: 1 / -1; justify-self: center; margin-top: 4px; transform: translateY(6px); }
  .pvis .cal .pane.on .booked, .pane.on .pvis .cal .booked { transform: none; }
}

/* Phones: the "Now work as one" heading and its platform mock-up read as one block, centred in the screen
   (the sticky frame drops by half the spare height; 152px heading area + 440px mock-up) */
@media (max-width: 960px) {
  .sing.m:not(.m-static) .sing-sticky { justify-content: center; padding-top: 72px; }
}