/* ============================================================
   GLOBAL — brand tokens, base reset, shared utilities
   Mobile-first: base styles are for phones, media queries scale UP.
   ============================================================ */

:root {
    --navy: #1e2a6e;
    --indigo: #2b3990;
    --blue: #3d53b8;
    --electric: #2e9bda;
    --sky: #7fc4ec;
    --ink: #20242e;
    --slate: #5a6172;
    --mist: #eef1f8;
    --paper: #ffffff;
    --line: #e4e8f2;

    /* One source of truth for horizontal page padding */
    --pad-x: 16px;
}

@media (min-width: 640px)  { :root { --pad-x: 22px; } }
@media (min-width: 1024px) { :root { --pad-x: 32px; } }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Prevent horizontal scroll caused by rogue elements */
    min-width: 0;
}

html, body {
    overflow-x: hidden;   /* Kill horizontal scroll no matter what */
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Inter", system-ui, sans-serif;
    color: var(--ink);
    background-color: #F5F7FC;   /* light grey base tone */
    background-image: url("../assets/pipes-pattern.svg");
    background-size: 480px 480px;
    background-repeat: repeat;
    background-attachment: fixed;   /* pattern stays as content scrolls */
    line-height: 1.6;
    font-size: 15px;
}

/* On small screens, disable fixed attachment (causes jank on iOS) and
   shrink the tile so the pattern reads well at any zoom */
@media (max-width: 900px) {
    body {
        background-attachment: scroll;
        background-size: 340px 340px;
    }
}

h1, h2, h3, h4, .display {
    font-family: "Poppins", sans-serif;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Never let long text or code push out the viewport */
p, li, h1, h2, h3, h4, span, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- .wrap: page container with horizontal padding ---------- */

.wrap {
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}

/* ---------- eyebrow ---------- */

.eyebrow {
    font-family: "Poppins", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--electric);
}

.eyebrow.on-dark { color: var(--sky); }

@media (min-width: 640px) {
    .eyebrow { font-size: 12px; letter-spacing: 0.28em; }
}

/* ---------- buttons ---------- */

.btn {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.03em;
    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
    border: 0;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-electric {
    background: var(--electric);
    color: #fff;
    box-shadow: 0 8px 24px rgba(46, 155, 218, 0.35);
}

.btn-ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.btn-ghost:hover { border-color: #fff; }

@media (min-width: 640px) {
    .btn { padding: 13px 26px; }
}

/* ---------- sections ---------- */

.section {
    padding: 48px 0;
    position: relative;
}

.section.tint { background: var(--mist); }

.section h2 {
    font-size: clamp(22px, 5vw, 38px);
    font-weight: 600;
    color: var(--navy);
    margin-top: 10px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.section .sub-lede {
    color: var(--slate);
    max-width: 62ch;
    margin-top: 12px;
    font-size: 15px;
}

@media (min-width: 640px) {
    .section { padding: 64px 0; }
    .section .sub-lede { font-size: 16px; margin-top: 14px; }
}

@media (min-width: 1024px) {
    .section { padding: 84px 0; }
}

/* ---------- interior page hero (About/Services/Process/Contact) ---------- */

.page-hero {
    background: linear-gradient(140deg, var(--navy), var(--indigo));
    color: #fff;
    padding: 44px 0 36px;
}

.page-hero h1 {
    font-size: clamp(24px, 6vw, 44px);
    font-weight: 600;
    margin-top: 10px;
    line-height: 1.15;
}

.page-hero p {
    margin-top: 12px;
    color: #c9d3f2;
    max-width: 62ch;
    font-size: 15px;
}

@media (min-width: 640px) {
    .page-hero { padding: 52px 0 44px; }
    .page-hero p { font-size: 16px; }
}

@media (min-width: 1024px) {
    .page-hero { padding: 64px 0 56px; }
}

/* ---------- accessibility ---------- */

:focus-visible {
    outline: 2px solid var(--electric);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover { transform: none; }
    html { scroll-behavior: auto; }
}

/* ============================================================
   LOGO — fixed aspect ratio at every breakpoint
   ============================================================ */

.logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.logo-nav    { height: 32px; }
.logo-footer { height: 46px; }

@media (min-width: 640px) {
    .logo-nav    { height: 38px; }
    .logo-footer { height: 54px; }
}

@media (min-width: 1024px) {
    .logo-nav    { height: 44px; }
    .logo-footer { height: 60px; }
}

/* ============================================================
   Prevent flash-of-content before GSAP animates in.
   ============================================================ */

html.js-loading .hero .eyebrow,
html.js-loading .hero h1,
html.js-loading .hero .lede,
html.js-loading .hero-cta .btn,
html.js-loading .page-hero .eyebrow,
html.js-loading .page-hero h1,
html.js-loading .page-hero p,
html.js-loading .section .eyebrow,
html.js-loading .section h2,
html.js-loading .section .sub-lede,
html.js-loading .card,
html.js-loading .project-card,
html.js-loading .support-card,
html.js-loading .value,
html.js-loading .mv-card,
html.js-loading .step,
html.js-loading .quote,
html.js-loading .contact-item,
html.js-loading .form,
html.js-loading .cs-item,
html.js-loading .stat .lab,
html.js-loading .stat .sub {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    html.js-loading * { opacity: 1 !important; }
}