/* =========================================================
   HAUS OF TECHNIQUES — "DRAFTING ROOM" PALETTE
   Loaded last on every page. Remove the <link> to palette.css to revert.

   Drafting Film  #F6F6F3  page / sheet background
   Technical Pen  #121316  text, linework, rules
   Redline        #D42A1F  signature: section numbers, current nav, CTA
   Cyanotype      #1C4F9C  secondary: annotations, links, Blueprint mode (unchanged)
   Trace Blue     #E2EAF5  surface tint: hover fills, image placeholders
   2H Pencil      #8B8E92  dimension / grid lines (not for text)
   Label grey     #66696E  small uppercase labels (darker than pencil so it passes AA)
   Highlighter    #F3D230  key-phrase marker only
========================================================= */
:root{
  --dr-film:#f6f6f3;
  --dr-pen:#121316;
  --dr-red:#d42a1f;
  --dr-cyan:#1c4f9c;
  --dr-trace:#e2eaf5;
  --dr-pencil:#8b8e92;
  --dr-label:#66696e;
  --dr-hl:#f3d230;

  --red:var(--dr-red);
  --ink:var(--dr-pen);
  --paper:var(--dr-film);
  --line:var(--dr-pen);
  --head-bg:#ebebe7;
  --hot-muted:var(--dr-label);
  --hot-soft:var(--dr-trace);
  --hot-soft-2:color-mix(in srgb,var(--dr-cyan) 14%,var(--dr-film));
  --hatch-shadow:repeating-linear-gradient(45deg,var(--dr-pen) 0 1px,transparent 1px 6.4px);
}
/* Blueprint mode keeps its own colours */
html.blueprint{--ink:#fff;--paper:#1c4f9c;--red:#bcd8ff;--line:#fff;--hot-soft:rgba(255,255,255,.08);--hot-soft-2:rgba(255,255,255,.2);--head-bg:rgba(255,255,255,.12)}

/* ---- paper: surfaces that were hard-coded white ---- */
html:not(.blueprint),html:not(.blueprint) body{background:var(--dr-film);color:var(--dr-pen)}
html:not(.blueprint) #header,
html:not(.blueprint) .menu-open .mobile-nav{background:var(--dr-film)}

/* image placeholders while photos load: material hatch on trace blue */
html:not(.blueprint) .m-item,html:not(.blueprint) .card-img,html:not(.blueprint) .g-item{background:var(--hatch-timber),var(--dr-trace)!important}
html:not(.blueprint) .card:nth-child(3n+2) .card-img,html:not(.blueprint) .g-item:nth-child(3n+2),html:not(.blueprint) .m-item:nth-child(3n+2){background:var(--hatch-concrete),var(--dr-trace)!important}
html:not(.blueprint) .card:nth-child(3n) .card-img,html:not(.blueprint) .g-item:nth-child(3n),html:not(.blueprint) .m-item:nth-child(3n){background:var(--hatch-steel),var(--dr-trace)!important}

/* ---- text greys: labels darker for legibility, body copy stays #3a3a3a ---- */
html:not(.blueprint) :is(.hot-num,.hot-wwd-more,.hot-hw-caption,.hot-kicker,.hf-help,.hot-label),
html:not(.blueprint) .hot-sec .ts-k,
html:not(.blueprint) .hot-sec .hot-sec-scale .ts-v{color:var(--dr-label)}

/* ---- cyanotype: drawing annotations and dimension strings ---- */
html:not(.blueprint) .hot-hero-ann g[stroke]{stroke:var(--dr-cyan)}
html:not(.blueprint) .hot-hero-ann .t text{fill:var(--dr-cyan)}

/* ---- highlighter: yellow marker instead of pink ---- */
mark.hl{background-image:linear-gradient(transparent 55%,var(--dr-hl) 55%)}
html.blueprint mark.hl{background-image:linear-gradient(transparent 58%,rgba(255,230,0,.58) 58%)}

/* ---- CTA band: film-white headline on redline ---- */
html:not(.blueprint) .hot-cta-body h2{color:var(--dr-film)}

/* ---- service tiles: one consistent paper colour; hover and open use the same trace blue, open adds depth ---- */
html:not(.blueprint) .hot-wwd-card{background-color:var(--paper)}
@media (hover:hover) and (pointer:fine){
  html:not(.blueprint) .hot-wwd-card:hover,html:not(.blueprint) .hot-wwd--row .hot-wwd-card:hover{background:var(--dr-trace)}
}
html:not(.blueprint) .hot-wwd-card.is-open,
html:not(.blueprint) .hot-wwd-card.is-open:hover{background:var(--dr-trace)!important;box-shadow:inset 0 3px 8px rgba(18,19,22,.10),inset 0 -1px 0 rgba(255,255,255,.6)}
html:not(.blueprint) .hot-wwd-detail{background:var(--dr-trace)!important;box-shadow:inset 0 4px 10px rgba(18,19,22,.08)}

/* ---- full-colour photography (Paper mode). Blueprint keeps its blue-tinted treatment. ---- */
html:not(.blueprint) :is(.card .card-img img,.card:hover .card-img img,.hot-fig img,.g-item img,.m-item img,.about-img img),
html:not(.blueprint) body.homepage .m-item img.is-loaded{filter:none!important}

/* ---- home hero: original drawing outside the section cut; B&W render feathers either side; colour inside ---- */
.hot-hero-color{display:none!important}
html:not(.blueprint) .hot-hero{background:#fff!important}
/* section cut line at 1px */
.hot-hero-cut{background-size:1px 100%,1px 100%!important}
/* wider B&W feather either side of the section cut (was 150px) */
.hot-hero{--feather:calc(210px * var(--fk,0))}

/* ---- one blue for every box fill: Trace Blue ---- */
html:not(.blueprint) .hot-tags li:hover{background:var(--dr-trace)}
/* ---- hatched drop shadow: a line every 6.4px (was 7px) ---- */
html.blueprint{--hatch-shadow:repeating-linear-gradient(45deg,var(--red) 0 1px,transparent 1px 6.4px)}
.hatch-shadow::before{background:var(--hatch-shadow)!important}

/* ---- tiles with a red icon (Services, Available at any time, How we work) use warm grey instead of blue on hover / open / details ---- */
html:not(.blueprint){--dr-grey:#ecebe6}
@media (hover:hover) and (pointer:fine){
  html:not(.blueprint) :is(.hot-wwd-card,.hot-av-addon,.hot-hww-card):has(.hot-icon):hover{background:var(--dr-grey)!important}
}
html:not(.blueprint) .hot-wwd-card:has(.hot-icon).is-open,
html:not(.blueprint) .hot-wwd-card:has(.hot-icon).is-open:hover{background:var(--dr-grey)!important}
html:not(.blueprint) .hot-wwd:has(.hot-icon) .hot-wwd-detail{background:var(--dr-grey)!important}
html:not(.blueprint) .hot-wwd:has(.hot-icon) .hot-wwd-detail .hot-tags li:hover{background:#e2e0d8}