/*
Theme Name:   Digital Blitz — Steel
Theme URI:    https://digitalblitz.co.uk
Description:  Child theme of Kadence for Digital Blitz Ltd. Adds the "Steel" design system (brushed steel, hazard amber, Anton display type) and a bespoke front-page template for the homepage. Kadence's header/footer builder, block editor and existing pages continue to work unchanged.
Author:       Digital Blitz Ltd
Author URI:   https://digitalblitz.co.uk
Template:     kadence
Version:      1.0.4
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  digitalblitz-steel
*/

/* ==========================================================================
   Digital Blitz Ltd — "Steel" design system
   Committed single dark theme (deliberate — not theme-reactive).

   1  tokens        6  strips          11 process
   2  base          7  capability      12 quote
   3  layout        8  build/exploded  13 contact + form
   4  header/nav    9  selected work   14 footer
   5  hero          10 stats           15 utilities + WP blocks
   ========================================================================== */

/* --- 1. tokens ----------------------------------------------------------- */
:root{
  /* surfaces, darkest to lightest */
  --db-void:#0C0D0F;
  --db-steel-900:#141619;
  --db-steel-800:#1B1E22;
  --db-steel-700:#242830;
  --db-edge:#31363F;
  --db-edge-soft:#22262C;

  /* ink */
  --db-zinc:#9AA3AD;
  --db-chalk:#EDEFF2;

  /* accent — hazard amber. One thing at a time. */
  --db-amber:#E39A2B;
  --db-amber-dim:#8A5F1C;
  --db-amber-ink:#17130A;

  /* type */
  --db-display:"Anton","Arial Narrow",Impact,sans-serif;
  --db-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --db-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;

  /* rhythm */
  --db-gutter:clamp(18px,3.6vw,44px);
  --db-section-y:clamp(60px,8vw,110px);
  --db-header-h:74px;
}

/* --- 2. base ------------------------------------------------------------- */
.db-page{
  background:var(--db-void);
  color:var(--db-chalk);
  font-family:var(--db-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.db-page *,.db-page *::before,.db-page *::after{box-sizing:border-box}
html:has(.db-page){scroll-behavior:smooth;scroll-padding-top:calc(var(--db-header-h) + 16px)}
.db-page img,.db-page svg,.db-page video{display:block;max-width:100%}
.db-page p{margin:0}
.db-page ul{margin:0;padding:0;list-style:none}
.db-page a{color:inherit}
.db-page button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.db-page h1,.db-page h2,.db-page h3,.db-page h4{
  margin:0;
  /* Kadence colours headings directly, so inheriting from .db-page loses the
     cascade. Claim it here, in the base layer, so the deliberate overrides
     further down (hero em, the amber contact band) still win on source order. */
  color:var(--db-chalk);
  font-family:var(--db-display);
  font-weight:400;
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.005em;
  text-wrap:balance;
}
.db-page :focus-visible{outline:2px solid var(--db-amber);outline-offset:3px}
.db-page ::selection{background:var(--db-amber);color:var(--db-amber-ink)}

@media (prefers-reduced-motion:reduce){
  html:has(.db-page){scroll-behavior:auto}
  .db-page *,.db-page *::before,.db-page *::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}

/* --- 3. layout ----------------------------------------------------------- */
.db-wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--db-gutter)}
.db-section{padding-block:var(--db-section-y);border-bottom:1px solid var(--db-edge-soft)}

.db-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--db-amber);color:var(--db-amber-ink);
  padding:12px 18px;font-family:var(--db-mono);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
}
.db-skip:focus{left:8px;top:8px}

.db-sec-head{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.db-sec-head h2{font-size:clamp(34px,5.4vw,66px)}
.db-sec-head .db-num{font-family:var(--db-mono);font-size:11px;letter-spacing:.2em;color:var(--db-amber);padding-bottom:8px}
.db-sec-head .db-note{margin-left:auto;max-width:38ch;color:var(--db-zinc);font-size:15px}
@media (max-width:720px){.db-sec-head .db-note{margin-left:0}}

/* --- 4. header / nav ----------------------------------------------------- */
.db-header{
  position:sticky;top:0;z-index:100;
  background:rgba(12,13,15,.92);
  border-bottom:1px solid var(--db-edge-soft);
}
@supports (backdrop-filter:blur(8px)){
  .db-header{background:rgba(12,13,15,.78);backdrop-filter:blur(10px)}
}
/* keep the sticky header clear of the WP admin bar */
.admin-bar .db-header{top:32px}
@media screen and (max-width:782px){.admin-bar .db-header{top:46px}}

.db-header__in{display:flex;align-items:center;gap:30px;height:var(--db-header-h)}

.db-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.db-logo__glyph{
  width:36px;height:36px;background:var(--db-amber);flex-shrink:0;position:relative;
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);
}
/* the bolt is cut out of the plate, not printed on it */
.db-logo__glyph::after{
  content:"";position:absolute;left:10px;top:7px;width:13px;height:22px;background:var(--db-amber-ink);
  clip-path:polygon(100% 0,38% 52%,90% 52%,10% 100%,52% 56%,4% 56%);
}
.db-logo__name{font-family:var(--db-display);font-size:22px;letter-spacing:.06em;line-height:1}
.db-logo__name span{
  display:block;font-family:var(--db-mono);font-size:8px;font-weight:400;
  letter-spacing:.19em;color:var(--db-zinc);margin-top:4px;
}

.db-nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.db-nav a{
  font-family:var(--db-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;color:var(--db-zinc);transition:color .15s;white-space:nowrap;
}
.db-nav a:hover,.db-nav .current-menu-item > a,.db-nav a[aria-current="page"]{color:var(--db-amber)}
.db-nav .db-btn{color:var(--db-amber)}
.db-nav .db-btn:hover{color:var(--db-amber-ink)}

.db-nav-toggle{display:none;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center}
.db-nav-toggle__bars{display:block;width:22px;height:2px;background:var(--db-chalk);position:relative}
.db-nav-toggle__bars::before,.db-nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--db-chalk);
  transition:transform .2s,top .2s;
}
.db-nav-toggle__bars::before{top:-7px}
.db-nav-toggle__bars::after{top:7px}
.db-nav-toggle[aria-expanded="true"] .db-nav-toggle__bars{background:transparent}
.db-nav-toggle[aria-expanded="true"] .db-nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.db-nav-toggle[aria-expanded="true"] .db-nav-toggle__bars::after{top:0;transform:rotate(-45deg)}

@media (max-width:1000px){
  .db-nav{
    position:fixed;inset:var(--db-header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--db-steel-900);border-bottom:1px solid var(--db-edge);
    padding:8px var(--db-gutter) 24px;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .2s ease,opacity .2s ease,visibility .2s;
    max-height:calc(100dvh - var(--db-header-h));overflow-y:auto;
  }
  .admin-bar .db-nav{inset-block-start:calc(var(--db-header-h) + 32px)}
  @media screen and (max-width:782px){.admin-bar .db-nav{inset-block-start:calc(var(--db-header-h) + 46px)}}
  .db-nav[data-open="true"]{transform:translateY(0);opacity:1;visibility:visible}
  .db-nav a{padding:16px 0;border-bottom:1px solid var(--db-edge-soft);font-size:13px}
  .db-nav .db-btn{margin-top:18px;text-align:center;border-bottom:1px solid var(--db-amber)}
  .db-nav-toggle{display:flex}
}

/* --- buttons ------------------------------------------------------------- */
.db-btn{
  display:inline-block;
  font-family:var(--db-mono);font-weight:700;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding:12px 20px;border:1px solid var(--db-amber);color:var(--db-amber);
  background:transparent;transition:background .16s,color .16s,border-color .16s;
}
.db-btn:hover{background:var(--db-amber);color:var(--db-amber-ink)}
.db-btn--fill{background:var(--db-amber);color:var(--db-amber-ink)}
.db-btn--fill:hover{background:var(--db-chalk);border-color:var(--db-chalk);color:var(--db-amber-ink)}
.db-btn--ghost{border-color:var(--db-edge);color:var(--db-chalk)}
.db-btn--ghost:hover{border-color:var(--db-chalk);background:var(--db-steel-800);color:var(--db-chalk)}
.db-btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* --- 5. hero ------------------------------------------------------------- */
.db-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--db-edge-soft)}
/* brushed steel: fine grain at a slight angle over a directional base */
.db-hero::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(94deg,
      rgba(255,255,255,.030) 0px,rgba(255,255,255,.030) 1px,
      transparent 1px,transparent 3px,
      rgba(0,0,0,.22) 3px,rgba(0,0,0,.22) 5px),
    linear-gradient(160deg,var(--db-steel-700) 0%,var(--db-steel-900) 46%,var(--db-void) 100%);
  opacity:.9;
}
.db-hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 12% 0%,rgba(227,154,43,.14),transparent 58%);
}
.db-hero__in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  padding-block:clamp(48px,7vw,96px) clamp(38px,5vw,60px);
}
.db-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--db-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--db-amber);border-left:3px solid var(--db-amber);padding-left:12px;
}
.db-hero h1{font-size:clamp(56px,10.5vw,146px);margin-top:22px;letter-spacing:-.01em}
.db-hero h1 em{font-style:normal;color:var(--db-amber)}
.db-hero h1 .db-outline{display:block;color:transparent;-webkit-text-stroke:1.6px var(--db-zinc)}
@supports not (-webkit-text-stroke:1px red){.db-hero h1 .db-outline{color:var(--db-zinc)}}
.db-hero__sub{margin-top:26px;max-width:52ch;font-size:18px;color:var(--db-zinc)}
.db-hero__sub strong{color:var(--db-chalk);font-weight:600}

/* spec plate — an ID plate stamped on a doorset */
.db-plate{
  background:linear-gradient(150deg,var(--db-steel-800),var(--db-steel-900));
  border:1px solid var(--db-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.35);
  position:relative;
}
.db-plate::before,.db-plate::after{
  content:"";position:absolute;top:11px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5C636D,#20242A);
}
.db-plate::before{left:11px}
.db-plate::after{right:11px}
.db-plate__title{
  font-family:var(--db-mono);font-weight:700;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--db-zinc);
  text-align:center;padding:16px 0 14px;border-bottom:1px solid var(--db-edge);
}
.db-plate__row{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--db-edge-soft);
  font-family:var(--db-mono);font-size:12px;
}
.db-plate__row:last-child{border-bottom:0}
.db-plate__row dt{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--db-zinc)}
.db-plate__row dd{margin:0;color:var(--db-chalk);font-weight:500;text-align:right}
.db-plate__row dd.db-hot{color:var(--db-amber)}

@media (max-width:900px){
  .db-hero__in{grid-template-columns:1fr;padding-block:clamp(36px,8vw,56px) 40px}
}

/* --- 6. strips ----------------------------------------------------------- */
.db-strip{border-bottom:1px solid var(--db-edge-soft);background:var(--db-steel-900)}
.db-strip__track{display:flex;flex-wrap:wrap}
.db-strip__item{
  flex:1 1 auto;padding:15px 22px;border-right:1px solid var(--db-edge-soft);
  font-family:var(--db-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--db-zinc);white-space:nowrap;text-align:center;
}
.db-strip__item:last-child{border-right:0}
.db-strip__item b{color:var(--db-chalk);font-weight:700}

/* --- 7. capability rows -------------------------------------------------- */
.db-rows{border-top:1px solid var(--db-edge)}
.db-row{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.15fr) auto;
  gap:24px;align-items:center;
  padding:26px 8px;border-bottom:1px solid var(--db-edge-soft);
  text-decoration:none;color:inherit;
  transition:background .18s,padding-left .18s;
}
.db-row:hover,.db-row:focus-visible{background:var(--db-steel-900);padding-left:20px}
.db-row:hover h3{color:var(--db-amber)}
.db-row__idx{font-family:var(--db-mono);font-size:12px;color:var(--db-amber-dim);letter-spacing:.1em}
.db-row h3{font-size:clamp(24px,2.8vw,34px);transition:color .18s}
.db-row p{color:var(--db-zinc);font-size:15px}
.db-row__tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.db-tag{
  font-family:var(--db-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--db-zinc);border:1px solid var(--db-edge);padding:4px 8px;white-space:nowrap;
}
@media (max-width:900px){
  .db-row{grid-template-columns:44px 1fr;gap:8px 16px;padding:22px 6px}
  .db-row p{grid-column:2}
  .db-row__tags{grid-column:2;justify-content:flex-start;margin-top:6px}
}

/* --- 8. build / exploded section ---------------------------------------- */
.db-build{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.db-build__viz{
  background:linear-gradient(155deg,var(--db-steel-800),var(--db-void));
  border:1px solid var(--db-edge);
  padding:clamp(20px,3vw,36px);
}
.db-build__viz svg{width:100%;height:auto;max-height:460px;margin-inline:auto}
.db-s-line{stroke:var(--db-zinc);fill:none;stroke-width:1.1}
.db-s-thin{stroke:var(--db-edge);fill:none;stroke-width:1}
.db-s-hot{stroke:var(--db-amber);fill:none;stroke-width:1.4}
.db-s-fill{fill:var(--db-steel-700)}
.db-s-fill2{fill:var(--db-steel-800)}
.db-s-arrow{fill:var(--db-zinc)}
.db-s-txt{font-family:var(--db-mono);font-size:9.5px;fill:var(--db-zinc);letter-spacing:.08em}
.db-s-txt--hot{font-family:var(--db-mono);font-size:9.5px;fill:var(--db-amber);letter-spacing:.08em}

.db-layers{border-top:1px solid var(--db-edge)}
.db-layer{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--db-edge-soft);align-items:baseline}
.db-layer__n{font-family:var(--db-mono);font-size:11px;color:var(--db-amber);min-width:26px;flex-shrink:0}
.db-layer__t{font-weight:600;font-size:16px;min-width:180px}
.db-layer__d{color:var(--db-zinc);font-size:14.5px}
@media (max-width:900px){
  .db-build{grid-template-columns:1fr}
  .db-layer{flex-wrap:wrap;gap:4px 18px}
  .db-layer__t{min-width:0}
}

/* --- 9. selected work ---------------------------------------------------- */
.db-work{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--db-edge-soft);border:1px solid var(--db-edge-soft)}
.db-card{background:var(--db-steel-900);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:background .18s}
.db-card:hover,.db-card:focus-visible{background:var(--db-steel-800)}
.db-card__viz{
  padding:24px;border-bottom:1px solid var(--db-edge-soft);
  background:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:18px 18px;
}
.db-card__viz svg{width:100%;height:auto}
.db-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.db-card h3{font-size:22px;transition:color .18s}
.db-card:hover h3{color:var(--db-amber)}
.db-card p{color:var(--db-zinc);font-size:14.5px}
.db-card__tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.db-card__more{
  font-family:var(--db-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--db-amber);padding-top:12px;
}

/* --- 10. stats ----------------------------------------------------------- */
.db-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--db-edge-soft);border:1px solid var(--db-edge-soft)}
.db-stat{background:var(--db-void);padding:32px 26px}
.db-stat__n{font-family:var(--db-display);font-size:clamp(46px,6vw,76px);line-height:.86;font-variant-numeric:tabular-nums}
.db-stat__n i{font-style:normal;color:var(--db-amber)}
.db-stat__l{font-family:var(--db-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--db-zinc);margin-top:12px}

/* --- 11. process --------------------------------------------------------- */
.db-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;background:var(--db-edge-soft);border:1px solid var(--db-edge-soft)}
.db-step{background:var(--db-steel-900);padding:28px 24px 30px;display:flex;flex-direction:column;gap:12px;position:relative}
.db-step__bar{position:absolute;left:0;top:0;height:3px;width:0;background:var(--db-amber);transition:width .4s ease}
.db-step:hover .db-step__bar{width:100%}
.db-step__st{font-family:var(--db-mono);font-size:11px;letter-spacing:.2em;color:var(--db-amber)}
.db-step h3{font-size:22px}
.db-step p{color:var(--db-zinc);font-size:14.5px}
.db-step__out{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--db-edge-soft);
  font-family:var(--db-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--db-zinc);
}

/* --- 12. quote ----------------------------------------------------------- */
.db-quote{max-width:900px;display:flex;flex-direction:column;gap:20px;margin:0}
/* the reset here is deliberate: Kadence gives blockquote a border, padding,
   italics and its own colour */
.db-quote blockquote{
  margin:0;border:0;padding:0;font-style:normal;color:var(--db-chalk);
  font-family:var(--db-display);font-size:clamp(26px,4vw,50px);
  line-height:1.02;text-transform:uppercase;
}
.db-quote blockquote span{color:var(--db-amber)}
.db-quote figcaption{font-family:var(--db-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--db-zinc)}

/* --- 13. contact + form -------------------------------------------------- */
.db-contact{background:var(--db-amber);color:var(--db-amber-ink);border-bottom:0}
.db-contact__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);
  gap:clamp(28px,5vw,72px);align-items:start;
  padding-block:clamp(48px,7vw,92px);
}
.db-contact h2{font-size:clamp(38px,6.4vw,84px);color:var(--db-amber-ink)}
.db-contact__lede{margin-top:20px;max-width:42ch;color:#3B2E10;font-size:17px}
.db-contact__meta{margin-top:32px;display:grid;gap:16px;font-family:var(--db-mono);font-size:12.5px;color:#3B2E10}
.db-contact__meta dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--db-amber-ink);font-weight:700}
.db-contact__meta dd{margin:0;margin-top:3px}
.db-contact__meta a{color:var(--db-amber-ink)}

/* the form sits on amber, so it inverts back to the dark surface */
.db-form{display:grid;gap:14px;background:var(--db-void);padding:clamp(22px,3vw,32px);color:var(--db-chalk)}
.db-form__title{font-family:var(--db-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--db-zinc)}
.db-field{display:grid;gap:6px}
.db-field label{font-family:var(--db-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--db-zinc)}
.db-field input,.db-field textarea,.db-field select{
  font-family:var(--db-body);font-size:15px;color:var(--db-chalk);
  background:var(--db-steel-900);border:1px solid var(--db-edge);
  padding:12px 14px;width:100%;border-radius:0;
  transition:border-color .15s;
}
.db-field input:focus,.db-field textarea:focus,.db-field select:focus{border-color:var(--db-amber);outline:none}
.db-field textarea{resize:vertical;min-height:104px}
.db-field--row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.db-form__note{font-size:12.5px;color:var(--db-zinc);line-height:1.5}
.db-form button{width:100%;margin-top:4px}
.db-hp{position:absolute;left:-9999px}
@media (max-width:820px){
  .db-contact__in{grid-template-columns:1fr}
  .db-field--row{grid-template-columns:1fr}
}

/* --- 14. footer ---------------------------------------------------------- */
.db-footer{background:var(--db-void);border-top:1px solid var(--db-edge-soft)}
.db-footer__top{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,48px);padding-block:clamp(40px,5vw,64px);
}
.db-footer h4{
  font-family:var(--db-mono);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--db-zinc);margin-bottom:16px;
}
.db-footer ul{display:grid;gap:10px}
.db-footer a{font-size:14.5px;text-decoration:none;color:var(--db-zinc);transition:color .15s}
.db-footer a:hover{color:var(--db-amber)}
.db-footer__blurb{color:var(--db-zinc);font-size:14.5px;max-width:38ch;margin-top:18px}
.db-footer__bottom{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
  padding-block:22px 36px;border-top:1px solid var(--db-edge-soft);
  font-family:var(--db-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--db-zinc);
}
.db-footer__bottom .db-end{margin-left:auto}
@media (max-width:820px){
  .db-footer__top{grid-template-columns:1fr 1fr}
  .db-footer__brand{grid-column:1/-1}
}
@media (max-width:520px){
  .db-footer__top{grid-template-columns:1fr}
}

/* --- 15. utilities + WordPress blocks ------------------------------------ */
.db-visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.db-no-scroll{overflow:hidden}

/* If you later drop blocks into a Steel page, keep them on-palette. */
.db-page .wp-block-button__link{
  background:var(--db-amber);color:var(--db-amber-ink);border-radius:0;
  font-family:var(--db-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
}
.db-page .wp-block-separator{border-color:var(--db-edge-soft);opacity:1}
.db-page .wp-block-table td,.db-page .wp-block-table th{border-color:var(--db-edge-soft)}

/* --- 16. inner pages ----------------------------------------------------- */

/* page hero — quieter than the homepage's, no brushed grain */
.db-phero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--db-edge-soft);
  background:linear-gradient(165deg,var(--db-steel-800) 0%,var(--db-steel-900) 45%,var(--db-void) 100%);
}
.db-phero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(100% 70% at 8% 0%,rgba(227,154,43,.10),transparent 60%);
}
.db-phero__in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);
  gap:clamp(24px,4vw,60px);align-items:end;
  padding-block:clamp(44px,6vw,84px) clamp(32px,4vw,54px);
}
.db-phero h1{font-size:clamp(44px,8vw,104px);margin-top:18px;letter-spacing:-.01em}
.db-phero h1 em{font-style:normal;color:var(--db-amber)}
.db-phero__lede{margin-top:22px;max-width:54ch;font-size:18px;color:var(--db-zinc)}
.db-phero__lede strong{color:var(--db-chalk);font-weight:600}
@media (max-width:880px){.db-phero__in{grid-template-columns:1fr;align-items:start}}

.db-crumb{
  font-family:var(--db-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--db-zinc);display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.db-crumb a{text-decoration:none;color:var(--db-zinc)}
.db-crumb a:hover{color:var(--db-amber)}
.db-crumb span{color:var(--db-amber-dim)}

/* facts rail beside a page hero */
.db-facts{border-top:1px solid var(--db-edge)}
.db-facts div{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--db-edge-soft);
  font-family:var(--db-mono);font-size:12px;
}
.db-facts dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--db-zinc)}
.db-facts dd{margin:0;color:var(--db-chalk);text-align:right}

/* detailed service block */
.db-svc{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,60px);
  padding-block:clamp(36px,5vw,64px);
  border-bottom:1px solid var(--db-edge-soft);
}
.db-svc:last-child{border-bottom:0;padding-bottom:0}
.db-svc__head{align-self:start}
@media (min-width:901px){
  .db-svc__head{position:sticky;top:calc(var(--db-header-h) + 28px)}
}
.db-svc__no{font-family:var(--db-mono);font-size:11px;letter-spacing:.2em;color:var(--db-amber)}
.db-svc h2{font-size:clamp(30px,4vw,48px);margin-top:12px}
.db-svc__intro{margin-top:18px;color:var(--db-zinc);font-size:16px;max-width:42ch}
.db-svc__body{display:grid;gap:26px;align-content:start}
.db-subhead{
  font-family:var(--db-mono);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--db-zinc);margin-bottom:14px;
}
@media (max-width:900px){.db-svc{grid-template-columns:1fr}}

/* checklist — the bullet is the logo's cut corner */
.db-list{display:grid;gap:11px}
.db-list li{display:flex;gap:13px;font-size:15.5px;line-height:1.5;color:var(--db-chalk)}
.db-list li::before{
  content:"";width:9px;height:9px;margin-top:7px;flex-shrink:0;background:var(--db-amber);
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);
}

/* label / value table */
.db-deftable{border-top:1px solid var(--db-edge)}
.db-deftable > div{
  display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:20px;
  padding:13px 0;border-bottom:1px solid var(--db-edge-soft);
}
.db-deftable dt{font-family:var(--db-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--db-zinc)}
.db-deftable dd{margin:0;font-size:15px;color:var(--db-chalk)}
@media (max-width:560px){.db-deftable > div{grid-template-columns:1fr;gap:4px}}

/* engagement models */
.db-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--db-edge-soft);border:1px solid var(--db-edge-soft)}
.db-model{background:var(--db-steel-900);padding:28px 24px 30px;display:flex;flex-direction:column;gap:12px}
.db-model--feature{background:var(--db-steel-800);box-shadow:inset 0 3px 0 var(--db-amber)}
.db-model__tag{font-family:var(--db-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--db-amber)}
.db-model h3{font-size:24px}
.db-model p{color:var(--db-zinc);font-size:15px}
.db-model__best{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--db-edge-soft);
  font-size:13.5px;color:var(--db-zinc);
}
.db-model__best b{color:var(--db-chalk);font-weight:600;display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px;font-family:var(--db-mono)}

/* FAQ */
.db-faq{border-top:1px solid var(--db-edge)}
.db-faq details{border-bottom:1px solid var(--db-edge-soft)}
.db-faq summary{
  list-style:none;cursor:pointer;padding:20px 0;
  display:flex;gap:18px;align-items:center;
  font-family:var(--db-display);text-transform:uppercase;
  font-size:clamp(18px,2.2vw,25px);line-height:1.1;transition:color .15s;
}
.db-faq summary::-webkit-details-marker{display:none}
.db-faq summary::after{
  content:"+";margin-left:auto;color:var(--db-amber);
  font-family:var(--db-mono);font-size:19px;line-height:1;flex-shrink:0;
}
.db-faq details[open] summary::after{content:"\2013"}
.db-faq summary:hover{color:var(--db-amber)}
.db-faq .db-faq__a{padding:0 0 24px;color:var(--db-zinc);max-width:70ch;font-size:15.5px}

/* project index row */
.db-index{border-top:1px solid var(--db-edge)}
.db-proj{
  display:grid;grid-template-columns:minmax(0,270px) minmax(0,1.35fr) minmax(0,.75fr);
  gap:clamp(20px,3vw,44px);align-items:center;
  padding-block:clamp(24px,3vw,36px);border-bottom:1px solid var(--db-edge-soft);
}
.db-proj__viz{
  border:1px solid var(--db-edge);padding:16px;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:16px 16px;
}
.db-proj__viz svg{width:100%;height:auto}
.db-proj__meta{font-family:var(--db-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--db-zinc);display:flex;gap:14px;flex-wrap:wrap}
.db-proj__meta b{color:var(--db-amber);font-weight:400}
.db-proj h3{font-size:clamp(23px,2.6vw,31px);margin-top:10px}
.db-proj p{color:var(--db-zinc);font-size:15px;margin-top:11px;max-width:52ch}
.db-proj__side{display:grid;gap:14px;align-content:center}
.db-proj__tags{display:flex;gap:7px;flex-wrap:wrap}
@media (max-width:980px){
  .db-proj{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .db-proj__side{grid-column:2}
}
@media (max-width:680px){
  .db-proj{grid-template-columns:1fr}
  .db-proj__side{grid-column:1}
}

/* filter chips */
.db-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px;align-items:center}
.db-filters__label{font-family:var(--db-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--db-zinc);margin-right:6px}
.db-filter{
  font-family:var(--db-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--db-edge);padding:8px 14px;color:var(--db-zinc);
  transition:background .15s,border-color .15s,color .15s;
}
.db-filter:hover{border-color:var(--db-chalk);color:var(--db-chalk)}
.db-filter[aria-pressed="true"]{background:var(--db-amber);border-color:var(--db-amber);color:var(--db-amber-ink)}
.db-filter-empty{padding:34px 0;color:var(--db-zinc);font-size:15px}

/* what happens next */
.db-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(20px,3vw,38px)}
.db-next__item{border-top:2px solid var(--db-amber);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.db-next__t{font-family:var(--db-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--db-amber)}
.db-next h3{font-size:20px}
.db-next p{color:var(--db-zinc);font-size:15px}

/* generic panel + two-column split for the contact page */
.db-panel{border:1px solid var(--db-edge);background:var(--db-steel-900);padding:clamp(22px,3vw,32px)}
.db-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:880px){.db-split{grid-template-columns:1fr}}

/* the enquiry form when it sits on the dark ground rather than the amber band */
.db-form--dark{border:1px solid var(--db-edge);background:var(--db-steel-900)}

/* the projects filter toggles [hidden]; .db-proj sets display:grid, so it needs
   an explicit rule to lose that fight */
.db-proj[hidden],.db-filter-empty[hidden]{display:none}

/* --- 17. prose — legal and long-form pages -------------------------------- */
.db-prose{max-width:980px;border-top:1px solid var(--db-edge)}
.db-prose__block{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;
  padding-block:clamp(26px,3vw,38px);border-bottom:1px solid var(--db-edge-soft);
}
.db-prose__block h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:14px}
.db-prose__block p{color:var(--db-zinc);font-size:16px;max-width:68ch;line-height:1.7}
.db-prose__block p + p{margin-top:12px}
@media (max-width:620px){.db-prose__block{grid-template-columns:1fr;gap:8px}}

.db-footer__bottom a.db-footer__legal{
  font-family:var(--db-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--db-zinc);
}
.db-footer__bottom a.db-footer__legal:hover{color:var(--db-amber)}