/* src/styles/chat.css */
/* Site assistant chat. Secondary styling on purpose: "Book a call" stays the main action. */
.dba-chat { position: fixed; right: 16px; bottom: 16px; z-index: 900; font-family: "Inter Tight", system-ui, sans-serif; }
.dba-chat_launch { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--ink-20, rgba(0,0,0,.2)); border-radius: 999px; background: var(--paper, #f2f2f0); color: var(--ink, #1a1a1a); font: inherit; font-size: 14px; letter-spacing: -.01em; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; }
.dba-chat_launch:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.dba-chat_dot { width: 8px; height: 8px; border-radius: 50%; background: #2bb673; }
.dba-chat-open .dba-chat_launch { display: none; }
.dba-chat_panel { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 32px)); display: flex; flex-direction: column; background: var(--paper, #f2f2f0); color: var(--ink, #1a1a1a); border: 1px solid var(--ink-10, rgba(0,0,0,.1)); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.18); overflow: hidden; animation: dba-in .25s cubic-bezier(.2,.7,.2,1); }
.dba-chat_panel[hidden] { display: none; }
@keyframes dba-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dba-chat_head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--ink-10, rgba(0,0,0,.1)); }
.dba-chat_title { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.dba-chat_sub { margin: 2px 0 0; font-size: 12px; color: var(--muted, #777); }
.dba-chat_close { width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; background: none; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.dba-chat_log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.dba-chat_msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.dba-chat_msg a { color: inherit; text-decoration: underline; text-underline-offset: .15em; display: inline; }
.dba-chat_msg-bot { align-self: flex-start; background: #fff; border: 1px solid var(--ink-10, rgba(0,0,0,.1)); border-bottom-left-radius: 4px; }
.dba-chat_msg-user { align-self: flex-end; background: var(--ink, #1a1a1a); color: var(--paper, #f2f2f0); border-bottom-right-radius: 4px; }
.dba-chat_msg-error { border-color: #d9534f; }
.dba-chat_chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dba-chat_chip { min-height: 36px; text-align: left; padding: 6px 12px; border: 1px solid var(--ink-20, rgba(0,0,0,.2)); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.dba-chat_chip:hover { background: var(--ink-10, rgba(0,0,0,.06)); }
.dba-chat_form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--ink-10, rgba(0,0,0,.1)); }
.dba-chat_form textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 11px 14px; border: 1px solid var(--ink-20, rgba(0,0,0,.2)); border-radius: 12px; background: #fff; color: inherit; font: inherit; font-size: 16px; line-height: 1.35; }
.dba-chat_form button { width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: var(--ink, #1a1a1a); color: var(--paper, #f2f2f0); font-size: 18px; cursor: pointer; }
.dba-chat_hp, .dba-chat_sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) {
  .dba-chat { right: 12px; bottom: 12px; }
  .dba-chat-open { inset: 0; right: 0; bottom: 0; }
  .dba-chat-open .dba-chat_panel { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) { .dba-chat_panel, .dba-chat_launch { animation: none; transition: none; } }


/* src/styles/smooth-scroll.css */
/* Lenis recommended base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* src/styles/tidy.css */
/* Site-wide tidy-ups (Sep 2026). Visual design unchanged. */

/* Cleaner line breaks: no single orphaned word on headlines and paragraphs. */
h1, h2, h3, .hero_sub, .wl_cta_title, .cs_lead { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Phones: invisible 44px tap areas on small text links. Nothing moves visually. */
@media (max-width: 767px) {
  .numnav_link, .stickybar_logo, .foot_small a, a.foot_small, .foot_legal_link, .wl_filters a.wl_filter, .link-arrow { position: relative; }
  .numnav_link::after, .stickybar_logo::after, a.foot_small::after,
  .foot_legal_link::after, .wl_filters a.wl_filter::after, .link-arrow::after {
    content: ""; position: absolute; inset: -12px -6px;
  }
}

/* Footer social links (stacked Instagram / LinkedIn / YouTube): real spacing so each one is
   its own tap target instead of overlapping invisible areas. */
.foot_small a { display: inline-block; padding-block: 6px; }

/* Links inside legal text look like links. */
.legal_p a { text-decoration: underline !important; text-underline-offset: 0.15em; display: inline !important; }

/* Tablets: the "No surprises" text column was too narrow for its heading, pushing
   "The rule" off the left edge. Widen it and match the page's side margin. */
@media (min-width: 768px) and (max-width: 1199px) {
  .mantra { grid-template-columns: 40% 1fr !important; }
  .mantra_copy { padding-left: 40px !important; padding-right: 24px !important; }
}

/* Phones (Oct 5 2026): the ~1.2 MB hand-mark GIFs are skipped on mobile for speed (lazy + display:none
   means they never download). The static gold hand mark stands in. Desktop keeps the GIFs. */
@media (max-width: 767px) {
  a.work_card[href="/contact"] .work_media_gif { display: none !important; }
  a.work_card[href="/contact"] .work_media { background-image: url("/uploads/ea2hvttYrCz--o4u84akU-designedby-favicon-gold.svg"); background-position: center; background-size: 34% auto; background-repeat: no-repeat; }
}

/* Work page intro under "The work" (Oct 5 2026, SEO): sits in the sticky left column on desktop. */
.wl_intro { margin-top: 16px; max-width: 24em; }
@media (max-width: 768px) { .wl_intro { margin-left: var(--space-m); margin-right: var(--space-m); } }


/* src/styles/type.css */
/* Display type, Sep 2026: the "Bookmarked." look across the site.
   Signature headings: extra-bold, tight, ending in a red full stop (.accent_dot). */
:root { --dot: #b70000; }
.accent_dot { color: var(--dot); }
.hero_title, .wl_title, .cs_title, .work_title, .foot_big, .wl_cta_title {
  font-weight: 800 !important; letter-spacing: -0.055em !important; line-height: 0.9 !important;
}
.hero_title { text-transform: none !important; }
.stickybar_logo { font-weight: 600 !important; letter-spacing: -0.04em !important; }
/* Supporting headings: semi-bold, like the Bookmarked shelf titles. */
.love_title, .work_name, .ar_title, .ar_body h2, .ar_body h3, .cs_next_link, .bl_title {
  font-weight: 600 !important;
}
.love_title, .work_name, .ar_title, .cs_next_link { letter-spacing: -0.045em !important; }

/* Red full stops on plain-text signature headings (added in CSS, not in the text). */
.work_title::after, .foot_big::after,
.cs_title:not(:has(.line))::after, .wl_title:not(:has(.line))::after,
.cs_title .line:last-child > span::after, .wl_title .line:last-child > span::after {
  content: "."; color: var(--dot);
}


/* src/styles/youtube-facade.css */
/* Click-to-play YouTube embed (hero). Rounded like the buttons; play button uses the accent. */
.yt_facade, .yt_frame { display: block; position: relative; width: min(100%, 760px); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 0; background: #000; }
.yt_poster { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease; }
.yt_play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--dot, #b70000); box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); transition: transform 0.25s ease; }
.yt_play::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
html[data-theme="night"] .yt_play::after { border-left-color: #191919; }
.yt_facade:hover .yt_poster, .yt_facade:focus-visible .yt_poster { transform: scale(1.03); opacity: 0.9; }
.yt_facade:hover .yt_play, .yt_facade:focus-visible .yt_play { transform: scale(1.08); }
.yt_facade:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 767px) { .yt_play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .yt_play::after { left: 24px; top: 18px; border-width: 12px 0 12px 19px; } }
@media (prefers-reduced-motion: reduce) { .yt_poster, .yt_play { transition: none; } }


/* src/styles/effects.css */
/* 1. Page transitions: pages cross-fade, and a project's card image morphs into its case study hero. */
@view-transition { navigation: auto; }
/* The old page eases out and drifts up a touch; the new one settles in from just below.
   The header keeps its place, so only the content moves. */
::view-transition-old(root) { animation: pt-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; }
::view-transition-new(root) { animation: pt-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
@keyframes pt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pt-in { from { opacity: 0; transform: translateY(14px); } }
.stickybar { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
/* Browsers without page transitions (Firefox): a soft fade out on click, set by effects.js. */
html.pt-leaving body { opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
.vt-deez { view-transition-name: vt-deez; }
.vt-devils { view-transition-name: vt-devils; }
.vt-primal { view-transition-name: vt-primal; }

/* 2. Work card hovers: image eases in, and a soft gradient in the image's own colour rises
   from the bottom. --glow is set per card by effects.js (falls back to a neutral tone). */
.work_media, .wl_media { position: relative; transition: box-shadow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.work_media img, .wl_media img { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.work_card:hover .work_media img, .wl_card:hover .wl_media img,
.work_card:focus-visible .work_media img, .wl_card:focus-visible .wl_media img { transform: scale(1.04); }
.work_media::after, .wl_media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgb(var(--glow, 120 120 120) / 0.5) 0%, rgb(var(--glow, 120 120 120) / 0.16) 40%, transparent 72%);
  opacity: 0; transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.work_card:hover .work_media::after, .wl_card:hover .wl_media::after,
.work_card:focus-visible .work_media::after, .wl_card:focus-visible .wl_media::after { opacity: 1; }
.work_card:hover .work_media, .wl_card:hover .wl_media,
.work_card:focus-visible .work_media, .wl_card:focus-visible .wl_media { box-shadow: 0 24px 60px -28px rgb(var(--glow, 120 120 120) / 0.55); }
a[href="/contact"] .work_media { --glow: 242 242 240; }
a[href="/contact"] .work_media::after { background: linear-gradient(to top, rgb(242 242 240 / 0.14) 0%, transparent 65%); }

/* 3. Scroll reveals (only when the effects script is running). */
html.fx [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0s);
}
html.fx [data-reveal].is-in { opacity: 1; transform: none; }

/* 3b. Case study gallery: each image rises in with a soft top-down wipe, and waits for its file to load. */
html.fx .cs_gallery .cs_img[data-reveal] {
  clip-path: inset(0 0 12% 0);
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), clip-path 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0s);
}
html.fx .cs_gallery .cs_img[data-reveal].is-in { clip-path: inset(0 0 0 0); transform: none; }
html.fx .cs_gallery .cs_img.is-loading { opacity: 0 !important; }

/* 4. Headline line reveal. */
.line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line > span { display: block; }
html.fx .line > span { transform: translateY(110%); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
html.fx.fx-ready .line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.pt-leaving body { opacity: 1; transition: none; }
  .work_media, .wl_media, .work_media img, .wl_media img, .work_media::after, .wl_media::after { transition: none; }
}

/* Hide the header CTA while an in-page primary CTA is visible. */
.stickybar_cart { transition: opacity 0.25s ease, visibility 0.25s ease; }
html.page-cta-visible .stickybar_cart { opacity: 0; visibility: hidden; pointer-events: none; }


/* "Your brand next" card: a plain dark card, no image file. */
a[href="/contact"] .work_media { background: transparent; aspect-ratio: 5 / 4; }


/* src/styles/theme.css */
/* Day/night theme (Sep 2026). Night uses the Canva brand colours: charcoal #191919, warm white, gold #B1893A.
   theme.js sets html[data-theme] in the head, so night pages never flash white. */
html[data-theme="night"] .lk_logo_img { filter: invert(1) brightness(0.96); }
html[data-theme="night"] {
  --ink: #F3F1EC;
  --paper: #191919;
  --muted: #9A958C;
  --ink-10: rgba(243, 241, 236, .1);
  --ink-20: rgba(243, 241, 236, .2);
  --dot: #B1893A;
  color-scheme: dark;
  background-color: #191919;
}

/* The toggle: sits beside "Book a call". */
.theme_group { display: flex; align-items: center; gap: 12px; }
.theme_toggle {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--ink-20, rgba(26, 26, 26, .2)); background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .2s ease;
}
.theme_toggle::before { content: ""; position: absolute; inset: -4px; } /* 44px tap area */
.theme_toggle svg { width: 18px; height: 18px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
html[data-theme="night"] .theme_toggle svg { transform: rotate(180deg); }
.theme_toggle:hover { border-color: var(--ink); }
.theme_toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Cross-fade only when someone flips the switch, never on page load. */
html.theme-anim, html.theme-anim body, html.theme-anim .home, html.theme-anim .stickybar,
html.theme-anim .btn-primary, html.theme-anim .mantra_panel {
  transition: background-color .35s ease, color .35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme_toggle svg, html.theme-anim, html.theme-anim * { transition: none !important; }
}

/* Night: the pieces that don't use the colour tokens. */
html[data-theme="night"] .btn-primary { background-color: #B1893A !important; color: #191919 !important; }
html[data-theme="night"] .btn-primary:focus-visible { outline-color: #B1893A; }
html[data-theme="night"] .mantra_panel { background-color: #0F0F0F; color: #D6D4CE; }
html[data-theme="night"] a[href="/contact"] .work_media { background: transparent; box-shadow: none; }
html[data-theme="night"] .ph-img, html[data-theme="night"] .bl_media { background-color: #262626; }

/* Chat */
html[data-theme="night"] .dba-chat_msg-bot,
html[data-theme="night"] .dba-chat_form textarea { background: #232323; }
html[data-theme="night"] .dba-chat_launch:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }

/* Bookmarked */
html[data-theme="night"] .bm { --bm-line: #333333; --bm-accent: #B1893A; --bm-accent-ink: #C49A45; --bm-wash: rgba(177, 137, 58, .16); }
html[data-theme="night"] .bm mark { color: #191919; }
html[data-theme="night"] .bm_input { background: #232323 !important; }
html[data-theme="night"] .bm_unlockbar_btn { background: #B1893A !important; color: #191919 !important; }

/* Form errors stay readable on charcoal. */
html[data-theme="night"] .bm_form[data-instatic-form-state="error"]::after,
html[data-theme="night"] form.brief[data-instatic-form-state="error"]::after { color: #F97066; }


/* src/styles/background.css */
/* Background texture (Sep 25, 2026): soft gradient washes plus a fine grain, painted only on the page
   background. Images, cards and the dark panels stay clean. Fixed to the viewport so the header,
   which shares the same background, lines up with the page behind it. */
:root {
  --bg-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .13 -.03'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --bg-wash:
    radial-gradient(70% 55% at 88% 6%, rgba(183, 0, 0, .07) 0%, rgba(183, 0, 0, 0) 70%),
    radial-gradient(60% 50% at 6% 92%, rgba(196, 176, 140, .30) 0%, rgba(196, 176, 140, 0) 70%),
    radial-gradient(80% 60% at 45% 45%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(170deg, #F4F3EF 0%, #EDEBE6 100%);
}
html[data-theme="night"] {
  --bg-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .10 -.03'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --bg-wash:
    radial-gradient(70% 55% at 88% 6%, rgba(177, 137, 58, .12) 0%, rgba(177, 137, 58, 0) 70%),
    radial-gradient(60% 50% at 6% 92%, rgba(110, 84, 40, .22) 0%, rgba(110, 84, 40, 0) 70%),
    radial-gradient(80% 60% at 45% 45%, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(170deg, #1C1B19 0%, #151514 100%);
}

body, .home, .stickybar {
  background-color: var(--paper);
  background-image: var(--bg-noise), var(--bg-wash);
  background-size: 240px 240px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
@media print { body, .home, .stickybar { background-image: none; } }


/* src/styles/hover.css */
/* Hover = accent (Sep 25, 2026). Text links and buttons turn the accent colour on hover so it's obvious
   what you're pointing at. Accent is var(--dot): red #B70000 by day, gold #B1893A at night.
   Work / case study cards and blog cards keep their own image hover and are not touched here. */
:root { --hover: var(--dot, #B70000); --hover-ink: #FFFFFF; }
html[data-theme="night"] { --hover-strong: #D4AE5C; --hover-ink: #191919; }

/* Text links */
.numnav_link, .numnav_num, .foot_legal_link, .foot_small a, a.foot_small, .link-arrow, .cs_next_link,
.wl_filters a.wl_filter, .bm_link, .ar_body a, .legal_p a, .bm_name {
  transition: color .2s ease;
}
.numnav_link:hover, .numnav_link:hover .numnav_num,
.foot_legal_link:hover, .foot_small a:hover, a.foot_small:hover,
.link-arrow:hover, .cs_next_link:hover, .wl_filters a.wl_filter:hover,
.bm_link:hover, .ar_body a:hover, .legal_p a:hover,
.bm_row:hover .bm_name {
  color: var(--hover) !important;
}

/* Buttons: fill with the accent. Day: white text on red (7:1). Night: dark text on gold. */
.btn-primary { transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.btn-primary:hover { background-color: var(--hover) !important; color: var(--hover-ink) !important; opacity: 1 !important; }
/* At night the button is already gold, so hover lifts it to a lighter gold. */
html[data-theme="night"] .btn-primary:hover { background-color: var(--hover-strong) !important; }

.brief_submit { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.brief_submit:hover { background-color: var(--hover) !important; border-color: var(--hover) !important; color: var(--hover-ink) !important; }

.bm_unlockbar_btn:hover { background: var(--bm-accent-ink, #8A0000) !important; }
html[data-theme="night"] .bm_unlockbar_btn:hover { background: var(--hover-strong) !important; }

.bm_chip:hover { border-color: var(--hover) !important; color: var(--hover) !important; }
.theme_toggle:hover { border-color: var(--hover); color: var(--hover); }
.dba-chat_launch:hover { border-color: var(--hover); }
.dba-chat_chip:hover { border-color: var(--hover); color: var(--hover); background: transparent; }
.dba-chat_form button:hover { background: var(--hover); color: var(--hover-ink); }

@media (prefers-reduced-motion: reduce) {
  .numnav_link, .numnav_num, .foot_legal_link, .foot_small a, a.foot_small, .link-arrow, .cs_next_link,
  .wl_filters a.wl_filter, .bm_link, .ar_body a, .legal_p a, .bm_name, .btn-primary, .brief_submit { transition: none; }
}