/* lonotv/assets/css/style.css
   App-specific styles for lonotv.com. Shared tokens, navbar, buttons,
   and glass-card come from shared_assets/css/tokens.css.

   Flat, white, no-gradient theme — matching the real news.lonotv.com's
   clean content-platform look — scoped to this app only via the :root
   override below; the other three apps keep the dark glassmorphism
   defaults from tokens.css. Brand colors (magenta "LONO", cyan swoosh,
   red "TV") are sampled from the real logo at lonotv/assets/logo/logo.png.

   tokens.css hardcodes several colors as raw rgba() rather than CSS
   variables — alpha-blended colors, gradients, and box-shadows can't
   reference a hex custom property directly — so those need a direct
   override here rather than picking up the :root change automatically.
   Each one below is commented with why. */
:root {
    --bg-dark: #FFFFFF;
    --bg-card: #F9FAFB;
    --bg-card-hover: #F3F4F6;
    --accent-primary: #D80892;   /* magenta — "LONO" */
    --accent-secondary: #0FFEFB; /* cyan — the swoosh */
    --accent-glow: rgba(0, 0, 0, 0.12);
    --brand-red: #E00B0F;        /* red — "TV" */
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --border-color: rgba(0, 0, 0, 0.1);

    /* Fixed header height estimate, used to push page content down. */
    --navbar-height: 80px;
}

/* Removes the dark-theme ambient page glow (a radial-gradient) entirely. */
body {
    background-image: none;
}

/* ==========================================================================
   Header — logo + tagline, page links, a Network dropdown for the
   sister sites, and a CTA button. A thin accent line across the top
   edge (styled after scjzambia.org's header). Transparent by default
   so it floats over the hero image; app.js adds .is-solid once the
   hero has scrolled past (or immediately on pages with no hero to
   float over).
   ========================================================================== */

/* tokens.css hardcodes the navbar as near-black translucent glass,
   with a border-bottom that reads as a faint shadow line — dropped
   entirely for a completely flat, borderless header. */
.glass-nav {
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.3s ease;
}

.navbar.is-solid {
    background: rgba(255, 255, 255, 0.98);
}

.navbar {
    border-top: 3px solid var(--accent-primary);
    padding-top: calc(1rem - 3px);
}

.brand-tagline {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-primary);
}

/* Over the (variably dark) hero image, tokens.css's default dark
   nav-link/hamburger colors aren't reliably legible — flipped to
   white until .is-solid takes over with a plain white background.
   White alone still isn't enough once the hero background is a
   *video* rather than a static photo, though: its brightness swings
   from dark to near-white as it plays, and white-on-white is exactly
   as unreadable as the original dark-on-dark problem this was meant
   to fix. A soft dark halo (text-shadow, inherited by
   .nav-dropdown-caret automatically) keeps the text legible
   regardless of what the video happens to be showing at that instant,
   rather than only ever being tuned for one brightness. */
.navbar:not(.is-solid) .nav-link,
.navbar:not(.is-solid) .nav-dropdown-toggle {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.navbar:not(.is-solid) .nav-link:hover,
.navbar:not(.is-solid) .nav-dropdown-toggle:hover {
    color: #FFFFFF;
}

/* The current page needs to read as a fixed "you are here" marker,
   not just look identical to a hovered link (which is what
   tokens.css's shared .nav-link:hover, .nav-link.active rule does) —
   an accent-colored underline that survives both the transparent
   over-hero navbar and the solid one. */
.nav-link {
    position: relative;
}

.nav-link.active {
    color: var(--accent-primary);
    font-weight: 700;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent-primary);
}

.navbar:not(.is-solid) .nav-link.active {
    color: #FFFFFF;
}

.navbar:not(.is-solid) .nav-link.active::after {
    background: #FFFFFF;
}

.navbar:not(.is-solid) .nav-toggle span {
    background: #FFFFFF;
}

.navbar:not(.is-solid) .brand-tagline {
    color: #FFFFFF;
}

/* ---- Network dropdown ---- */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.nav-dropdown-caret {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.nav-dropdown.is-open .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 160px;
    padding: 0.5rem;
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 20;
}

.nav-dropdown.is-open .nav-dropdown-menu {
    display: flex;
}

.nav-dropdown-menu a {
    padding: 0.55rem 0.75rem;
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.nav-dropdown-menu a:hover {
    background: var(--bg-card);
}

.main-container {
    padding-top: calc(var(--navbar-height) + 16px);
}

/* tokens.css hardcodes a heavy dark card shadow meant to glow against
   black; on white it just reads as a dark halo, so it's replaced with
   a standard light-mode elevation shadow. */
.glass-card {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* tokens.css's primary button is a magenta→cyan gradient — flattened
   to a solid color per "no gradients". */
.btn-primary {
    background: var(--accent-primary);
}

/* tokens.css's secondary-button hover is a white tint, invisible on
   a white page. */
.btn-secondary:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* tokens.css clips a gradient to the text for this class; replaced
   with a flat accent color. */
.text-accent {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    color: var(--accent-primary);
}

.text-brand-red {
    color: var(--brand-red);
}

/* tokens.css's form fields use a white tint background, invisible
   against a white page. */
.form-field input,
.form-field textarea,
.form-field select {
    background: #FFFFFF;
}

.nav-cta {
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
}

/* ==========================================================================
   Mobile nav toggle (hamburger)
   ========================================================================== */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Scroll-reveal utility — fades sections in as they enter the viewport.
   Falls back to always-visible if IntersectionObserver isn't wired
   (app.js adds .is-visible immediately when unsupported).
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* A more pronounced version of .reveal for the homepage's own
   sections, below the hero — components genuinely rise up from below
   into place as the page scrolls to meet them, rather than the subtle
   20px nudge .reveal alone gives everywhere else. Combined with
   .reveal (class="reveal reveal-rise") so the opacity fade and the
   .is-visible toggle (see wireScrollReveal in app.js) still come from
   there — this only overrides how far it travels. */
.reveal-rise {
    transform: translateY(64px);
}

.reveal-rise.is-visible {
    transform: translateY(0);
}

/* Staggered reveal — items in the same row/grid cross the scroll
   threshold at essentially the same instant, so without this every
   card in a grid pops in simultaneously. transition-delay staggers
   when each one's own fade-in actually starts, independent of when
   .is-visible gets added (see wireScrollReveal in app.js). */
.highlights-grid > .reveal:nth-child(2),
.services-grid > .reveal:nth-child(2),
.services-secondary-grid > .reveal:nth-child(2),
.about-values-grid > .reveal:nth-child(2),
.about-process-grid > .reveal:nth-child(2),
.contact-methods-grid > .reveal:nth-child(2) {
    transition-delay: 0.12s;
}

.highlights-grid > .reveal:nth-child(3),
.services-grid > .reveal:nth-child(3),
.about-values-grid > .reveal:nth-child(3),
.about-process-grid > .reveal:nth-child(3),
.contact-methods-grid > .reveal:nth-child(3) {
    transition-delay: 0.24s;
}

.services-grid > .reveal:nth-child(4),
.about-process-grid > .reveal:nth-child(4),
.contact-methods-grid > .reveal:nth-child(4) {
    transition-delay: 0.36s;
}

/* ==========================================================================
   Ambient float — content drifts slowly, like it's suspended in
   water. Small amplitude and a slow, easing keyframe (not linear) so
   it reads as buoyant rather than mechanical. Paused on hover so it
   doesn't fight each card's existing hover-lift transform, and
   staggered per card so a grid doesn't bob in unison like a single
   rigid object.
   ========================================================================== */
@keyframes float-water {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.highlight-card,
.service-card,
.contact-method-card {
    animation: float-water 6s ease-in-out infinite;
}

.highlight-card:hover,
.service-card:hover,
.contact-method-card:hover {
    animation-play-state: paused;
}

.highlights-grid > :nth-child(2),
.services-grid > :nth-child(2),
.contact-methods-grid > :nth-child(2) {
    animation-delay: 1.5s;
}

.highlights-grid > :nth-child(3),
.services-grid > :nth-child(3),
.contact-methods-grid > :nth-child(3) {
    animation-delay: 3s;
}

.services-grid > :nth-child(4),
.contact-methods-grid > :nth-child(4) {
    animation-delay: 4.5s;
}

@media (prefers-reduced-motion: reduce) {
    .highlight-card,
    .service-card,
    .contact-method-card,
    .hero-content {
        animation: none;
    }
}

/* ==========================================================================
   Hero (Home) — the real LONO TV promotional banner as the background.
   No full-section scrim: the headline/CTA block and the video-player's
   title bar each get their own white panel instead, so the photo stays
   visible everywhere except right behind the text.
   ========================================================================== */
/* Pulled up by the header's reserved height (which main-container pads
   every page with) and given that same amount back as extra top
   padding, so the hero's background reaches all the way to the top of
   the viewport — visible behind the transparent fixed header — while
   its actual content still starts below the header, not under it. */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
    /* dvh accounts for mobile browser chrome (address bar, etc.)
       that vh doesn't — falls back to the line above in browsers
       that don't support it. */
    min-height: 100dvh;
    margin-top: calc(-1 * (var(--navbar-height) + 16px));
    padding: calc(var(--navbar-height) + 16px + 0.5rem) 5% 2rem;
    gap: 2rem;
    overflow: hidden;
}

/* The hero backdrop rotates through several real photos plus the
   looping video, one at a time — .hero-slide layers are stacked on
   top of each other (all position: absolute, inset: 0) and app.js's
   wireHeroSlideshow() toggles .is-active on a timer, crossfading via
   opacity. The first slide starts .is-active in the markup, so there
   is always something painted immediately — mobile/reduced-motion/
   data-saver visitors who never get the rotation (see app.js) simply
   stay on that first slide forever.

   Deliberately no background-attachment: fixed on the slides — it
   stops working the moment a transform is applied to an element (the
   browser's viewport reference frame breaks), and app.js's scroll-zoom
   does exactly that via `will-change: transform` on the wrapper below.
   The scroll-tied parallax drift that same script adds is what stands
   in for the "pinned" feel instead. */
.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    will-change: transform;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.hero-slide.is-active {
    opacity: 1;
}

/* app.js assigns real video sources here (see .hero-video's data-src
   pattern) and calls play() outside of reduced-motion/narrow-
   viewport/data-saver conditions — a real video codec, unlike a GIF,
   so this stays sharp at full-bleed size without a multi-MB penalty.
   This slide is only ever handed .is-active once playback has actually
   started (see wireHeroVideo's 'playing' listener in app.js) — the
   rotation skips it entirely otherwise, so a still-buffering/blocked
   video never shows as a blank frame. */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Sharp footage, no blur — the gradient alone is what keeps the
   left-side text legible, same technique as scjzambia.org's hero: a
   3-stop left-to-right fade (opaque under the text, fully transparent
   by the right edge) over the clip. */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to right, rgba(10, 10, 12, 0.8) 0%, rgba(10, 10, 12, 0.4) 50%, rgba(10, 10, 12, 0) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content {
    flex: 1;
    max-width: 600px;
    padding: 2rem 2.5rem;
    animation: float-water 7s ease-in-out infinite;
}

.hero-content:hover {
    animation-play-state: paused;
}

/* No more white card behind this text — it sits directly on the hero
   photo now, so it needs its own light color instead of the site's
   normal dark text to stay legible. */
.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    color: #FFFFFF;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2.5rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.hero-section .btn-secondary {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.45);
}

.hero-section .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* A quiet credibility strip below the CTAs — real, verifiable numbers
   (years active, Facebook following) rather than another button, so
   the hero reads as a professional pitch to advertisers/clients and
   not just a viewer landing page. Kept small and low-contrast on
   purpose: it should support the headline, not compete with it or
   the two real CTAs above it. */
.hero-stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hero-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.hero-stat-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   Home — highlight cards + quick contact strip
   ========================================================================== */
.quick-contact-section {
    padding: 3rem 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Full-bleed tinted band rather than a centered column on white — it
   gives the homepage a second surface color to break up the
   otherwise all-white stack of sections. */
.highlights-section {
    position: relative;
    background: var(--bg-card);
    padding: 4rem 0 3rem;
}

.highlights-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.highlight-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.highlight-icon {
    display: inline-flex;
    color: var(--accent-primary);
}

.highlight-icon svg {
    width: 2.25rem;
    height: 2.25rem;
}

.highlight-card h3 {
    font-size: 1.25rem;
}

.highlight-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    flex: 1;
}

.highlight-link {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.quick-contact-card {
    padding: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.quick-contact-card h2 {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.quick-contact-card p {
    color: var(--text-secondary);
}

.quick-contact-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Home — company summary + show lineup, and a services preview
   ========================================================================== */
.home-about-section, .services-preview-section {
    padding: 1rem 5% 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* A soft angled color wash behind the card — .home-about-card is
   fully opaque (see .glass-card's flat-theme override above) so this
   only ever shows in the section's own padding around the card's
   edges, never competing with the text on top of it. */
.home-about-section {
    position: relative;
    z-index: 0;
}

.home-about-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(216, 8, 146, 0.08), rgba(15, 254, 251, 0.08));
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 65% 100%);
    z-index: -1;
}

.home-about-card {
    padding: 2.5rem;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
}

.home-about-text h2 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.home-about-text p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.home-about-shows h3 {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.show-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.show-tag {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.services-preview-cta {
    text-align: center;
    margin-top: 2rem;
}

/* ==========================================================================
   Shared page-hero (About / Services / Contact) — same blurred-photo
   treatment as the home hero, just much shorter. Same negative-margin
   trick too: pulled up by the header's reserved height so its
   background reaches the top of the viewport, behind the header,
   which floats transparent over it exactly like it does over
   .hero-section on the home page (see wireNavbarScrollEffect in app.js).
   ========================================================================== */
.page-hero {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    margin-top: calc(-1 * (var(--navbar-height) + 16px));
    padding-top: calc(var(--navbar-height) + 16px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Deliberately no background-attachment: fixed — it stops working
   once a transform is applied to this element (the browser's viewport
   reference frame breaks), and app.js's scroll-zoom does exactly that
   via `will-change: transform` and an inline transform at runtime. */
.page-hero-background {
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/hero3.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(18px);
    transform: scale(1.1);
    will-change: transform;
    z-index: 0;
}

.page-hero-scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 20, 0.6);
    z-index: 0;
}

.page-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 3.5rem 5%;
    text-align: center;
}

.page-title {
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -1px;
    color: #FFFFFF;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.15rem;
}

/* ==========================================================================
   About — an editorial intro, alternating photo/text feature rows for
   LONO TV / LONO STUDIOS, a full-bleed statement section, and a
   closing block with a real map. Deliberately not another grid of
   glass-cards — those already cover every other page.
   ========================================================================== */
.about-intro {
    padding: 2.5rem 5% 1rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-intro-text {
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 500;
}

/* service-detail.php reuses .about-intro/.about-intro-text for layout
   (centered narrow column, same page shell as About) but its content —
   an admin's rich-text service description — reads as body copy, not
   a short centered tagline, so it overrides back to normal paragraph
   styling and left alignment. */
.service-detail-body {
    text-align: left;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* The About page's own company-bio paragraph has the exact same
   mismatch as service-detail-body above (several dense sentences, not
   a short tagline — centering it produced ragged, hard-to-scan line
   breaks) and gets the same treatment. An #id selector, not another
   class, because the "2026 visual refinement" section further down
   re-sets .about-intro-text's font-size unconditionally — a same-
   specificity class override placed here would lose that fight purely
   on source order. */
#about-page-intro {
    text-align: left;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.service-detail-body p {
    margin-bottom: 1rem;
}

.about-values-section {
    padding: 2rem 5%;
    max-width: 1100px;
    margin: 0 auto;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.about-value-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

.about-value-icon {
    display: inline-flex;
    color: var(--accent-primary);
    margin-bottom: 0.25rem;
}

.about-value-icon svg {
    width: 2rem;
    height: 2rem;
}

.about-value-card h3 {
    font-size: 1.15rem;
}

.about-value-card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Shared container for a stack of .feature-row blocks — used on
   About (LONO TV / LONO STUDIOS) and Services (Photography /
   Videography) alike. */
.feature-rows {
    padding: 2rem 5%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Alternating photo/text row — shared with .services-features below,
   rather than duplicating the same layout per page. */
.feature-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.feature-row-reverse {
    flex-direction: row-reverse;
}

.feature-row-media {
    flex: 1;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius-lg);
    background-size: cover;
    background-position: center;
}

.feature-row-body {
    flex: 1;
}

.feature-row-body h2 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.feature-row-body p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Same full-bleed photo + dark scrim + centered statement technique
   as the home hero, scaled down for a mid-page section rather than a
   top-of-viewport banner. */
.about-belief-section {
    position: relative;
    overflow: hidden;
    padding: 5rem 5%;
    text-align: center;
}

.about-belief-background {
    position: absolute;
    inset: 0;
    background: url('/assets/images/hero3.jpg') center / cover no-repeat fixed;
    z-index: 0;

}

.about-belief-scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 12, 0.72);
    z-index: 0;
}

.about-belief-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    color: #FFFFFF;
}

.about-belief-inner h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.about-belief-inner p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

.about-process-section {
    padding: 3rem 5%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.about-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.about-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.about-process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #FFFFFF;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.about-process-step h3 {
    font-size: 1.05rem;
}

.about-process-step p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* A real map alongside the closing CTA, so the page ends on an actual
   place rather than a text block floating in white space. */
.about-location-section {
    padding: 3rem 5% 4rem;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.about-location-map {
    flex: 1;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.about-location-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.about-location-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.about-location-body p {
    color: var(--text-secondary);
    line-height: 1.8;
}

@media (max-width: 768px) {
    .feature-row,
    .feature-row-reverse {
        flex-direction: column;
    }

    .about-location-section {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ==========================================================================
   Services — .service-card/.services-grid below are also used by the
   homepage's services-preview-section, so they stay generic; the
   /services page itself now leads with .feature-rows (Photography /
   Videography) and only uses this small-card grid for the secondary
   services further down (Printing / Related Services).
   ========================================================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* A full-bleed editorial tile — the photo fills the entire card and
   the title/description sit directly on it inside a bottom gradient
   scrim, rather than the photo being a cropped strip above a separate
   flat-white text block. Reads as one image with information on it
   (like a magazine or streaming-service tile) instead of a dated
   blog-post card. */
.service-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(20, 16, 26, 0.22);
}

.service-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.1rem;
    transition: transform 0.6s ease;
}

.service-card:hover .service-image {
    /* subtle zoom on the background photo, without a JS-driven <img> */
    transform: scale(1.08);
}

.service-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 9, 14, 0.94) 0%, rgba(10, 9, 14, 0.55) 38%, rgba(10, 9, 14, 0.05) 68%, transparent 85%);
}

/* Printing / Related Services have no real photo on hand — a solid
   brand-color panel instead of a stock image standing in for work we
   haven't actually shot (same reasoning as .service-secondary-card
   on the /services page). Keeps the same bottom scrim as the photo
   cards so its overlaid title/description stay legible too. */
.service-card-solid .service-image {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(10, 9, 14, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #FFFFFF;
    position: relative;
    z-index: 1;
}

.service-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.service-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.service-body h3 {
    font-size: 1.2rem;
    color: #FFFFFF;
}

.service-body p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
}

/* The two services without a real photo on hand — a compact icon
   card instead of the feature-row treatment above. */
.services-secondary-section {
    padding: 1rem 5% 3rem;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.services-secondary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.service-secondary-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-secondary-card[href]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.service-secondary-icon {
    display: inline-flex;
    color: var(--accent-primary);
}

.service-secondary-icon svg {
    width: 2rem;
    height: 2rem;
}

.team-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.service-secondary-card h3 {
    font-size: 1.1rem;
}

.service-secondary-card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

/* Skeleton placeholders shown while the services/team grids above are
   still fetching — mirrors each real card's actual shape (poster image
   + bottom text for .service-card, a centered avatar/icon + two lines
   for .service-secondary-card) instead of a generic box, so nothing
   visibly changes shape once real content replaces it and the grid
   never jumps height. Plain CSS opacity pulse, no shimmer-sweep
   gradient animation — cheaper to run and just as effective at
   signalling "this is placeholder, not real content". Not clickable
   (plain <div>s, no href), so hover/lift transitions are disabled via
   pointer-events rather than relying on the [href] guard the real
   cards' hover rules already use. */
.skeleton-card {
    pointer-events: none;
}

.skeleton-image {
    position: absolute;
    inset: 0;
    background: var(--border-color);
}

.skeleton-avatar,
.skeleton-icon-circle {
    border-radius: 50%;
    background: var(--border-color);
}

.skeleton-avatar {
    width: 96px;
    height: 96px;
}

.skeleton-icon-circle {
    width: 40px;
    height: 40px;
}

.skeleton-line {
    height: 0.85rem;
    border-radius: 6px;
    background: var(--border-color);
}

.skeleton-line.is-title {
    height: 1.1rem;
    width: 55%;
}

.skeleton-line.is-text {
    width: 80%;
}

/* .service-card's own text sits on a photo, always in white — its
   skeleton lines need a lighter fill to stay visible against the same
   gray placeholder used for the (also skeleton) photo behind them. */
.service-card .skeleton-line {
    background: rgba(255, 255, 255, 0.35);
    align-self: center;
}

.skeleton-image,
.skeleton-avatar,
.skeleton-icon-circle,
.skeleton-line {
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-image,
    .skeleton-avatar,
    .skeleton-icon-circle,
    .skeleton-line {
        animation: none;
    }
}

/* Individual /services/photography, /services/videography,
   /services/printing pages — a breadcrumb back to /services, the
   feature-row intro (or a plain icon panel for Printing, which has
   no real photo yet), and a short "what's included" list. */
.service-back-link {
    display: inline-block;
    margin: 1.5rem 5% 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
}

.service-back-link:hover {
    color: var(--accent-primary);
}

.service-detail-section {
    padding: 1.5rem 5% 1rem;
    max-width: 700px;
    margin: 0 auto;
}

.service-detail-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.service-detail-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
}

.service-detail-list li svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

/* No real photo for Printing yet — an icon panel instead of a
   feature-row photo, matching .service-secondary-card's honesty. */
.service-detail-icon-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 3rem 5% 1rem;
    max-width: 700px;
    margin: 0 auto;
}

.service-detail-icon-panel .about-value-icon svg {
    width: 3rem;
    height: 3rem;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-methods-section {
    padding: 1.5rem 5% 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.contact-method-card {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-decoration: none;
    color: var(--text-primary);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-method-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.contact-method-icon {
    display: inline-flex;
    align-self: center;
    color: var(--accent-primary);
    margin-bottom: 0.25rem;
}

.contact-method-icon svg {
    width: 2rem;
    height: 2rem;
}

.contact-method-card h3 {
    font-size: 1.1rem;
}

.contact-method-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-method-card p {
    font-weight: 600;
    margin-top: 0.25rem;
}

.contact-form-section {
    padding: 1.5rem 5% 4rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Form + a map/studio-info side panel, so the section reads as a real
   place rather than a form floating alone in white space. */
.contact-form-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1.5rem;
}

.contact-form {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.contact-side-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-side-map {
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.contact-side-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-side-info {
    padding: 1.5rem;
    text-align: center;
}

.contact-side-info p {
    color: var(--text-secondary);
}

@media (max-width: 860px) {
    .contact-form-layout {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Footer — solid black, with an accent top border to bookend the
   header. tokens.css's plain white footer is overridden entirely
   rather than patched, since almost every property changes.
   ========================================================================== */
.site-footer {
    position: relative;
    background: #000000;
    border-top: 3px solid var(--accent-primary);
    padding: 0;
    max-width: none;
    margin: 0;
}

.footer-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 5% 2rem;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.65);
}

.footer-location {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
}

.footer-icon {
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.15em;
    margin-right: 0.2rem;
}

.footer-links h4 {
    color: rgba(255, 255, 255, 0.55);
}

.footer-links a {
    color: #FFFFFF;
    transition: opacity 0.2s ease;
}

.footer-links a:hover {
    opacity: 0.75;
}

.footer-links a span {
    color: rgba(255, 255, 255, 0.6);
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Floating WhatsApp button — mobile only (see the 768px breakpoint
   below). Desktop already has WhatsApp Us pinned in the fixed nav;
   showing this there too would just be the same CTA twice.
   ========================================================================== */
.sticky-whatsapp {
    display: none;
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #FFFFFF;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 900;
    animation: whatsapp-pulse 2.4s ease-in-out infinite;
}

.sticky-whatsapp svg {
    width: 28px;
    height: 28px;
}

@keyframes whatsapp-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(37, 211, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-whatsapp {
        animation: none;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
    .hero-section {
        flex-direction: column;
        text-align: center;
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: calc(var(--navbar-height) + 0.75rem);
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .page-title {
        font-size: 2.1rem;
    }

    .home-about-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --navbar-height: 64px;
    }

    .nav-toggle {
        display: flex;
    }

    /* The fixed nav's WhatsApp Us button is hidden behind the
       hamburger at this width — this is what keeps one-tap WhatsApp
       contact always on screen instead. */
    .sticky-whatsapp {
        display: flex;
    }

    /* The mobile drawer (#nav-links) is always an opaque white panel
       here, regardless of .navbar's is-solid state — but the
       .navbar:not(.is-solid) rules above (white text, meant for the
       transparent desktop nav floating over the hero photo) have
       higher specificity than a plain .nav-links override and would
       still win, turning the active link white-on-white and making it
       vanish. The #id selector guarantees these take priority instead,
       regardless of source order or .navbar's state. */
    #nav-links .nav-link,
    #nav-links .nav-dropdown-toggle {
        color: var(--text-secondary);
    }

    #nav-links .nav-link:hover,
    #nav-links .nav-dropdown-toggle:hover {
        color: var(--text-primary);
    }

    #nav-links .nav-link.active {
        color: var(--accent-primary);
    }

    #nav-links .nav-link.active::after {
        background: var(--accent-primary);
    }

    /* The lighter overlay (tuned so the video reads clearly on wider
       screens — see .hero-overlay above) left the stacked mobile
       buttons short on contrast against busy footage right behind
       them, and crowded right up against the floating WhatsApp
       button below. This layers an extra bottom-anchored darkening
       under just the button area — the left-right gradient above it
       is untouched — plus some breathing room so the two don't crowd
       each other. */
    .hero-overlay {
        background:
            linear-gradient(to top, rgba(13, 10, 18, 0.8), transparent 34%),
            linear-gradient(90deg, rgba(13, 10, 18, 0.72) 0%, rgba(13, 10, 18, 0.45) 35%, rgba(13, 10, 18, 0) 65%);
    }

    .hero-actions {
        margin-bottom: 4.5rem;
    }

    .hero-stats {
        justify-content: center;
    }

    .nav-links {
        position: fixed;
        top: var(--navbar-height);
        right: 0;
        width: min(78%, 320px);
        height: calc(100vh - var(--navbar-height));
        background: #FFFFFF;
        border-left: 1px solid var(--border-color);
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 1.5rem;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    .nav-links.is-open {
        transform: translateX(0);
    }

    /* The mobile panel is always solid white, even while the collapsed
       bar behind it is still transparent over the hero — so its links
       need to stay dark regardless of .is-solid. ".navbar .nav-links
       .nav-link" matches the earlier ".navbar:not(.is-solid) .nav-link"
       rule's specificity; being later in the file, it wins the tie. */
    .navbar .nav-links .nav-link {
        padding: 0.75rem 0.25rem;
        border-bottom: 1px solid var(--border-color);
        font-size: 1.05rem;
        color: var(--text-primary);
    }

    /* Same reasoning — the dropdown expands inline instead of floating
       as an absolute-positioned popover, since the panel already
       provides its own solid background. */
    .navbar .nav-links .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 0.75rem 0.25rem;
        border-bottom: 1px solid var(--border-color);
        font-size: 1.05rem;
        color: var(--text-primary);
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        min-width: 0;
        padding: 0 0 0 1rem;
    }

    .nav-cta {
        text-align: center;
        margin-top: 0.75rem;
    }

    .quick-contact-card {
        flex-direction: column;
        text-align: center;
    }

    .quick-contact-actions {
        justify-content: center;
        width: 100%;
    }

    .footer-grid {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.1rem;
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-large {
        text-align: center;
    }

    .page-title {
        font-size: 1.85rem;
    }

    .quick-contact-actions {
        flex-direction: column;
    }
}

/* ======================================================================
   2026 visual refinement
   A compact, editorial layer that gives every page the same calm rhythm:
   crisp type, subtle elevation, restrained colour and intentional motion.
   ====================================================================== */
:root {
    --font-main: 'Manrope', 'Inter', sans-serif;
    --bg-dark: #fbfbfd;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --text-primary: #17151d;
    --text-secondary: #6d6878;
    --border-color: rgba(31, 24, 44, 0.10);
    --accent-primary: #c41482;
    --accent-secondary: #16c9d0;
    --accent-glow: rgba(196, 20, 130, 0.22);
    --border-radius-lg: 20px;
    --border-radius-md: 14px;
    --border-radius-sm: 10px;
}

body {
    background: #fbfbfd;
    letter-spacing: -0.01em;
}

.main-container {
    padding-bottom: 2.5rem;
}

.glass-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(31, 24, 44, 0.08);
    box-shadow: 0 12px 35px rgba(31, 24, 44, 0.07);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.navbar {
    border-top-width: 4px;
    padding-bottom: 0.95rem;
}

.navbar.is-solid {
    background: rgba(255, 255, 255, 0.90);
    border-bottom: 1px solid rgba(31, 24, 44, 0.08);
    box-shadow: 0 5px 22px rgba(31, 24, 44, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.brand-logo {
    height: 36px;
}

.nav-links { gap: 1.5rem; }
.nav-link { font-size: 0.88rem; letter-spacing: 0; }
.nav-link.active::after { bottom: -9px; border-radius: 99px; }
.nav-cta { border-radius: 10px; padding: 0.6rem 1rem; }

.btn-primary,
.btn-secondary {
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.btn-primary {
    background: var(--accent-primary);
    box-shadow: 0 8px 18px rgba(196, 20, 130, 0.17);
}

.btn-primary:hover {
    background: #a90f70;
}

.btn-secondary {
    border-color: rgba(255, 255, 255, 0.48);
}

/* Reaches fully clear by 65% width and stays there, instead of still
   carrying a trace of dimming all the way to the right edge — the
   footage itself has its own on-screen text confined to the left, so
   the rest of the frame is clean, uncluttered footage worth showing
   at full clarity as proof of the actual production quality, not
   just atmospheric background. Left side keeps its darkening for the
   headline's contrast — deepened slightly (0.72→0.8) and pushed a
   touch further right (35%→42%) so the on-screen monitor/UI graphics
   in the footage sit on a more consistent dark base behind the text,
   rather than legibility depending on which frame happens to be
   playing. */
.hero-overlay {
    background: linear-gradient(90deg, rgba(13, 10, 18, 0.8) 0%, rgba(13, 10, 18, 0.5) 42%, rgba(13, 10, 18, 0) 65%);
}

.hero-content {
    max-width: 660px;
    padding: 0.5rem 0 2.5rem;
    animation: none;
}

.hero-title {
    max-width: 630px;
    font-size: clamp(2.9rem, 5.3vw, 4.65rem);
    line-height: 1.04;
    letter-spacing: -0.06em;
    margin-bottom: 1.15rem;
}

.hero-subtitle {
    max-width: 560px;
    font-size: 1.08rem;
    line-height: 1.75;
    margin-bottom: 2rem;
}

.section-title {
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    line-height: 1.15;
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
}

.highlights-section { padding: 5rem 0 4rem; background: #f3f1f6; }
.highlights-grid, .services-grid { gap: 1.25rem; }

.highlight-card,
.service-card,
.contact-method-card {
    animation: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.highlight-card:hover,
.service-card:hover,
.contact-method-card:hover,
.service-secondary-card[href]:hover {
    transform: translateY(-6px);
    border-color: rgba(196, 20, 130, 0.22);
    box-shadow: 0 20px 42px rgba(31, 24, 44, 0.13);
}

.highlight-card { padding: 2rem; }
.highlight-icon, .about-value-icon, .service-secondary-icon, .contact-method-icon { color: var(--accent-primary); }
.highlight-link { font-weight: 700; }

.home-about-section { padding-top: 2rem; }
.home-about-section::before { opacity: 0.55; }
.home-about-card { padding: clamp(1.75rem, 4vw, 3.25rem); gap: 3rem; }
.show-tag { background: #f7f5f8; border: 0; border-radius: 8px; padding: 0.45rem 0.75rem; }

.page-hero { min-height: 330px; }
.page-hero-background { filter: none; transform: scale(1.03); }
.page-hero-scrim { background: rgba(12, 9, 18, 0.70); }
.page-title { font-size: clamp(2.35rem, 5vw, 3.75rem); letter-spacing: -0.06em; }
.page-subtitle { max-width: 660px; margin: 0 auto; line-height: 1.7; }

.feature-rows { gap: 4.5rem; padding-top: 4.5rem; padding-bottom: 3rem; }
.feature-row { gap: clamp(2rem, 5vw, 5rem); }
.feature-row-media { border-radius: 20px; box-shadow: 0 18px 38px rgba(31, 24, 44, 0.13); }
.feature-row-body h2 { font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.18; letter-spacing: -0.045em; }

.about-intro { padding-top: 4rem; }
.about-intro-text { font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -0.03em; }
.about-value-card, .service-secondary-card { padding: 2.25rem 1.75rem; }
.about-belief-section { padding: 6.5rem 5%; }
.about-process-number { border-radius: 12px; width: 46px; height: 46px; }

.quick-contact-section { padding-top: 4rem; padding-bottom: 4rem; }
.quick-contact-card { padding: clamp(1.75rem, 4vw, 3rem); border-left: 4px solid var(--accent-primary); }
.quick-contact-card h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); letter-spacing: -0.04em; }

.contact-methods-section { padding-top: 3rem; }
.contact-method-card { padding: 2rem 1.4rem; }
.contact-form { padding: clamp(1.5rem, 3vw, 2.5rem); }
.form-field input, .form-field textarea, .form-field select { border-color: rgba(31, 24, 44, 0.14); padding: 0.78rem 0.9rem; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { box-shadow: 0 0 0 4px rgba(196, 20, 130, 0.10); }
.contact-side-map, .about-location-map { box-shadow: 0 12px 30px rgba(31, 24, 44, 0.10); }

.site-footer { background: #000000; border-top: 0; }
.footer-inner { padding-top: 4.5rem; }

@media (max-width: 768px) {
    .navbar { padding-top: calc(0.8rem - 4px); padding-bottom: 0.8rem; }
    .brand-logo { height: 30px; }
    .nav-links { box-shadow: -16px 0 40px rgba(31, 24, 44, 0.12); }
    .hero-content { padding-top: 0.5rem; }
    .page-hero { min-height: 280px; }
    .feature-rows { padding-top: 3rem; gap: 3rem; }
}