/* ============================================
   BASE RESET
   ============================================
   Minimal preflight to replace what the Tailwind CDN provided when it
   was generating CSS at runtime. Only includes the resets actually
   needed by this page — heading margin/weight inheritance, body
   margin, button/input chrome, box-sizing. */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  line-height: inherit;
  font-family: 'Averia Libre', Georgia, serif;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
p, hr, dl, dd, blockquote, figure, pre { margin: 0; }
ol, ul, menu { margin: 0; padding: 0; list-style: none; }
button {
  background-color: transparent;
  background-image: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* ============================================
   UTILITY CLASSES
   ============================================
   Hand-written replacements for the small set of Tailwind utilities
   the page uses. The CDN runtime is gone — adding new utility classes
   in markup requires adding a rule here. Names mirror Tailwind v3
   syntax (including arbitrary-value brackets) so the markup didn't
   need to change. */

/* layout & display */
.absolute  { position: absolute; }
.fixed     { position: fixed; }
.block     { display: block; }
.flex      { display: flex; }
.grid      { display: grid; }
.hidden    { display: none; }
.overflow-hidden     { overflow: hidden; }
.pointer-events-none { pointer-events: none; }

/* position helpers */
.inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.left-0    { left: 0; }
.right-0   { right: 0; }

/* z-index */
.z-10      { z-index: 10; }

/* sizing */
.w-4       { width:  1rem; }
.h-4       { height: 1rem; }
.w-full    { width:  100%; }
.h-full    { height: 100%; }
.max-w-\[560px\] { max-width: 560px; }

/* flex / grid helpers */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.flex-shrink-0  { flex-shrink: 0; }
.grid-cols-1    { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-3          { gap: 0.75rem; }
.gap-4          { gap: 1rem; }

/* margins / padding */
.mx-auto   { margin-left: auto; margin-right: auto; }
.mt-1      { margin-top:    0.25rem; }
.mb-1      { margin-bottom: 0.25rem; }
.mb-2      { margin-bottom: 0.5rem; }
.mb-4      { margin-bottom: 1rem; }
.mb-6      { margin-bottom: 1.5rem; }
.pt-2      { padding-top:    0.5rem; }
.px-6      { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-8      { padding-top: 2rem;    padding-bottom: 2rem; }
.py-24     { padding-top: 6rem;    padding-bottom: 6rem; }

/* stacked-child spacing (space-y-N) */
.space-y-3  > * + * { margin-top: 0.75rem; }
.space-y-4  > * + * { margin-top: 1rem; }
.space-y-14 > * + * { margin-top: 3.5rem; }

/* typography — size */
.text-xs        { font-size: 0.75rem;  line-height: 1rem; }
.text-sm        { font-size: 0.875rem; line-height: 1.25rem; }
.text-base      { font-size: 1rem;     line-height: 1.5rem; }
.text-xl        { font-size: 1.25rem;  line-height: 1.75rem; }
.text-\[10px\]  { font-size: 10px; }
.text-\[32px\]  { font-size: 32px; }

/* typography — weight / leading / tracking / alignment / rendering */
.font-bold             { font-weight: 700; }
.leading-6             { line-height: 1.5rem; }
.leading-\[36px\]      { line-height: 36px; }
.leading-none          { line-height: 1; }
.tracking-\[-0\.3px\]  { letter-spacing: -0.3px; }
.text-center           { text-align: center; }
.antialiased {
  -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

/* typography — colors */
.text-white          { color: #fff; }
.text-white\/70      { color: rgba(255, 255, 255, 0.7); }
.text-gray-400       { color: #9ca3af; }
.text-gray-700       { color: #374151; }
.text-black          { color: #000; }
.text-\[\#e0e0e0\]   { color: #e0e0e0; }
.text-brand-dark     { color: #1c0806; }

/* background colors */
.bg-\[\#230210\]     { background-color: #230210; }
.bg-\[\#FF8B8C\]     { background-color: #FF8B8C; }

/* effects */
.rounded-full     { border-radius: 9999px; }
.opacity-0        { opacity: 0; }
.object-cover     { object-fit: cover; }

/* font family — Averia Libre (loaded from Google Fonts) */
.font-averia { font-family: 'Averia Libre', Georgia, serif; }

/* responsive — sm: ≥640px */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* responsive — md: ≥768px */
@media (min-width: 768px) {
  .md\:hidden     { display: none; }
  .md\:py-40      { padding-top: 10rem; padding-bottom: 10rem; }
  .md\:text-2xl   { font-size: 1.5rem; line-height: 2rem; }
}

/* ============================================
   PARALLAX HERO
   ============================================ */
#parallax {
  /* Bottom anchor matches the about-layer (#230210) so the hand-off
     between hero and the next section is visually seamless as the
     parallax layers translate up off the bottom. */
  background: linear-gradient(to bottom, #f4e690 0%, #f4e690 45%, #230210 70%);
  /* Promote to a compositor layer so the sticky stick/unstick
     transition doesn't trigger main-thread repaints. */
  will-change: transform;
}

.parallax-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}


/* Dark gradient layer to blend water into ground (sits between bg2 and bg1).
   Bottom color matches the about-layer (#230210) so as the foreground
   parallax translates up off the bottom of the hero, nothing else shows
   through. */
.ground-blend {
  background: linear-gradient(to bottom, transparent 80%, #230210 95%);
}

/* Foreground canvas — replaces the static bg1 <img> so we can per-frame
   redraw just the character's upper body for a breathing effect. Sized
   identically to how the original <img> rendered. */
#foreground-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* ============================================
   HERO COLOR TINT
   ============================================
   A flat color blended over the entire hero stack (sky → buildings →
   water → ground → character), sitting beneath the title text so the
   text isn't tinted.

   Two knobs to play with:
     background        — the tint color (any CSS color)
     mix-blend-mode    — try: overlay, soft-light, hard-light, multiply,
                         screen, color, hue, saturation, luminosity,
                         difference, exclusion, color-dodge, color-burn

   Start with low alpha (0.15–0.30); 'multiply' and 'color' go hard fast.
   Set background to `transparent` (or comment out the rule) to disable.
*/
.hero-tint {
  background: rgba(225, 76, 170, 0.55);
  mix-blend-mode: color;
  pointer-events: none;
}

/* ============================================
   LINK PILL — inline pill/chip for body links
   ============================================
   Used for any clickable inline link inside the dark section: external
   site links, email, social DMs, and the "Apply as a client" CTA.
   Renders as an inline-flex chip with an icon, a tiny amount of
   horizontal padding, and a semi-transparent backdrop. On hover, the
   text colour fades to #FF8B8C.
*/
.link-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.10);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  vertical-align: baseline;
  cursor: pointer;
  /* Timed to land with the synth hover/click in js/ui-sounds.js — the
     hover sound is ~50 ms and the click is ~90 ms, so the visual
     transition needs to feel just as immediate. */
  transition:
    color 80ms ease-out,
    background-color 80ms ease-out,
    box-shadow 80ms ease-out,
    transform 60ms ease-out;
}

/* Embossed (raised) state on hover/focus — a 1-px inner highlight at
   the top and an inner darken at the bottom read as a soft bevel, and
   a tight outer drop shadow lifts the pill off the surface. */
.link-pill:hover,
.link-pill:focus-visible {
  color: #FF8B8C;
  background: rgba(255, 139, 140, 0.18);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 1px rgba(0, 0, 0, 0.22);
}

/* Pressed state — invert the bevel (inset shadow at the top reads as
   "pushed in") and nudge the pill down 1 px so it visibly seats. Short
   transition matches the click sound's attack. */
.link-pill:active {
  background: rgba(255, 139, 140, 0.24);
  box-shadow:
    inset 0 1px 1.5px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(1px);
  transition:
    background-color 40ms ease-out,
    box-shadow 40ms ease-out,
    transform 40ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .link-pill,
  .link-pill:active {
    transform: none;
    transition-duration: 0ms;
  }
}

/* Inline-SVG icons replace the Tabler webfont. Sized in ems so they
   scale with the surrounding text; stroke uses currentColor so the
   parent's `color` controls them. */
.ti {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Icon glyphs inside the pill render slightly smaller than the text so
   they sit visually flush with the cap height, and use the pink accent
   colour by default so they pop against the text. */
.link-pill > .ti {
  font-size: 0.95em;
  color: #FF8B8C;
}

/* The Apply button is a <button> so reset its native chrome inside the
   pill (border, font-inherit) so it visually matches the anchor variants. */
button.link-pill {
  border: 0;
  font: inherit;
  font-weight: 600;
}

/* ============================================
   AUDIO TOGGLE — fixed top-right mute button
   ============================================
   Sits above every parallax layer and the tuner panel. Uses the
   .link-pill base for visual consistency with the body links, with a
   slightly bigger icon and zero extra horizontal padding so the icon
   is the only thing inside the pill.
*/
.audio-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100000;
  padding: 6px 8px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-tap-highlight-color: transparent;
}

.audio-toggle > .ti {
  font-size: 1.2em;
}

/* The audio toggle keeps the .link-pill base for typography/spacing but
   skips the tactile bevel/press — it's a persistent control, not an
   inline link, and the emboss reads as visual noise in the corner. */
.audio-toggle:hover,
.audio-toggle:focus-visible,
.audio-toggle:active {
  box-shadow: none;
  transform: none;
}

/* CSS Bird Animation */
.birds-layer {
  pointer-events: none;
}

.birds-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bird-anim {
  position: absolute;
  top: 10%;
  left: -10%;
  will-change: transform;
  animation: bird-movement 18s linear infinite;
}

.bird {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3671 510'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cpath fill='%23000' d='M51 288.38c13.33-5.34 35.33-9.34 66-12 0 0 18.44-9.95 55-15 1.04-.15 7.5-8 36-13 16 0 21-3.88 30 5 3.53-13.53 19.13-16.58 29-15 6.9 1.1 11.3 5.93 12 8 4 12 21 5 30 12-23 6-23 7-32 11-16 14-31 31-47 31-16 4-32.83 5.33-50.5 4-1 4-3.5 6.66-7.5 8-6 2-1-9-4-12s-3 10-17 18c-1-14-5-10-5-18s4 13-17 18c-14 3.33-31.67 4-53 2 26-8.67 41.33-16.34 46-23-5 0-18-1-21-9-14-4.5-30.67-4.5-50 0z'/%3E%3Cpath fill='%23000' d='M639 273c0 2.07-10 3-16 5-9 1-8 8-14 7s-5 8-19 14c2 11 21 9 36 19 29 30.62 18 19 37 63 14 28 18 30 27 57-1 1-11-1-14-7-1 5-5 1-4 7-5-1-8-8-12-11-4-1 1 7-2 8-4 0-5-8-9-8-4 1 1 6-2 7-33-30-43-21-43-36-8 10-10-2-19 3-4-5-6-10-2-17-1-5-7 5-11 3-1.33-6 1-12.67 7-20-6.67 6.67-14 10-22 10 1-10-1-6.5 5-16-6 7.5-13 8-19 6-4.43-2.1 4-8 2-11.5-8 0-22.76-.3-24-3.5-3.26-8.4 8-19 4-25-3.12-4.67-12 9-15-3 0-12-4.67-17-14-15-8.67-1.33-19.33-1.33-32 0-19 2-27-5-58-5 10-5 9-13 27-13-21-3-10-10-45-13 30-8 32 0 54 7 68-7 22-15 94-22 14-2 36-4 58 2 5-2 6-5 15-6 8 0 12.67 3.67 14 11 10.67.72 16 1.72 16 3z'/%3E%3Cpath fill='%23000' d='M729 299.03c32-14 56-26 90-40 20-6 37-5 56-8 28 0 17-8 55-3 8-1 10.95-7.5 19-7 8.67 0 13.33 2.66 14 8l26 5-24 5c-2.67 5.33-8 8.33-16 9-12 12-11 18-29 21 22 13 23 17 64 38 13 11 13 15 17 31 4 15.98 14.06 25.74 21 35 26 46 23 59 45 80-11-1-23-8-28-13-4-1-3 5-3 8-6-2-8-15-16-13-3.46 0 4 5 0 13-13-5-14-7-16-13-3-4-7-11-3-12-2 8 0 12-6 12-5-10-7-3-11-12-8-14-17-12-17-29-4 0-7 4-10 9-3-4 0-9-1-12-2 .66-4.33 1.66-7 3-2-12.67-2-21.67 0-27-8 2-4 6-15 10-5-6-4-12-2-21-5 6-5-3-12 2-9-9-10-18-25-18-5-12-3-20-11-22-3.23.86-4 10-6 7s-2-10-5-12c-2-3-6 6-9 3 0-5-2-11-6-14-3-4-5 0-10 3-2-5-2-9-1-14-4-1-14 5-12-2 0-7-4-4-8-4-5 0 1-5-1-6-5-2-13 2-21 6-5-2 4-10 0-10-31-1-38 7-76 4z'/%3E%3Cpath fill='%23000' d='M1367 254.1l-18-3c-2-6-5.33-9.35-10-10-14-1-17 7-22 10-21-3-19-1-35 0-30-5-36 4-50 7-36 5-33 9-48 16-34 18-41 19-75 29 6.67.65 14 0 22-2-14.67 4-21 6.32-19 7 31-5 29.02 4.23 52 0 11-3 10-9 13-12 2 7 1 7 2 13 16-3 21-2 30-2 3 4-3.66 8.6 0 10 4-1.35 9.33-2.68 16-4-4 4.65-5.67 8.32-5 11 15 2 12 4 24 1-11 4-11 4-16 10 16 3 14 1 24 2-4 4-3 8-1 11 6-3 9.53-4.5 12-3-3 3.44-5 7-2 9 10-2 12.4-5.28 15-2-3 8 0 11 1 22 5 0 10-2 15-4 1 8-3 8-3 16 6 3 13-3 17-1-7 4-7 6-8 9 7 3 6 2 14 0-5.33 4-7 7.65-5 11 5.33-3.35 8.33-3.35 9 0-2 6 0 7 1 15 10-5 10 2 21 5 5.97 3.27 6.4 10.54 11 14 9 6.74 20 9 19 9s-9-11-5-10c3.33 4 7.67 8.32 13 13 0-8-.67-13.68-2-17 9 14 12 12 28 23 3-13-6-18-15-28 19 22 19 20 30 24-24-30-20-26-29-53-14-26-24-61-39-75-18-12-19-17-38-26-3.33-4.68-7.33-8-12-10 12-2 21.33-5.68 28-11 2-5 7-5 11-9 6-1.35 9.67-4.35 11-9l18-6z'/%3E%3Cpath fill='%23000' d='M1751 256c-11-1-12-4-24-6-3-6-4-5-10-7-14 0-21 7-29 12-24-3-31-1-44 2-46 12-43 12-70 23-46 27-39 30-58 40 23 6 31-3 47-7-6.67 2.67-8.67 6-6 10 6.67-2.67 11-3.67 13-3-5 2-9.7 10.57-5 10 27-2 30.7-14.27 46-15-4 5-6 8-4 13 12-3 11-2 18-4-2 6-3 6 0 15 8.5 2 13-5 13-5 4 4 0 11 0 20 11 0 11 2 15 0-2 8 2 8 5 14 4-8 7-5 14-12-2 13 5 12 6 21 10-9 11-11 13-21-4 15 2 17 5 28 4-7 7-7 8-16 1 5 3.98 7.87 5 6 3-10 3.32-8.12 4-6-3 13 2 16 5 27 7-12 5-18 5-19 2 15 15 8 28 33 4-14-16-38-23-73-4-23-3-28-14-43-3-7-10-8-13-7 8-4 7-8 12-15 15-2 11-5 15-10-1 0 5-4 23-5z'/%3E%3Cpath fill='%23000' d='M2119.66 270.36c0-3-11-6-20-6-1.34-2.67-3.67-5-7-7-5.34-2.67-12.34-2.67-21 0-8 1-16-13-8-26 7-3 10-9 11-14-8-4-11-5-22-4-65 4-85 28-110 50-8 7 10 5 18 5-42 0-78 41-72 37s16 6 35-11c2-1-7 5-15 15 21-3 21-6 39-4-2 7 3.6 7.22 9 8 4.33.62 9.2-.44 15 0 12.53 1.4 13-1 18-1 6 0 5.35.6 9 0 9-2 7-3 10-7-3 8 1 11 6 21 7-6 6-14 6-19 0 13-1 9 2 17 6-5 6-4 8-12-3 10-1 17 3 28 5 0 6.84-4.66 10-3 0 5 0 3 6 13 5-5 2 3 7-8-1 10 4 4 10 18 5-10 3-14-1-23 6 13 8 12 13 19 2-19-1-23-7-36 3-19-6-20-5-33.5 8-10.5 15 2 24-6.5 7-1 4-4 9-7 8-5 19 1 20-3z'/%3E%3Cpath fill='%23000' d='M2485 278.84c-6-3-7-1-16-3 1-5-4.66-10-11-10-9.16 0-9.5 5.2-21 8-9 2.2-12.7 3.03-18-2-24-15-11-19-32-44-9-7-12-11-4-21 13-14 17-22 17-32-4-7-85-3-113 34 5.06 1.15 16.8-6.7 20.65-6 4.35 1-18.65 13-9.65 11 9-2 15-7 21-7 2.67-.05-2 2-3 7 3.78.9 9.8-1.85 16-3 3.52-.65 7.9.34 10 0-4 3-10 1-20 17 6 5.5 14-1.5 20-1.5-3 5.5-11 2.5-15 20.5 2 4 11-6 9-2 0 4-7 2-9 18 6 0 8-7 9-2-2 3-5 3-5 9 3 3 9-4 11-4-1 2-6 2-6 10-38 9-49 18-68 30 7 4.9 23-5 25-1-1.46 3.22-11 5.9-28 11 17 2 31 2 42.65-5.1 10.35 1.1 18.57-1.9 21.35-1.9 4 6 0 13 7 15 3-5 8-12 9-15 3-2-5 11 3 13 9 0 19 7 36 7 18 0 22-6 42-13 12-1 20-5 25-18 3-8 9-4 18-13 2-2 12-3 16-6z'/%3E%3Cpath fill='%23000' d='M2859 275.74c-.52-2.35-8-3-20-5-6.62-3.1-7.68-9-14-9-13 0-7.83 6.16-21 9-7.7 1.67-15 2-20 0s-6.32-3.7-10-6c-19.2-11.9-10.17.25-19.17-20-10.54-12-10.6-24.55-6.83-42 .97-4.5 2.27-8.15 4-11 6-9.83 12.67-30.6 11-45-1.4-12.16-11-14-27-17-21-4-33-5-58-2-9 8-21 5-33 21 9-1 7-3 14 3 8-4 15.48-1.3 16-1 7.16 4.13-3.54 3.73 1 6 6 0 2 4 0 9 5-.5 8-1 6 4 4.4 3.22 8.36-3.24 9 1 .86 5.76-11.7 9.4-9 17 18 3 20 5 22 7-4 1 3 2-26 11 3 10 14 6 15 16 0 7-9 4-12 17 12 2 9 6 23 6-5 0-18 4-26 12 9 2 6 6 14 7 7 3 6 3.36 4 7-6.5 11.86-5 15-20 23s-26.3 15.78-35 22c-4.63 3.32-7.48 8.23-11 12 12-2 12-3 15-2 2 4 1-3 0 11 6-5 16-12 22-16 5 0 13-3 17 0 5 0 0-7 0-8.96 0-1.96 3.48 5.8 5 3.96 5-6 4-9 3-14 4 3 1 10.9 6 12 19 6 21 5 42-1 1.2-.07 2.95-.92 4.3-.96 1.2 1.42.7 3 3.7 3.96 1.57-2.35 4.93-3.06 6.83-3.1.52 0-.24-.93 0-.86 10 3 17.17 3.96 32.17.96 13-8 24-5 35-17 14-6 14-10 17-16 4-3 9 0 20-4z'/%3E%3Cpath fill='%23000' d='M3243 286c-8-3-7-2-17-4-7.6-3.28-5-11-21-13-16.1 1.03-15 14-31 13-10.43-.65-13-7-21-11s-13-5-19-12c-13-42-1.27-9.56-3-59-.27-7.56-6-44-1-54 8-3 4.84-13.8 0-22-32-34-40.22-58.03-60-79-4-1 5 12-2 7-8.8-5.08-7-14-23-22 1 5 4 12 2 15-5-3-14-23-20-23 1 4 8 11 8 23 0 4-14-6-9-1s7 13 9 19c7.25 13.18 22 23 22 22-3-1-17-12-26-11 2 5 8 7 10 17-2 2 0 3-8 0 4 19 14 28 35 41 2.6 4.24-11.1-4.18-14-1-2.6 2.82 1.67 8.6 5 15 9.17 17.6 18.32 18.92 20 30-1 4-9.77-1.26-14 2-2.27 1.74 4.75 5.74 4 10-.75 4.24-9.22 1.68-8 6 2.48 2.98-2 12-1 17s4 6 4 11 7-2 8 6c5 4-1 4-8 12 5 5 10 4 8 14s-7 6-12 12c-5 7-3 11-10 17-9 8-15 4-31 16-13 7-14 2-30 13 18 2 36 12 68 5 5 2-5 5-2 7 14 1 16 3 23 0-4 3-10.62 8.7-7 9 8.53.74 23.38-.95 30 0 8.4 1.2 12.75 5 27 5 7.7 0 16.25-8.18 21-7 7.3 1.8 6 2.93 17 0 19.33-5.15 24-9 39-19 8-12 13-9 20-21 11-2 18-2 18-5z'/%3E%3Cpath fill='%23000' d='M3595.2 274c0-2.56-5-4-13-7-4.25-3.13 0-8-10-10-17 0-11.03 8.98-21 12-10-1-9-2-21 1-4.15 1.04-3.9-10.8-6-13-2.97-3.06-5-3-10-8-3-11 6-24 3-45-1.34-9.32-4.68-21.56-9-33-2.45-13.1-2-10-13-23-21-28-37-37-47-67-4.96-4.56-.68 12.44-5 11-7.68-2.56-15.4-19-19-19-2.9 0 7.5 17.9 4 23-3 4.4-17-7.67-17-5 0 3.33 8 16 15 19-4 4-9.5-4.6-11-1 7 9 1 11 6 24 5.77 12.05 11 8 16 18-3.62 4.17-24.5-6.8-26-3-1.02 2.53 9.7 2.7 17 10 6 6 1.8 13.48 6 16 5 3 2 6 8 13s10-2 8 8c-.94 4.66-4 4.34-4 9 0 5.34 8-1 6 5 0 2.57-4 4-6 8 0 .72 7.58-1.47 8 1 1.08 6.53-7.23 11.8-4 17 3.27 5.3 12 4 17 3-5 4-13 3.95-13 9 0 9.45 10 13 4 18 2 5-5 9-4 13s5.17 8.47 10 10c3.24 1.03 9 2 6 3-6 2-7-1-12 3-4.25 0-2-6-10-4-24 4-60 20-73 34-2 3 12-3 21-4-8 3-20 7-5 6 11 1 28 0 57-5 21.46-.66 17 7 39 2 11 3 28 6 43-5 14-2 15.58-9.85 33-23 6-2 11-11 14-17 7.8-3.53 12-1 18-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: auto 100%;
  width: 35px;
  height: 50px;
  will-change: background-position;
  animation: fly-cycle steps(10) infinite;
  opacity: 0.6;
}

.bird1 { animation-duration: 1s; animation-delay: -0.5s; transform: scale(0.4); }
.bird2 { animation-duration: 0.9s; animation-delay: -0.75s; transform: scale(0.25); }
.bird3 { animation-duration: 1.25s; animation-delay: -0.25s; transform: scale(0.5); }
.bird4 { animation-duration: 1.1s; animation-delay: -0.5s; transform: scale(0.35); }
.bird5 { animation-duration: 0.75s; animation-delay: 0.25s; transform: scale(0.3); }

.anim1 { animation-delay: 0s; top: 8%; }
.anim2 { animation-delay: -3s; top: 14%; animation-duration: 22s; }
.anim3 { animation-delay: -6s; top: 5%; animation-duration: 20s; }
.anim4 { animation-delay: -9s; top: 18%; animation-duration: 25s; }
.anim5 { animation-delay: -12s; top: 10%; animation-duration: 16s; }
.anim6 { animation-delay: -2s; top: 22%; animation-duration: 24s; animation-name: bird-movement-reverse; }
.anim7 { animation-delay: -7s; top: 3%; animation-duration: 19s; animation-name: bird-movement-reverse; }
.anim8 { animation-delay: -14s; top: 16%; animation-duration: 21s; }

@keyframes fly-cycle {
  100% { background-position: -350px 0; }
}

@keyframes bird-movement {
  0% { left: -10%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

@keyframes bird-movement-reverse {
  0% { left: 110%; opacity: 0; transform: scaleX(-1); }
  5% { opacity: 1; transform: scaleX(-1); }
  95% { opacity: 1; transform: scaleX(-1); }
  100% { left: -10%; opacity: 0; transform: scaleX(-1); }
}

.parallax-layer picture {
  display: block;
  width: 100%;
  height: 100%;
}

.parallax-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* About-layer is a parallax-layer (data-speed="0.8") that starts at
   top: 100vh so it sits just below the fold at scrollY=0, then rises
   into view as js/main.js translates it up. It needs its own scroll
   so all its content is reachable — but the outer page scroll is what
   the parallax JS reads, and the body has a synthesized height that
   accommodates the about-layer's content. Inside, normal block flow. */
.parallax-about {
  /* Overlap the hero foreground by a few px. Both this layer and the
     foreground translate at data-speed="0.8", so in math they share an
     edge — but they're independent compositor layers, and subpixel
     rounding on fast scrolls can leave a 1-px seam where the .hero-tint
     blends over the #parallax dark backdrop (pink × dark = red sliver).
     Overlapping kills the seam; the top 4 px sit over dark ground in
     the foreground canvas, so the join stays invisible. */
  top: calc(100vh - 4px);
  bottom: auto;
  height: auto;
  will-change: transform;
}

/* Water ripple canvas */
#water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Parallax + tint are now enabled on mobile too. The static mobile-hero-bg
   composite is no longer needed; the fallback PNG was a stand-in for when
   the parallax layers were hidden below 768px. */
.mobile-hero-bg {
  display: none !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out 0.3s forwards;
}

.animate-fade-in-delay {
  animation: fadeIn 1s ease-out 0.8s forwards;
}

/* Scroll reveal */
.scroll-reveal {
  opacity: 1;
}

/* ============================================
   LINKS
   ============================================ */
/* Dark section links (inherit light color) */
#about .link,
#services .link,
#contact .link,
#social .link {
  color: #eee;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #eee;
  transition: color 0.2s;
}

#about .link:hover,
#services .link:hover,
#contact .link:hover,
#social .link:hover {
  color: #fff;
}

/* Light section links */
.link {
  color: #333;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #333;
  transition: border-color 0.2s;
}

.link:hover {
  border-bottom-color: #ef4723;
}

/* ============================================
   PORTFOLIO NAV
   ============================================ */
.portfolio-link {
  color: #666;
  background: transparent;
  border: none;
  cursor: pointer;
}

.portfolio-link:hover {
  background: #f3f3f3;
  color: #1a1a2e;
}

.portfolio-link.active {
  background: #ef4723;
  color: white;
}

/* ============================================
   TYPED CURSOR
   ============================================ */
.typed-cursor {
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ============================================
   SMOOTH SCROLL
   ============================================ */
html {
  scroll-behavior: smooth;
}

/* ============================================
   TYPOGRAPHY REFINEMENTS
   ============================================ */
abbr[title] {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

blockquote p {
  font-family: 'Sentinel SSm A', 'Sentinel SSm B', Georgia, serif;
}

/* ============================================
   APPLY AS A CLIENT — MODAL
   ============================================ */
.apply-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: apply-modal-fade 0.2s ease-out;
}

.apply-modal[hidden] {
  display: none;
}

.apply-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 8, 6, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.apply-modal__card {
  position: relative;
  background: #f7f7f7;
  color: #1c0806;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  padding: 32px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  animation: apply-modal-rise 0.25s ease-out;
}

.apply-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #1c0806;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.apply-modal__close:hover {
  color: #ef4723;
  background: rgba(0, 0, 0, 0.05);
}

.apply-input {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 6px;
  font-family: inherit;
  font-size: 16px;
  color: #1c0806;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.apply-input:focus {
  outline: 0;
  border-color: #ef4723;
  box-shadow: 0 0 0 3px rgba(239, 71, 35, 0.15);
}

.apply-input--textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.apply-input:user-invalid {
  border-color: #c0392b;
}

.apply-submit {
  background: #1c0806;
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
}

.apply-submit:hover,
.apply-submit:focus-visible {
  /* White on #FF8B8C is ~2.25:1 (fails WCAG). Flip to brand-dark text
     on the coral background — ~7.6:1, AAA. */
  background: #FF8B8C;
  color: #1c0806;
}

.apply-cancel {
  background: transparent;
  color: #666;
  border: 0;
  padding: 10px 12px;
  font-size: 15px;
  cursor: pointer;
  transition: color 0.15s;
}

.apply-cancel:hover {
  color: #1c0806;
}

/* Status text sits at the right end of the button row. Empty by
   default — populated by js/main.js on submit success / failure. */
.apply-status {
  margin-left: auto;
  font-size: 14px;
  line-height: 1.4;
  text-align: right;
}

.apply-status:empty {
  display: none;
}

.apply-status[data-state="ok"] {
  color: #1c0806;
  font-weight: 700;
}

.apply-status[data-state="error"] {
  color: #c0392b;
}

body.apply-modal-open {
  overflow: hidden;
}

@keyframes apply-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes apply-modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}