/* ==========================================================================
   Applied InTouch — Base + design system components
   Hand-written CSS. No build step, no framework, no external requests.
   Mobile-first: every layout rule starts single-column and widens at
   min-width breakpoints (40em / 48em / 60em / 75em).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--ai-header-height) + var(--ai-space-4));
    -moz-tab-size: 4;
    tab-size: 4;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--ai-font-sans);
    font-size: var(--ai-text-base);
    line-height: var(--ai-leading-normal);
    color: var(--ai-color-ink);
    background-color: var(--ai-color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

body.is-nav-open {
    overflow: hidden;
}

img,
svg,
video,
canvas,
picture {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
}

a {
    color: var(--ai-color-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--ai-color-primary-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--ai-leading-tight);
    letter-spacing: var(--ai-tracking-tight);
    font-weight: var(--ai-weight-bold);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

hr {
    border: 0;
    border-top: 1px solid var(--ai-color-border);
}

/* --------------------------------------------------------------------------
   2. Accessibility primitives
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--ai-color-focus);
    outline-offset: 2px;
    border-radius: var(--ai-radius-xs);
}

/* Remove the default outline only where :focus-visible is supported, so
   keyboard users on older engines keep a visible ring. */
:focus:not(:focus-visible) {
    outline: none;
}

.ai-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ai-skip-link {
    position: absolute;
    top: var(--ai-space-2);
    left: var(--ai-space-2);
    z-index: var(--ai-z-skip-link);
    padding: var(--ai-space-3) var(--ai-space-5);
    background: var(--ai-color-primary);
    color: var(--ai-color-ink-inverse);
    font-weight: var(--ai-weight-semibold);
    border-radius: var(--ai-radius-md);
    box-shadow: var(--ai-shadow-lg);
    transform: translateY(calc(-100% - var(--ai-space-4)));
    transition: transform var(--ai-duration) var(--ai-ease);
}

.ai-skip-link:focus {
    transform: translateY(0);
    color: var(--ai-color-ink-inverse);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

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

.ai-container--narrow {
    max-width: var(--ai-container-narrow);
}

.ai-section {
    padding-block: var(--ai-section-padding);
    scroll-margin-top: var(--ai-header-height);
}

.ai-section--lg {
    padding-block: var(--ai-section-padding-lg);
}

/* --------------------------------------------------------------------------
   Section bands
   --------------------------------------------------------------------------
   Six grounds a section can sit on, driven by page_sections.background_style
   through ai_section_background(). Four are light and form a deliberate
   ladder from white to real colour; the other two are the gradient bookends
   and the dark anchor.

       default  #FFFFFF  ── white
       muted    #F1F5FA  ── 1.09 from white
       sunken   #E4ECF5  ── 1.09 from muted
       tint     #D3E3F4  ── 1.10 from sunken, 1.31 from white
       gradient          ── light ice gradient (hero + final CTA)
       dark              ── navy gradient (the one anchor on the page)
   -------------------------------------------------------------------------- */

.ai-section--muted {
    background-color: var(--ai-color-surface-muted);
}

.ai-section--sunken {
    background-color: var(--ai-color-surface-sunken);
}

/* The deepest light band. Two tokens fall under their floors on this ground,
   so they are re-pointed for the whole subtree rather than patched per
   component: ink-subtle measures 4.21:1 here (needs 4.5) and border-strong
   2.82:1 (needs 3.0 for an input boundary). The replacements measure 4.89:1
   and 3.42:1. --ai-color-border is also lifted so a white card keeps a crisp
   edge instead of dissolving into the band. */
.ai-section--tint {
    background-color: var(--ai-color-surface-tint);
    --ai-color-ink-subtle: #55606e;
    --ai-color-border: #bfd2e5;
    --ai-color-border-strong: #6f7883;
}

.ai-section--dark {
    background: var(--ai-gradient-dark);
    color: var(--ai-color-ink-inverse);
}

.ai-section--gradient {
    background: var(--ai-gradient-hero);
}

/* Responsive auto-fit grid. --ai-grid-min sets the card floor; the grid
   reflows from 1 column upward on its own, so the column count is never
   hardcoded (the services section has 7 items, not a fixed 3x3). */
.ai-grid {
    display: grid;
    gap: var(--ai-space-5);
    grid-template-columns: 1fr;
}

@media (min-width: 40em) {
    .ai-grid {
        grid-template-columns: repeat(auto-fit, minmax(var(--ai-grid-min, 17rem), 1fr));
        gap: var(--ai-space-6);
    }
}

.ai-grid--2 {
    --ai-grid-min: 20rem;
}

.ai-grid--3 {
    --ai-grid-min: 16rem;
}

.ai-stack > * + * {
    margin-top: var(--ai-stack-gap, var(--ai-space-4));
}

.ai-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ai-cluster-gap, var(--ai-space-3));
}

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */

/* accent-dark rather than primary: the eyebrow sits directly above an
   ink-coloured H2, and at navy it read as a smaller piece of the same
   heading. The brighter blue separates the two and is the one place colour
   appears at the top of every section. 6.36:1 on white, 4.86:1 on the tint
   band — AA on all four light grounds. */
.ai-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ai-space-2);
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-bold);
    letter-spacing: var(--ai-tracking-wide);
    text-transform: uppercase;
    color: var(--ai-color-accent-dark);
}

.ai-section--dark .ai-eyebrow {
    color: var(--ai-color-ink-inverse-muted);
}

.ai-h1 {
    font-size: var(--ai-text-5xl);
}

.ai-h2 {
    font-size: var(--ai-text-4xl);
}

.ai-h3 {
    font-size: var(--ai-text-xl);
    font-weight: var(--ai-weight-semibold);
    letter-spacing: var(--ai-tracking-normal);
}

.ai-lead {
    font-size: var(--ai-text-lg);
    line-height: var(--ai-leading-relaxed);
    color: var(--ai-color-ink-muted);
}

.ai-body {
    color: var(--ai-color-ink-muted);
}

.ai-body-sm {
    font-size: var(--ai-text-sm);
    color: var(--ai-color-ink-subtle);
}

.ai-section--dark .ai-lead,
.ai-section--dark .ai-body {
    color: var(--ai-color-ink-inverse-muted);
}

/* Section header block: eyebrow + H2 + intro, centred, measure-limited. */
.ai-section-header {
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: var(--ai-space-10);
    text-align: center;
}

.ai-section-header > * + * {
    margin-top: var(--ai-space-4);
}

@media (min-width: 48em) {
    .ai-section-header {
        margin-bottom: var(--ai-space-12);
    }
}

.ai-section-footnote {
    margin-top: var(--ai-space-8);
    font-size: var(--ai-text-xs);
    line-height: var(--ai-leading-normal);
    color: var(--ai-color-ink-subtle);
    text-align: center;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ai-space-2);
    min-height: 3rem; /* 48px — comfortable mobile tap target */
    padding: var(--ai-space-3) var(--ai-space-6);
    font-size: var(--ai-text-base);
    font-weight: var(--ai-weight-semibold);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--ai-radius-md);
    cursor: pointer;
    transition:
        background-color var(--ai-duration) var(--ai-ease),
        border-color var(--ai-duration) var(--ai-ease),
        color var(--ai-duration) var(--ai-ease),
        box-shadow var(--ai-duration) var(--ai-ease),
        transform var(--ai-duration-fast) var(--ai-ease);
}

.ai-btn:active {
    transform: translateY(1px);
}

.ai-btn[aria-disabled="true"],
.ai-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.ai-btn__icon {
    flex: none;
    width: 1.125em;
    height: 1.125em;
}

.ai-btn-primary {
    background-color: var(--ai-color-primary);
    border-color: var(--ai-color-primary);
    color: var(--ai-color-ink-inverse);
    box-shadow: var(--ai-shadow-sm);
}

.ai-btn-primary:hover,
.ai-btn-primary:focus-visible {
    background-color: var(--ai-color-primary-dark);
    border-color: var(--ai-color-primary-dark);
    color: var(--ai-color-ink-inverse);
    box-shadow: var(--ai-shadow-md);
}

.ai-btn-secondary-outline {
    background-color: transparent;
    border-color: var(--ai-color-border-strong);
    color: var(--ai-color-primary-dark);
}

.ai-btn-secondary-outline:hover,
.ai-btn-secondary-outline:focus-visible {
    background-color: var(--ai-color-primary-light);
    border-color: var(--ai-color-primary);
    color: var(--ai-color-primary-dark);
}

.ai-btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--ai-color-ink-muted);
    padding-inline: var(--ai-space-4);
}

.ai-btn-ghost:hover,
.ai-btn-ghost:focus-visible {
    background-color: var(--ai-color-surface-sunken);
    color: var(--ai-color-ink);
}

.ai-btn--sm {
    min-height: 2.5rem;
    padding: var(--ai-space-2) var(--ai-space-4);
    font-size: var(--ai-text-sm);
}

.ai-btn--block {
    width: 100%;
}

/* On inverse backgrounds the outline variant flips to light-on-dark. */
.ai-section--dark .ai-btn-secondary-outline,
.ai-on-dark .ai-btn-secondary-outline {
    border-color: var(--ai-color-border-inverse);
    color: var(--ai-color-ink-inverse);
}

.ai-section--dark .ai-btn-secondary-outline:hover,
.ai-on-dark .ai-btn-secondary-outline:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--ai-color-ink-inverse);
    color: var(--ai-color-ink-inverse);
}

/* CTA row: full-width stacked buttons on phones, side by side from 30em. */
.ai-cta-row {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-3);
}

@media (min-width: 30em) {
    .ai-cta-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--ai-space-4);
    }
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */

.ai-card {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-3);
    height: 100%;
    padding: var(--ai-space-6);
    background-color: var(--ai-color-surface);
    border: 1px solid var(--ai-color-border);
    border-radius: var(--ai-radius-lg);
    box-shadow: var(--ai-shadow-xs);
    transition:
        border-color var(--ai-duration) var(--ai-ease),
        box-shadow var(--ai-duration) var(--ai-ease),
        transform var(--ai-duration) var(--ai-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ai-card--interactive:hover {
        border-color: var(--ai-color-border-strong);
        box-shadow: var(--ai-shadow-lg);
        transform: translateY(-3px);
    }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
    .ai-card--interactive:hover {
        border-color: var(--ai-color-border-strong);
        box-shadow: var(--ai-shadow-lg);
    }
}

.ai-card__title {
    font-size: var(--ai-text-lg);
    font-weight: var(--ai-weight-semibold);
    letter-spacing: var(--ai-tracking-normal);
    line-height: var(--ai-leading-snug);
    color: var(--ai-color-ink);
}

.ai-card__text {
    font-size: var(--ai-text-base);
    color: var(--ai-color-ink-muted);
}

.ai-card__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--ai-radius-md);
    background-color: var(--ai-color-surface-sunken);
}

.ai-card--elevated {
    box-shadow: var(--ai-shadow-md);
}

.ai-card--featured {
    border-color: var(--ai-color-primary);
    box-shadow: var(--ai-shadow-lg);
}

/* --------------------------------------------------------------------------
   7. Icon tiles + badges
   -------------------------------------------------------------------------- */

.ai-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
}

.ai-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: var(--ai-radius-md);
    background-color: var(--ai-color-primary-light);
    color: var(--ai-color-primary-dark);
}

.ai-icon-tile .ai-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.ai-icon-tile--accent {
    background-color: var(--ai-color-accent-light);
    color: var(--ai-color-accent-dark);
}

.ai-icon-tile--warning {
    background-color: var(--ai-color-warning-light);
    color: var(--ai-color-warning);
}

.ai-icon-tile--solid {
    background: var(--ai-gradient-brand);
    color: var(--ai-color-ink-inverse);
}

.ai-icon-tile--lg {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--ai-radius-lg);
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ai-space-2);
    padding: var(--ai-space-2) var(--ai-space-3);
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-semibold);
    line-height: 1.2;
    border-radius: var(--ai-radius-pill);
    background-color: var(--ai-color-surface);
    border: 1px solid var(--ai-color-border);
    color: var(--ai-color-ink-muted);
}

.ai-badge .ai-icon {
    width: 1rem;
    height: 1rem;
    color: var(--ai-color-accent-dark);
}

.ai-badge--solid {
    background-color: var(--ai-color-primary);
    border-color: var(--ai-color-primary);
    color: var(--ai-color-ink-inverse);
}

/* --------------------------------------------------------------------------
   8. Bullet lists
   -------------------------------------------------------------------------- */

.ai-check-list {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--ai-space-2);
    font-size: var(--ai-text-sm);
    line-height: var(--ai-leading-normal);
    color: var(--ai-color-ink-muted);
}

.ai-check-list .ai-icon {
    width: 1.0625rem;
    height: 1.0625rem;
    margin-top: 0.175rem;
    color: var(--ai-color-accent-dark);
}

/* --------------------------------------------------------------------------
   9. Utilities
   -------------------------------------------------------------------------- */

.ai-text-center {
    text-align: center;
}

.ai-mt-0 { margin-top: 0; }
.ai-mt-2 { margin-top: var(--ai-space-2); }
.ai-mt-3 { margin-top: var(--ai-space-3); }
.ai-mt-4 { margin-top: var(--ai-space-4); }
.ai-mt-6 { margin-top: var(--ai-space-6); }
.ai-mt-8 { margin-top: var(--ai-space-8); }
.ai-mt-10 { margin-top: var(--ai-space-10); }

.ai-hide-below-md {
    display: none;
}

@media (min-width: 48em) {
    .ai-hide-below-md {
        display: initial;
    }
}

@media (min-width: 60em) {
    .ai-hide-from-lg {
        display: none !important;
    }
}

/* Fade/rise on scroll. Opt-in via data-ai-reveal; JS adds .is-revealed.
   Without JS, or with reduced motion, content is visible by default. */
@media (prefers-reduced-motion: no-preference) {
    .js [data-ai-reveal] {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity var(--ai-duration-slow) var(--ai-ease),
            transform var(--ai-duration-slow) var(--ai-ease);
    }

    .js [data-ai-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Brand logo

   Shared by the public header and footer, the admin top bar and the sign-in
   screen. It lives here rather than in sections.css because the admin and
   auth layouts load theme/app/forms/admin only — with these rules in
   sections.css the wordmark rendered unstyled there, which blew the admin bar
   past its 4rem height and broke the sidebar's sticky offset.
   -------------------------------------------------------------------------- */

.ai-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--ai-space-2);
    flex: none;
    text-decoration: none;
    color: var(--ai-color-ink);
    border-radius: var(--ai-radius-sm);
}

.ai-logo:hover {
    color: var(--ai-color-ink);
}

.ai-logo__mark {
    width: 2rem;
    height: 2rem;
    flex: none;
}

.ai-logo__image {
    height: 2.25rem;
    width: auto;
    max-width: 12rem;
    object-fit: contain;
}

.ai-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.ai-logo__name {
    font-size: 1.0625rem;
    font-weight: var(--ai-weight-bold);
    letter-spacing: var(--ai-tracking-tight);
    white-space: nowrap;
}

.ai-logo__name em {
    font-style: normal;
    color: var(--ai-color-primary);
}

.ai-logo__tagline {
    display: none;
    font-size: 0.625rem;
    font-weight: var(--ai-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ai-color-ink-subtle);
}

@media (min-width: 75em) {
    .ai-logo__tagline {
        display: block;
    }
}