/* ============================================================
   Construction Quotes - public marketing & legal pages.
   Self-contained: nothing here leaks into the app shell
   (app.css) and nothing from the shell is required here.
   Direction: the product's own look. A deep-navy promotion
   band for the hero - the same ground as the portfolio banner -
   with a tilted wall of real screens; below it, quiet white and
   light-grey bands, plain bordered cards, and the app's blue for
   every action. The only pictures are captures of the app.
   ============================================================ */

:root {
    /* Palette */
    --ink:       #15191f;   /* headings, strong text             */
    --ink-2:     #4a5360;   /* body copy                         */
    --ink-3:     #6b7582;   /* captions, small print             */
    --paper:     #f3f5f8;   /* alternate band / page ground      */
    --sheet:     #ffffff;   /* cards and the white bands         */
    --line:      #dbe2ea;   /* hairlines, card borders           */
    --blue:      #1b6ee0;   /* the app accent - every action     */
    --blue-deep: #14509f;
    --blue-wash: #e8f1fd;
    --navy-deep: #04073a;   /* hero ground, as on the banner     */
    --navy:      #0a1180;
    --cyan:      #2e9bd6;   /* glow behind the screens           */
    --amber:     #f7a325;   /* the flow arrows and the pill dot  */
    --app-bg:    #f5f6f8;   /* the app's own page colour         */
    --green:     #13795b;
    --green-soft:#e3f5ee;
    --red:       #c23934;
    --red-soft:  #fdeceb;
    --night:     #0f1720;   /* footer band                       */

    /* Type */
    --display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --body:    "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Rhythm */
    --max:       1200px;
    --radius:    14px;      /* cards, screenshots                */
    --radius-sm: 10px;      /* buttons, inputs, messages         */
    --speed:     160ms;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
    scroll-padding-top: 88px;     /* anchor jumps land clear of the sticky nav */
    scrollbar-gutter: stable;     /* no sideways jump when the lightbox locks scrolling */
}
html:has(.lightbox[open]) { overflow: hidden; }
body {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--sheet);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.12;
    margin: 0 0 .4em;
    text-wrap: balance;
}
p  { margin: 0 0 1em; }
a  { color: var(--blue-deep); }
a:hover { color: var(--blue); }
img { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: #fff;
    padding: 10px 16px; z-index: 100; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 20px;
    font-family: var(--display); font-size: 15.5px; font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer; text-decoration: none;
    transition: background var(--speed), border-color var(--speed), color var(--speed);
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); color: #fff; }
.btn-ghost { background: var(--sheet); color: var(--ink); border-color: #c3ccd8; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-on-dark { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn-on-dark:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn-lg { min-height: 52px; padding: 10px 26px; font-size: 16.5px; }
.btn[disabled] { opacity: .65; cursor: default; }

/* ---------- Top nav ---------- */
.site-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.site-nav .wrap {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 68px; gap: 16px;
}
.nav-actions { display: flex; gap: 10px; }
.brand {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--display); font-weight: 700; font-size: 18px;
    color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
.brand:hover { color: var(--ink); }
.brand-mark {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
    flex-shrink: 0;
}
.site-nav .btn { min-height: 40px; padding: 6px 16px; font-size: 15px; }

/* ---------- Hero: the promotion band ---------- */
.hero {
    position: relative;
    overflow: hidden;
    color: #a8bcdb;
    background:
        radial-gradient(900px 620px at 82% 30%, rgba(46, 155, 214, .30), transparent 62%),
        radial-gradient(800px 560px at 6% 100%, rgba(10, 17, 128, .85), transparent 60%),
        linear-gradient(118deg, var(--navy-deep) 0%, #070d55 46%, var(--navy) 100%);
}
.hero::before {                   /* blueprint grid, fading out behind the screens */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 45%, transparent 80%);
    mask-image: linear-gradient(100deg, #000 0%, #000 45%, transparent 80%);
}
.hero-grid {
    position: relative;
    display: grid; grid-template-columns: 5fr 6fr;
    gap: 48px; align-items: center;
    padding-top: 88px; padding-bottom: 112px;
}
.hero-pill {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 24px; padding: 8px 15px;
    font-size: 14px; font-weight: 600; color: #b9dcf5;
    border: 1px solid rgba(159, 208, 242, .34); border-radius: 999px;
    background: rgba(27, 111, 196, .18);
}
.hero-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.hero h1 {
    color: #fff;
    font-size: clamp(42px, 5.2vw, 70px);
    letter-spacing: -.03em;
    line-height: 1.02;
    margin-bottom: 22px;
}
.hero-flow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    margin: 0 0 22px;
    font-size: 18px; font-weight: 600; color: #fff;
}
.hero-flow .arw { color: var(--amber); }
.hero .lede {
    font-size: 18px; line-height: 1.65; color: #b4c5e0;
    max-width: 33em; margin-bottom: 32px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* A wall of the four screens, angled away from the reader like the
   banner's single capture. The right column sits lower than the left.
   On wide screens the wall runs into the margin beside the content
   column, but never so far that a screen is cut by the window edge. */
.hero-visual { position: relative; }
.hero-visual::before {            /* cyan glow behind the wall */
    content: ""; position: absolute; inset: -10% -20% -10% 0;
    background: radial-gradient(closest-side, rgba(46, 155, 214, .32), transparent 72%);
    filter: blur(24px);
    pointer-events: none;
}
.wall {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    width: calc(100% + clamp(0px, (100vw - 1200px) / 2 - 24px, 120px));
    padding-bottom: 44px;
    transform: perspective(2200px) rotateY(-15deg) rotateX(5deg) rotateZ(-1.5deg);
    transform-origin: left center;
}
.wall-tile {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    background: var(--app-bg);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 40px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(46, 155, 214, .22);
}
.wall-tile:nth-child(even) { transform: translateY(44px); }
.wall-tile img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: left top;
}

/* ---------- Section heads ---------- */
.section-head {
    max-width: 700px; margin: 0 auto 56px;
    text-align: center;
}
.section-head h2 {
    font-size: clamp(30px, 3.8vw, 44px);
    letter-spacing: -.025em;
    margin-bottom: 14px;
}
.section-head p { font-size: 17.5px; margin: 0; text-wrap: pretty; }

/* ---------- Features ---------- */
.features {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 104px 0 112px;
}
.feature-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.feature-card {
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 32px 34px;
}
.feature-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--blue-wash);
    margin-bottom: 20px;
}
.feature-icon svg {
    width: 26px; height: 26px;
    fill: none; stroke: var(--blue-deep); stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.feature-card h3 { font-size: 21px; letter-spacing: -.01em; margin-bottom: 10px; }
.feature-card p { margin: 0; font-size: 16px; line-height: 1.7; }

/* ---------- Screens ---------- */
.screens { padding: 104px 0 120px; }
.shot-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 56px 40px;
}
.shot { margin: 0; }
/* Each capture is shown whole. The frame is one shape for all four, and
   a shorter capture (the payroll week) sits on the app's own page colour. */
.shot-open {
    display: block; width: 100%; padding: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--app-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 36px -16px rgba(16, 24, 40, .22);
    cursor: zoom-in;
}
.shot-open img {
    display: block; width: 100%; height: 100%;
    object-fit: contain; object-position: center top;
}
.shot-open:hover { border-color: #b9c4d2; }
.shot figcaption { margin-top: 20px; }
.shot h3 { font-size: 20px; letter-spacing: -.01em; margin-bottom: 6px; }
.shot p  { margin: 0; font-size: 15.5px; line-height: 1.65; text-wrap: pretty; }

/* Full-size viewer. The 144vh cap keeps the tallest capture (1.58:1)
   inside the window height, so a laptop never needs an inner scrollbar. */
.lightbox {
    width: min(1600px, 94vw, 144vh); max-height: 92vh;
    padding: 0; border: 1px solid var(--line); border-radius: 12px;
    background: var(--sheet);
    overflow: auto;
    overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(4, 7, 58, .78); }
.lightbox img { display: block; width: 100%; height: auto; }
.lightbox-close {
    position: sticky; top: 10px; float: right;
    margin: 10px 10px -54px 0; z-index: 1;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--sheet); color: var(--ink);
    border: 1px solid #c3ccd8;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .18);
    font-size: 26px; line-height: 1; cursor: pointer;
}

/* ---------- Request access ---------- */
.access {
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 104px 0 112px;
}
.access-grid {
    display: grid; grid-template-columns: 5fr 7fr;
    gap: 64px; align-items: start;
}
.access-intro h2 {
    font-size: clamp(30px, 3.8vw, 44px);
    letter-spacing: -.025em;
    margin-bottom: 14px;
}
.access-intro > p { font-size: 17.5px; margin-bottom: 36px; }
.access-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.access-steps li {
    position: relative;
    counter-increment: step;
    padding: 0 0 28px 62px;
}
.access-steps li::before {        /* numbered disc - the steps are a real sequence */
    content: counter(step);
    position: absolute; left: 0; top: -4px;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--sheet);
    border: 1px solid var(--blue);
    font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--blue-deep);
    display: flex; align-items: center; justify-content: center;
}
.access-steps li:not(:last-child)::after {   /* connector between discs */
    content: ""; position: absolute; left: 19.5px; top: 42px; bottom: 2px;
    width: 1px; background: var(--line);
}
.access-steps h3 { font-size: 19px; margin-bottom: 4px; }
.access-steps p { margin: 0; font-size: 15.5px; line-height: 1.65; }

.access-card {
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 40px 40px 34px;
    box-shadow: 0 16px 40px -20px rgba(16, 24, 40, .18);
}
.field-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}
.field { display: flex; flex-direction: column; }
.field-full { grid-column: 1 / -1; }
.field label {
    font-size: 14.5px; font-weight: 600; color: var(--ink);
    margin-bottom: 6px;
}
.field .opt { font-weight: 400; color: var(--ink-3); }
.field .hint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.field input, .field textarea {
    font-family: var(--body); font-size: 16px; color: var(--ink);
    background: var(--sheet);
    border: 1px solid #7f8b99; border-radius: var(--radius-sm);   /* 3.5:1 on white */
    padding: 11px 14px; min-height: 48px;
    transition: border-color var(--speed), box-shadow var(--speed);
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(27, 110, 224, .35);
}
.form-actions { margin-top: 26px; }
.form-msg {
    display: none;
    margin: 0 0 18px; padding: 12px 16px;
    border-radius: var(--radius-sm); font-size: 15px;
}
.form-msg:focus, .access-done:focus { outline: none; }   /* focused by script, not by Tab */
.form-msg.is-error   { background: var(--red-soft);   color: var(--red);   border: 1px solid rgba(194, 57, 52, .3); }
.form-msg.is-success { background: var(--green-soft); color: var(--green); border: 1px solid rgba(19, 121, 91, .3); }
.form-note { margin: 18px 0 0; font-size: 14px; color: var(--ink-3); }
.access-done { text-align: center; padding: 40px 8px; }
.access-done h3 { font-size: 26px; margin-bottom: 10px; }
.access-done p  { margin: 0 auto; max-width: 30em; font-size: 16px; }
.access-done .done-mark {
    width: 56px; height: 56px; border-radius: 50%;
    margin: 0 auto 20px;
    background: var(--green-soft); color: var(--green);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--night);
    color: #a9b4c0;
    padding: 56px 0 40px;
    font-size: 14.5px;
}
.footer-grid {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 32px; flex-wrap: wrap;
}
.site-footer .brand { color: #fff; }
.footer-line { margin: 14px 0 0; max-width: 30em; color: #8b97a4; }
.footer-links { display: flex; gap: 28px; list-style: none; margin: 6px 0 0; padding: 0; }
.footer-links a { color: #cfd7df; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-fine {
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px; color: #7d8996;
}

/* ---------- Legal pages ---------- */
.legal-main { padding: 64px 0 96px; background: var(--paper); }
/* The legal pages run to the same margins as the site menu above them,
   rather than sitting in a narrow column of their own. */
.legal-wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.legal-wrap h1 {
    font-size: clamp(32px, 4.2vw, 46px);
    letter-spacing: -.03em;
    margin-bottom: 10px;
}
.legal-updated {
    font-size: 14px; color: var(--ink-2);
    margin-bottom: 34px;
}
.legal-wrap .lede { font-size: 17.5px; line-height: 1.65; color: var(--ink-2); }
.legal-wrap h2 {
    font-size: 22px; letter-spacing: -.01em;
    margin: 44px 0 12px;
}
.legal-wrap p, .legal-wrap li { line-height: 1.7; font-size: 15.5px; }
.legal-wrap ul { padding-left: 22px; margin: 0 0 1em; }
.legal-wrap li { margin-bottom: .45em; }
.legal-contact {
    margin-top: 48px; padding: 22px 26px;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.legal-contact p:last-child { margin: 0; }

/* ---------- Motion ---------- */
/* One moment only: the hero settles in on load. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .hero-copy   { animation: rise .6s ease-out both; }
    .hero-visual { animation: fade-in .9s .15s ease-out both; }
}
@keyframes rise    { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-in { from { opacity: 0; transform: translateX(36px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 980px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-top: 64px; padding-bottom: 72px;
    }
    .wall { width: 100%; transform: none; gap: 14px; padding-bottom: 28px; }
    .wall-tile:nth-child(even) { transform: translateY(28px); }
    .access-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 860px) {
    .feature-grid { grid-template-columns: 1fr; }
    .shot-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
    /* Sides only: a padding shorthand here would also zero the hero's
       top and bottom padding, which shares this specificity. */
    .wrap, .legal-wrap { padding-left: 16px; padding-right: 16px; }
    .hero-grid { padding-top: 44px; padding-bottom: 56px; }
    .site-nav .btn { padding: 6px 14px; font-size: 14px; }
    .brand { font-size: 16px; gap: 10px; }
    .hero h1 { font-size: 40px; }
    .hero-flow { font-size: 16px; }
    .hero .lede { font-size: 16.5px; }
    .wall { gap: 10px; padding-bottom: 20px; }
    .wall-tile { border-radius: 7px; }
    .wall-tile:nth-child(even) { transform: translateY(20px); }
    .features, .screens, .access { padding: 72px 0 80px; }
    .section-head { margin-bottom: 44px; text-align: left; }
    .feature-card { padding: 26px 22px 28px; }
    .feature-card h3 { font-size: 20px; }
    .field-grid { grid-template-columns: 1fr; }
    .access-card { padding: 28px 20px 24px; }
    .footer-grid { flex-direction: column; }

    /* On a phone the capture fitted to the screen is no bigger than its
       tile: show it at a readable width and let the reader pan. */
    .lightbox { width: 94vw; max-height: 88vh; }
    .lightbox img { width: 1100px; max-width: none; }
    .lightbox-close { position: fixed; top: 12px; right: 12px; margin: 0; float: none; }
}
@media (max-width: 420px) {
    /* Mark only, and only where two buttons have to share the bar. */
    .site-nav:has(.nav-actions .btn + .btn) .brand { font-size: 0; gap: 0; }
    .site-nav .brand-mark { font-size: 12.5px; }
}