/* ==========================================================================
   CANOPY - design refresh for the AIS public site.

   The logo is an umbrella arc over the letters AIS. That canopy becomes the
   page's structural motif, and the photography from the corporate deck
   replaces the flat colour blocks. Loaded after site.css so it wins.
   ========================================================================== */

:root {
    --ais-navy:      #0E2C48;
    --ais-navy-2:    #14395C;
    --ais-sand:      #F1F5F8;
    --ais-green-lt:  #45A845;
    --ais-shadow-lg: 0 24px 60px -28px rgba(14, 44, 72, .55);
}

/* ---------- Hero ---------------------------------------------------------- */
.hero {
    background: var(--ais-navy);
    padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    isolation: isolate;
}

/* the photograph, anchored right so faces sit clear of the copy */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/photos/hero-advisors.jpg") center right / cover no-repeat;
    opacity: .30;
    z-index: -2;
    pointer-events: none;
}

/* scrim: solid enough for AA text on the left, image breathing on the right */
.hero::before {
    background:
        linear-gradient(100deg, var(--ais-navy) 8%, rgba(14, 44, 72, .94) 44%, rgba(14, 44, 72, .58) 100%),
        radial-gradient(1100px 620px at 84% -20%, rgba(64, 128, 192, .38), transparent 68%);
    z-index: -1;
}

/* the umbrella canopy, traced from the logo's arc */
.canopy {
    position: absolute;
    top: -18%;
    left: 50%;
    width: min(1600px, 140%);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: -1;
    opacity: .55;
}
.canopy path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.canopy .c1 { stroke: rgba(69, 168, 69, .75); }
.canopy .c2 { stroke: rgba(64, 128, 192, .45); }
.canopy .c3 { stroke: rgba(255, 255, 255, .14); }

.hero h1 {
    font-size: clamp(2.5rem, 5.4vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.028em;
    font-weight: 800;
}
.hero .lead {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    max-width: 35rem;
}
.hero-badge {
    background: rgba(69, 168, 69, .18);
    border: 1px solid rgba(69, 168, 69, .5);
    color: #D4F1D4;
}

/* the floating panel */
.hero-card {
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 18px;
    box-shadow: var(--ais-shadow-lg);
    position: relative;
    overflow: hidden;
}
.hero-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ais-green) 0%, var(--ais-blue-mid) 100%);
}

/* ---------- Trust strip --------------------------------------------------- */
.trust-strip { background: #fff; border-bottom: 1px solid var(--ais-line); }
.trust-strip .t-value,
.trust-strip .stat-value,
.trust-strip .h2 {
    font-family: var(--ais-font-head);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--ais-blue);
    font-variant-numeric: tabular-nums;
}

/* ---------- Section rhythm ------------------------------------------------ */
.section-tint { background: var(--ais-sand); }
.section-dark {
    background: var(--ais-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.section-dark h2,
.section-dark h3,
.section-dark .h2,
.section-dark .h3 { color: #fff; }
.section-dark p,
.section-dark li { color: rgba(255, 255, 255, .84); }
.section-dark .eyebrow { color: var(--ais-green-lt); }
.section-dark .rule { background: var(--ais-green-lt); }

/* a hairline canopy arc used as a section marker */
.arc-mark {
    display: block;
    width: 76px;
    height: 24px;
    margin-bottom: .85rem;
    overflow: visible;
}
.arc-mark path {
    fill: none;
    stroke: var(--ais-green);
    stroke-width: 2.5;
    stroke-linecap: round;
}
.center .arc-mark,
.text-center .arc-mark { margin-inline: auto; }
.section-dark .arc-mark path { stroke: var(--ais-green-lt); }

/* ---------- Cards --------------------------------------------------------- */
.svc-card,
.feature-card,
.why-card,
.compliance-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ais-line);
    border-radius: 14px;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-card:hover,
.feature-card:hover,
.why-card:hover,
.compliance-card:hover {
    transform: translateY(-4px);
    border-color: rgba(64, 128, 192, .55);
    box-shadow: 0 18px 38px -22px rgba(14, 44, 72, .45);
}
.section-dark .svc-card,
.section-dark .why-card,
.section-dark .compliance-card {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
}
.section-dark .svc-card:hover,
.section-dark .why-card:hover,
.section-dark .compliance-card:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(69, 168, 69, .6);
}

.svc-ico,
.why-ico,
.tile-ico {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: var(--ais-blue);
    background: linear-gradient(150deg, rgba(64, 128, 192, .17), rgba(48, 144, 48, .15));
    margin-bottom: 1rem;
}
.section-dark .svc-ico,
.section-dark .why-ico,
.section-dark .tile-ico {
    color: #fff;
    background: linear-gradient(150deg, rgba(69, 168, 69, .35), rgba(64, 128, 192, .3));
}

.svc-card .go,
.card-go {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    margin-top: .85rem;
    font-size: .86rem;
    font-weight: 600;
    font-family: var(--ais-font-head);
    color: var(--ais-blue);
    text-decoration: none;
}
.svc-card .go i,
.card-go i { transition: transform .18s ease; }
.svc-card:hover .go i,
a:hover .card-go i { transform: translateX(4px); }

/* ---------- Photo bands --------------------------------------------------- */
.photo-figure {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--ais-shadow-lg);
    margin: 0;
}
.photo-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.photo-figure--tall { aspect-ratio: 4 / 5; }
.photo-figure--wide { aspect-ratio: 16 / 10; }
.photo-figure::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--ais-green), var(--ais-blue-mid));
}

/* a small stat plate that can sit over a photo */
.photo-stat {
    position: absolute;
    left: 1.1rem;
    bottom: 1.4rem;
    background: rgba(255, 255, 255, .96);
    border-radius: 12px;
    padding: .75rem 1rem;
    box-shadow: 0 14px 30px -18px rgba(14, 44, 72, .6);
}
.photo-stat b {
    display: block;
    font-family: var(--ais-font-head);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ais-blue);
    letter-spacing: -.02em;
}
.photo-stat span { font-size: .78rem; color: var(--ais-muted); }

/* ---------- Carrier wall -------------------------------------------------- */
.carrier-tile {
    background: #fff;
    border: 1px solid var(--ais-line);
    border-radius: 12px;
    min-height: 110px;
    padding: 1rem .85rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.carrier-tile:hover {
    border-color: rgba(64, 128, 192, .55);
    box-shadow: 0 14px 30px -20px rgba(14, 44, 72, .45);
    transform: translateY(-2px);
}
/* logos rest desaturated so the wall reads as one texture, then come alive */
.carrier-logo { filter: saturate(.12) opacity(.8); transition: filter .2s ease; }
.carrier-tile:hover .carrier-logo { filter: none; }

/* ---------- Closing CTA --------------------------------------------------- */
.cta-band {
    background: linear-gradient(115deg, var(--ais-navy) 0%, var(--ais-blue) 60%, var(--ais-blue-mid) 128%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cta-band h2 { color: #fff; letter-spacing: -.022em; }
.cta-band p { color: rgba(255, 255, 255, .85); }

/* ---------- Buttons ------------------------------------------------------- */
.btn-gold {
    background: var(--ais-green);
    border-color: var(--ais-green);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(48, 144, 48, .85);
}
.btn-gold:hover,
.btn-gold:focus-visible {
    background: #277a27;
    border-color: #277a27;
    color: #fff;
    transform: translateY(-1px);
}
.btn-lg { padding: .82rem 1.6rem; font-size: 1rem; }

/* ---------- Page hero on inner pages -------------------------------------- */
.page-hero {
    background: linear-gradient(105deg, var(--ais-navy) 10%, var(--ais-blue) 120%);
    position: relative;
    overflow: hidden;
}
.page-hero h1 { letter-spacing: -.025em; }

/* soft light wash so the band reads as lit space, not a flat gradient strip */
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 420px at 88% -30%, rgba(64, 128, 192, .38), transparent 70%),
        radial-gradient(720px 380px at 6% 130%, rgba(69, 168, 69, .14), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
/* canopy echo: concentric arcs rising behind the right column, traced from
   the umbrella curve used on the home hero */
.page-hero::after {
    content: "";
    position: absolute;
    top: -400px;
    right: -160px;
    width: 800px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 0 270px,
        rgba(69, 168, 69, .32) 270px 272px,
        transparent 272px 334px,
        rgba(64, 128, 192, .34) 334px 336px,
        transparent 336px 396px,
        rgba(255, 255, 255, .10) 396px 398px,
        transparent 398px);
    pointer-events: none;
    z-index: 0;
}
/* the aurora blobs earn a little more presence in the shallower inner band */
.page-hero .aurora::before,
.page-hero .aurora::after { opacity: .45; }
@media (max-width: 767.98px) {
    .page-hero::after { right: -320px; opacity: .7; }
}

@media (max-width: 991.98px) {
    .hero::after { opacity: .16; }
    .canopy { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
    .svc-card:hover,
    .carrier-tile:hover,
    .btn-gold:hover,
    .photo-figure:hover { transform: none; }
}

/* Step numbers and legacy gold icons take the brand green instead */
.feature-icon {
    background: linear-gradient(150deg, rgba(64, 128, 192, .17), rgba(48, 144, 48, .15));
    color: var(--ais-blue);
}
.feature-icon.gold {
    background: linear-gradient(150deg, rgba(48, 144, 48, .2), rgba(64, 128, 192, .14));
    color: var(--ais-green);
}

/* Inner-page bands: the flat blue ground becomes the same navy depth as home */
.bg-teal {
    background: linear-gradient(105deg, var(--ais-navy) 10%, var(--ais-blue) 130%) !important;
}