/*
Theme Name: Deutz Consulting
Theme URI: https://deutzconsulting.com
Author: Danny Deutz
Description: Custom single-page theme for Deutz Consulting - solution architecture, advisory and AI enablement.
Version: 1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deutz-consulting
*/

:root{
    --bg:#fbfaf8;
    --bg-alt:#e9eeff;
    --ink:#0f1730;
    --ink-soft:#525d7d;
    --accent:#2258ff;
    --accent-soft:#dfe7ff;
    --hot:#ff4d1f;
    --hot-soft:#ffe7de;
    --deep:#0a1233;
    --line:rgba(15,23,48,0.14);
    --display:'Fraunces', Georgia, serif;
    --brand:'Space Grotesk', system-ui, sans-serif;
    --sans:'Inter', system-ui, sans-serif;
  }
  :root[data-theme="dark"]{
    --bg:#070c1c;
    --bg-alt:#131c3d;
    --ink:#eef1fb;
    --ink-soft:#96a2c6;
    --accent:#5d8bff;
    --accent-soft:#152249;
    --hot:#ff7043;
    --hot-soft:#33201a;
    --deep:#040814;
    --line:rgba(238,241,251,0.15);
  }
  *{box-sizing:border-box;}
  html{background:var(--bg);}
  html body.deutz{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
    font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; transition:background .3s,color .3s;}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
    font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; transition:background .3s,color .3s;}
  html body.deutz p{color:var(--ink-soft);}
  html body.deutz a{color:inherit;}
  svg{max-width:100%;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 40px;}
  @media (max-width:680px){ .wrap{padding:0 22px;} }

  header{position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--line);}
  .navrow{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
  .brand{display:flex; align-items:center; gap:15px; background:none; border:none; padding:0; cursor:pointer;}
  .brand svg{flex-shrink:0; display:block; width:41px; height:56px;}
  .brand span{font-family:var(--display); font-weight:500; font-size:27px; letter-spacing:-0.02em; color:var(--ink);}
  @media (max-width:560px){
    .brand svg{width:32px; height:44px;}
    .brand span{font-size:21px;}
    .brand{gap:11px;}
  }
  .navright{display:flex; align-items:center; gap:6px;}
  nav.links{display:flex; gap:4px;}
  nav.links button{background:none; border:none; cursor:pointer; font-family:var(--sans);
    font-size:14.5px; color:var(--ink-soft); padding:8px 14px; border-radius:6px;}
  nav.links button:hover{color:var(--ink); background:var(--accent-soft);}
  nav.links button[aria-current="page"]{color:var(--accent); background:var(--accent-soft);}
  .icon-btn{background:none; border:1px solid var(--line); border-radius:8px; width:36px; height:36px;
    cursor:pointer; color:var(--ink-soft); font-size:14px; margin-left:6px;}
  .icon-btn:hover{border-color:var(--accent); color:var(--accent);}
  .menu-btn{display:none; background:none; border:none; font-size:20px; color:var(--ink); cursor:pointer; padding:6px;}
  @media (max-width:800px){
    nav.links{display:none; position:absolute; top:93px; left:0; right:0; background:var(--bg);
      border-bottom:1px solid var(--line); flex-direction:column; padding:10px 22px 18px;}
    nav.links.open{display:flex;}
    nav.links button{text-align:left; padding:12px 10px;}
    .menu-btn{display:block;}
  }

  section{display:none;}
  section.active{display:block;}
  h1{font-family:var(--display); font-weight:400; font-size:clamp(34px,5vw,54px); line-height:1.08;
     letter-spacing:-0.02em; margin:0 0 20px;}
  h1 em{font-style:normal; color:var(--accent);}
  h2{font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:-0.01em; margin:0 0 22px;}
  h3{font-family:var(--brand); font-weight:500; font-size:20px; margin:0 0 10px;}
  p{color:var(--ink-soft); max-width:60ch; margin:0 0 16px;}
  .lead{font-size:18px; line-height:1.6;}
  .page-head{padding:70px 0 34px; max-width:46ch;}
  .rule{border:none; border-top:1px solid var(--line); margin:56px 0;}

  .btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:500;
    font-size:15px; color:#fff; background:var(--accent); border:none; border-radius:8px;
    padding:14px 26px; cursor:pointer; transition:transform .18s, background .18s;}
  .btn:hover{background:var(--hot); transform:translateY(-2px);}
  .btn-ghost{background:none; border:1px solid var(--line); color:var(--ink); border-radius:8px;
    padding:14px 24px; font-family:var(--sans); font-size:15px; cursor:pointer; transition:border-color .18s;}
  .btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

  .hero{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:66px 0 58px;}
  .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}
  .tagline{display:inline-block; font-family:var(--brand); font-size:13px; color:var(--accent);
    background:var(--accent-soft); border-radius:20px; padding:6px 15px; margin-bottom:22px;}
  @media (max-width:900px){ .hero{grid-template-columns:1fr; gap:36px; padding:44px 0 40px;} }

  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:rgba(255,255,255,0.1); border-radius:16px; overflow:hidden;
    box-shadow:0 0 0 1px var(--deep);}
  .stat{background:var(--deep); padding:36px 26px;}
  .stat-num{font-family:var(--display); font-size:46px; line-height:1; color:var(--hot); font-variant-numeric:tabular-nums;}
  .stat-label{font-size:13.5px; color:#a8b4d8; margin-top:12px;}
  @media (max-width:860px){ .stats{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .stats{grid-template-columns:1fr;} }

  .pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:70px 0 80px;}
  .pcard{border:1px solid var(--line); border-radius:14px; padding:32px 26px 30px;
    position:relative; overflow:hidden; transition:border-color .2s, transform .2s;}
  .pcard::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--hot); transform:scaleX(0); transform-origin:left; transition:transform .25s;}
  .pcard:hover::before{transform:scaleX(1);}
  .pcard:hover{border-color:var(--accent); transform:translateY(-3px);}
  .pcard .pnum{font-family:var(--brand); font-size:13px; color:var(--hot); margin-bottom:18px;}
  .pcard h3{font-size:19px;}
  .pcard p{font-size:14.5px; margin:0;}
  @media (max-width:960px){ .pillars{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .pillars{grid-template-columns:1fr; margin:44px 0 60px;} }

  /* sector cards with illustrations */
  .sect-head{margin:0 0 28px;}
  .sect-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:20px;}
  .scard{border:1px solid var(--line); border-radius:14px; overflow:hidden;
    transition:border-color .2s, transform .2s, box-shadow .2s;}
  .scard:hover{border-color:var(--accent); transform:translateY(-4px);
    box-shadow:0 12px 28px -14px var(--accent);}
  .scard-art{background:var(--bg-alt); padding:0; display:block; line-height:0;}
  .scard-body{padding:22px 24px 26px;}
  .scard h4{font-family:var(--brand); font-weight:500; font-size:16.5px; margin:0 0 7px;}
  .scard p{font-size:14px; margin:0;}
  @media (max-width:860px){ .sect-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .sect-grid{grid-template-columns:1fr;} }
  .note{font-size:13px; color:var(--ink-soft); margin-top:26px; max-width:74ch;}

  /* about */
  .namecard{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
    padding:34px 0 30px; border-bottom:1px solid var(--line); margin-bottom:44px;}
  .namecard .np{font-family:var(--display); font-size:clamp(30px,4vw,42px); font-weight:500;
    letter-spacing:-0.02em; margin:0; line-height:1.1;}
  .namecard .nr{font-family:var(--brand); font-size:16px; color:var(--accent); margin:8px 0 0;}
  .avatar{width:112px; height:112px; border-radius:50%; background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center; font-family:var(--display);
    font-size:40px; font-weight:500; color:var(--accent); flex-shrink:0;}
  img.avatar-photo{display:block; width:112px; height:112px; border-radius:50%;
    object-fit:cover; object-position:center top; flex-shrink:0;
    border:3px solid var(--accent-soft); background:var(--accent-soft);
    max-width:112px; box-shadow:0 8px 24px -12px rgba(15,23,48,.55);}
  @media (max-width:600px){
    .namecard{grid-template-columns:1fr; gap:16px;}
    .avatar, img.avatar-photo{width:96px; height:96px; max-width:96px;}
  }

  .bio-grid{display:grid; grid-template-columns:1fr 1.5fr; gap:56px;}
  @media (max-width:820px){ .bio-grid{grid-template-columns:1fr; gap:28px;} }
  .side-label{font-family:var(--brand); font-size:14px; color:var(--ink-soft); margin-bottom:14px;}
  .chips{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{font-family:var(--brand); font-size:13px; color:var(--accent); background:var(--accent-soft);
    border-radius:7px; padding:7px 14px;}

  .timeline{position:relative; padding-left:34px;}
  .timeline::before{content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--line);}
  .tl{position:relative; padding-bottom:42px;}
  .tl:last-child{padding-bottom:0;}
  .tl::before{content:""; position:absolute; left:-34px; top:6px; width:11px; height:11px;
    border-radius:50%; background:var(--bg); border:2px solid var(--accent);}
  .tl-date{font-family:var(--brand); font-size:13px; color:var(--hot); margin-bottom:5px;}
  .tl h4{font-family:var(--brand); font-weight:500; font-size:17px; margin:0 0 8px;}
  .tl p{font-size:15px; margin:0;}

  /* ---- shared dynamic components ---- */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease;}
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none;} }

  .darkband{background:var(--deep); border-radius:16px; padding:44px 44px 40px; margin:8px 0 0; color:#fff;}
  .darkband h2{color:#fff; margin-bottom:12px;}
  .darkband p{color:#a8b4d8; max-width:56ch;}
  .darkband .btn{margin-top:20px;}
  .db-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:6px;}
  .db-item .dbn{font-family:var(--display); font-size:30px; color:var(--hot); line-height:1;}
  .db-item .dbl{font-size:13.5px; color:#a8b4d8; margin-top:8px;}
  @media (max-width:760px){ .db-grid{grid-template-columns:1fr; gap:22px;} .darkband{padding:32px 26px;} }

  .cta-row{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;}

  .srv{border-top:1px solid var(--line); padding:38px 22px; display:grid;
    grid-template-columns:52px 290px 1fr; gap:30px; align-items:start;
    border-radius:12px; transition:background .22s;}
  .srv:hover{background:var(--bg-alt);}
  .srv:last-of-type{border-bottom:1px solid var(--line);}
  .srv-ico{width:44px; height:44px; border-radius:11px; background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center;}
  .srv-ico svg{width:22px; height:22px;}
  .srv h3{margin:0 0 8px;}
  .srv ul{margin:0; padding:0; list-style:none;}
  .srv li{color:var(--ink-soft); font-size:15px; padding:7px 0 7px 20px; position:relative;}
  .srv li::before{content:""; position:absolute; left:0; top:16px; width:8px; height:1.5px; background:var(--hot);}
  @media (max-width:860px){ .srv{grid-template-columns:1fr; gap:14px; padding:30px 16px;} }

  .tl{position:relative; padding-bottom:42px; transition:transform .2s;}
  .tl:hover{transform:translateX(4px);}
  .tl:hover::before{background:var(--hot); border-color:var(--hot);}
  .tl::before{transition:background .2s, border-color .2s;}

  .contact-grid{display:grid; grid-template-columns:1fr; gap:64px; padding-bottom:90px; max-width:620px;}
  @media (max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:44px;} }

  /* Fluent Forms inside the dark contact panel */
  .contact-form-wrapper .ff-el-input--label label{
    font-family:var(--brand); font-size:13.5px; color:#8f9dc4; margin-bottom:7px; font-weight:400;}
  .contact-form-wrapper input[type="text"],
  .contact-form-wrapper input[type="email"],
  .contact-form-wrapper input[type="tel"],
  .contact-form-wrapper textarea,
  .contact-form-wrapper select{
    width:100%; background:rgba(255,255,255,0.06) !important;
    border:1px solid rgba(255,255,255,0.18) !important; border-radius:8px !important;
    color:#fff !important; font-family:var(--sans) !important; font-size:15px !important;
    padding:12px 14px !important; box-shadow:none !important;}
  .contact-form-wrapper input::placeholder,
  .contact-form-wrapper textarea::placeholder{color:#7b88ad !important;}
  .contact-form-wrapper input:focus,
  .contact-form-wrapper textarea:focus{border-color:var(--hot) !important; outline:none !important;}
  .contact-form-wrapper textarea{min-height:110px; resize:vertical;}
  .contact-form-wrapper .ff-btn-submit,
  .contact-form-wrapper button[type="submit"]{
    background:var(--accent) !important; border:none !important; border-radius:8px !important;
    color:#fff !important; font-family:var(--sans) !important; font-weight:500 !important;
    font-size:15px !important; padding:14px 26px !important; cursor:pointer;
    transition:background .18s, transform .18s;}
  .contact-form-wrapper .ff-btn-submit:hover,
  .contact-form-wrapper button[type="submit"]:hover{
    background:var(--hot) !important; transform:translateY(-2px);}
  .contact-form-wrapper .ff-el-group{margin-bottom:18px;}
  .contact-form-wrapper .ff-message-success{
    color:#fff; background:rgba(255,255,255,0.08); border-radius:8px; padding:14px 16px;}
  .cinfo a{display:block; color:#fff; text-decoration:none; padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,0.14);}
  .cinfo a .cl{display:block; font-family:var(--brand); font-size:13px; color:#8f9dc4; margin-bottom:3px;}
  .cinfo a .cv{font-family:var(--brand); font-size:17px;}
  .cinfo a:hover .cv{color:var(--hot);}
  .field{margin-bottom:20px;}
  .field label{display:block; font-family:var(--brand); font-size:13.5px; color:var(--ink-soft); margin-bottom:7px;}
  .field input,.field textarea{width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px;
    color:var(--ink); font-family:var(--sans); font-size:15px; padding:12px 14px;}
  .field input:focus,.field textarea:focus{outline:none; border-color:var(--accent);}
  .field textarea{resize:vertical; min-height:110px;}
  .err{color:var(--hot); font-size:13px; margin-top:5px; display:none;}
  .err.show{display:block;}
  .fstatus{font-size:14px; color:var(--accent); margin-top:12px; display:none;}
  .fstatus.show{display:block;}

  footer{border-top:1px solid var(--line); padding:30px 0;}
  .frow{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center;}
  footer p{font-size:13.5px; margin:0;}

  :focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  .flow{stroke-dasharray:4 6; animation:flow 2.4s linear infinite;}
  @keyframes flow{to{stroke-dashoffset:-20;}}
  @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }