/* ============================================================
   Nayem Hasan — personal brand landing
   Warm, playful, card-driven. Clean hand-drawn highlights
   via SVG + vector-effect:non-scaling-stroke (no wobble).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* surfaces */
  --page:      #F5EFE4;
  --cream:     #FBF6EE;
  --paper:     #FFFFFF;

  /* ink */
  --ink:       #191A22;
  --ink-muted: #61636F;
  --ink-faint: #9A9CA6;
  --border:    #EBE2D2;

  /* accents (each card can pick one via --tile) */
  --blue:        #57C7ED;
  --blue-deep:   #2E9FCB;
  --yellow:      #FBCB45;
  --yellow-deep: #E9A81F;
  --coral:       #F47C55;
  --green:       #57BE86;
  --purple:      #9C8CF0;

  --ink-on-blue:   #10333F;
  --ink-on-yellow: #4A360A;
  --ink-on-coral:  #ffffff;
  --ink-on-green:  #06331E;
  --ink-on-purple: #ffffff;

  /* type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --t-sm:  0.9rem;
  --t-base:1rem;
  --t-lg:  1.2rem;
  --t-xl:  1.5rem;
  --t-2xl: 2rem;
  --t-3xl: 2.7rem;
  --t-4xl: 3.6rem;

  /* layout */
  --wide: 1120px;
  --gutter: 24px;

  /* radius */
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 34px;
  --r-full: 999px;

  /* shadow */
  --sh-sm: 0 2px 6px rgba(25,26,34,.05);
  --sh-md: 0 12px 30px rgba(25,26,34,.09);
  --sh-lg: 0 24px 56px rgba(25,26,34,.14);

  --ease: cubic-bezier(.22,1,.36,1);
  --dur: 340ms;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 20px; border-radius:var(--r-md); z-index:300; }
.skip-link:focus { left:var(--gutter); top:12px; }
:focus-visible { outline:2px solid var(--blue-deep); outline-offset:3px; border-radius:6px; }

.eyebrow {
  display:inline-block;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px;
}

/* ---------- highlights (clean hand-drawn) ---------- */
.hl { position:relative; display:inline-block; white-space:nowrap; }
.hl__u  { position:absolute; left:-2%; bottom:-.16em; width:104%; height:.4em; pointer-events:none; overflow:visible; }
.hl--mark .hl__mark { position:absolute; left:-1%; bottom:.06em; width:102%; height:.55em; z-index:-1; pointer-events:none; overflow:visible; }
.hl--circle .hl__circle { position:absolute; left:-14%; top:-24%; width:128%; height:150%; pointer-events:none; overflow:visible; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:var(--t-sm); font-weight:600;
  padding:12px 22px; border-radius:var(--r-full); border:2px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn svg { width:15px; height:15px; transition:transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-3px) scale(1.04); box-shadow:var(--sh-md); }
.btn:hover svg { transform:translateX(3px); }
.btn:active { transform: translateY(-1px) scale(1.01); }
.btn-lg { padding:15px 30px; font-size:var(--t-base); }

.btn-accent { background:var(--yellow); color:var(--ink-on-yellow); }
.btn-accent:hover { background:var(--yellow-deep); box-shadow:0 10px 24px rgba(233,168,31,.45); }
.btn-blue { background:var(--blue); color:var(--ink-on-blue); }
.btn-blue:hover { background:var(--blue-deep); color:#fff; box-shadow:0 10px 24px rgba(46,159,203,.45); }
.btn-dark { background:var(--ink); color:var(--cream); }
.btn-dark:hover { background:#000; box-shadow:0 12px 28px rgba(25,26,34,.4); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--border); }
.btn-ghost:hover { background:var(--paper); border-color:var(--ink); box-shadow:var(--sh-md); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:sticky; top:0; z-index:200;
  background:rgba(245,239,228,.82);
  backdrop-filter:saturate(180%) blur(12px);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.is-stuck { box-shadow:0 1px 0 var(--border), var(--sh-sm); background:rgba(245,239,228,.94); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px; }
.logo { display:inline-flex; flex-shrink:0; }
.logo__img { height:40px; width:auto; }
.logo__img--footer { height:50px; }

.nav__links { display:flex; align-items:center; gap:30px; font-size:var(--t-sm); font-weight:500; }
.nav__links a { color:var(--ink); transition:color var(--dur) var(--ease); }
.nav__links > a:not(.btn):hover { color:var(--blue-deep); }
.nav__cta--inline { display:none; }

/* ---------- nav dropdown ----------
   The trigger is a real link, so with JS off (or a crawler) it still
   goes to resources.html — the panel is a hover/focus extra, never
   the only way in. On mobile the panel is simply always expanded
   inside the burger menu; nothing to toggle. */
.nav__dd { position:relative; display:inline-flex; }
.nav__dd-btn { display:inline-flex; align-items:center; gap:6px; }
.nav__dd-btn:hover { color:var(--blue-deep); }
.nav__dd-caret { width:10px; height:7px; transition:transform var(--dur) var(--ease); }
.nav__dd.is-open .nav__dd-caret { transform:rotate(180deg); }
.nav__dd-panel {
  /* the offset clears the nav's own bottom padding, so the panel hangs
     below the header band instead of overlapping its edge */
  position:absolute; top:calc(100% + 34px); left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:300px; padding:10px;
  background:var(--paper); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-md);
  display:grid; gap:2px; z-index:210;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__dd.is-open .nav__dd-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
/* invisible bridge so the pointer can cross the gap without closing */
.nav__dd-panel::before { content:""; position:absolute; left:0; right:0; top:-34px; height:34px; }
.nav__dd-item { display:grid; gap:2px; padding:10px 12px; border-radius:var(--r-md); transition:background var(--dur) var(--ease); }
.nav__dd-item:hover { background:var(--cream); }
.nav__dd-title { font-weight:600; font-size:.88rem; color:var(--ink); }
.nav__dd-note { font-size:.75rem; line-height:1.4; color:var(--ink-muted); }
.nav__dd-all {
  margin-top:6px; padding:12px 12px 4px; border-top:1px solid var(--border);
  font-size:.82rem; font-weight:600; color:var(--blue-deep);
  display:inline-flex; align-items:center; gap:6px;
}
.nav__dd-all svg { width:13px; height:13px; transition:transform var(--dur) var(--ease); }
.nav__dd-all:hover svg { transform:translateX(3px); }
.nav__right { display:flex; align-items:center; gap:12px; }
.nav__toggle { display:none; background:none; border:none; padding:8px; cursor:pointer; }
.nav__toggle span { display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }

/* ============================================================
   SHELL (rounded cream panel)
   ============================================================ */
.shell {
  max-width:1240px; margin:16px auto 0;
  background:var(--cream); border-radius:var(--r-xl);
  padding:clamp(24px,4vw,56px);
}
.shell--about { margin-block:96px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; padding-block:32px; }
.hero__photo { position:relative; width:min(360px,100%); aspect-ratio:1; margin-inline:auto; }
.hero__bubble {
  position:absolute; inset:8% 2% 4% 8%;
  background:var(--yellow); opacity:.9;
  border-radius:54% 46% 58% 42% / 52% 54% 46% 48%;
}
.hero__bubble::after {
  content:""; position:absolute; right:-6%; bottom:24%;
  width:22%; height:22%; background:var(--yellow); opacity:.9;
  border-radius:6px 60% 60% 60%; transform:rotate(12deg);
}
.hero__portrait {
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg,#fff,#FFF6DD);
}
/* <picture> is inline by default — without this the img can't fill the circle */
.hero__portrait picture { display:block; width:100%; height:100%; }
.hero__portrait img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero__portrait-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--ink); }
.hero__portrait-ph svg { width:34%; height:34%; opacity:.24; }
.hero__portrait-ph span { font-size:.8rem; color:var(--ink-muted); background:var(--paper); padding:4px 14px; border-radius:var(--r-full); box-shadow:var(--sh-sm); }

.hero__headline { font-family:var(--font-display); font-weight:900; font-size:var(--t-4xl); line-height:1.04; letter-spacing:-.02em; margin:0 0 22px; }
.hero__wave { display:inline-block; }
.hero__lede { font-size:var(--t-lg); line-height:1.5; margin:0 0 14px; max-width:34ch; }
.hero__lede strong { font-weight:700; }
.hero__sub { color:var(--ink-muted); margin:0 0 26px; max-width:44ch; }
.hero__sub a { color:var(--blue-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:12px; }

/* ============================================================
   SUBSCRIBE CARD
   ============================================================ */
.subscribe { padding-block:64px; }
.subscribe--alt { padding-top:0; }
.sub-card {
  background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--sh-md);
  padding:clamp(28px,4vw,52px);
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center;
}
.sub-card__title { font-family:var(--font-display); font-weight:900; font-size:var(--t-2xl); line-height:1.12; margin:0 0 14px; }
.sub-card__note { color:var(--ink-muted); margin:0 0 20px; }
.sub-card__proof { display:flex; align-items:center; gap:12px; }
.avatars { display:flex; }
.avatars span { width:30px; height:30px; border-radius:50%; border:2px solid var(--paper); margin-left:-8px; background:linear-gradient(140deg,var(--blue),var(--purple)); }
.avatars span:first-child { margin-left:0; background:linear-gradient(140deg,var(--coral),var(--yellow)); }
.avatars span:nth-child(2) { background:linear-gradient(140deg,var(--green),var(--blue)); }
.sub-card__proof-text { font-size:var(--t-sm); color:var(--ink-muted); }
.sub-card__copy { margin:0 0 20px; }
.sub-form { display:flex; gap:12px; }
.sub-form__input {
  flex:1; min-width:0; font-family:inherit; font-size:var(--t-sm);
  padding:14px 18px; border-radius:var(--r-full);
  border:2px solid var(--border); background:var(--cream); color:var(--ink);
}
.sub-form__input::placeholder { color:var(--ink-faint); }
.sub-form__input:focus { outline:none; border-color:var(--blue-deep); background:var(--paper); }
.sub-form__status { font-size:var(--t-sm); font-weight:600; color:var(--green); margin:10px 0 0; min-height:1.2em; }
.sub-form__fine { font-size:.78rem; color:var(--ink-faint); margin:12px 0 0; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.ct-head { padding-block:48px 24px; text-align:center; }
.ct-head__title { font-family:var(--font-display); font-weight:900; font-size:var(--t-4xl); line-height:1.04; letter-spacing:-.02em; margin:0 0 18px; }
.ct-head__lede { color:var(--ink-muted); font-size:var(--t-lg); line-height:1.55; margin:0 auto; max-width:56ch; }

.ct { padding-block:24px 80px; }
.ct-card {
  background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--sh-md);
  padding:clamp(28px,4vw,52px);
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:start;
}
.ct-card__title { font-family:var(--font-display); font-weight:900; font-size:var(--t-2xl); line-height:1.12; margin:0 0 14px; }
.ct-card__note { color:var(--ink-muted); margin:0 0 20px; }
.ct-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ct-list li { position:relative; padding-left:24px; font-size:var(--t-sm); color:var(--ink-muted); }
.ct-list li::before {
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%; background:var(--blue);
}

.ct-form { display:grid; gap:16px; }
.ct-field { display:grid; gap:6px; }
.ct-field label { font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.ct-input {
  width:100%; font-family:inherit; font-size:var(--t-sm); color:var(--ink);
  padding:14px 18px; border-radius:var(--r-md);
  border:2px solid var(--border); background:var(--cream);
}
.ct-input::placeholder { color:var(--ink-faint); }
.ct-input:focus { outline:none; border-color:var(--blue-deep); background:var(--paper); }
.ct-textarea { resize:vertical; min-height:130px; line-height:1.6; }
.ct-form .btn { justify-self:start; }
.ct-status { font-size:var(--t-sm); font-weight:600; color:var(--green); margin:10px 0 0; min-height:1.2em; }
.ct-status.is-error { color:var(--coral); }

/* ============================================================
   HOW CAN I HELP — offset masonry
   ============================================================ */
.help { padding-block:40px 88px; }
.help__grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.help__col { display:grid; gap:26px; align-content:start; }
/* right column: featured card sits up near the heading (reference masonry) */
.help__col--right { margin-top:8px; }
.help__heading { font-family:var(--font-display); font-weight:900; font-size:var(--t-3xl); line-height:1.06; letter-spacing:-.02em; margin:0; }

/* shared color-fill tile */
.tile {
  --ink-on-tile:#fff;
  position:relative; background:var(--paper); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:38px 32px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tile:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); background:var(--tile); border-color:var(--tile); color:var(--ink-on-tile); }
.tile__icon {
  width:56px; height:56px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  background:color-mix(in srgb, var(--tile) 16%, #fff); color:var(--tile);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tile__icon svg { width:28px; height:28px; }
.tile:hover .tile__icon { background:rgba(255,255,255,.22); color:var(--ink-on-tile); }
.tile h3 { font-family:var(--font-display); font-weight:900; font-size:var(--t-xl); margin:0 0 10px; }
.tile p { color:var(--ink-muted); margin:0 0 20px; max-width:40ch; transition:color var(--dur) var(--ease); }
.tile:hover p { color:var(--ink-on-tile); opacity:.92; }
.tile__link { display:inline-flex; align-items:center; gap:8px; font-size:var(--t-sm); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.tile__link svg { width:14px; height:14px; transition:transform var(--dur) var(--ease); }
.tile__link:hover svg { transform:translateX(4px); }
/* uniform card height across the help grid */
.help .tile:not(.tile--more) { min-height:370px; }

.tile--more { display:flex; flex-direction:column; justify-content:center; gap:14px; background:var(--cream); border-style:dashed; }
.tile--more:hover { background:var(--ink); border-color:var(--ink); color:#fff; transform:translateY(-6px); }
.tile--more h3 { margin:0; }

/* per-tile ink-on-fill colors */
.tile[style*="--coral"]:hover  { --ink-on-tile:var(--ink-on-coral); }
.tile[style*="--blue"]:hover   { --ink-on-tile:var(--ink-on-blue); }
.tile[style*="--green"]:hover  { --ink-on-tile:var(--ink-on-green); }
.tile[style*="--purple"]:hover { --ink-on-tile:var(--ink-on-purple); }

/* ============================================================
   ABOUT (short)
   ============================================================ */
.about { padding-block:20px; }
.about__grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.about__media { position:relative; width:min(340px,100%); aspect-ratio:1; margin-inline:auto; }
.about__bubble { position:absolute; inset:6% 0 0 6%; background:var(--blue); opacity:.9; border-radius:52% 48% 56% 44% / 50% 52% 48% 50%; }
.about__frame { position:absolute; inset:0; border-radius:50%; overflow:hidden; background:linear-gradient(160deg,#fff,var(--sky-soft,#EAF7FD)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.about__frame svg { width:32%; height:32%; opacity:.24; }
.about__frame-tag { font-size:.8rem; color:var(--ink-muted); background:var(--paper); padding:4px 14px; border-radius:var(--r-full); box-shadow:var(--sh-sm); }
.about__title { font-family:var(--font-display); font-weight:900; font-size:var(--t-3xl); line-height:1.08; letter-spacing:-.02em; margin:0 0 18px; }
.about__text p { color:var(--ink-muted); margin:0 0 16px; max-width:52ch; }
.about__text .btn { margin-top:10px; }
.about__pills { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:56px; padding-top:40px; border-top:1px solid var(--border); }

/* ---------- prose (about page) ---------- */
.prose { max-width:640px; margin:48px auto 0; padding-top:40px; border-top:1px solid var(--border); }
.prose p { color:var(--ink-muted); font-size:var(--t-lg); line-height:1.7; margin:0 0 22px; }
.prose__cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ============================================================
   SECTION HEAD (videos / resources / builds)
   ============================================================ */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:44px; }
.section-head__title { font-family:var(--font-display); font-weight:900; font-size:var(--t-3xl); line-height:1.06; letter-spacing:-.02em; margin:0; }
.section-head__sub { color:var(--ink-muted); margin:8px 0 0; }
.section-head__cta { display:inline-flex; align-items:center; gap:8px; font-size:var(--t-sm); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.section-head__cta svg { width:14px; height:14px; transition:transform var(--dur) var(--ease); }
.section-head__cta:hover svg { transform:translateX(4px); }

/* ============================================================
   VIDEOS
   ============================================================ */
.videos { padding-block:40px 80px; }
.video-row { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.vcard {
  --ink-on-tile:#fff;
  display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; color:var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vcard:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); background:var(--tile); border-color:var(--tile); color:var(--ink-on-tile); }
.vcard[style*="--coral"]:hover  { --ink-on-tile:var(--ink-on-coral); }
.vcard[style*="--blue"]:hover   { --ink-on-tile:var(--ink-on-blue); }
.vcard[style*="--green"]:hover  { --ink-on-tile:var(--ink-on-green); }
.vcard[style*="--purple"]:hover { --ink-on-tile:var(--ink-on-purple); }
.vcard__thumb {
  position:relative; aspect-ratio:16/10;
  background:color-mix(in srgb, var(--tile) 20%, #fff);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease);
}
.vcard:hover .vcard__thumb { background:rgba(255,255,255,.18); }
.vcard__play { width:50px; height:50px; border-radius:50%; background:var(--paper); color:var(--tile); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm); transition:transform var(--dur) var(--ease); }
.vcard__play svg { width:20px; height:20px; margin-left:2px; }
.vcard:hover .vcard__play { transform:scale(1.12); }
.vcard__soon { position:absolute; top:12px; left:12px; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:var(--ink); color:#fff; padding:4px 10px; border-radius:var(--r-full); }
.vcard__body { padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.vcard__meta { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); transition:color var(--dur) var(--ease); }
.vcard:hover .vcard__meta { color:var(--ink-on-tile); opacity:.85; }
.vcard__body h3 { font-family:var(--font-display); font-weight:600; font-size:var(--t-lg); line-height:1.28; margin:0; flex:1; }
.vcard__view { display:inline-flex; align-items:center; gap:8px; font-size:var(--t-sm); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.vcard__view svg { width:14px; height:14px; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.ctastrip { padding-block:20px 80px; }
.ctastrip__inner {
  background:var(--cream); border-radius:var(--r-xl);
  padding:clamp(32px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.ctastrip__title { font-family:var(--font-display); font-weight:900; font-size:var(--t-2xl); line-height:1.12; margin:0; max-width:22ch; }

/* ============================================================
   RESOURCES
   ============================================================ */
.resources { padding-block:40px 80px; }
.res-row { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.rcard {
  --ink-on-tile:#fff;
  position:relative; display:flex; flex-direction:column; gap:12px;
  background:var(--paper); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:28px 26px; color:var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rcard:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); background:var(--tile); border-color:var(--tile); color:var(--ink-on-tile); }
.rcard[style*="--coral"]:hover       { --ink-on-tile:var(--ink-on-coral); }
.rcard[style*="--blue"]:hover        { --ink-on-tile:var(--ink-on-blue); }
.rcard[style*="--green"]:hover       { --ink-on-tile:var(--ink-on-green); }
.rcard[style*="--yellow-deep"]:hover { --ink-on-tile:var(--ink-on-yellow); }
.rcard__badge { align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:color-mix(in srgb, var(--tile) 16%, #fff); color:var(--tile); padding:4px 12px; border-radius:var(--r-full); transition:all var(--dur) var(--ease); }
.rcard:hover .rcard__badge { background:rgba(255,255,255,.22); color:var(--ink-on-tile); }
.rcard__art { width:52px; height:52px; color:var(--tile); transition:color var(--dur) var(--ease); }
.rcard:hover .rcard__art { color:var(--ink-on-tile); }
.rcard__art svg { width:100%; height:100%; }
.rcard h3 { font-family:var(--font-display); font-weight:900; font-size:var(--t-lg); margin:0; }
.rcard p { font-size:var(--t-sm); color:var(--ink-muted); margin:0; flex:1; transition:color var(--dur) var(--ease); }
.rcard:hover p { color:var(--ink-on-tile); opacity:.9; }
.rcard__view { display:inline-flex; align-items:center; gap:8px; font-size:var(--t-sm); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.rcard__view svg { width:14px; height:14px; }

/* not-yet-released resource: same card, no hover lift, no promise of a download */
.rcard--soon { --tile:var(--ink-faint); border-style:dashed; background:var(--cream); cursor:default; }
.rcard--soon:hover { transform:none; box-shadow:none; background:var(--cream); border-color:var(--border); color:inherit; }
.rcard--soon .rcard__badge { background:#fff; color:var(--ink-faint); border:1px solid var(--border); }
.rcard--soon .rcard__art { color:var(--ink-faint); }
.rcard__soon-tag { align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); background:#fff; padding:6px 14px; border-radius:var(--r-full); border:1px solid var(--border); }
.res-note { max-width:62ch; margin:36px auto 0; text-align:center; color:var(--ink-muted); font-size:var(--t-sm); }

/* ============================================================
   BUILDS
   ============================================================ */
.builds { padding-block:40px 96px; }
.build-row { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bcard {
  --ink-on-tile:var(--ink-on-blue);
  display:flex; flex-direction:column; gap:12px;
  background:var(--paper); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:32px 30px; color:var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bcard:not(.bcard--soon):hover { transform:translateY(-6px); box-shadow:var(--sh-lg); background:var(--tile); border-color:var(--tile); color:var(--ink-on-tile); }
.bcard__logo { width:56px; height:56px; border-radius:var(--r-md); background:color-mix(in srgb, var(--tile,var(--blue)) 16%, #fff); color:var(--tile,var(--blue)); display:flex; align-items:center; justify-content:center; transition:all var(--dur) var(--ease); }
.bcard__logo svg { width:28px; height:28px; }
.bcard:not(.bcard--soon):hover .bcard__logo { background:rgba(255,255,255,.22); color:var(--ink-on-tile); }
.bcard h3 { font-family:var(--font-display); font-weight:900; font-size:var(--t-xl); margin:0; }
.bcard p { color:var(--ink-muted); margin:0; flex:1; transition:color var(--dur) var(--ease); }
.bcard:not(.bcard--soon):hover p { color:var(--ink-on-tile); opacity:.92; }
.bcard__view { display:inline-flex; align-items:center; gap:8px; font-size:var(--t-sm); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.bcard__view svg { width:14px; height:14px; }
.bcard--soon { --tile:var(--border); border-style:dashed; background:var(--cream); }
.bcard--soon .bcard__logo { background:#fff; color:var(--ink-faint); }
.bcard__soon-tag { align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); background:#fff; padding:6px 14px; border-radius:var(--r-full); border:1px solid var(--border); }
.bcard__soon-tag--link { color:var(--blue-deep); }
.bcard__soon-tag--link:hover { background:var(--blue); color:#fff; border-color:var(--blue); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--cream); border-radius:var(--r-xl) var(--r-xl) 0 0; max-width:1240px; margin:0 auto; padding-block:64px 48px; }
.footer__grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:32px; }
.footer__copy { color:var(--ink-muted); font-size:var(--t-sm); margin:22px 0; }
.footer__social { display:flex; flex-wrap:wrap; gap:12px; }
.footer__social a { width:40px; height:40px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:all var(--dur) var(--ease); }
.footer__social a:hover { background:var(--ink); color:var(--cream); transform:translateY(-2px); }
.footer__social svg { width:18px; height:18px; }
.footer__col h4 { font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px; }
.footer__col ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer__col a { color:var(--ink-muted); font-size:var(--t-sm); }
.footer__col a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   REVEAL
   ============================================================ */
/* Progressive enhancement: elements hide only when JS is active,
   so a JS/observer failure never leaves a blank page. */
/* Reveal only pins a transform while HIDDEN (:not(.is-visible)).
   Once visible it contributes NO transform, so card :hover transforms
   (zoom) are free to apply instead of being overridden. */
.reveal { transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.js .reveal:not(.is-visible) { opacity:0; transform:translateY(30px); }
html.js .reveal:not(.is-visible).from-left  { transform:translateX(-48px); }
html.js .reveal:not(.is-visible).from-right { transform:translateX(48px); }
html.js .reveal:not(.is-visible).zoom-in    { transform:scale(.9); }

/* Cards manage their own (snappier) transition + GPU hint, so hover
   zoom feels instant while the reveal still eases in smoothly. */
html.js .tile, html.js .vcard, html.js .rcard, html.js .bcard {
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  will-change: transform;
}

/* stagger cards inside a row so they arrive one after another */
html.js .video-row .reveal:nth-child(2),
html.js .res-row   .reveal:nth-child(2),
html.js .build-row .reveal:nth-child(2) { transition-delay:.09s; }
html.js .video-row .reveal:nth-child(3),
html.js .res-row   .reveal:nth-child(3),
html.js .build-row .reveal:nth-child(3) { transition-delay:.18s; }
html.js .video-row .reveal:nth-child(4),
html.js .res-row   .reveal:nth-child(4) { transition-delay:.27s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px) {
  :root { --t-4xl:2.9rem; --t-3xl:2.2rem; --t-2xl:1.7rem; }
  .hero { grid-template-columns:1fr; text-align:center; gap:32px; }
  .hero__photo { width:min(280px,72%); }
  .hero__lede, .hero__sub { margin-inline:auto; }
  .hero__cta { justify-content:center; }
  .sub-card { grid-template-columns:1fr; gap:24px; }
  .ct-card { grid-template-columns:1fr; gap:28px; }
  .help__grid { grid-template-columns:1fr; }
  .help__col--right { margin-top:0; }
  .about__grid { grid-template-columns:1fr; }
  .video-row { grid-template-columns:repeat(2,1fr); }
  .res-row { grid-template-columns:repeat(2,1fr); }
  .build-row { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1/-1; }
}

/* Nav collapses to the burger EARLIER than the rest of the layout:
   six links + the CTA button stop fitting on one line just under 980px,
   well before the 640px breakpoint the other sections use. Measured, not
   guessed: at 920px the nav row wanted 928px against 905px of room.
   js/main.js hover logic keys off the same 981px edge — change both. */
@media (max-width:980px) {
  .nav__links {
    display:none; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:18px;
    background:var(--cream); padding:24px var(--gutter) 32px;
    border-bottom:1px solid var(--border); box-shadow:var(--sh-md);
  }
  .nav.is-open .nav__links { display:flex; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity:0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .nav__cta--inline { display:inline-flex; margin-top:6px; }
  .nav__right .btn { display:none; }
  .nav__toggle { display:block; }
  /* dropdown becomes a plain indented list inside the burger menu */
  .nav__dd { display:block; width:100%; }
  .nav__dd-caret { display:none; }
  .nav__dd-panel {
    position:static; transform:none; width:100%; padding:6px 0 0 14px;
    background:transparent; border:none; box-shadow:none;
    opacity:1; visibility:visible; pointer-events:auto;
    border-left:2px solid var(--border); margin-top:10px; margin-left:2px; gap:0;
  }
  .nav__dd-panel::before { display:none; }
  .nav__dd-item { padding:9px 8px; }
  .nav__dd-note { display:none; }
  .nav__dd-all { padding:12px 8px 2px; margin-top:4px; }
}

@media (max-width:640px) {
  .shell { border-radius:0; margin-top:0; padding-inline:20px; }
  .video-row, .res-row { grid-template-columns:1fr; }
  .sub-form { flex-direction:column; }
  .footer__grid { grid-template-columns:1fr; }
  .section-head { flex-direction:column; align-items:flex-start; }
}

/* ---------- accessibility floor ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}

/* ============================================================
   CONNECT — the desk
   Cards sit at a resting tilt (--rot) and a vertical offset
   (--off), both set inline per card, and drift under the cursor
   via --px/--py set on the grid by js/main.js. Hovering lifts a
   card and straightens it — that is the tactile bit. Inline
   custom properties beat stylesheet ones, which is why the
   mobile override below needs !important to flatten the scatter.
   ============================================================ */
/* connect header photo — .ct-head is shared with contact/resources,
   so this lives on its own class and changes nothing on those pages */
/* the split header: photo on one side, words on the other.
   .ct-head is shared with contact/resources, so the two-column layout
   hangs off a modifier and those pages stay centred. */
.ct-head--split {
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:48px; align-items:center; text-align:left;
}
.ct-head--split .ct-head__lede { margin-inline:0; max-width:52ch; }

.polaroid {
  position:relative; width:220px; margin:0; flex:none;
  padding:12px 12px 16px; background:var(--paper);
  border:1px solid var(--border); box-shadow:var(--sh-md);
  transform:rotate(-2.5deg);
}
.polaroid img { width:100%; height:auto; display:block; background:var(--cream); }
.polaroid figcaption { margin-top:11px; text-align:center; font-size:.74rem; letter-spacing:.04em; color:var(--ink-faint); }
.polaroid__tape {
  position:absolute; top:-11px; left:50%; width:76px; height:22px;
  transform:translateX(-50%) rotate(-4deg); background:rgba(251,203,69,.55);
  border-left:1px dashed rgba(0,0,0,.08); border-right:1px dashed rgba(0,0,0,.08);
}

.desk { padding-block:52px 96px; }
/* auto-fit, not fixed columns: a card never squeezes below 220px, so
   the row count follows the space instead of a guessed breakpoint */
.desk__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:28px 24px; align-items:start; }

.di {
  --lift:0px;
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:16px 18px 20px; border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--border); box-shadow:var(--sh-sm);
  color:var(--ink);
  transform:
    translate3d(calc(var(--px,0px) * var(--depth,1)),
                calc(var(--off,0px) + var(--lift) + var(--py,0px) * var(--depth,1)), 0)
    rotate(var(--tilt, var(--rot,0deg)));
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  will-change:transform;
}
.di:hover, .di:focus-visible { --lift:-10px; --tilt:0deg; box-shadow:var(--sh-lg); border-color:var(--tile); z-index:2; }

.di__prop { position:relative; display:block; height:104px; border-radius:var(--r-md); overflow:hidden; background:var(--cream); }
.di__head { display:flex; align-items:center; gap:10px; }
.di__icon { width:26px; height:26px; flex:none; color:var(--tile); }
.di__icon svg { width:100%; height:100%; }
.di__name { position:relative; font-family:var(--font-display); font-weight:900; font-size:var(--t-lg); line-height:1.2; }
.di__u {
  position:absolute; left:-2%; bottom:-.22em; width:104%; height:.38em;
  overflow:visible; pointer-events:none;
  stroke-dasharray:210; stroke-dashoffset:210;
  /* retracting is quick — the line should get out of the way */
  transition:stroke-dashoffset .3s var(--ease);
}
/* Drawing is slow and even. --ease is an out-expo: it dumps half the
   stroke in the first eighth of the time, which read as a flick rather
   than a pen. easeInOutCubic keeps a steady middle with soft ends, and
   the short delay stops the line flashing when the cursor just passes
   over a card on its way somewhere else. */
.di:hover .di__u, .di:focus-visible .di__u {
  stroke-dashoffset:0;
  transition:stroke-dashoffset .95s cubic-bezier(.65,0,.35,1) .07s;
}
.di__bio { font-size:var(--t-sm); line-height:1.55; color:var(--ink-muted); flex:1; }
.di__count {
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tile); background:color-mix(in srgb, var(--tile) 13%, #fff);
  padding:6px 13px; border-radius:var(--r-full);
}
/* an unfilled count never leaves a blank row or a made-up number */
.di__count:empty { display:none; }

/* ---- the props ---- */
.di--yt { --tile:#E8402A; }
.di__prop--yt { background:var(--ink); display:flex; align-items:center; justify-content:center; }
.di__prop--yt .di__play {
  width:44px; height:44px; border-radius:50%; background:var(--paper); color:var(--tile);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm);
}
.di__prop--yt .di__play svg { width:18px; height:18px; margin-left:2px; }
.di__bar { position:absolute; left:14px; bottom:14px; height:5px; width:calc(100% - 28px); border-radius:var(--r-full); background:rgba(255,255,255,.18); }
.di__bar--short { width:38%; background:var(--tile); }

.di--ig { --tile:#C13584; }
.di__prop--ig { display:flex; align-items:center; justify-content:center; }
.di__frames { display:flex; gap:8px; }
.di__frames i { display:block; width:44px; height:56px; border-radius:6px; box-shadow:var(--sh-sm);
  background:linear-gradient(150deg,#FBCB45,#F47C55 45%,#9C8CF0); }
.di__frames i:nth-child(1) { transform:rotate(-5deg); }
.di__frames i:nth-child(3) { transform:rotate(5deg); }
.di__tape {
  position:absolute; top:8px; left:50%; width:74px; height:20px;
  transform:translateX(-50%) rotate(-3deg); background:rgba(251,203,69,.55);
  border-left:1px dashed rgba(0,0,0,.08); border-right:1px dashed rgba(0,0,0,.08);
}

.di--fb { --tile:#1877F2; }
.di__prop--fb { display:flex; align-items:center; padding:0 20px; }
.di__lines { display:grid; gap:9px; width:100%; }
.di__lines i { display:block; height:7px; border-radius:var(--r-full); background:#DDE6F5; }
.di__lines i:nth-child(1) { width:86%; background:var(--tile); opacity:.75; }
.di__lines i:nth-child(2) { width:100%; }
.di__lines i:nth-child(3) { width:72%; }
.di__lines i:nth-child(4) { width:44%; }

.di--tw { --tile:#2ED573; }
/* the only prop that is a real image: the studio actually has a logo,
   and a drawn stand-in for a real mark is just a worse version of it */
.di__prop--tw { display:flex; align-items:center; justify-content:center; }
.di__logo { width:84px; height:auto; display:block; }

/* Facebook blue, same as the other Facebook card — the camera icon
   carries the difference, the colour carries where it goes */
.di--art { --tile:#1877F2; }
.di__prop--art { display:flex; align-items:center; justify-content:center; }
.di__hi { font-family:var(--font-display); font-weight:900; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink); }

.di--x { --tile:#191A22; }
.di__prop--x {
  background:var(--ink); display:flex; align-items:center; justify-content:center;
  clip-path:polygon(0 0,100% 0,100% 86%,92% 100%,78% 88%,64% 100%,50% 88%,36% 100%,22% 88%,8% 100%,0 86%);
}
.di__scribble { width:74%; color:rgba(255,255,255,.55); }
.di__scribble svg { width:100%; height:auto; }

/* TikTok red is the brand's primary; the cyan lives in the icon offset.
   .di__icon--tt sets its own fills, so --tile only drives the pill,
   the hover border and the play triangle on the phone. */
.di--tt { --tile:#FE2C55; }
.di__icon--tt { color:initial; }
.di__prop--tt { display:flex; align-items:flex-end; justify-content:center; }
.di__phone {
  position:relative; width:60px; height:86px; border-radius:12px 12px 4px 4px;
  background:var(--ink); box-shadow:var(--sh-md);
  display:flex; align-items:center; justify-content:center;
}
.di__notch { position:absolute; top:7px; left:50%; transform:translateX(-50%); display:block; width:20px; height:4px; border-radius:var(--r-full); background:rgba(255,255,255,.35); }
.di__pplay { display:block; width:0; height:0; margin-left:3px; border-left:13px solid var(--tile); border-top:9px solid transparent; border-bottom:9px solid transparent; }

.di--li { --tile:#0A66C2; }
.di__prop--li { display:flex; align-items:center; justify-content:center; }
.di__card {
  width:76%; height:58px; border-radius:8px; background:var(--paper);
  box-shadow:var(--sh-md); border:1px solid var(--border);
  display:grid; align-content:center; gap:8px; padding:0 16px; transform:rotate(-4deg);
}
.di__card i { display:block; height:6px; border-radius:var(--r-full); background:#D9E4F1; }
.di__card i:first-child { width:52%; background:var(--tile); }
.di__card i:last-child { width:80%; }

@media (max-width:900px) {
  .desk__grid { gap:22px 18px; }
  /* flatten the vertical scatter once the rows get short —
     inline custom properties only lose to !important */
  .di { --off:0px !important; }
}

/* no cursor, no parallax */
@media (hover:none) {
  .di { --depth:0 !important; }
}

@media (max-width:760px) {
  .ct-head--split { grid-template-columns:1fr; justify-items:center; text-align:center; gap:26px; }
  .ct-head--split .ct-head__lede { margin-inline:auto; }
}

@media (max-width:520px) {
  .di { --rot:0deg !important; }
  .polaroid { width:170px; }
}

/* connect page: one natural paragraph that answers "who and how" for
   visitors AND for Google's language model. Muted, not decorative. */
.ct-blurb { padding-block:0 40px; }
.ct-blurb p { max-width:64ch; margin:0 auto; text-align:center; color:var(--ink-muted); font-size:var(--t-sm); line-height:1.7; }
.ct-blurb a { color:var(--blue-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; }