/* =========================================================
   Option C – "Navy Editorial"
   Same navy/teal brand, kept bold but flat and grounded: an angled photo hero, squarer corners,
   teal underlines and solid colour blocks, with no space-style effects (particles, aurora glows,
   orbits, grid lines, neon glows or card tilt). Layered over app.css.
   ========================================================= */

:root {
    --radius: 10px;
    --radius-lg: 12px;
}

/* ---------- No space effects ---------- */

.aurora,
.particles,
.grid-lines,
.glow-orb,
.cta-band__rings,
[data-glow]::before { display: none !important; }

.svc-card,
.cred-card { transform: none !important; }

/* ---------- Squarer, more architectural shapes ---------- */

.btn { border-radius: 8px; }
.svc-card, .timeline__card, .reg-card, .cred-card, .duo__card, .contact-card, .coverage, .testi, .form-card,
.help-card, .other-services, .pager__link, .detail__why, .legal__contact, .approach__list li, .float-badge { border-radius: 12px; }
.photo-reveal, .expertise__media::before, .story__media::before { border-radius: 12px; }
.svc-card__icon, .contact-card__icon, .cred-card__icon, .reg-card__icon, .duo__icon, .help-card__icon,
.coverage__icon, .float-badge__icon, .testi__mark, .page-hero__icon, .approach__list li > span { border-radius: 8px; }
.coverage__map { border-radius: 8px; }
.field input, .field select, .field textarea { border-radius: 8px; }
.cta-band__panel { border-radius: 14px; }

/* A short teal rule under each section heading. */
.section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: .45em;
    border-radius: 2px;
    background: var(--teal);
}
.section-head--center .section-title::after { margin-inline: auto; }
.section-head--split .section-title { margin-bottom: 0; }

/* ---------- Header ---------- */

.site-header[data-scrolled] { background: var(--navy-950); backdrop-filter: none; }

/* ---------- Hero: navy panel and an angled photo ---------- */

.hero {
    min-height: max(86svh, 640px);
    background: var(--navy-900);
}
/* Teal stripe that runs along the photo's angled edge. */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: var(--teal);
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(-16px);
    animation: fade-in 1s var(--ease-out) .3s both;
}
.hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-out both; }
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 42, 68, .7), transparent 28%),
        linear-gradient(90deg, rgba(15, 42, 68, .45), rgba(15, 42, 68, .05) 70%);
}
/* The tick from the logo (img/logo-tick.svg), large and faint behind the buttons, wiped in from the left. */
.hero__tick {
    position: absolute;
    left: 12px;
    bottom: -12px;
    width: 330px;
    aspect-ratio: 114 / 105;
    background: var(--teal);
    opacity: .16;
    -webkit-mask: url("../img/logo-tick.svg") center / contain no-repeat;
    mask: url("../img/logo-tick.svg") center / contain no-repeat;
    pointer-events: none;
    animation: hero-tick 1.4s var(--ease-in-out) .8s both;
}
@keyframes hero-tick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

.hero__inner { grid-template-columns: 1fr; }
/* Sized so the longest word ("Professional.") always fits beside the photo. */
.hero__copy { max-width: min(640px, 47vw); }
.hero__title { font-size: clamp(2.8rem, 5.4vw, 5rem); }
.hero__word--accent {
    background: none;
    color: var(--teal-300);
    -webkit-text-fill-color: var(--teal-300);
}

/* ---------- Inner page banners: flat navy with a teal base line ---------- */

.page-hero {
    padding-bottom: clamp(72px, 8vw, 110px);
    border-bottom: 4px solid var(--teal);
    background: var(--navy-900);
}
.page-hero__curve { display: none; }
.page-hero .split__word--accent,
.not-found .split__word--accent {
    background: none;
    color: var(--teal-300);
    -webkit-text-fill-color: var(--teal-300);
}
.page-hero__media {
    left: auto;
    width: 46%;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.page-hero__media img { opacity: 1; }
.page-hero__media::after {
    background:
        linear-gradient(180deg, rgba(15, 42, 68, .65), transparent 35%),
        linear-gradient(90deg, rgba(15, 42, 68, .55), rgba(15, 42, 68, .1) 70%);
}
.page-hero--image .page-hero__inner > * { max-width: 52%; }

/* ---------- Cards: flat panels with a teal top edge on hover ---------- */

.svc-card {
    border: 0;
    border-top: 3px solid transparent;
    background: var(--navy-800);
}
.svc-card:hover {
    border-top-color: var(--teal);
    box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .8);
}
.svc-card__media::after { background: linear-gradient(180deg, transparent 55%, rgba(21, 56, 90, .9)); }

.cred-card { border-top: 3px solid transparent; }
.cred-card:hover { border-top-color: var(--teal); }

/* ---------- Process: solid markers, no glow ---------- */

.timeline__fill { background: var(--teal); box-shadow: none; }
.timeline__marker { border-radius: 12px; }
.timeline__step.is-active .timeline__marker { box-shadow: none; transform: none; }
.timeline__step.is-active .timeline__card { border-color: rgba(47, 164, 169, .55); }

/* ---------- Call to action: flat teal with the logo's tick ---------- */

.cta-band__panel {
    background: var(--teal);
    box-shadow: none;
}
.cta-band__panel::after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: -10px;
    z-index: -1;
    width: 280px;
    height: 258px;
    background: url("../img/logo-tick.svg") center / contain no-repeat;
    opacity: .14;
}

/* ---------- Phones and tablets ---------- */

@media (max-width: 980px) {
    .hero { min-height: auto; padding-bottom: 96px; }
    .hero::before { display: none; }
    .hero__media { width: 100%; clip-path: none; }
    .hero__media::after { background: linear-gradient(180deg, rgba(15, 42, 68, .82), rgba(15, 42, 68, .92)); }
    .hero__copy { max-width: none; }
    .hero__tick { width: 220px; left: auto; right: 4px; bottom: -8px; }

    .page-hero__media { width: 100%; clip-path: none; }
    .page-hero__media::after { background: linear-gradient(90deg, rgba(15, 42, 68, .92), rgba(15, 42, 68, .75)); }
    .page-hero--image .page-hero__inner > * { max-width: none; }
}

@media (orientation: landscape) and (max-height: 500px) {
    /* Restated: this file loads after app.css, so its desktop rules would otherwise win here. */
    .page-hero { padding-bottom: 48px; }
    .hero::before { display: block; }
    .hero__tick { width: 190px; left: 8px; right: auto; }
    .hero__media { width: 46%; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
    .hero__media::after { background: linear-gradient(90deg, rgba(15, 42, 68, .45), rgba(15, 42, 68, .05) 70%); }
    .hero__copy { max-width: 54%; }
}