/* =====================================================================
   base.css — shared foundation for every page on azfar.in
   Loaded first, before the page-specific stylesheet.
   Tokens, reset, typography, nav, reveal, photo frames, doodles.
   Edit a shared rule HERE, once, not in six places.
   ===================================================================== */

/* ---------- self-hosted variable fonts (latin subset) ---------- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/nunito-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --bg: #FAF8F3;
  --ink: #16181B;
  --ink-soft: #55585F;
  --blue: #006241;
  --blue-bright: #1E9160;
  --blue-deep: #00402A;
  --rule: #E4DFD3;
  --dot: rgba(22,24,27,0.06);
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: default;
  /* Notion-style dot grid background */
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: 24px 24px;
  background-repeat: repeat;
  position: relative;
}

::selection { background: var(--blue); color: #fff; }

a { color: inherit; }

/* ---------- line breaking ---------- */
/* Headings and short lead-ins get `balance`, which evens out the line lengths
   instead of letting the last line collapse to one or two words. Longer body
   copy gets `pretty`, which only prevents the orphan on the final line.
   Both degrade to normal wrapping in browsers that don't support them. */
h1, h2, h3, h4,
.head p, .dek, .subhead, p.sub, .sec-note, .invite, .kicker,
.page-header p, .article-header p, blockquote {
  text-wrap: balance;
}

p, li, .note, .cap, .author-desc, .faq-a, q,
.event-text p, .cinematic-content p, .statement-note {
  text-wrap: pretty;
}

/* A balanced block still needs a sane measure, or it balances across a line
   so long that it never wrapped for the right reason in the first place.
   The auto margins only make sense where the block is centred, so they are
   opted into via .head-centred rather than applied blindly. */
.head p, .sec-note, .page-header p, .subhead {
  max-width: 62ch;
}
.page-header p,
.head:not(.head-left) p,
.head:not(.head-left) .subhead {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- keyboard focus ---------- */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
/* on the green surfaces, a dark ring would disappear */
nav :focus-visible,
.clock :focus-visible,
.contact :focus-visible,
.cinematic :focus-visible,
.nav-drawer :focus-visible,
.nav-mobile-home:focus-visible,
.nav-toggle:focus-visible {
  outline-color: var(--bg);
}

/* skip link — first focusable element on the page */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--blue);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 640px) { .wrap { padding: 0 24px; } }

/* ---------- section dividers (gradient fade) ---------- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--rule) 20%, var(--rule) 80%, transparent 100%);
  max-width: 1180px;
  margin: 0 auto;
}

section { position: relative; }

/* Anchor jumps must clear the fixed nav pill, or the heading you jumped to
   lands underneath it. Applies to every in-page target, site-wide. */
:target,
section[id],
[id^="story"], [id^="contact"], [id^="services"], [id^="results"],
[id^="case-studies"], [id^="process"], [id^="faq"], [id^="about"],
[id^="guides"], [id^="early"], [id^="archive"] {
  scroll-margin-top: 104px;
}
@media (max-width: 640px) {
  :target, section[id] { scroll-margin-top: 84px; }
}

/* ---------- scroll progress bar ---------- */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
  z-index: 100;
  transition: width 0.1s linear;
}

/* ---------- custom cursor ---------- */
#cursor {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  transition: width 0.25s cubic-bezier(.2,.7,.2,1), height 0.25s cubic-bezier(.2,.7,.2,1), opacity 0.25s;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) { #cursor { opacity: 0.85; } }
#cursor.big { width: 64px; height: 64px; opacity: 0.15; }

/* ---------- progress index ---------- */
#index {
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 50;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  display: flex;
  gap: 6px;
  align-items: baseline;
}
#index b { color: var(--blue); font-weight: 600; }
/* The counter sits over cream sections and over the full-bleed green ones.
   A tinted pill keeps it legible on both without needing to know which. */
#index {
  background: rgba(250, 248, 243, 0.92);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.06);
}
@media (max-width: 640px) { #index { display: none; } }

/* ---------- nav (desktop pill) ---------- */
nav {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--blue);
  border-radius: 12px;
  box-shadow:
    0 16px 32px -8px rgba(0, 98, 65, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  max-width: calc(100vw - 24px);
  width: max-content;
}
nav .nav-item {
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
nav .nav-item:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
nav .nav-item.active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
nav .wordmark {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 9px 14px;
  flex-shrink: 0;
}
nav .wordmark svg { width: 18px; height: 18px; display: block; }
nav .wordmark:hover { transform: scale(1.05); }
nav .nav-links {
  display: flex;
  gap: 4px;
  padding: 0 8px;
  align-items: center;
  /* deliberately NOT overflow:auto — the Services dropdown is absolutely
     positioned below this row and any overflow value other than visible
     turns this into a clipping box and hides the menu. */
}
/* instead of scrolling, tighten the pill on narrow desktop widths */
@media (min-width: 641px) and (max-width: 900px) {
  nav { top: 18px; padding: 5px; }
  nav .nav-links { gap: 2px; padding: 0 4px; }
  nav .nav-link { font-size: 12px; padding: 8px 10px; }
  nav .wordmark { padding: 8px 11px; }
  nav .nav-cta { font-size: 12px; padding: 8px 13px; }
}
nav .nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
nav .nav-cta {
  flex-shrink: 0; margin-left: 4px; padding: 9px 18px; background: #fff; color: var(--blue) !important;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
nav .nav-cta:hover { background: var(--bg); }

/* ---------- nav dropdown ---------- */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px var(--rule);
  padding: 8px; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 165px; pointer-events: none; z-index: 100;
}
.nav-drop-menu::after {
  content: ''; position: absolute; top: -16px; left: -10px; right: -10px; height: 16px; background: transparent;
}
.nav-drop-menu::before {
  content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: #fff; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  z-index: 1;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.nav-drop-trigger svg { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-drop:hover .nav-drop-trigger svg,
.nav-drop:focus-within .nav-drop-trigger svg,
.nav-drop.open .nav-drop-trigger svg { transform: rotate(180deg); }
.nav-drop-menu a {
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; padding: 10px 14px; border-radius: 8px; transition: all 0.2s;
  white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: relative; z-index: 2;
}
.nav-drop-menu a:hover { background: var(--bg); color: var(--blue); }

/* Hidden outside mobile; the media query below switches it on. Must stay
   BEFORE that query in source order. */
.nav-mobile-drop { display: none; }
.nav-mobile-home { display: none; }

/* =====================================================================
   MOBILE NAV — a separate widget with its own fixed position. On mobile
   the desktop pill is switched off entirely rather than resized, so the
   two never share layout.
   ===================================================================== */
@media (max-width: 640px) {
  nav { display: none; }

  .nav-mobile-drop {
    display: flex;
    position: fixed; top: 20px; right: 20px; z-index: 90;
  }
  .nav-mobile-home {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 20px; left: 20px; z-index: 90;
    width: 44px; height: 44px;
    background: var(--blue); color: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 28px -8px rgba(0, 98, 65, 0.45);
    text-decoration: none;
    transition: background 0.2s;
  }
  .nav-mobile-home:hover { background: var(--blue-bright); }
  .nav-mobile-home svg { width: 18px; height: 18px; }
  .nav-toggle {
    display: flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: var(--blue); color: #fff;
    border: none; border-radius: 12px;
    cursor: pointer; padding: 0;
    box-shadow: 0 12px 28px -8px rgba(0, 98, 65, 0.45);
    transition: background 0.2s;
  }
  .nav-toggle:hover { background: var(--blue-bright); }
  .nav-toggle svg { width: 18px; height: 18px; }
  .nav-toggle .icon-close { display: none; }
  #nav-mobile-drop.open .nav-toggle .icon-burger { display: none; }
  #nav-mobile-drop.open .nav-toggle .icon-close { display: block; }

  .nav-drawer {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 200px;
    background: var(--bg);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.16), 0 0 0 1px var(--rule);
    display: flex; flex-direction: column;
    align-items: stretch; gap: 2px;
    padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.16,1,.3,1), visibility 0.25s;
    z-index: 95;
  }
  #nav-mobile-drop.open .nav-drawer { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-drawer a, .drawer-drop-trigger {
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 600;
    color: var(--blue); text-decoration: none;
    text-align: left;
    padding: 11px 8px; border-radius: 8px;
    background: none; border: none; width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .nav-drawer a:hover, .drawer-drop-trigger:hover { background: rgba(0, 98, 65, 0.08); }
  .nav-drawer .drawer-cta {
    background: var(--blue); color: #fff; justify-content: center; margin-top: 6px;
  }
  .nav-drawer .drawer-cta:hover { background: var(--blue-bright); }
  .drawer-drop-trigger svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform 0.25s; opacity: 0.6; }
  .drawer-drop.open .drawer-drop-trigger svg { transform: rotate(90deg); }

  .drawer-submenu {
    display: flex; flex-direction: column; gap: 0;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.3s cubic-bezier(.16,1,.3,1), opacity 0.25s ease;
  }
  .drawer-drop.open .drawer-submenu { max-height: 160px; opacity: 1; }
  .drawer-submenu a {
    font-size: 13px; font-weight: 500; color: rgba(0, 98, 65, 0.8);
    padding: 9px 8px 9px 22px;
    transform: translateX(14px);
    transition: transform 0.3s cubic-bezier(.16,1,.3,1), background 0.2s, color 0.2s;
  }
  .drawer-drop.open .drawer-submenu a { transform: translateX(0); }
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.4s; }
.reveal.d5 { transition-delay: 0.5s; }
.reveal.d6 { transition-delay: 0.6s; }

/* ---------- hero entrance ---------- */
.hero-enter {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1);
}
.hero-enter.is-visible { opacity: 1; transform: translateY(0); }
.hero-enter.he1 { transition-delay: 0.05s; }
.hero-enter.he2 { transition-delay: 0.2s; }
.hero-enter.he3 { transition-delay: 0.35s; }
.hero-enter.he4 { transition-delay: 0.5s; }
.hero-enter.he5 { transition-delay: 0.65s; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  padding: 15px 28px; border-radius: 10px; text-decoration: none; cursor: pointer;
  transition: transform 0.25s cubic-bezier(.16,1,.3,1), box-shadow 0.25s, background 0.25s;
  border: none;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 12px 24px -8px rgba(0,98,65,0.45); }
.btn-primary:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(0,98,65,0.55); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-light { background: #fff; color: var(--blue); }
.btn-light:hover { background: var(--bg); transform: translateY(-2px); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); text-decoration: none; }
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.2s; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- "Read the story" row on case cards ---------- */
/* Lives here, not in a page file: it is used identically by saas.css and
   dtc.css, and living in only one of them is what broke the DTC page. */
.soon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
}
.soon svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s; }
.case-card:hover .soon svg { transform: translateX(4px); }
.soon .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
  animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,98,65,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(0,98,65,0); }
}

/* ---------- photo frame ---------- */
.img-ph {
  aspect-ratio: 4/5;
  border-radius: 6px;
  background: linear-gradient(160deg, #EFE9DC 0%, #E1DACB 100%);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.img-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-frame {
  position: relative;
  width: 100%;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1), filter 0.6s;
}
.photo-frame::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 22px;
  width: 100%;
  height: 100%;
  background: var(--blue);
  border-radius: 8px;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.6s;
}
.photo-frame .img-ph {
  position: relative;
  z-index: 1;
  transition: box-shadow 0.6s cubic-bezier(.16,1,.3,1);
}

/* Rotation and the parallax offset live in separate properties so they
   compose instead of overwriting each other. This is what lets the hover
   lift below actually apply on parallax frames. */
.photo-frame.rot-1 { rotate: -3.2deg; }
.photo-frame.rot-2 { rotate: 2.4deg; }
.photo-frame.rot-3 { rotate: -1.8deg; }
.photo-frame.rot-4 { rotate: 1.2deg; }
.photo-frame.rot-5 { rotate: -2.6deg; }
.photo-frame.rot-6 { rotate: 2.8deg; }

/* --- Apple-style hover: subtle lift + refined shadow --- */
@media (hover: hover) and (pointer: fine) {
  .photo-frame:hover {
    transform: translateY(-6px);
    filter: brightness(1.02);
  }
  .photo-frame:hover::before {
    transform: translateY(6px);
    opacity: 0.7;
  }
  .photo-frame:hover .img-ph {
    box-shadow:
      0 20px 40px rgba(16,24,40,0.12),
      0 8px 16px rgba(16,24,40,0.06),
      0 0 0 1px rgba(0,98,65,0.08);
  }
}

.photo-frame .tag {
  position: absolute;
  z-index: 2;
  bottom: -16px;
  left: -16px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--bg);
  padding: 8px 12px;
  border: 1px solid var(--blue);
  transform: rotate(-3deg);
  box-shadow: 0 4px 12px rgba(20,30,50,0.08);
  white-space: nowrap;
  border-radius: 2px;
}

/* small inset photo */
.photo-frame .inset {
  position: absolute;
  z-index: 2;
  width: 46%;
  aspect-ratio: 1/1;
  bottom: -26px;
  right: -26px;
  border: 4px solid var(--bg);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(20,30,50,0.18);
  transform: rotate(3deg);
}
.photo-frame .inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame:has(.inset) .tag { bottom: auto; top: -16px; left: -16px; transform: rotate(-3deg); }

/* second inset (opposite corner from tag) */
.photo-frame .inset-2 {
  position: absolute;
  z-index: 2;
  width: 34%;
  aspect-ratio: 1/1;
  top: -20px;
  right: -20px;
  border: 4px solid var(--bg);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(20,30,50,0.16);
  transform: rotate(-4deg);
}
.photo-frame .inset-2 img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- parallax helper ---------- */
/* The offset is applied via `translate`, a separate property from
   `transform`, so the hover rule above composes with it rather than
   losing a specificity fight against a runtime-injected rule. */
.parallax-el {
  will-change: translate;
  translate: 0 var(--prlx, 0px);
  transition: translate 0.05s linear;
}

/* ---------- doodles ---------- */
/* Anchored inside each section's own empty top/bottom padding band, so
   they work at any window width without depending on gutter space. */
.doodle {
  position: absolute;
  color: var(--ink);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
.doodle svg {
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform;
}
.doodle.on-blue { color: var(--bg); opacity: 0.38; }

@keyframes doodle-dance-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(0, -20px) rotate(18deg) scale(1.15); }
  66% { transform: translate(0, 15px) rotate(-12deg) scale(0.9); }
}
@keyframes doodle-dance-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(0, -15px) rotate(-20deg) scale(0.85); }
  66% { transform: translate(0, 20px) rotate(15deg) scale(1.1); }
}
.doodle:nth-of-type(odd) svg { animation: doodle-dance-1 7s ease-in-out infinite; }
.doodle:nth-of-type(even) svg { animation: doodle-dance-2 8.5s ease-in-out infinite; }
.doodle:nth-of-type(3n) svg { animation-duration: 5s; animation-direction: reverse; }
.doodle:nth-of-type(4n) svg { animation-duration: 9s; animation-delay: -3s; }

@media (max-width: 720px) {
  /* pin every doodle into the guaranteed-empty strip outside .wrap's padding */
  .doodle { width: 16px !important; height: 16px !important; }
  .doodle[style*="left"] { left: 3px !important; }
  .doodle[style*="right"] { right: 3px !important; }
  /* far fewer doodles on mobile — keep just the first on each side per section */
  .doodle[style*="left"] ~ .doodle[style*="left"],
  .doodle[style*="right"] ~ .doodle[style*="right"] { display: none !important; }
}

/* ---------- shared photo-frame mobile sizing ---------- */
@media (max-width: 720px) {
  /* tighten the offset backing card so nothing pokes past the viewport edge */
  .photo-frame::before { top: 12px; left: 12px; }
  .photo-frame .inset { width: 36%; bottom: -10px; right: -10px; }
  .photo-frame .inset-2 { width: 28%; top: -10px; right: -10px; }
  /* keep the corner tag INSIDE the photo so it can never collide with the fixed nav */
  .photo-frame:has(.inset) .tag {
    top: 8px; bottom: auto; left: 8px;
    transform: rotate(-3deg);
    font-size: 10px; padding: 6px 10px;
  }
}

/* ---------- reduced motion ---------- */
/* Honours the OS-level "reduce motion" setting: everything still appears,
   nothing moves. The .reveal elements are forced visible so the page is
   never left blank. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .hero-enter {
    opacity: 1 !important;
    transform: none !important;
  }
  .parallax-el { translate: none !important; }
  #cursor { display: none !important; }
}