/* Self-hosted brand font - local files, zero network fetch at render time.
     Variable woff2 (Schibsted Grotesk - headings + body, one family). */
  @font-face{
    font-family:"Schibsted Grotesk";
    src:url("/assets/fonts/SchibstedGrotesk[wght].woff2") format("woff2");
    font-weight:400 900;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:"Schibsted Grotesk";
    src:url("/assets/fonts/SchibstedGrotesk-Italic[wght].woff2") format("woff2");
    font-weight:400 900;font-style:italic;font-display:swap;
  }

  :root{
    /* Measured - two-colour system.
       Petrol = structure (calm, carries the system). Warm = signal (rare, ≤3/section). B&W-survivable. */
    --ink:#15211F;            /* primary text */
    --petrol:#0C5560;         /* structure - headings, wordmark, rules, dimension motif */
    --petrol-deep:#0A464E;    /* small text / links / AA */
    --petrol-tint:#E6F0F0;    /* wash */
    --warm:#E8683C;           /* signal - CTAs, one emphasis, hero numbers */
    --warm-deep:#C4501F;      /* warm text on light, AA */
    --paper:#FAFAF7;          /* ground */
    --graphite:#626E69;       /* secondary */
    --line:#D8E0DE;
    /* legacy aliases mapped to Measured roles (keep existing rules working) */
    --ink-2:#3E4A47;          /* secondary text */
    --ink-3:var(--graphite);
    --green:var(--petrol);    /* structure - headings */
    --forest:var(--petrol-deep);
    --accent:#C4501F;          /* CTA ground: AA-safe warm (4.65:1 w/ white) */
    --accent-hover:#A84318;   /* CTA hover (6.03:1 w/ white) */
    --accent-ink:var(--warm-deep);
    --accent-tint:var(--petrol-tint);  /* washes are petrol; warm stays rare */
    --surface:#EEF3F2;
    --bone:#EAF2F1;
    /* dark bands (hero + contact) grounds */
    --slate-bg:#0A464E;       /* deep petrol ground */
    --slate-card:#0C5560;     /* petrol card */
    --accent-bright:#F27B4C;  /* warm-on-dark - signal on dark grounds */
    --on-dark:#EAF2F1;        /* tint text on dark */
    --on-dark-2:#AFC4C4;      /* muted tint text on dark */
    /* type */
    --font-head:"Schibsted Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;
    --font-body:"Schibsted Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;
    --maxw: 1120px;
  }

  *,*::before,*::after{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
    font-size:17px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  a{ color:var(--petrol-deep); text-decoration:none; }
  a:hover{ text-decoration:underline; }

  img{ max-width:100%; }

  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-radius:2px;
  }

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

  .skip{
    position:absolute;
    left:-9999px;
    top:0;
    background:var(--ink);
    color:var(--paper);
    padding:10px 16px;
    z-index:200;
  }
  .skip:focus{ left:12px; top:12px; }

  /* ---------- Wordmark ---------- */
  /* The logo: the "justified block". Both words at 800, with INNOVATE tracked out until its
     INKED width matches ESTIMATING's, so the two lines read as one rectangular mass rather
     than a line of text. The tracking is solved in templates/brand/_scripts/gen-svgs.py and
     converted from cap-height units to CSS em here - keep the two in step. */
  .wordmark{
    font-family:var(--font-head);
    /* The lock is computed WITHOUT kerning (wordmark.py lays out from raw advances),
       so it must be rendered without kerning too. INNOVATE carries VA and AT; leaving
       kerning on pulls it ~2% narrower than ESTIMATING and the block stops squaring up. */
    font-kerning:none; font-feature-settings:"kern" 0;
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    font-weight:800;
    text-transform:uppercase;
    color:var(--ink);
    line-height:1;
    white-space:nowrap;
  }
  .wordmark .w1{ letter-spacing:0.16225em; margin-right:-0.16225em; color:var(--petrol); }
  .wordmark .w2{ letter-spacing:-0.00844em; margin-top:0.10em; }

  /* Logo lockup: monogram seal + wordmark (Josh, 2026-07-28 - supersedes the
     wordmark-alone rule). The seal's height is locked to the wordmark's own two-line
     height (1em + 0.10em margin + 1em = 2.10em), so the pair scales as a single unit
     and the seal can never drift out of proportion with the block. Size the lockup by
     setting font-size on .logo, never on .wordmark. */
  .logo{ display:inline-flex; align-items:center; gap:.62em; text-decoration:none; }
  .logo:hover{ text-decoration:none; }
  .logo .wordmark{ font-size:1em; }
  .logo-mark{ width:2.10em; height:2.10em; flex:none; display:block; }

  /* ---------- Eyebrow / accent rule ---------- */
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.12em;
    font-size:12px;
    font-weight:700;
    color:var(--ink-2);
    margin:0 0 14px;
  }

  /* Section divider: a plain petrol rule. The dimension-line end-ticks were retired
     2026-07-28 with the rest of the drafting-instrument vocabulary. The 8px box height
     is kept so the vertical rhythm is identical to before. */
  .rule::before{
    content:"";
    display:block;
    width:52px;
    height:8px;
    margin-bottom:20px;
    background:linear-gradient(var(--rule-col,var(--petrol)),var(--rule-col,var(--petrol))) left center / 100% 1.5px no-repeat;
  }

  h1,h2,h3{ font-family:var(--font-head); color:var(--green); font-weight:700; line-height:1.15; margin:0; }
  h2{ font-size:clamp(26px,4vw,36px); letter-spacing:-0.01em; }
  h3{ font-size:20px; letter-spacing:-0.005em; }

  p{ margin:0 0 16px; color:var(--ink-2); }
  p.lead{ color:var(--ink); }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-block;
    background:var(--accent);
    color:#fff;
    font-weight:700;
    font-size:16px;
    padding:14px 24px;
    border-radius:6px;
    letter-spacing:0.01em;
    border:1px solid var(--accent);
    transition:background .15s ease;
  }
  .btn:hover{ background:var(--accent-hover); text-decoration:none; }

  .btn-sm{ padding:9px 16px; font-size:14px; }
  .lbl-short{ display:none; }

  .textlink{ color:var(--ink-2); font-size:15px; }
  .textlink a{ color:var(--accent-ink); font-weight:600; }

  /* ---------- Header ---------- */
  header.site{
    position:sticky;
    top:0;
    z-index:100;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:64px;
  }
  .nav .logo{ font-size:16px; }
  .nav-links{
    display:flex;
    align-items:center;
    gap:26px;
    margin:0;
    padding:0;
    list-style:none;
  }
  .nav-links a{
    color:var(--ink-2);
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
  }
  .nav-links a:hover{ color:var(--ink); text-decoration:none; }
  .nav-right{ display:flex; align-items:center; gap:22px; }

  /* ---------- Sections ---------- */
  section{ padding:72px 0; }
  .section-surface{ background:var(--surface); }
  .section-head{ max-width:640px; margin-bottom:40px; }

  /* ---------- Hero ---------- */
  .hero{ padding:84px 0 64px; position:relative; overflow:hidden; }
  .hero > .wrap{ position:relative; z-index:2; }
  .hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 35%;
    filter:grayscale(1) contrast(1.05);
    z-index:0;
  }
  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(90deg, rgba(10,45,52,.96) 0%, rgba(10,45,52,.92) 55%, rgba(10,45,52,.84) 100%);
  }
  /* Hero text on dark forest ground: bone + brass */
  .hero .eyebrow{ color:var(--accent-bright); }
  .hero h1{ color:var(--on-dark); }
  .hero .lead{ color:rgba(245,241,232,.9); }
  .hero .textlink{ color:var(--on-dark-2); }
  .hero .textlink a{ color:var(--on-dark); }
  .hero .trustrow{ border-top-color:rgba(245,241,232,.20); }
  .hero .trustrow li{ color:var(--bone); border-right-color:rgba(245,241,232,.20); border-bottom-color:rgba(245,241,232,.20); }
  .hero h1{
    font-size:clamp(34px,6vw,58px);
    letter-spacing:-0.02em;
    margin:0 0 22px;
    max-width:16ch;
  }
  .hero .lead{ font-size:clamp(17px,2.2vw,20px); max-width:60ch; margin-bottom:30px; }
  .hero-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:18px 22px; }

  .trustrow{
    display:flex;
    flex-wrap:wrap;
    gap:10px 0;
    margin-top:40px;
    padding-top:26px;
    border-top:1px solid var(--line);
    list-style:none;
    padding-left:0;
  }
  .trustrow li{
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    padding:0 18px;
    border-right:1px solid var(--line);
    line-height:1.3;
  }
  .trustrow li:first-child{ padding-left:0; }
  .trustrow li:last-child{ border-right:0; }

  /* ---------- Grids / cards ---------- */
  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

  .card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:10px;
    padding:32px;
  }
  .section-surface .card{ background:var(--paper); }

  .card .eyebrow{ margin-bottom:12px; }
  .card h3{ margin-bottom:12px; }
  .card p:last-child{ margin-bottom:0; }

  .trades-line{
    margin-top:28px;
    font-size:15px;
    color:var(--ink-2);
  }
  .trades-line strong{ color:var(--ink); font-weight:700; }

  /* ---------- Steps ---------- */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .step .num{
    font-family:var(--font-head);
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
    font-size:34px;
    font-weight:800;
    color:var(--petrol);
    letter-spacing:0.02em;
    line-height:1;
    margin-bottom:16px;
    display:block;
  }
  .step h3{ margin-bottom:10px; }
  .step p{ margin-bottom:0; }

  /* ---------- Deliverables ---------- */
  .deliv{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
  .deliv li{
    padding:20px 0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  .deliv li:last-child{ border-bottom:1px solid var(--line); }
  .deliv .d-title{ font-weight:700; color:var(--ink); }
  .deliv .d-body{ color:var(--ink-2); }

  .emphasis-line{
    margin-top:28px;
    padding:22px 26px;
    background:var(--accent-tint);
    border-left:3px solid var(--accent);
    border-radius:0 8px 8px 0;
    color:var(--petrol-deep);
    font-weight:600;
    font-size:16px;
  }

  /* ---------- Service ladder ---------- */
  .ladder-intro{ max-width:64ch; margin:0 0 32px; font-size:18px; }
  .rung{ position:relative; display:flex; flex-direction:column; }
  .rung .rung-label{
    display:flex;
    align-items:baseline;
    gap:10px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:12px;
    font-weight:700;
    color:var(--ink-2);
    margin-bottom:10px;
  }
  .rung .rung-num{
    font-family:var(--font-head);
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
    font-size:15px;
    font-weight:800;
    letter-spacing:0.04em;
    color:var(--petrol);
  }
  .rung h3{ margin-bottom:12px; }
  .rung.lead-rung{
    background:var(--accent-tint);
    border-color:#B9D2D0;
  }
  .rung.lead-rung .rung-label{ color:var(--petrol-deep); }
  .services-foot{
    margin-top:24px;
    font-size:14px;
    color:var(--ink-3);
  }

  /* ---------- Pricing ---------- */
  .pricing-big{
    font-size:clamp(22px,3.4vw,30px);
    font-weight:700;
    color:var(--ink);
    line-height:1.35;
    letter-spacing:-0.01em;
    max-width:22ch;
    margin:0 0 18px;
  }
  /* tnum deliberately NOT set here: at display size the comma takes a full digit
     advance and "$2,000" renders as "$2 , 000". Keep tnum on schedule/step numerals. */
  .pricing-big .amt{ color:var(--accent-ink); }
  .pricing-sub{ max-width:60ch; margin-bottom:0; }

  /* ---------- Why ---------- */
  .why-split{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:48px;
    align-items:center;
  }
  .why-body{ max-width:66ch; }
  .why-body p{ font-size:18px; color:var(--ink-2); }
  .why-body p:last-child{ margin-bottom:0; }
  .why-media{ margin:0; }
  .why-media img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--line);
    filter:grayscale(1) contrast(1.03);
  }

  /* ---------- Contact dark band ---------- */
  .contact{
    background:var(--slate-bg);
    color:var(--on-dark);
    position:relative;
    overflow:hidden;
  }
  .contact > .wrap{ position:relative; z-index:2; }
  .contact-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(1) contrast(1.05);
    z-index:0;
  }
  .contact-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg, rgba(10,45,52,.92) 0%, rgba(10,45,52,.95) 100%);
  }
  .contact h2{ color:var(--on-dark); }
  .contact .rule{ --rule-col:var(--on-dark); }
  .contact p{ color:rgba(245,241,232,.9); max-width:56ch; font-size:18px; }
  .contact .btn{ background:var(--accent); border-color:var(--accent); }
  .contact .btn:hover{ background:var(--accent-hover); }
  .contact-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:18px 26px; margin:8px 0 26px; }
  .contact-cta a.mailaddr,
  .contact-cta a.telno{ color:var(--on-dark); font-weight:600; font-size:17px; word-break:break-word; }
  .contact-cta .sep{ color:var(--on-dark-2); }
  .contact .based{ color:var(--on-dark-2); font-size:15px; margin-bottom:0; }

  /* ---------- Enquiry form (light card on the dark contact ground) ---------- */
  .contact-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
  }
  .contact-copy .contact-cta{ margin:8px 0 22px; }

  .form-card{
    background:var(--paper);
    border-radius:12px;
    padding:32px;
  }
  .form-card h3{ color:var(--petrol); margin-bottom:10px; }

  /* The card sits inside .contact, whose `.contact p` rule (18px, light-on-dark) is more
     specific than a bare .form-* class. Re-assert card typography at the same weight. */
  .contact .form-card p{
    color:var(--ink-2);
    font-size:15px;
    line-height:1.5;
    max-width:none;
  }
  .contact .form-card .form-intro{ margin:0 0 22px; }
  .contact .form-card .form-note{ font-size:13px; color:var(--ink-3); margin:14px 0 0; }
  .contact .form-card .form-note a{ color:var(--petrol-deep); font-weight:600; }
  .contact .form-card .form-status{ font-size:15px; font-weight:600; margin:14px 0 0; }
  .contact .form-card .form-status.ok{ color:var(--petrol-deep); }
  .contact .form-card .form-status.bad{ color:var(--warm-deep); }
  .contact .form-card .form-status:empty{ margin:0; }
  .contact .form-card .form-done p{ margin-bottom:0; }

  .fld{ margin-bottom:16px; }
  .fld-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .fld label{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--ink);
    margin-bottom:6px;
  }
  .fld .req{ color:var(--warm-deep); }
  .fld .opt{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3); }
  .fld input,
  .fld textarea{
    width:100%;
    font-family:var(--font-body);
    font-size:16px;          /* 16px stops iOS zooming the page on focus */
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    padding:11px 13px;
    line-height:1.4;
  }
  .fld textarea{ resize:vertical; min-height:84px; }
  .fld input:focus, .fld textarea:focus{
    outline:2px solid var(--petrol);
    outline-offset:1px;
    border-color:var(--petrol);
  }
  .fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"]{ border-color:var(--warm-deep); }
  .fld .err{ display:block; color:var(--warm-deep); font-size:13px; font-weight:600; margin-top:5px; }

  /* Honeypot: off-canvas rather than display:none, so bots that skip hidden fields still fill it. */
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .form-submit{ width:100%; margin-top:6px; border:0; cursor:pointer; font-family:var(--font-body); }
  .form-submit[disabled]{ opacity:.6; cursor:progress; }

  .form-note{ font-size:13px; color:var(--ink-3); margin:14px 0 0; line-height:1.5; }
  .form-note a{ color:var(--petrol-deep); font-weight:600; }

  /* ---------- File picker + upload progress ---------- */
  .fld input[type="file"]{
    padding:9px 10px;
    font-size:14px;
    background:#fff;
    cursor:pointer;
  }
  .fld input[type="file"]::file-selector-button{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    color:var(--petrol-deep);
    background:var(--petrol-tint);
    border:1px solid #C4D8D8;
    border-radius:5px;
    padding:7px 12px;
    margin-right:12px;
    cursor:pointer;
  }
  .filelist{ list-style:none; margin:10px 0 0; padding:0; }
  .filelist li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:var(--ink-2);
    padding:5px 0;
    border-top:1px solid var(--line);
  }
  .filelist li:first-child{ border-top:0; }
  .filelist .fname{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .filelist .fsize{ flex:none; color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .filelist .fstate{ flex:none; font-weight:700; font-size:12px; color:var(--petrol-deep); min-width:4.5em; text-align:right; }
  .filelist .fstate.bad{ color:var(--warm-deep); }
  .filelist .fbar{
    flex:none;
    width:74px;
    height:4px;
    border-radius:2px;
    background:var(--line);
    overflow:hidden;
  }
  .filelist .fbar span{ display:block; height:100%; width:0; background:var(--petrol); transition:width .2s ease; }

  .form-status{ font-size:15px; font-weight:600; margin:14px 0 0; }
  .form-status.ok{ color:var(--petrol-deep); }
  .form-status.bad{ color:var(--warm-deep); }
  .form-status:empty{ margin:0; }

  .form-done{
    background:var(--petrol-tint);
    border-left:3px solid var(--petrol);
    border-radius:0 8px 8px 0;
    padding:22px 24px;
  }
  .form-done h3{ margin-bottom:8px; }
  .form-done p{ margin-bottom:0; color:var(--ink-2); }

  /* ---------- Footer ---------- */
  footer.site{
    background:var(--paper);
    border-top:1px solid var(--line);
    padding:44px 0;
  }
  footer.site .logo{ font-size:14px; margin-bottom:18px; }
  .foot-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    align-items:center;
    color:var(--ink-3);
    font-size:14px;
  }
  .foot-meta span, .foot-meta a{ color:var(--ink-3); }
  .foot-meta a:hover{ color:var(--ink); }
  .foot-sep{ color:var(--line); }

  /* ---------- Mobile nav ---------- */
  .nav-toggle{ display:none; }

  /* Collapse the nav links to the button-only header before they crowd the wordmark. */
  @media (max-width:1024px){
    .nav-links{ display:none; }
  }

  @media (max-width:900px){
    .contact-split{ grid-template-columns:1fr; gap:36px; }
  }

  @media (max-width:820px){
    .nav-links{ display:none; }
    .nav .logo{ font-size:12px; }
    .nav-right{ gap:12px; }
    .nav .btn-sm{ padding:8px 13px; font-size:13px; }
    .grid-2, .grid-3, .steps{ grid-template-columns:1fr; }
    .why-split{ grid-template-columns:1fr; gap:32px; }
    section{ padding:56px 0; }
    .hero{ padding:56px 0 48px; }
    .trustrow li{
      border-right:0;
      width:100%;
      padding:6px 0;
      border-bottom:1px solid var(--line);
    }
    .trustrow li:last-child{ border-bottom:0; }
  }

  @media (max-width:440px){
    .lbl-full{ display:none; }
    .lbl-short{ display:inline; }
  }

  @media (max-width:520px){
    .fld-row{ grid-template-columns:1fr; gap:0; }
  }

  @media (max-width:400px){
    .wrap{ padding:0 16px; }
    .card{ padding:24px; }
    .btn{ width:100%; text-align:center; }
    .nav .btn-sm{ width:auto; }
    .hero-cta .btn{ width:100%; }
    .form-card{ padding:24px 20px; }
  }