/* ============================================================
   DESIGNERS-DEN — "BLUEPRINT & STEEL"
   Design tokens. Every value below maps to a Divi global
   setting or a CSS variable in the child theme.
   ============================================================ */
:root{
  /* Colour ------------------------------------------------- */
  --ink:            #0B1220;   /* body text, headlines          */
  --ink-soft:       #47566B;   /* secondary text                */
  --prussian:       #10365E;   /* brand blue, dark sheets       */
  --prussian-deep:  #071E36;   /* deepest ground                */
  --prussian-line:  #3E6E9E;   /* hairlines on dark             */
  --paper:          #EEF0F3;   /* page ground — drafting paper  */
  --chalk:          #F8FAFC;   /* raised cards                  */
  --rule:           #C2CCD8;   /* hairlines on light            */
  --amber:          #E8A317;   /* signal. CTAs only.            */

  /* Type --------------------------------------------------- */
  --display: "Archivo", system-ui, sans-serif;
  --body:    "Literata", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Rhythm ------------------------------------------------- */
  --sheet-y:  clamp(4.5rem, 9vw, 8.5rem);
  --gutter:   clamp(1.15rem, 4vw, 3rem);
  --rail:     clamp(0px, 6vw, 88px);
  --measure:  68ch;
  --radius:   2px;                       /* drawings aren't round */
  --dur:      .7s;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

/* Reset -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.68;
  overflow-x:hidden;           /* belt-and-braces against overflow */
  font-optical-sizing:auto;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

/* Drafting grid — the page ground is graph paper. Very low
   contrast so it reads as texture, never as decoration.     */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(16,54,94,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,54,94,.055) 1px, transparent 1px);
  background-size:44px 44px;
}
main,header,footer{position:relative;z-index:1}

/* Accessibility ------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--amber);color:var(--ink);
  padding:.7rem 1.1rem;font-family:var(--mono);font-size:.8rem;
}
.skip:focus{left:0}
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

/* ============================================================
   TYPE SCALE
   Archivo is set tight and wide. Literata carries all prose.
   IBM Plex Mono handles every label — it is the drawing's
   annotation layer and never used for reading copy.
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,1.3rem + 5.1vw,5.1rem);font-variation-settings:"wdth" 96}
h2{font-size:clamp(1.85rem,1.25rem + 2.6vw,3.2rem)}
h3{font-size:clamp(1.15rem,1.03rem + .5vw,1.42rem);letter-spacing:-.016em}
p{margin:0 0 1.15em}

.label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 1.4rem;
  display:flex;align-items:center;gap:.7rem;
}
.label::after{
  content:"";flex:1;height:1px;background:var(--rule);
}
.lede{
  font-size:clamp(1.06rem,1rem + .42vw,1.32rem);
  line-height:1.58;
  color:var(--ink-soft);
}

/* ============================================================
   SHEET — every section is a drawing sheet with a left rail
   ============================================================ */
.sheet{
  padding-block:var(--sheet-y);
  padding-inline:var(--gutter);
  border-top:1px solid var(--rule);
}
.sheet__inner{
  max-width:1220px;margin:0 auto;
  padding-left:var(--rail);
  position:relative;
}
/* The rail: a hairline down the left edge of every sheet,
   the way a drawing sheet carries a margin line.            */
.sheet__inner::before{
  content:"";
  position:absolute;left:calc(var(--rail) / 2);top:.35rem;bottom:0;
  width:1px;background:var(--rule);
}
@media (max-width:720px){
  .sheet__inner::before{display:none}
}

.sheet--dark{
  background:var(--prussian);
  color:#DCE6F0;
  border-top-color:var(--prussian-line);
}
.sheet--dark .label{color:#8FB0CE}
.sheet--dark .label::after{background:var(--prussian-line)}
.sheet--dark h2,.sheet--dark h3{color:#fff}
.sheet--dark .lede{color:#B9CDDF}
.sheet--dark .sheet__inner::before{background:var(--prussian-line)}

/* ============================================================
   HEADER
   ============================================================ */
.masthead{
  position:sticky;top:0;z-index:40;
  background:rgba(238,240,243,.92);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rule);
}
.masthead__inner{
  max-width:1220px;margin:0 auto;
  padding:.85rem var(--gutter);
  display:flex;align-items:center;gap:1.5rem;
}
.wordmark{
  font-family:var(--display);
  font-weight:700;font-size:1.06rem;
  letter-spacing:-.03em;
  text-decoration:none;
  font-variation-settings:"wdth" 108;
  white-space:nowrap;
}
.wordmark span{color:var(--amber)}
.nav{margin-left:auto;display:flex;gap:1.75rem}
.nav a{
  font-family:var(--mono);font-size:.76rem;
  letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);
  padding-block:.3rem;
  transition:color .2s;
}
.nav a:hover{color:var(--ink)}
@media (max-width:880px){ .nav{display:none} }

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;
  padding:.78rem 1.3rem;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  background:var(--ink);color:var(--paper);
  transition:transform .18s var(--ease), background .18s;
  white-space:nowrap;
}
.btn:hover{background:var(--prussian);border-color:var(--prussian);transform:translateY(-2px)}
.btn--signal{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn--signal:hover{background:#F5B32B;border-color:#F5B32B}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.sheet--dark .btn--ghost{color:#DCE6F0;border-color:var(--prussian-line)}
.sheet--dark .btn--ghost:hover{border-color:#fff;color:#fff}
.masthead .btn{padding:.62rem 1.05rem;font-size:.72rem}
@media (max-width:560px){ .masthead .btn{display:none} }

/* ============================================================
   HERO — the orchestrated moment. Construction lines plot in,
   then the headline rises line by line, then the spec strip.
   ============================================================ */
.hero{
  padding-block:clamp(3.5rem,7vw,7rem) var(--sheet-y);
  padding-inline:var(--gutter);
  position:relative;overflow:hidden;
}
.hero__inner{
  max-width:1220px;margin:0 auto;
  padding-left:var(--rail);position:relative;
}
.hero__plot{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
}
.hero__plot line,.hero__plot circle{
  stroke:var(--prussian);
  stroke-width:1;
  opacity:.28;
  vector-effect:non-scaling-stroke;
}
.hero__plot circle{fill:none}

.hero h1{margin-bottom:1.6rem;max-width:15ch}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block}
.hero__lede{max-width:56ch;margin-bottom:2.2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:3.4rem}

/* Spec strip — the drawing's dimension line */
.spec{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--rule);
}
.spec div{
  padding:1.05rem 1.1rem 1.05rem 0;
  border-right:1px solid var(--rule);
}
.spec div:last-child{border-right:0}
.spec dt{
  font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.35rem;
}
.spec dd{
  margin:0;font-family:var(--display);
  font-size:1.32rem;font-weight:600;letter-spacing:-.02em;
}
@media (max-width:600px){
  .spec div{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .spec div:last-child{border-bottom:0}
}

/* ============================================================
   CLIENT LINE — names as type. No logo files required, and it
   reads better than a row of mismatched grey PNGs.
   ============================================================ */
.clients{
  display:flex;flex-wrap:wrap;
  gap:.6rem 2.1rem;align-items:baseline;
  margin-top:.4rem;
}
.clients li{
  list-style:none;
  font-family:var(--display);
  font-weight:600;font-size:clamp(.95rem,.88rem + .3vw,1.14rem);
  letter-spacing:-.018em;
  color:#fff;opacity:.92;
}
.clients li span{
  font-family:var(--mono);font-size:.62rem;font-weight:400;
  letter-spacing:.1em;color:#7FA3C4;margin-left:.4rem;
  vertical-align:.35em;
}

/* ============================================================
   CAPABILITIES — spec blocks. Label/value pairs, because that
   is how a spec sheet reads AND how schema is structured.
   ============================================================ */
.caps{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  background:var(--rule);
  border:1px solid var(--rule);
  margin-top:2.6rem;
}
.cap{
  background:var(--chalk);
  padding:1.9rem 1.6rem 1.7rem;
  transition:background .25s var(--ease);
  position:relative;
}
.cap:hover{background:#fff}
.cap__no{
  font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;color:var(--amber);
  display:block;margin-bottom:.9rem;
}
.cap h3{margin-bottom:.7rem}
.cap p{font-size:.95rem;color:var(--ink-soft);margin-bottom:1.1rem}
.cap ul{
  margin:0;padding:0;list-style:none;
  border-top:1px solid var(--rule);padding-top:.9rem;
}
.cap li{
  font-family:var(--mono);font-size:.71rem;
  letter-spacing:.04em;color:var(--ink-soft);
  padding:.28rem 0;
}
.cap li::before{content:"— ";color:var(--rule)}

/* ============================================================
   WORK — THE SIGNATURE ELEMENT.
   Each project renders as a drawing title block: bordered,
   monospaced, label/value rows. This is the thing the page is
   remembered by, and its structure is schema-shaped.
   ============================================================ */
.work{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  margin-top:2.6rem;
}
.tb{
  border:1px solid var(--prussian-line);
  background:var(--prussian-deep);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), border-color .3s;
}
.tb:hover{transform:translateY(-4px);border-color:var(--amber)}

/* Drawing surface. Replace this block with a real screenshot:
   <img src="/wp-content/uploads/.../msp-2.png" alt="…">      */
.tb__plate{
  aspect-ratio:16/10;
  background:
    linear-gradient(rgba(62,110,158,.16) 1px,transparent 1px) 0 0/100% 26px,
    linear-gradient(90deg,rgba(62,110,158,.16) 1px,transparent 1px) 0 0/26px 100%,
    var(--prussian);
  display:grid;place-items:center;
  border-bottom:1px solid var(--prussian-line);
  overflow:hidden;
}
.tb__plate span{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);
  font-variation-settings:"wdth" 118;
  letter-spacing:-.04em;color:#fff;opacity:.24;
}
.tb__plate img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* Credits — verifiable third-party attribution */
.creds{margin-top:2.5rem;border-top:1px solid var(--rule)}
.cred{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr) 3.6rem;
  gap:1rem 1.3rem;align-items:center;
  padding:1.05rem 0;border-bottom:1px solid var(--rule);
}
.cred__c{
  font-family:var(--display);font-weight:600;
  font-size:1rem;letter-spacing:-.015em;line-height:1.25;
}
.cred__c small{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.3rem;
}
.cred__q{
  font-family:var(--mono);font-size:.73rem;line-height:1.5;
  color:var(--ink);background:var(--chalk);
  border:1px solid var(--rule);border-left:2px solid var(--amber);
  padding:.6rem .8rem;border-radius:var(--radius);
}
.cred__y{
  font-family:var(--mono);font-size:.73rem;
  color:var(--amber);text-align:right;
}
@media (max-width:760px){
  .cred{grid-template-columns:1fr 3.2rem}
  .cred__q{grid-column:1 / -1}
}

.tb__body{padding:1.25rem 1.3rem 1.4rem}
.tb__body h3{color:#fff;margin-bottom:.85rem}
.tb__rows{margin:0;font-family:var(--mono);font-size:.71rem;line-height:1.5}
.tb__rows > div{
  display:grid;grid-template-columns:5.4rem 1fr;
  gap:.8rem;padding:.42rem 0;
  border-top:1px solid rgba(62,110,158,.42);
}
.tb__rows dt{color:#7FA3C4;letter-spacing:.1em;text-transform:uppercase;font-size:.63rem;padding-top:.1rem}
.tb__rows dd{margin:0;color:#DCE6F0}

/* ============================================================
   PROCESS — a real sequence, so it is genuinely numbered
   ============================================================ */
.steps{
  margin-top:2.6rem;
  border-top:1px solid var(--rule);
}
.step{
  display:grid;
  grid-template-columns:4.2rem minmax(0,1fr) minmax(0,1.35fr);
  gap:1.5rem;
  padding:1.7rem 0;
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.step__no{
  font-family:var(--mono);font-size:.74rem;
  color:var(--amber);letter-spacing:.1em;padding-top:.32rem;
}
.step h3{margin:0}
.step p{margin:0;font-size:.95rem;color:var(--ink-soft)}
@media (max-width:760px){
  .step{grid-template-columns:3.2rem 1fr;gap:.9rem 1rem}
  .step p{grid-column:2}
}

/* ============================================================
   ANSWERS — answer-first blocks. The opening sentence of each
   is written to be liftable verbatim by an AI system.
   ============================================================ */
.qa{
  margin-top:2.4rem;
  border-top:1px solid var(--rule);
  max-width:860px;
}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{
  cursor:pointer;list-style:none;
  padding:1.35rem 2.4rem 1.35rem 0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.02rem,.97rem + .28vw,1.2rem);
  letter-spacing:-.015em;
  position:relative;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";
  position:absolute;right:.2rem;top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);font-size:1.15rem;
  color:var(--amber);
  transition:transform .25s var(--ease);
}
.qa details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa .ans{padding:0 0 1.5rem;color:var(--ink-soft);font-size:.98rem}
.qa .ans p:last-child{margin-bottom:0}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.close__grid{
  display:grid;gap:2.6rem;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:end;
}
@media (max-width:820px){ .close__grid{grid-template-columns:1fr} }
.close h2{max-width:16ch;margin-bottom:1.2rem}
.contact-rows{margin:0;font-family:var(--mono);font-size:.78rem}
.contact-rows > div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-top:1px solid var(--prussian-line);
}
.contact-rows dt{color:#8FB0CE;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem}
.contact-rows dd{margin:0;color:#fff;text-align:right}
.contact-rows a{text-decoration:none;border-bottom:1px solid var(--amber)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--prussian-deep);color:#9FBAD2;
  padding:3.2rem var(--gutter) 2.2rem;
  border-top:1px solid var(--prussian-line);
}
.foot__inner{max-width:1220px;margin:0 auto}
.foot__cols{
  display:grid;gap:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  padding-bottom:2.2rem;border-bottom:1px solid var(--prussian-line);
}
.foot h4{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  color:#6F93B4;margin:0 0 1rem;
}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin-bottom:.6rem}
.foot a{
  font-size:.92rem;text-decoration:none;color:#CFE0EE;
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.foot a:hover{border-bottom-color:var(--amber)}
.foot__base{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  padding-top:1.5rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;
}

/* ============================================================
   MOTION
   Reveals are opacity + a short translate only — both
   compositor properties, so no layout thrash. Nothing here
   moves more than 18px.
   ============================================================ */
.rise{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rise.in{opacity:1;transform:none}
.rise[data-d="1"]{transition-delay:.08s}
.rise[data-d="2"]{transition-delay:.16s}
.rise[data-d="3"]{transition-delay:.24s}
.rise[data-d="4"]{transition-delay:.32s}

/* Hero load sequence */
.hero h1 .ln > span{transform:translateY(105%);transition:transform .82s var(--ease)}
.hero.on h1 .ln:nth-child(1) > span{transform:none;transition-delay:.16s}
.hero.on h1 .ln:nth-child(2) > span{transform:none;transition-delay:.27s}
.hero.on h1 .ln:nth-child(3) > span{transform:none;transition-delay:.38s}
.hero__lede,.hero__actions,.hero .spec{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease) .5s, transform .7s var(--ease) .5s;
}
.hero.on .hero__lede,.hero.on .hero__actions,.hero.on .spec{opacity:1;transform:none}
.hero.on .hero__actions{transition-delay:.6s}
.hero.on .spec{transition-delay:.7s}

/* Construction lines plot in, like a pen plotter drawing */
.hero__plot line,.hero__plot circle{
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.5s var(--ease) .1s;
}
.hero.on .hero__plot line,.hero.on .hero__plot circle{stroke-dashoffset:0}

/* Reduced motion — everything resolves instantly, nothing is
   hidden, nothing animates. A clean static document.        */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rise{opacity:1;transform:none}
  .hero h1 .ln > span{transform:none}
  .hero__lede,.hero__actions,.hero .spec{opacity:1;transform:none}
  .hero__plot line,.hero__plot circle{stroke-dashoffset:0}
}
/* ============================================================
   MOBILE NAVIGATION
   The prototype hid the nav below 880px with nothing behind it.
   This is the real menu: a full-height panel, focus-managed,
   closes on Escape or on selecting a link.
   ============================================================ */
.nav-toggle{
  display:none;margin-left:auto;
  align-items:center;gap:.55rem;
  background:none;border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:.55rem .8rem;cursor:pointer;
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.nav-toggle__bars{position:relative;width:16px;height:10px;display:block}
.nav-toggle__bars i{
  position:absolute;left:0;right:0;height:1.5px;background:var(--ink);
  transition:transform .28s var(--ease), opacity .2s;
}
.nav-toggle__bars i:nth-child(1){top:0}
.nav-toggle__bars i:nth-child(2){top:4.25px}
.nav-toggle__bars i:nth-child(3){top:8.5px}
[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-4.25px) rotate(-45deg)}

.nav-panel{
  position:fixed;inset:0;z-index:60;
  background:var(--prussian-deep);
  padding:5.5rem var(--gutter) 2rem;
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  transition:transform .42s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
.nav-panel[data-open="true"]{transform:none}
.nav-panel ul{list-style:none;margin:0;padding:0}
.nav-panel li{border-bottom:1px solid var(--prussian-line)}
.nav-panel a{
  display:block;padding:1.05rem 0;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:600;
  font-size:1.3rem;letter-spacing:-.02em;
}
.nav-panel .nav-panel__cta{margin-top:2rem}
.nav-panel__meta{
  margin-top:auto;padding-top:2rem;
  font-family:var(--mono);font-size:.72rem;color:#7FA3C4;
}
.nav-close{
  position:absolute;top:1.1rem;right:var(--gutter);
  background:none;border:1px solid var(--prussian-line);
  border-radius:var(--radius);color:#fff;cursor:pointer;
  padding:.55rem .8rem;
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;
}
body.dd-nav-open{overflow:hidden}

@media (max-width:880px){
  .nav-toggle{display:inline-flex}
}
@media (min-width:881px){
  .nav-panel{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav-panel{transition:none}
}

/* WordPress core alignment + editor classes */
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{margin-inline:auto;display:block}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
}