/* Site extras: behaviours that the Webflow site applied via injected runtime
   scripts, reproduced here as static CSS so nothing changes visually but no
   Webflow JS is needed. Loaded globally by BaseLayout (all selectors are scoped
   by specific class names, so loading everywhere is harmless). */

/* Inter, self-hosted (was a render-blocking Google Fonts stylesheet + two
   cross-origin round-trips). Variable font, weights 300-700. Only the latin +
   latin-ext subsets are shipped (en-AU); latin is preloaded in BaseLayout's head.
   To update Inter: re-download the woff2 from the Google css2 endpoint into
   public/fonts/ and bump the filename (the /fonts/* cache is immutable). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/inter-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: 300 700;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Design tokens. Reference these for consistent styling across the site. */
:root {
  --aa-shadow-float: 0 18px 44px rgba(0, 0, 0, .12); /* floating-card shadow (nav dropdowns; reuse anywhere) */

  /* Notion-baseline card system (2026 homepage redesign). Values measured off
     notion.com: 12px radius, 1px 10%-black border, layered hover shadow at
     .2s cubic-bezier. Brand colours come from the Webflow vars that already
     exist (--base--purple #3a1b36, --base--green #51724e, --base--orange
     #f77919, --base--red #dd464c, --base--off-white #fcf6f1). */
  --aa-radius-card: 12px;
  --aa-card-border: 1px solid rgba(0, 0, 0, .07); /* faint, per Notion card zoom */
  --aa-card-border-hover: rgba(0, 0, 0, .14);
  --aa-shadow-card-hover: 0 .175px 1px rgba(0, 0, 0, .013), 0 .8px 2.9px rgba(0, 0, 0, .02),
    0 2px 7.8px rgba(0, 0, 0, .027), 0 4px 18px rgba(0, 0, 0, .04);
  --aa-ease-card: cubic-bezier(.645, .045, .355, 1);
  --aa-ease-reveal: cubic-bezier(.16, 1, .3, 1); /* smooth deceleration — the scroll-reveal "unfold" */
  --aa-font: "Inter", sans-serif; /* primary font, site-wide (see overrides below) */
  --aa-ink: #1d1d1d;
  /* Body-copy ink = Tally.so's warm near-black (rgb 55,53,47). Replaces the old
     cooler #595959 grey so every body paragraph site-wide (this token drives them
     all) matches Tally's body text colour. */
  --aa-ink-soft: #37352f;

  /* Section background system: grey/white alternation + the green band.
     The grey is #f5f5f5 (= --grey--grey-100 = the Webflow bg-default), NOT the
     cream --base--off-white. */
  --aa-bg-soft: var(--grey--grey-100);
  --aa-bg-band: var(--base--green);

  /* Gap between the top of the viewport and page content (the floating navbar
     bottom sits at 74px desktop / 78px mobile). Content starts just below it. */
  --aa-nav-clearance: 86px;

  /* Landing v2 experiment (branch experiment/landing-v2): card system per
     Ben's mock: 1px hairline border + a soft resting drop shadow on every
     white card/box, all-white canvas. Used by the v2 homepage components. */
  --aa2-border: 1px solid rgba(29, 29, 29, 0.1);
  --aa2-radius: 14px;
  --aa2-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.06);
}
@media (max-width: 991px) {
  :root {
    --aa-nav-clearance: 82px;
  }
}

/* --- 2026 redesign, site-wide overrides --- */
/* Inter replaces Roboto Serif as the heading face everywhere (the body font was
   already Inter). One variable flip: every h1-h6 and .h* class reads these. */
:root {
  --_typography---font-family--headers: var(--aa-font);
  --_typography---xl--font-family: var(--aa-font);
  /* Headings default to bold (Inter 700). Classes that set their own weight
     (e.g. .cta-booking-heading at 400) still win. */
  --_typography---h1--font-weight: 700;
  --_typography---h2--font-weight: 700;
  --_typography---h3--font-weight: 700;
  --_typography---h4--font-weight: 700;
  --_typography---h5--font-weight: 700;
  --_typography---h6--font-weight: 700;
}
/* A handful of classes hard-code Roboto Serif / Montserrat directly (not via the
   header var) in the immutable Webflow CSS. Force them onto Inter so the whole
   site is Inter-only and the font request can drop those two families. */
.h1-2,
.h2-2,
.h2-3,
.h2-4,
.text-xl-2,
.service-card-heading,
.step-badge,
.paragraph,
.regular-m.text-opacity {
  font-family: var(--aa-font);
}
/* Body-copy weight: Tally.so sets its body text in Inter medium (500). Make 500
   the inherited default so all body paragraphs read at Tally's weight. Headings,
   labels, nav and buttons set their own weight, so they're unaffected; only text
   that inherits (the body paragraphs) shifts from 400 to 500. */
body {
  font-weight: 500;
}
/* Pull all page content up close under the floating navbar (was 100px desktop
   in aiapplied.webflow.css, leaving a 26px dead band). */
.main-wrapper {
  margin-top: var(--aa-nav-clearance);
}
/* Inner-page heroes (services, about) carried a 160px top pad sized for the
   old layout; bring their headings up near the bar like the rest of the site.
   The triple selector outranks Webflow's .hero.hero-center.hero-tight-top. */
.hero.hero-center,
.hero.hero-center.hero-tight-top {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* (The old homepage hero CLS block was removed with the 2026 homepage redesign:
   the new HomeHero component sizes its own image. Its `.section_hero
   { padding-top: 96px }` side effect on inner pages is gone too - content now
   starts close under the navbar everywhere.) */

/* --- Homepage process cards (was processcardstighten-1.0.1.js) --- */
.service-card { gap: 8px !important; padding: 14px 18px !important; }
.service-card-icon { margin-bottom: 0 !important; }
.service-card-icon img { width: 64px !important; height: 64px !important; max-width: 64px !important; }
.service-card-heading { font-size: 24px !important; margin-bottom: 2px !important; line-height: 1.25 !important; }
.service-card-description { font-size: 14px !important; line-height: 22px !important; margin-bottom: 0 !important; }
.service-card .button-3 { margin-top: auto !important; }

/* (Navbar clearance for all widths now lives in --aa-nav-clearance above.) */

/* --- Mobile nav overlay (was mobilenavoverlay-1.1.0.js). On <=991px Header.astro hides
       its own links/CTA and shows the burger, which opens this .aa-menu overlay. --- */
/* Sits BELOW the floating bar (z-index 900 < the nav's 1000) so the real bar stays put
   on top when the menu opens; padding-top clears the bar. The bar's own logo + burger
   (which animates to an X) stay visible, so no duplicate logo/close is needed here. */
.aa-menu {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 900; overflow-y: auto;
  padding: 5.25rem 1.1rem calc(env(safe-area-inset-bottom, 0px) + 6.5rem);
  box-sizing: border-box; display: none;
}
.aa-menu.open { display: block; }
.aa-menu-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: .5rem; }

/* Top-level links (any future primary link). */
.aa-m-link {
  font-family: var(--aa-font); font-weight: 700; font-size: 1.2rem;
  color: #1a1a1a; text-decoration: none; padding: .6rem .35rem .25rem;
  display: block; line-height: 1.2;
}
/* About: a personal card with Ben's avatar + subtitle, so it reads as intentional
   at the top of the menu rather than a lone bold word. */
.aa-m-about {
  display: flex; align-items: center; gap: .85rem;
  padding: .65rem .8rem; border-radius: 14px; text-decoration: none;
  background: #faf9f7; border: 1px solid #efedea; margin-bottom: .15rem;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
.aa-m-about:active { background: #f2f0ed; }
.aa-m-about-avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}

/* Colour-coded service group (matches the desktop dropdowns). --navc set inline. */
.aa-m-group { display: flex; flex-direction: column; gap: .3rem; padding-top: .85rem; }
.aa-m-cat {
  font-family: var(--aa-font); font-weight: 700; font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--navc); margin: 0 0 .1rem .4rem;
}
.aa-m-cards { display: flex; flex-direction: column; gap: .15rem; }

/* Regular service row: icon + title in a tappable card. */
.aa-m-card {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem .75rem; border-radius: 12px; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
.aa-m-card:active { background: color-mix(in srgb, var(--navc) 11%, #fff); }
.aa-m-icon { width: 22px; height: 22px; object-fit: contain; flex: none; }
.aa-m-title { font-family: var(--aa-font); font-weight: 600; font-size: 1.02rem; color: #1a1a1a; line-height: 1.25; }

/* Featured row: tinted icon tile + subtitle, same treatment as the desktop panel. */
.aa-m-feat {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem .8rem; border-radius: 14px; text-decoration: none;
  margin-top: .25rem;
  background: color-mix(in srgb, var(--navc) 6%, #faf9f7);
  border: 1px solid color-mix(in srgb, var(--navc) 18%, #efedea);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
.aa-m-feat:active { background: color-mix(in srgb, var(--navc) 13%, #faf9f7); }
.aa-m-feat-icon {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--navc) 14%, #fff);
}
.aa-m-feat-icon img { width: 23px; height: 23px; }
.aa-m-feat-text { display: flex; flex-direction: column; gap: 2px; }
.aa-m-feat-title { font-family: var(--aa-font); font-weight: 700; font-size: 1.02rem; color: #1a1a1a; line-height: 1.2; }
.aa-m-feat-sub { font-family: var(--aa-font); font-size: .85rem; color: #6b6b6b; line-height: 1.3; }

/* Pinned bottom CTA. Solid brand-purple button, matching the desktop "Get in touch"
   nav button in label + destination, with a white fade so menu items scroll under. */
.aa-cta {
  position: fixed; left: 1.1rem; right: 1.1rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  z-index: 1001; max-width: 520px; margin: 0 auto; display: none;
}
.aa-cta.open { display: block; }
.aa-cta::before {
  content: ""; position: fixed; left: 0; right: 0;
  bottom: 0; height: calc(env(safe-area-inset-bottom, 0px) + 5.25rem);
  background: linear-gradient(to top, #fff 60%, rgba(255, 255, 255, 0));
  z-index: -1; pointer-events: none;
}
.aa-cta a {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 1rem 2rem; background: var(--base--purple); color: #fff; border-radius: 10px;
  font-family: var(--aa-font); font-weight: 600; font-size: 1.05rem; text-decoration: none;
  box-sizing: border-box; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(58, 27, 54, .22);
  transition: background-color .2s ease;
}
.aa-cta a:active { background: #2c1429; }
body.aa-menu-open { overflow: hidden; }
@media (min-width: 992px) {
  .aa-menu, .aa-cta { display: none !important; }
}

/* --- Landing-v2 look, globalised (now the site-wide source of truth) --- */
/* All-white canvas everywhere (Webflow defaulted body to #f5f5f5 grey). v2
   sections are white too, so the page reads as one clean white surface. */
html,
body {
  background-color: #fff;
}
/* Smooth in-page anchor scrolling (e.g. contact "Send a message" -> form). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* v2 section + layout utilities, promoted out of index.astro's scoped styles so
   any page can compose the landing look. Width is constrained by the existing
   Webflow .padding-global > .container-large wrappers placed inside. */
.v2-section {
  background: #fff;
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
.v2-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}
/* A wide card takes the full row. */
.v2-grid-2 > .is-wide {
  grid-column: 1 / -1;
}
.v2-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}
@media (max-width: 991px) {
  .v2-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .v2-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .v2-grid-4 { grid-template-columns: 1fr; }
}

/* Readable prose column for long-form / legal / article pages in the v2 voice. */
.v2-prose {
  font-family: var(--aa-font);
  color: var(--aa-ink-soft);
  max-width: 46rem;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
}
.v2-prose :is(h1, h2, h3, h4) {
  font-family: var(--aa-font);
  color: var(--aa-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.v2-prose h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 1rem; }
.v2-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.2rem 0 0.8rem; }
.v2-prose h3 { font-size: 1.25rem; margin: 1.6rem 0 0.6rem; }
.v2-prose p { margin: 0 0 1rem; }
.v2-prose a { color: var(--base--red); text-decoration: underline; }
.v2-prose ul,
.v2-prose ol { margin: 0 0 1.1rem 1.25rem; }
.v2-prose li { margin: 0 0 0.4rem; }
.v2-prose strong { color: var(--aa-ink); font-weight: 700; }

/* Solid plum button on the white canvas (hero CTAs on rebuilt v2 pages). */
.v2-btn {
  display: inline-block;
  background: var(--base--purple);
  color: #fff;
  font-family: var(--aa-font);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 2.2rem;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--aa-ease-card);
}
.v2-btn:hover,
.v2-btn:focus-visible {
  background: color-mix(in srgb, var(--base--purple) 85%, #000);
  color: #fff;
}

/* ===== Scroll reveal (site-wide "unfold on scroll") =======================
   Reusable: add `data-reveal` to any element to have it fade + slide into place
   as it scrolls into view. Variants set the direction:
     data-reveal           upward (default)
     data-reveal="left"    in from the left
     data-reveal="right"   in from the right
     data-reveal="scale"   gentle scale-up
     data-reveal="fade"    pure fade, no movement
   Put `data-reveal-group` on a parent and site.ts assigns its direct
   `data-reveal` children an incremental --reveal-i, so they stagger in sequence
   (grids, card rows). site.ts adds .is-in when each element enters the viewport.

   The hidden initial state is gated behind html.reveal-on, which the inline head
   script in BaseLayout sets synchronously BEFORE first paint (so there is no
   flash), and ONLY when motion is allowed — so no-JS and reduced-motion visitors
   always see fully-rendered content. New components get this for free: just add
   the attribute. */
html.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s var(--aa-ease-reveal),
    transform .7s var(--aa-ease-reveal);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
html.reveal-on [data-reveal="left"] { transform: translateX(-32px); }
html.reveal-on [data-reveal="right"] { transform: translateX(32px); }
html.reveal-on [data-reveal="scale"] { transform: scale(.94); }
html.reveal-on [data-reveal="fade"] { transform: none; }
html.reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-on [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Legal pages (privacy, terms) keep their original copy but adopt the v2 canvas:
   white background (not the old #f5f5f5 grey) and brand-red links (the Webflow
   default was a #1a56db blue, off-brand). */
.legal-section {
  background-color: #fff;
  padding-top: clamp(2.5rem, 6vw, 5rem);
}
.legal-a {
  color: var(--base--red);
}