/* Site-specific overrides on top of the third-party Adon template.
   Keep this file thin — only widen template defaults that fight our spec. */

/* Footer is back to 4 columns (CTA + Company + Social + Legal) — Office links merged into Company.
   The base template's `1fr auto auto auto` grid handles this natively, no override needed. */

/* Phase 2 — inline-style replacements. */

.client-area-2__heading {
    margin-bottom: 32px;
}

.client-area-2__disclaimer {
    margin-top: 24px;
    font-size: 13px;
    opacity: 0.6;
}

.choose-us__sublabel {
    display: block;
    font-size: 12px;
    opacity: 0.6;
    margin-top: 4px;
}

/* Contact — minimal layer over template's .contact-page / .contact-formfield */
.contact-formfield .optional {
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.5;
    font-weight: 400;
}
/* Match textarea to the template's .contact-page .contact-formfield input —
   transparent, no border (the rounded container is already the visible box). */
.contact-page .contact-formfield textarea,
.contact-formfield textarea {
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 18px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    resize: vertical;
    min-height: 110px;
    max-height: 320px;
    display: block;
}
.contact-page .contact-formfield textarea:focus,
.contact-formfield textarea:focus {
    outline: none;
    border: none;
    background: transparent;
}
.contact-page .contact-formfield textarea::placeholder,
.contact-formfield textarea::placeholder {
    color: var(--secondary);
    opacity: 0.6;
}
/* Stretch the textarea field's container so the textarea has room to breathe.
   Template defines .contact-page .contact-formfield.message height: 170px —
   we want the textarea to take that space cleanly. */
.contact-page .contact-formfield.message {
    min-height: 200px;
    height: auto;
}
.form-privacy {
    font-size: 13px;
    opacity: 0.6;
    margin-top: 16px;
}
.form-privacy a {
    color: inherit;
    text-decoration: underline;
}
.direct-contact + .direct-contact {
    margin-top: 32px;
}

/* 404 page — minimal layer */
.error-page .page-title-area {
    min-height: 70vh;
    display: flex;
    align-items: center;
}
.error-page .page-title-inner {
    max-width: 720px;
    margin: 0 auto;
}
.error-page .section-subtitle {
    font-size: 18px;
    letter-spacing: 0.2em;
    opacity: 0.4;
    display: block;
    margin-bottom: 24px;
}
.error-page .section-title {
    font-size: 40px;
    line-height: 1.15;
    margin-bottom: 16px;
}
.error-page .page-title-lede {
    font-size: 18px;
    opacity: 0.7;
    margin-bottom: 40px;
}
.error-actions {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 575px) {
    .error-page .section-title { font-size: 28px; }
    .error-page .page-title-lede { font-size: 16px; }
}

/* Services overview — bullet styling + CTA inside template feature-box */
.services-lead__copy {
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.85;
    max-width: 760px;
}
.feature-box__bullets {
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
    font-size: 14px;
    opacity: 0.75;
}
.feature-box__bullets li {
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.feature-box__bullets li:first-child {
    border-top: none;
}
.feature-box__cta {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}
.feature-box__cta i {
    margin-left: 8px;
    font-size: 12px;
}
.feature-box__cta:hover {
    opacity: 0.7;
}
.feature-area .feature-box .title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}
.feature-area .feature-box .title a:hover {
    opacity: 0.7;
}

/* Industries page — minimal layer over template's feature-area */
.industries-lead__copy {
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.85;
    max-width: 760px;
}
.feature-area .feature-box .number {
    display: block;
    font-size: 13px;
    letter-spacing: 0.06em;
    opacity: 0.5;
    margin-bottom: 12px;
}
.industries-not-listed__copy {
    max-width: 760px;
    margin-top: 32px;
}
.industries-not-listed__copy .text {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.85;
}

/* ============================================================
   Migrated from style.css - vendor template dark-theme overrides
   Originally appended to assets/css/style.css; relocated to keep
   the vendor file pristine for future upgrades.
   ============================================================ */

/* Hero: dark background + white text (overrides .hero-2-area orange) */
.dark .hero-2-area {
    background-color: var(--black);
}
.dark .hero-2-area .section-title,
.dark .hero-2-area .hero-2__content .sub-title,
.dark .hero-2-area .hero-2__content .sub-title a,
.dark .hero-2-area .hero-2__content .follow-text,
.dark .hero-2-area .hero-2__content ul li a,
.dark .hero-2-area .hero-2__content .socail-media .icon,
.dark .hero-2-area .hero-2__wrapper .text span,
.dark .hero-2-area .hero-2__wrapper ul li a {
    color: var(--white);
}
.dark .hero-2-area .hero-2__content .sub-title a {
    border-bottom-color: var(--white);
}
.dark .hero-2-area .hero-2__wrapper ul li a::before,
.dark .hero-2-area .hero-2__content ul li a::before {
    background-color: var(--white);
}

/* Loader splash: dark background to match the dark site (was orange) */
.loader-wrap {
    background: var(--black);
}

/* Header nav on index.html uses .menu-dark which hard-codes dark text colour for use
   on light backgrounds. Override to white when the page is in dark mode. */
.dark .main-menu.menu-dark > ul > li > a {
    color: var(--white);
}

/* Hamburger menu bars (top-right side-toggle button): the 3 <span> bars
   are coloured #111 by the theme — invisible on a dark hero. Make them white. */
.dark .header-area-2 .side-toggle .bar-icon span,
.dark .header-area-3 .side-toggle .bar-icon span {
    background-color: var(--white);
}

/* "Services" pill on the left of the hero (.hero-2__wrapper .text span):
   theme uses 1px solid #111 border + #111 ::before dot — both invisible on dark.
   Recolor border and dot to white. */
.dark .hero-2-area .hero-2__wrapper .text span {
    border-color: var(--white);
}
.dark .hero-2-area .hero-2__wrapper .text span::before {
    background-color: var(--white);
}

/* Vertical separator line in the social-media block (between FOLLOW label and icons):
   theme uses rgba(17,17,17,0.3) which is invisible on dark. Use white at 30% opacity. */
.dark .hero-2-area .hero-2__content .socail-media::before {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Header bottom line under the navigation (theme draws a divider via header__inner
   bottom-border or container-large border). Make sure it's a subtle white-ish line
   on dark, not invisible #111. */
.dark .header-area-2 .container.large,
.dark .header-area-3 .container.large {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown menu items: theme uses #999 (medium grey) for the resting state.
   Brighten to near-white on dark theme for better readability — hover stays full white. */
.dark .main-menu ul.dp-menu li a {
    color: rgba(255, 255, 255, 0.85);
}

/* Hero structural divider lines — theme uses var(--black) for these
   ::before / ::after pseudo-elements on .hero-2-inner. They draw the vertical
   column divider (between video & content) and the horizontal line under the nav,
   and become invisible on a dark hero. Make them a subtle white tint instead. */
.dark .hero-2-area .hero-2-inner::before,
.dark .hero-2-area .hero-2-inner::after {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Hover states for hero links — theme switches color to var(--black) on :hover
   for the "Explore" link and the address sub-title, which makes them invisible on
   the dark hero. Keep them white on hover. */
.dark .hero-2-area .hero-2__wrapper ul li.explore a:hover,
.dark .hero-2-area .hero-2__content .sub-title a:hover {
    color: var(--white);
}

/* Sticky / scrolled-state header — when the user scrolls and JS adds .sticky or
   .transformed to .header-area-2, the theme switches its bg to #FCF7F3 (cream).
   That clashes with the dark site and makes white menu text illegible. Use dark. */
.dark .header-area-2 .sticky,
.dark .header-area-2 .transformed {
    background-color: var(--black);
}

/* Hero h1 font-size scaling — moved out of inline <style> in index.html.
   Tagline ("Engineered in India. Headquartered in London. Implemented for the World.")
   needs smaller sizes than the original Adon hero because it has 3 longer
   sentences instead of 3 short words. Breakpoints align with the theme's
   .container.large expansion at viewport 1750px. */
.hero-2__content h1.section-title {
    font-size: 46px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
@media (max-width: 1399px) { .hero-2__content h1.section-title { font-size: 40px; } }
@media (max-width: 1199px) { .hero-2__content h1.section-title { font-size: 28px; } }
@media (max-width: 991px)  { .hero-2__content h1.section-title { font-size: 22px; } }
@media (max-width: 767px)  { .hero-2__content h1.section-title { font-size: 36px; } }
@media (max-width: 480px)  { .hero-2__content h1.section-title { font-size: 28px; } }
@media (min-width: 1750px) { .hero-2__content h1.section-title { font-size: 70px; } }

/* Thinking section — fix big-letter overlap by easing line-height */
.thinking__content .title {
    line-height: 0.95;
    bottom: 0;
}
.thinking__content .title .big-letter {
    line-height: 0.85;
}

/* v1.2 — clear absolute header on pages whose first section is .page-title-area */
.page-title-area {
    padding-top: 140px;
    padding-bottom: 60px;
}
@media (max-width: 991px) {
    .page-title-area {
        padding-top: 100px;
        padding-bottom: 40px;
    }
}

/* v1.2 — marquee section-title scaled down from template default 90px */
.marquee-text-area .section-title {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -1.5px;
}
@media (max-width: 991px) {
    .marquee-text-area .section-title { font-size: 40px; letter-spacing: -1px; }
}
@media (max-width: 575px) {
    .marquee-text-area .section-title { font-size: 32px; letter-spacing: 0; }
}

/* v1.2 — who-we-are title fits 500px column without awkward wrapping */
.who-we-are .section-title {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -1.5px;
}
@media (max-width: 1199px) {
    .who-we-are .section-title { font-size: 44px; }
}
@media (max-width: 575px) {
    .who-we-are .section-title { font-size: 32px; letter-spacing: 0; }
}

/* v1.2 — readable prose typography for About paragraphs */
.about-us .info .text,
.who-we-are .who-we-are__content p,
.about-us .info p {
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0;
    color: inherit;
    font-family: inherit;
    font-weight: 400;
    margin-bottom: 20px;
    max-width: 720px;
}
.about-us .info .text:last-child,
.who-we-are .who-we-are__content p:last-child,
.about-us .info p:last-child {
    margin-bottom: 0;
}
.about-us .info {
    border-right: none;
}

/* v1.2 — footer CTA scaled down from template default 90px to standard 48px */
.footer-area .footer-widget-wrapper-box .content .title {
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -1px;
}
@media (max-width: 1199px) {
    .footer-area .footer-widget-wrapper-box .content .title {
        font-size: 40px;
        line-height: 1.1;
    }
}
@media (max-width: 991px) {
    .footer-area .footer-widget-wrapper-box .content .title {
        font-size: 36px;
        line-height: 1.15;
        letter-spacing: 0;
    }
}
@media (max-width: 575px) {
    .footer-area .footer-widget-wrapper-box .content .title {
        font-size: 28px;
    }
}

/* v1.2 — sitewide type system: cap interior section H1/H2 at readable sizes
   (excluding the deliberately-huge homepage S(8) and Thinking u-nhec-tic) */
.page-title-area .section-title {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -2px;
}
@media (max-width: 1199px) {
    .page-title-area .section-title { font-size: 44px; letter-spacing: -1px; }
}
@media (max-width: 575px) {
    .page-title-area .section-title { font-size: 32px; letter-spacing: 0; }
}

.page-title-area .section-subtitle {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-bottom: 16px;
    display: inline-block;
}

.about-us .section-title,
.feature-area .section-title-wrapper .section-title,
.approach-area-service-details-page .section-title,
.choose-us .section-title,
.industries-not-listed .section-title {
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -1.5px;
}
@media (max-width: 1199px) {
    .about-us .section-title,
    .feature-area .section-title-wrapper .section-title,
    .approach-area-service-details-page .section-title,
    .choose-us .section-title,
    .industries-not-listed .section-title { font-size: 44px; }
}
@media (max-width: 575px) {
    .about-us .section-title,
    .feature-area .section-title-wrapper .section-title,
    .approach-area-service-details-page .section-title,
    .choose-us .section-title,
    .industries-not-listed .section-title { font-size: 32px; letter-spacing: 0; }
}

/* v1.2 — page-hero lede paragraph (used on Approach, Industries, Contact, 404) */
.page-title-lede {
    font-size: 18px;
    line-height: 1.5;
    opacity: 0.85;
    max-width: 720px;
    margin-top: 16px;
}
@media (max-width: 575px) {
    .page-title-lede { font-size: 16px; }
}

/* v1.2 — About full-width prose layout (replaces template's narrow info column) */
.about-us__header {
    margin-bottom: 48px;
    max-width: 880px;
}
.about-us__header .section-subtitle {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-bottom: 16px;
}
.about-us__prose {
    max-width: 760px;
}
.about-us__prose p {
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0;
    color: inherit;
    margin-bottom: 24px;
}
.about-us__prose p:last-child {
    margin-bottom: 0;
}

/* v1.2 — who-we-are narrow full-width layout */
.who-we-are-narrow {
    max-width: 1080px;
}
.who-we-are__header {
    margin-bottom: 48px;
    max-width: 880px;
}
.who-we-are__header .section-subtitle {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-bottom: 16px;
}
.who-we-are__prose {
    max-width: 760px;
}
.who-we-are__prose p {
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0;
    color: inherit;
    margin-bottom: 24px;
}
.who-we-are__prose p:last-child {
    margin-bottom: 0;
}

/* v1.2.2 — footer body text scaled responsively (column titles, nav links, copyright).
   12px desktop/tablet → 13px mobile for touch-screen legibility.
   The CTA H2 stays at the v1.2 size (48px desktop). */
.footer-area .footer-widget-box .title {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.footer-area .footer-nav-list li {
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}
.footer-area .copyright-text .text {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
@media (max-width: 991px) {
    .footer-area .footer-widget-box .title { font-size: 12px; line-height: 1.5; }
    .footer-area .footer-nav-list li { font-size: 13px; line-height: 2; }
    .footer-area .copyright-text .text { font-size: 12px; line-height: 1.7; }
}
@media (max-width: 575px) {
    .footer-area .footer-widget-box .title { font-size: 12px; }
    .footer-area .footer-nav-list li { font-size: 13px; line-height: 2.1; }
    .footer-area .copyright-text .text { font-size: 12px; line-height: 1.7; text-align: left; }
}

/* ============================================================
   v1.3 — mobile / tablet remediation
   ============================================================ */

/* M-1: Reset .work-area-2 section-title transform earlier so the giant
   "S(8)ervices" title doesn't drift into the next sections at 992-1399px.
   Template only resets at ≤991px; we match the tile-stagger reset at ≤1399px. */
@media (max-width: 1399px) {
    .work-area-2 .section-header {
        transform: translateY(0);
        margin-top: 40px;
        margin-bottom: 30px;
    }
}

/* M-2: Scope our v1.1 line-height tweaks on the Thinking section to desktop
   only. Mobile already has its own line-height tuning from the template. */
.thinking__content .title { line-height: 160px; bottom: -10px; }
.thinking__content .title .big-letter { line-height: 160px; }
@media (min-width: 992px) {
    .thinking__content .title { line-height: 0.95; bottom: 0; }
    .thinking__content .title .big-letter { line-height: 0.85; }
}
@media (max-width: 1399px) and (min-width: 992px) {
    .thinking__content .title { line-height: 0.95; }
}
@media (max-width: 991px) {
    .thinking__content .title { line-height: 85px; }
    .thinking__content .title .big-letter { line-height: 1; }
}
@media (max-width: 767px) {
    .thinking__content .title { line-height: 75px; }
}
@media (max-width: 575px) {
    .thinking__content .title { line-height: 45px; margin-top: 20px; }
}

/* M-3: Hide the feature-box vertical separator line on stacked mobile layouts.
   Template's `.feature-area .feature-box:before` draws a 1px-wide separator
   at left: -50px — looks like a dangling line in single-column layouts. */
@media (max-width: 1199px) {
    .feature-area .feature-box:before { display: none; }
}

/* M-4: Tighten page-title-area padding on small phones (current 100px ≤991px
   eats too much viewport on a 375px-wide screen). */
@media (max-width: 575px) {
    .page-title-area { padding-top: 90px; padding-bottom: 32px; }
}

/* M-5: Marquee — guard against horizontal overflow on small mobile. */
.marquee-text-area { overflow-x: hidden; }
@media (max-width: 575px) {
    .marquee-text-area .section-title { font-size: 28px; letter-spacing: 0; }
}

/* v1.5.5 — Feature-area card alignment.
   The .feature-area .feature-box grid items are equal height by default
   (align-items: stretch), but content within cards starts at different
   vertical positions because titles wrap to different line counts.
   Force consistent vertical rhythm so cards visually align across the row. */
.feature-area .features-wrapper {
    align-items: stretch;
}
.feature-area .feature-box {
    display: flex;
    align-items: stretch;
}
.feature-area .feature-box .content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: 100%;
}
.feature-area .feature-box .content .number {
    flex: 0 0 auto;
    margin: 0;
}
.feature-area .feature-box .content .title {
    flex: 0 0 auto;
    margin: 0;
    /* Minimum height so 1-line and 2-line titles align across cards in a row.
       30px font × 1.15 line-height × 2 lines = ~70px. */
    min-height: 2.4em;
}

/* Breathing room between the section heading block and the cards row */
.feature-area .features-wrapper-box {
    margin-top: 64px;
}
@media (max-width: 991px) {
    .feature-area .features-wrapper-box { margin-top: 40px; }
}
@media (max-width: 575px) {
    .feature-area .features-wrapper-box { margin-top: 28px; }
}

/* v1.5.6 — consistent gap between section subtitle and section title.
   Matches the stacked subtitle-above-title pattern wherever it appears.
   Side-by-side variants (Approach process, service-page process) have
   subtitle and title in different parents, so this rule won't touch them. */
.section-title-wrapper .subtitle-wrapper + .title-wrapper {
    margin-top: 24px;
}
@media (max-width: 575px) {
    .section-title-wrapper .subtitle-wrapper + .title-wrapper {
        margin-top: 16px;
    }
}
.feature-area .feature-box .content .text {
    flex: 1 1 auto;
    margin: 0;
}
/* On the services-overview cards (with bullets + CTA) the order matters too —
   ensure CTA always sits at the bottom of each card. */
.feature-area .feature-box .content .feature-box__bullets {
    flex: 0 0 auto;
    margin: 0;
}
.feature-area .feature-box .content .feature-box__cta {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 8px;
}

@media (max-width: 575px) {
    .feature-area .feature-box .content .title {
        min-height: 0;  /* on mobile cards stack, no need to align across row */
    }
}

/* v1.5.4 — autoplay ticker (replaces template's GSAP scroll-tied marquee on About).
   Two duplicate text blocks slide left at a constant speed. When the first block
   has fully scrolled past, the second one is in the same position the first started in,
   so the loop is seamless. */
.unh-ticker {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.unh-ticker__track {
    display: flex;
    width: max-content;
    animation: unh-ticker-scroll 30s linear infinite;
}
.unh-ticker__line {
    flex-shrink: 0;
    margin: 0;
    padding-right: 60px;
    white-space: nowrap;
}
@keyframes unh-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Pause on hover so the user can read individual words */
.unh-ticker:hover .unh-ticker__track { animation-play-state: paused; }
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .unh-ticker__track { animation: none; }
}

/* M-6: Hide hero overlay services list on mobile. The 1-column collapse at
   ≤767px crowds 7 list items + the video. The full 8-card services grid is
   visible just below in the same scroll, so the overlay is redundant on phone. */
@media (max-width: 767px) {
    .hero-2__video .hero-2__wrapper { display: none; }
}

/* M-7: Hero H1 — tighten line-height and ease letter-spacing on small phones.
   Template default keeps -7.5px tracking which crashes letters together. */
@media (max-width: 575px) {
    .hero-2-area .section-title {
        font-size: 32px;
        line-height: 1.1;
        letter-spacing: -0.5px;
    }
}

/* M-11: Choose-us stats — cap odometer numbers on small phones.
   Template's giant numbers can crowd a single-column stack. */
@media (max-width: 575px) {
    .choose-us__item h2 { font-size: 64px; line-height: 1; }
    .choose-us__item p { font-size: 14px; }
    .choose-us__sublabel { font-size: 11px; }
}

/* M-12: Cookie banner — respect iOS safe-area inset so the banner clears the
   home-indicator gesture bar on iPhones. */
.unh-cookie-banner__inner {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   v1.5.1 — Contact form polish
   ============================================================ */

/* Privacy footnote is prose, not a label — drop mono, use body font for readability.
   The Manolo Mono selector list above includes .form-privacy; this rule wins by source order. */
.form-privacy,
.form-privacy a {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0;
    opacity: 0.65;
    margin-top: 24px;
    margin-bottom: 0;
    max-width: 720px;
}
.form-privacy a {
    text-decoration: underline;
    color: inherit;
    opacity: 1;
}

/* Submit button — sensible spacing from the privacy line and the textarea above */
.contact-page .submit-btn,
.contact-wrap .submit-btn {
    margin-top: 32px;
}
@media (max-width: 575px) {
    .contact-page .submit-btn,
    .contact-wrap .submit-btn {
        margin-top: 24px;
    }
}

/* Form-field optional/required annotations are inline metadata — small + subdued */
.contact-formfield .optional {
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.5;
    font-size: 12px;
    margin-left: 4px;
}
.contact-form .required {
    color: #e57373;
    margin-left: 2px;
}

/* Mobile: the col-md-4 + col-md-8 split collapses to single column at <768px.
   Add some breathing room between the offices column and the form. */
@media (max-width: 767px) {
    .contact-page .col-md-4 + .col-md-8 { margin-top: 48px; }
    .contact-page .contact-formfield { padding: 20px 22px 18px; }
    .contact-page .contact-formfield label { font-size: 14px; }
}

/* Direct-contact items — improve vertical rhythm + label readability */
.direct-contact + .direct-contact {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.direct-contact span {
    font-size: 12px;
    letter-spacing: 0.04em;
    opacity: 0.65;
    display: block;
    margin-bottom: 8px;
}
.direct-contact p,
.direct-contact a {
    font-size: 16px;
    line-height: 1.55;
}

/* ============================================================
   v1.5.2 — Feature-box title line-height + content rhythm
   ============================================================ */

/* Template's .feature-area .feature-box .title is 30px / 30px line-height —
   tight 1.0 ratio. With <br> between words ("Two-week<br>pricing review",
   "Plan<br>& proposal"), the two lines visually crash together.
   Loosen line-height + add bottom margin so each card breathes. */
.feature-area .feature-box .title {
    line-height: 1.15;
    margin-bottom: 16px;
}
.feature-area .feature-box .content > p:not(:last-child),
.feature-area .feature-box .content > .text:not(:last-child) {
    margin-bottom: 12px;
}

/* Approach process boxes use the same <br>-in-title pattern; same fix needed. */
.approach-area-service-details-page .approach-box .title,
.approach-box .title {
    line-height: 1.15;
    margin-bottom: 12px;
}
.approach-box .number {
    margin-bottom: 8px;
    display: block;
}
.approach-box .text {
    line-height: 1.55;
}

/* Smaller viewports — keep line-height generous so the cramping doesn't reappear */
@media (max-width: 991px) {
    .feature-area .feature-box .title { line-height: 1.2; font-size: 26px; }
    .approach-area-service-details-page .approach-box .title { line-height: 1.2; }
}
@media (max-width: 575px) {
    .feature-area .feature-box .title { font-size: 22px; }
}

/* ============================================================
   v1.5.3 — Thinking section "u/nhec/tic" overflow fix
   ============================================================ */

/* The template positions .thinking__content .title with `position: absolute;
   bottom: -10px` and renders the .big-letter "u" at 500-765px font size.
   At 992-1399px viewports the absolute-positioned giant U overflows up into
   the paragraph above. Solution: at viewports where the wrapper is single-
   column or the columns are tight, switch the title to flow naturally below
   the paragraph instead of overlaying it. */
@media (max-width: 1399px) {
    .thinking__content .title {
        position: relative;
        bottom: auto;
        margin-top: 32px;
    }
}
@media (max-width: 1199px) {
    .thinking__content .title {
        margin-top: 16px;
    }
    /* At 1-column wrapper, the title sits between content and image cleanly */
    .thinking__content .title .big-letter {
        font-size: 320px;
    }
}
@media (max-width: 991px) {
    .thinking__content .title .big-letter {
        font-size: 280px;
    }
}

/* ============================================================
   v1.5.3 — Tech wordmark carousel visibility
   ============================================================ */

/* Force visible dimensions on tech-strip swiper-slide images so the wordmarks
   render at a readable size in the auto-scrolling carousel. */
.client-area-2 .swiper-slide img.show-light,
.client-area-2 .swiper-slide img.show-dark {
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.client-area-2 .swiper-slide:hover img.show-light,
.client-area-2 .swiper-slide:hover img.show-dark {
    opacity: 1;
}
@media (max-width: 575px) {
    .client-area-2 .swiper-slide img.show-light,
    .client-area-2 .swiper-slide img.show-dark {
        height: 32px;
    }
}

/* ============================================================
   v1.4 — Manolo Mono webfont + brand mark + scramble effect targets
   ============================================================ */

@font-face {
    font-family: 'Manolo Mono';
    src: url('/assets/fonts/manolo-mono/ManoloMono.woff2') format('woff2'),
         url('/assets/fonts/manolo-mono/ManoloMono.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Brand mark — replaces the logo image with inline text */
.brand-mark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    font-family: 'Manolo Mono', 'JetBrains Mono', 'Cascadia Mono', ui-monospace, monospace;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: opacity 0.15s ease;
}
.brand-mark:hover { color: inherit; opacity: 0.9; }
.brand-mark__text {
    display: inline-block;
    /* The scramble script swaps textContent character-by-character */
}
@media (max-width: 575px) {
    .brand-mark { font-size: 20px; }
}

/* Apply Manolo Mono to all "label / nav / metadata" tier elements.
   Body prose, display headlines, and the giant typographic moments stay
   in the template's existing fonts. */
.main-menu li a,
.dp-menu li a,
.footer-area .footer-widget-box .title,
.footer-area .footer-nav-list li,
.footer-area .footer-nav-list li a,
.footer-area .copyright-text .text,
.work-box__title,
.offset-title,
.offset-button .text-one,
.offset-button .text-two,
.section-subtitle,
.subtitle-wrapper .section-subtitle,
.subtitle-wrapper .subtitle,
.subtitle-wrapper > span,
.hero-2__wrapper .text span,
.hero-2__wrapper ul li a,
.hero-2__content .sub-title,
.hero-2__content .sub-title a,
.follow-text,
.socail-media .follow-text,
.client-area-2__heading .section-subtitle,
.client-area-2__disclaimer,
.section-description p,
.section-description a,
.work-area-2 .section-header .section-title .number,
.choose-us__item p,
.choose-us__sublabel,
.thinking__content .sub-title,
.feature-area .feature-box .number,
.approach-area-service-details-page .approach-box .number,
.approach-area-service-details-page .approach-wrapper-content .subtitle,
.approach-area-service-details-page .steps,
.service-meta,
.service-meta .serial,
.service-meta .next-item,
.service-meta .next-item a,
.feature-list ul li,
.contact-formfield label,
.contact-formfield .optional,
.contact-form .required,
.form-privacy,
.direct-contact span,
.page-title-lede,
.page-title-area .section-subtitle,
.legal-breadcrumb,
.legal-breadcrumb a,
.legal-meta,
.legal-hub__doc-name,
.legal-hub__doc-blurb,
.legal-hub__doc-date,
.legal-hub__tier-title,
.legal-hub__tier-blurb,
.legal-hub__footer-banner,
.believe-list__num,
.process-loop__num,
.industry-card__num,
.engagement-card__num,
.service-card__num,
.feature-box__cta,
.feature-box__bullets li,
.error-page .section-subtitle,
.rr-btn .text-one,
.rr-btn .text-two,
.rr-btn-underline,
.btn-team,
[data-scramble] {
    font-family: 'Manolo Mono', 'JetBrains Mono', 'Cascadia Mono', ui-monospace, monospace;
    letter-spacing: 0;
}

/* Reduced motion users skip the scramble entirely (handled in JS),
   but we still want the font swap for visual consistency. */