/* Armstrong ITS — armstrongits.com */

:root {
    /* GRANITE & POPPY
       Navy is the brand and stays untouched. One accent, at maximum chroma,
       rationed to ~5% of surface. The ground is COOL: warm-beige grounds are
       the 2026 default and the standard output of palette generators, which
       is what the old cream/terracotta/sage/amber set was.

       POPPY IS A MARKS COLOUR, NOT A TEXT COLOUR. #e1580e is 3.38:1 on paper,
       which clears the 3:1 graphics threshold but fails AA for text. Anything
       with words in it uses --poppy-deep. Do not put --poppy on a button face
       or a band; its whole power is scarcity. */
    --ink:        #0d2438;
    --ink-2:      #17394f;

    --poppy:      #e1580e;
    --poppy-deep: #b83e07;
    --poppy-soft: #ff8a52;

    --paper:      #f4f3f0;
    --paper-2:    #eae9e4;
    --paper-3:    #dfded8;
    --card:       #fcfcfa;

    --text:       #232f3a;
    --text-soft:  #4e5a64;
    --text-mute:  #616c77;
    --rule:       #e3e1da;
    --rule-2:     #c9c8bf;

    --serif: 'Besley', Georgia, 'Times New Roman', serif;
    --sans:  'Karla', 'Helvetica Neue', Arial, sans-serif;

    --r: 8px;

    --lift-1: 0 1px 2px rgba(13,36,56,.05);
    --lift-2: 0 6px 18px rgba(13,36,56,.07);
    --lift-3: 0 18px 44px rgba(13,36,56,.11);

    --ease: cubic-bezier(.22,.61,.36,1);

    /* Service-area band keeps its own tokens: --ink/--paper swap in dark mode,
       which would otherwise flip this band to light mid-page. */
    --area-bg: #0d2438;
    --area-fg: #f4f3f0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink:#e8e5df; --ink-2:#c9c5bd;
        --poppy:#ff7a3d; --poppy-deep:#ff8a52; --poppy-soft:#ffa070;
        --paper:#12181f; --paper-2:#171e26; --paper-3:#1f2731; --card:#19212a;
        --text:#e2e0da; --text-soft:#aeaca4; --text-mute:#8a887f;
        --rule:#2a323c; --rule-2:#3a434e;
        --lift-1:0 1px 2px rgba(0,0,0,.3);   --lift-2:0 6px 18px rgba(0,0,0,.34);
        --lift-3:0 18px 44px rgba(0,0,0,.42);
        --area-bg:#16202c; --area-fg:#e8e5df;
    }
}
:root[data-theme="dark"] {
    --ink:#e8e5df; --ink-2:#c9c5bd;
    --poppy:#ff7a3d; --poppy-deep:#ff8a52; --poppy-soft:#ffa070;
    --paper:#12181f; --paper-2:#171e26; --paper-3:#1f2731; --card:#19212a;
    --text:#e2e0da; --text-soft:#aeaca4; --text-mute:#8a887f;
    --rule:#2a323c; --rule-2:#3a434e;
    --lift-1:0 1px 2px rgba(0,0,0,.3);   --lift-2:0 6px 18px rgba(0,0,0,.34);
    --lift-3:0 18px 44px rgba(0,0,0,.42);
    --area-bg:#16202c; --area-fg:#e8e5df;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}


a { color: var(--poppy-deep); text-decoration:none; transition: color .16s var(--ease); }
a:hover { color: var(--ink); }
:focus-visible { outline:2.5px solid var(--poppy); outline-offset:3px; border-radius:3px; }
img, svg { max-width:100%; display:block; }
p { text-wrap:pretty; }

.wrap { max-width:1140px; margin:0 auto; padding:0 26px; position:relative; z-index:1; }

.skip {
    position:absolute; top:-100px; left:16px;
    background:var(--ink); color:var(--paper);
    padding:11px 20px; border-radius:0 0 12px 12px;
    z-index:9999; font-size:.9rem; font-weight:600;
}
.skip:focus { top:0; }

/* ---------- Type ---------- */
h1,h2,h3 {
    font-family:var(--serif);
    color:var(--ink);
    font-weight:600;
    letter-spacing:-.004em;
    line-height:1.14;
}
h1 { font-size:clamp(2.4rem,6vw,4.1rem); }
h2 { font-size:clamp(1.75rem,3.9vw,2.55rem); }
h3 { font-size:1.16rem; letter-spacing:-.01em; }

/* Section labels */
.eyebrow {
    font-family:var(--sans);
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--poppy-deep);
    margin-bottom:14px;
    display:block;
}

/* ---------- Buttons ---------- */
.btn {
    display:inline-flex; align-items:center; gap:9px;
    padding:14px 24px;
    border-radius:var(--r);
    font-family:var(--sans);
    font-size:.97rem; font-weight:600;
    border:1.5px solid transparent;
    cursor:pointer; text-decoration:none;
    transition:transform .26s var(--ease), box-shadow .26s var(--ease),
               background .18s, color .18s, border-color .18s;
}
.btn svg { width:16px; height:16px; flex:none; }
.btn-primary { background:var(--ink); color:var(--paper); box-shadow:var(--lift-2); }
.btn-primary:hover { background:var(--poppy); color:#fff; transform:translateY(-1px); box-shadow:var(--lift-2); }
.btn-secondary { background:transparent; color:var(--ink); border-color:var(--rule-2); }
.btn-secondary:hover { border-color:var(--poppy); color:var(--poppy); }
.btn-full { width:100%; justify-content:center; }
.btn:active { transform:translateY(-1px) scale(.985); }


/* ---------- Nav ---------- */
.nav {
    position:sticky; top:0; z-index:200;
    /* Opaque fallback first: browsers without color-mix drop the next line
       entirely, and a sticky nav with no background at all is unreadable. */
    background:var(--paper);
    background:color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter:saturate(170%) blur(14px);
    -webkit-backdrop-filter:saturate(170%) blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .3s, box-shadow .3s;
}
.nav.stuck { border-bottom-color:var(--rule); box-shadow:var(--lift-1); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }

.logo { display:flex; align-items:center; gap:11px; color:var(--ink); }
.logo:hover { color:var(--ink); }
.logo-mark {
    width:38px; height:38px;
    background:var(--ink); color:var(--paper);
    border-radius:var(--r);
    display:grid; place-items:center;
    font-family:var(--serif); font-weight:700; font-size:1.2rem;
    transition:transform .3s var(--ease);
    box-shadow:var(--lift-1);
}
.logo-text { font-family:var(--serif); font-size:1.14rem; font-weight:600; letter-spacing:-.015em; }
.logo-text em { font-style:normal; font-weight:400; color:var(--poppy); }

.nav-links { display:flex; align-items:center; gap:30px; list-style:none; }
.nav-links a { color:var(--text-soft); font-size:.93rem; font-weight:500; position:relative; }
.nav-links a:hover { color:var(--ink); }
.nav-links a:hover { text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; text-decoration-color:var(--poppy); }

.nav-phone {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 17px;
    background:var(--ink); color:var(--paper);
    border-radius:var(--r);
    font-size:.9rem; font-weight:600;
    transition:background .18s, transform .26s var(--ease), color .18s;
}
.nav-phone:hover { background:var(--poppy); color:#fff; }
.nav-phone svg { width:14px; height:14px; }

.nav-toggle {
    display:none; background:none; border:none; cursor:pointer;
    width:42px; height:42px; align-items:center; justify-content:center;
}
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); position:relative; border-radius:2px; transition:transform .26s var(--ease), opacity .18s; }
.nav-toggle span::before, .nav-toggle span::after {
    content:''; position:absolute; left:0; width:22px; height:2px;
    background:var(--ink); border-radius:2px; transition:transform .26s var(--ease);
}
.nav-toggle span::before { top:-7px; }
.nav-toggle span::after  { top:7px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ----------
   Background is the San Gabriel ridgeline at 5%, the same range the
   service-area map draws. */
.hero { padding:74px 0 96px; position:relative; overflow:hidden; }
.hero::before {
    content:''; position:absolute; left:0; right:0; bottom:0; height:38%;
    background:no-repeat bottom center/cover
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' preserveAspectRatio='none'%3E%3Cpath d='M0 260 L0 168 L74 118 L132 160 L198 92 L268 152 L338 104 L404 158 L470 116 L540 164 L604 108 L668 156 L742 120 L812 162 L878 112 L946 158 L1014 122 L1086 164 L1140 130 L1200 170 L1200 260 Z' fill='%230d2438'/%3E%3C/svg%3E");
    opacity:.032; pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:68px; align-items:center; }
.hero h1 { margin-bottom:22px; }

/* The hand-drawn underline draws itself in under "picks up." */
.scribble-wrap { position:relative; display:inline-block; }
.scribble-wrap em { font-style:italic; color:var(--poppy); font-weight:400; }
.scribble {
    position:absolute; left:-2%; bottom:-.22em; width:104%; height:.34em;
    overflow:visible; pointer-events:none;
}
.scribble path {
    fill:none; stroke:var(--poppy); stroke-width:6.5; stroke-linecap:round;
    opacity:.5;
}

.hero-lede { font-size:1.12rem; line-height:1.68; color:var(--text-soft); max-width:530px; margin-bottom:34px; }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; align-items:center; }

/* The page's load-bearing claim. Set plainly so it reads as a commitment
   rather than a joke. */
.hero-aside {
    display:block; margin-top:18px;
    font-family:var(--sans); font-size:.92rem; color:var(--text-mute);
}

/* ---------- The index card (replaces the old flat info box) ----------
   Tilted, taped to the page, with a ruled line like a real card. */
.card-tilt { position:relative; }


.idcard {
    background:var(--card);
    border:1px solid var(--rule);
    border-radius:var(--r);
    padding:34px 32px 30px;
    box-shadow:var(--lift-3);
    position:relative;
}
.idcard-head { display:flex; align-items:center; gap:15px; padding-bottom:20px; border-bottom:1.5px solid var(--rule); margin-bottom:20px; }
.idcard-mark {
    width:58px; height:58px; flex:none;
    background:var(--ink); color:var(--paper);
    border-radius:var(--r);
    display:grid; place-items:center;
    font-family:var(--serif); font-weight:700; font-size:1.75rem;
    box-shadow:var(--lift-2);
}
.idcard-name { font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--ink); }
.idcard-role { font-size:.84rem; color:var(--text-mute); margin-top:1px; }
.idcard dl { display:grid; gap:15px; }
.idcard dl > div { display:grid; grid-template-columns:104px 1fr; gap:12px; font-size:.92rem; align-items:baseline; }
.idcard dt { color:var(--text-mute); font-weight:500; }
.idcard dd { color:var(--text); font-weight:600; }

/* ---------- Section framing ---------- */
.section { padding:96px 0; position:relative; }
.section-head { max-width:660px; margin-bottom:64px; }
.section-head p { font-size:1.04rem; color:var(--text-soft); margin-top:14px; }


.band { background:var(--paper-2); position:relative; }

/* ---------- Services: index cards on a warm board ---------- */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc {
    background:var(--card);
    border:1px solid var(--rule);
    border-radius:var(--r);
    padding:28px 26px 26px;
    position:relative;
    box-shadow:var(--lift-1);
    transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .3s;
    overflow:hidden;
}
.svc:hover { transform:translateY(-2px); box-shadow:var(--lift-2); border-color:var(--rule-2); }


.svc::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--poppy); border-radius:3px 3px 0 0; }

.svc-icon { width:38px; height:38px; margin-bottom:15px; stroke-width:1.5; fill:none; stroke:var(--poppy); }
.svc h3 { margin-bottom:8px; padding-right:34px; }
.svc p { color:var(--text-soft); font-size:.93rem; line-height:1.64; }

/* ---------- How a job goes: a numbered policy, not a feature grid ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); border-top:1px solid var(--ink); padding-top:34px; }
.step-n {
    font-family:var(--serif); font-style:italic; font-size:2rem;
    color:var(--poppy); line-height:1; display:block; margin-bottom:14px;
}
.step h3 { font-family:var(--serif); font-size:1.24rem; font-weight:600; color:var(--ink); margin-bottom:9px; letter-spacing:-.01em; }
.step p { font-size:.95rem; color:var(--text-soft); line-height:1.68; }

/* ---------- About ---------- */
/* No photograph, so the section is set as text rather than pretending to a
   figure. Two columns at a readable measure, with the facts row beneath. */
.about-narrow { max-width:860px; }
.about-cols { columns:2; column-gap:52px; margin-top:8px; }
.about-cols p { color:var(--text-soft); font-size:1rem; line-height:1.78; margin-bottom:16px; break-inside:avoid; max-width:none; }
.about-cols p:last-child { margin-bottom:0; }
.about strong, .about-cols strong { color:var(--ink); font-weight:600; }

.facts { display:flex; gap:44px; flex-wrap:wrap; margin-top:40px; padding-top:24px; border-top:1px solid var(--rule); }
.facts dt { font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin-bottom:7px; }
.facts dd { font-family:var(--serif); font-size:1.55rem; color:var(--ink); line-height:1; }

/* ---------- Service area: a hand-drawn map ---------- */
.area { background:var(--area-bg); color:var(--area-fg); position:relative; overflow:hidden; }
.area h2 { color:var(--area-fg); max-width:660px; }
.area .eyebrow { color:var(--poppy-soft); }
.area-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; }
.area-note { font-size:.97rem; color:var(--area-fg); color:color-mix(in srgb, var(--area-fg) 72%, transparent); max-width:470px; margin-top:22px; }

/* Each rule declares a plain var() first and the color-mix second. Without the
   fallback, a browser lacking color-mix drops the declaration entirely and the
   map renders as an invisible tangle of unstroked paths. */
.map { width:100%; height:auto; overflow:visible; }
.map .ridge      { fill:none; stroke:var(--area-fg); stroke:color-mix(in srgb, var(--area-fg) 34%, transparent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.map .ridge-back { stroke:var(--area-fg); stroke:color-mix(in srgb, var(--area-fg) 16%, transparent); stroke-width:1.5; }
.map .bound      { fill:none; fill:color-mix(in srgb, var(--area-fg) 5%, transparent); stroke:var(--area-fg); stroke:color-mix(in srgb, var(--area-fg) 28%, transparent); stroke-width:2; stroke-dasharray:7 6; stroke-linecap:round; }
.map .road       { fill:none; stroke:var(--area-fg); stroke:color-mix(in srgb, var(--area-fg) 18%, transparent); stroke-width:1.5; stroke-linecap:round; }
.map .dot        { fill:var(--poppy-soft); transition:r .3s var(--ease), fill .3s; }
.map .dot-hub    { fill:var(--poppy); }
.map .lbl        { font-family:var(--sans); font-size:12.5px; font-weight:600; fill:var(--area-fg); fill:color-mix(in srgb, var(--area-fg) 90%, transparent); }
.map .lbl-hub    { font-family:var(--serif); font-style:italic; font-size:18px; fill:var(--poppy-soft); }
.map .pin { cursor:default; }
.map .ridge-label { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.08em; fill:var(--area-fg); fill:color-mix(in srgb, var(--area-fg) 45%, transparent); }

/* The map is the only bespoke object on the page, so it gets the only
   entrance. Pins land in sequence; the drawing settles first. */
.map .ridge, .map .ridge-back, .map .road, .map .bound {
    opacity:0; transition:opacity .9s var(--ease);
}
.map .pin {
    opacity:0; transform:scale(.4);
    transform-box:fill-box; transform-origin:center;
    transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.map.drawn .ridge-back { opacity:1; transition-delay:.05s; }
.map.drawn .ridge     { opacity:1; transition-delay:.18s; }
.map.drawn .bound     { opacity:1; transition-delay:.34s; }
.map.drawn .road      { opacity:1; transition-delay:.5s; }
.map.drawn .pin       { opacity:1; transform:scale(1); }
.map.drawn .pin:nth-of-type(1) { transition-delay:.70s; }
.map.drawn .pin:nth-of-type(2) { transition-delay:.80s; }
.map.drawn .pin:nth-of-type(3) { transition-delay:1.02s; }
.map.drawn .pin:nth-of-type(4) { transition-delay:.90s; }
.map.drawn .pin:nth-of-type(5) { transition-delay:.96s; }
.map.drawn .pin:nth-of-type(6) { transition-delay:.86s; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.06fr; gap:64px; align-items:start; }
.contact-intro { color:var(--text-soft); margin-bottom:34px; line-height:1.72; max-width:450px; }
.contact-info { list-style:none; display:grid; gap:26px; }
.contact-info li { display:grid; gap:3px; }
.contact-info .label {
    font-family:var(--sans); font-size:.72rem; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; color:var(--text-mute);
}
.contact-info .big { font-family:var(--serif); font-size:1.32rem; color:var(--ink); font-weight:600; }
a.big:hover { color:var(--poppy); }
.contact-info .sub { font-size:.86rem; color:var(--text-mute); }

.form {
    background:var(--card);
    border:1px solid var(--rule);
    border-radius:var(--r);
    padding:34px;
    box-shadow:var(--lift-3);
    position:relative;
}
.field { margin-bottom:19px; }
.field label { display:block; font-size:.84rem; font-weight:600; color:var(--ink); margin-bottom:7px; }
.field input, .field select, .field textarea {
    width:100%; padding:12px 15px;
    font-family:var(--sans); font-size:.96rem;
    color:var(--text); background:var(--paper);
    border:1.5px solid var(--rule-2);
    border-radius:var(--r);
    transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    border-color:var(--poppy); background:var(--card);
    box-shadow:0 0 0 3.5px color-mix(in srgb, var(--poppy) 16%, transparent);
    outline:none;
}
.field textarea { resize:vertical; min-height:108px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-fallback { margin-top:15px; font-size:.84rem; color:var(--text-mute); text-align:center; }
.form-status { margin-top:13px; padding:11px 15px; border-radius:9px; font-size:.89rem; display:none; }
/* The status message must stay legible even if the tinted background is dropped,
   so the text colour carries the meaning and the tint is decoration. */
.form-status.ok  { display:block; background:var(--paper-2); color:var(--ink); border:1px solid var(--rule-2); }
.form-status.err { display:block; background:transparent; background:color-mix(in srgb,var(--poppy) 13%,transparent); color:var(--poppy); border:1px solid var(--poppy); border-color:color-mix(in srgb,var(--poppy) 32%,transparent); }

/* ---------- Footer ---------- */
.foot { padding:42px 0; border-top:1px solid var(--rule); }
.foot-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
.foot-brand { display:flex; align-items:center; gap:13px; flex-wrap:wrap; font-size:.92rem; color:var(--text-mute); }
.foot-brand .logo-mark { width:32px; height:32px; font-size:1.02rem; }
.foot-brand .logo-text { font-size:1.02rem; color:var(--ink); }
.foot-copy { font-size:.86rem; color:var(--text-mute); }
.foot-copy .hand { color:var(--poppy); }


/* ---------- Responsive ---------- */
@media (max-width:960px) {
    .hero-grid, .contact-grid, .area-grid { grid-template-columns:1fr; gap:48px; }
    .svc-grid { grid-template-columns:repeat(2,1fr); }
    .area-grid { gap:44px; }
}
@media (max-width:720px) {
    body { font-size:16px; }
    .nav-links { display:none; }
    .nav-toggle { display:flex; }
    .nav-links.open {
        display:flex; flex-direction:column; align-items:flex-start;
        position:absolute; top:76px; left:0; right:0;
        background:var(--paper); padding:22px 26px 26px;
        border-bottom:1px solid var(--rule);
        box-shadow:var(--lift-3); gap:19px;
    }
    .nav-phone span { display:none; }
    .nav-phone { padding:10px 12px; }
    .svc-grid { grid-template-columns:1fr; }
    .hero { padding:48px 0 64px; }
    .section { padding:64px 0; }
    .form, .idcard { padding:26px; }
    .foot-row { flex-direction:column; text-align:center; }
    .facts { gap:26px; }
}
@media (max-width:420px) {
    .idcard dl > div { grid-template-columns:92px 1fr; font-size:.88rem; }
}

/* ---------- Reduced motion: strip every animation, keep every layout ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after {
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
    .map .ridge, .map .ridge-back, .map .road, .map .bound, .map .pin {
        opacity:1 !important; transform:none !important;
    }
}

/* ---------- Print ---------- */
@media print {
    .nav { display:none !important; }
    body { background:#fff; color:#000; }
    .svc, .form { box-shadow:none !important; }
}