/* ============ DAK BUILDS · preview overrides ============
   Cream studio palette so the halftone head and the poster-colour stack sit on the brand cream.
   Everything else (nav, headline, contact card, footer) inherits style.css. */
:root {
  --bg: #F5F0E8;
  --bg-raise: #EDE7DC;
  --line: #D6CEC0;
  --text: #2B3F5C;        /* navy ink, the halftone colour */
  --muted: #5F6B80;
  --blue: #4A7FB5;        /* dakbuilds blue, the accent on cream */
  --blue-deep: #4A7FB5;
  --maroon: #5C1A1B;
  /* stack geometry (from the deck prototype) */
  --ink: #111111;
  --w: min(520px, calc((100vw - 32px) / 1.42));
  --h: calc(var(--w) * .25);
  --d: calc(var(--w) * .7);
  --gap: calc(var(--w) * .075);
}
::selection { background: var(--blue); color: #fff; }
.nav { background: rgba(245, 240, 232, 0.97); }
.nav-logo { color: var(--text); }
.contact-card { background: #FBF8F2; box-shadow: 0 0 28px rgba(74, 127, 181, 0.10); }
.btn-fill { background: var(--text); color: var(--bg); }
.btn-fill:hover { color: #fff; }
.btn-line:hover { color: var(--text); }
.form-status.error { color: #B3302A; }
.footer-note { color: #8A8477; }

/* ---- hero: full-bleed stage, head on the right, headline on the left ---- */
.hero { height: calc(100vh - 63px); min-height: 620px; max-height: 1000px; } /* 63px = nav; the whole head shows above the fold */
.hero canvas.face { position: absolute; inset: 0; width: 100%; height: 100%; bottom: auto; display: block; }
.hero-inner { min-height: 0; height: 100%; }
.hero-title { max-width: 760px; font-size: clamp(40px, 5.6vw, 82px); } /* capped so ENGINEERING BRANDS stays on one line beside the head */
@media (min-width: 961px) { .hero-inner { align-items: flex-end; } .hero-title { margin-right: 24px; width: max-content; } } /* shrink-wrap so the right-aligned headline hugs the right column, clear of the head */ /* headline on the right, where the head is looking */
@media (max-width: 960px) {
  .hero { height: auto; max-height: none; min-height: 0; display: flex; flex-direction: column; }
  .hero-inner { padding: 40px 18px 8px; height: auto; order: 1; }
  .hero canvas.face { position: relative; inset: auto; height: 62vh; min-height: 400px; order: 2; }
}

/* ---- services: title left, stack right ---- */
.services { max-width: 1180px; }
.services-grid { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 48px; align-items: start; }
.services-copy { padding-top: 40px; position: sticky; top: 90px; }
.services .section-title { margin-bottom: 16px; font-size: clamp(44px, 5vw, 68px); } /* fits on one line in the copy column */
.services .section-sub { margin-bottom: 8px; max-width: 420px; }
.cue { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cue svg { width: 18px; height: 18px; }
.touch-only { display: none; }
html.touch .touch-only { display: inline; }
html.touch .mouse-only { display: none; }
/* no JS / reduced motion: everything is visible, nothing waits on a scroll trigger */
html:not(.js) .reveal { opacity: 1; transform: none; }
html:not(.js) .stack .blk { opacity: 1; translate: 0; }
@media (prefers-reduced-motion: reduce) { .stack .blk { opacity: 1; translate: 0; transition: none; } }
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; gap: 24px; }
  .services-copy { padding-top: 0; position: static; }
}

/* ---- the stack (verbatim from the deck prototype; Inter swapped for the site's mono/display type) ---- */
  /* ---- the stack: six identical oblique boxes, Strelka-poster style ---- */
  .stack { display:flex; flex-direction:column-reverse; gap:var(--gap); /* no perspective: parallel projection like the poster; reversed so each slab paints over the top face of the one below */
           padding: calc(var(--h) * .35) calc(var(--w) * .36) calc(var(--h) * .2) calc(var(--d) * .22); }
  .blk { position:relative; width:var(--w); height:var(--h); transform-style:preserve-3d; cursor:pointer; -webkit-tap-highlight-color:transparent;
         transform: rotateX(-9deg) rotateY(-30deg);
         transition: transform .8s cubic-bezier(.2,.8,.2,1); }
  .blk > * { position:absolute; top:0; left:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-sizing:border-box;
            --kl: 2px solid #111; } /* thin black keyline, like the poster. Each physical edge is drawn by ONE face, and faces seen at an angle get thicker borders so the projected line stays 2px:
               top face is viewed at 9deg (rotateX) so its near/far edges need 2px / sin(9deg) = 13px; side faces are viewed at 30deg so their vertical edges need 2px / sin(30deg) = 4px */
  .blk .front { border: var(--kl); border-top: 0; border-right: 0; }  /* top edge = top face, right edge = side face */
  .blk .back  { border: var(--kl); border-top: 0; border-right: 0; }  /* (mirrored) top edge = top face, DOM-right = seam with lside */
  .blk .side, .blk .lside { border: var(--kl); border-top: 0; border-left-width: 4px; border-right-width: 4px; }
  .blk .top   { border: var(--kl); border-top-width: 13px; border-bottom-width: 13px; }
  .blk .bottom{ border: 0; }
  .blk .front { width:var(--w); height:var(--h); background:var(--c); color:var(--fg);
                transform: translateZ(calc(var(--d) / 2)); display:flex; align-items:center; padding:0 calc(var(--w) * .045); overflow:hidden; }
  .blk .side  { width:var(--d); height:var(--h); background:var(--c-dk); color:var(--fg);
                transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); transform-origin:50% 50%;
                left: calc((var(--w) - var(--d)) / 2); display:flex; align-items:center; padding: 0 calc(var(--w) * .04); }
  .blk .top   { width:var(--w); height:var(--d); background:var(--c-lt);
                transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); top: calc((var(--h) - var(--d)) / 2); }
  .blk .bottom{ width:var(--w); height:var(--d); background:var(--c-dk);
                transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); top: calc((var(--h) - var(--d)) / 2); }
  .blk .back  { width:var(--w); height:var(--h); background:var(--c-dk); color:var(--fg); transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
                display:flex; align-items:center; padding: 0 calc(var(--w) * .045); }
  .blk .lside { width:var(--d); height:var(--h); background:var(--c-dk); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); left: calc((var(--w) - var(--d)) / 2); }
  .front .name { font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:-.055em; line-height:.9; white-space:nowrap;
                 font-size: var(--name-fs, calc(var(--h) * .72)); } /* --name-fs is ONE shared size, set in JS so every slab's title matches */
  .side .big { font-family:var(--display); font-weight:400; letter-spacing:-.05em; line-height:.9; font-size: calc(var(--h) * .72); }
  .back .desc { font-size: max(12px, calc(var(--w) * .026)); font-weight:700; line-height:1.3; margin:0 0 calc(var(--h) * .12); text-wrap:pretty; } /* Space Mono is wider than the prototype's Inter, so the body copy runs smaller */
  .back .k { position:absolute; bottom: calc(var(--h) * .07); right: calc(var(--w) * .04); font-size: max(9px, calc(var(--h) * .09)); letter-spacing:.14em; text-transform:uppercase; color:var(--fg); opacity:.8; }
  /* hover / open: swing the box so the side face reads straight on */
  .blk:hover, .blk.open, .blk:focus-visible { transform: rotateX(-9deg) rotateY(-210deg); } /* a half turn: the back face (description) reads straight on, side face now on the left */
  .blk:focus-visible { outline:none; }
  /* drop-in build */
  /* blocks sit in place from first paint (no scroll-in build): the yellow slab must peek above the fold */

  @media (max-width:900px) {
    :root { --h: calc(var(--w) * .32); --gap: calc(var(--w) * .06); } /* taller slabs so the description has room on a phone */
    .back .desc { font-size: max(12px, calc(var(--w) * .048)); line-height:1.3; margin:0 0 calc(var(--h) * .08); align-self:flex-start; padding-top: calc(var(--h) * .12); }
    .back .k { bottom: calc(var(--h) * .05); }
    .blk { transition: transform .8s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1); }
    .blk.open { --h: calc(var(--w) * .58); }               /* an open block grows so the description fits on a phone */
  }

/* 10-05: contact paragraph matches the contact card width + left edge */
.contact .section-sub { max-width: 760px; text-align: left; }