/*
Theme Name: VADU Limited
Theme URI: https://www.vaduinc.co.ke
Author: VADU Limited
Author URI: https://www.vaduinc.co.ke
Description: A bold, disruptive one-page WordPress theme for VADU Limited, an East African 360° creative & communications agency. Built with SEO-ready markup, JSON-LD structured data, and editable Customizer content throughout.
Version: 4.1.3
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vadu
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =====================================================
   Base reset & design tokens
   ===================================================== */

/* WordPress core accessibility classes */
.screen-reader-text{
	border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
	height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
	width:1px; word-wrap:normal !important;
}
.skip-link.screen-reader-text:focus{
	background:#f6f1ea; border-radius:3px; box-shadow:0 0 2px 2px rgba(0,0,0,.6);
	clip:auto !important; clip-path:none; color:#0b0708; display:block;
	font-size:14px; font-weight:700; height:auto; left:8px; line-height:normal;
	padding:14px 22px; text-decoration:none; top:8px; width:auto; z-index:100000;
}
:root{
    --ink:#0b0708;
    --ink-2:#150b0c;
    --paper:#f6f1ea;
    --crimson:#a52d31;
    --crimson-deep:#5c1417;
    --slate:#8b8c8f;
    --ember:#ff6a4d;
    --line-dark: rgba(246,241,234,0.12);
    --line-light: rgba(11,7,8,0.12);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  @keyframes rise{to{opacity:1; transform:translateY(0);}}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Jost', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding-left:clamp(20px,5vw,64px); padding-right:clamp(20px,5vw,64px);}
  .eyebrow{
    display:flex; align-items:center; gap:12px;
    font-size:11px; letter-spacing:0.32em; font-weight:600;
    text-transform:uppercase;
  }
  .eyebrow::before{content:'';width:30px;height:1px;background:var(--crimson);flex-shrink:0;}
  h1,h2,h3{font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase; line-height:0.98; letter-spacing:0.003em;}
  .quote-serif{font-family:'Fraunces', serif; font-style:italic; font-weight:500;}

  /* ---------- SCROLL PATH RAIL (signature element) ---------- */
  .path-rail{
    position:fixed; left:0; top:0; bottom:0; width:5px; z-index:60;
    background:rgba(11,7,8,0.06);
  }
  .path-rail-fill{
    position:absolute; left:0; top:0; width:100%; height:0%;
    background:linear-gradient(180deg, var(--crimson), var(--crimson-deep));
    transition:height .08s linear;
  }
  .path-marker{
    position:fixed; left:-11px; top:0; width:28px; height:28px; z-index:61;
    transform:translateY(-50%);
    transition: top .08s linear;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  }
  @media (max-width:760px){ .path-rail, .path-marker{display:none;} }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; row-gap:10px;
    padding:14px clamp(20px,5vw,64px);
    background:rgba(11,7,8,0.0);
    backdrop-filter: blur(0px);
    transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
  }
  .nav.solid{
    background:rgba(11,7,8,0.92);
    backdrop-filter: blur(10px);
    box-shadow:0 1px 0 var(--line-dark);
  }

  /* Push the fixed nav (and anything else pinned to the viewport top)
     below the WordPress admin bar when logged in, so they don't overlap. */
  body.admin-bar .nav{ top:32px; }
  body.admin-bar .path-rail{ top:32px; }
  @media (max-width:782px){
    body.admin-bar .nav{ top:46px; }
    body.admin-bar .path-rail{ top:46px; }
  }
  .nav-logo{height:44px;width:auto;}
  .nav-links{display:flex; align-items:center; gap:clamp(14px,2vw,30px); list-style:none;}
  .nav-links a{
    color:var(--paper); text-decoration:none; font-size:13px; letter-spacing:0.05em;
    opacity:0.82; transition:opacity .25s ease;
  }
  .nav-links a:hover{opacity:1;}
  .nav-cta{
    display:inline-block;
    background:var(--crimson); color:var(--paper); text-decoration:none;
    font-family:'Jost',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.08em;
    padding:10px 20px; border-radius:999px; border:none; cursor:pointer;
    transition: background .25s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--ember);}
  .nav-burger{
    display:none; background:none; border:none; color:var(--paper);
    cursor:pointer; padding:8px; width:36px; height:36px;
    flex-direction:column; justify-content:center; align-items:center; gap:6px;
  }
  .nav-burger span{display:block; width:22px; height:2px; background:var(--paper); transition:transform .3s ease, opacity .3s ease;}
  .nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .nav-burger.open span:nth-child(2){opacity:0;}
  .nav-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  .nav-close{display:none;}
  @media (max-width:820px){
    .nav-links{
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
      position:fixed; inset:0; height:100svh; width:100vw;
      background:rgba(11,7,8,0.98); backdrop-filter:blur(14px);
      padding:0 32px;
      opacity:0; visibility:hidden;
      transform:translateY(-12px);
      transition: opacity .4s cubic-bezier(.16,.9,.28,1), transform .4s cubic-bezier(.16,.9,.28,1), visibility 0s linear .4s;
      z-index:55;
    }
    .nav-links.open{
      opacity:1; visibility:visible; transform:translateY(0);
      transition: opacity .4s cubic-bezier(.16,.9,.28,1), transform .4s cubic-bezier(.16,.9,.28,1), visibility 0s linear 0s;
    }
    .nav-links li{width:100%; max-width:320px; border-top:1px solid var(--line-dark); padding:0;}
    .nav-links li:last-child{border-bottom:1px solid var(--line-dark);}
    .nav-links a{
      font-family:'Anton', sans-serif; text-transform:uppercase;
      font-size:clamp(26px,7vw,36px); letter-spacing:0.01em;
      display:block; padding:18px 0; text-align:center;
    }
    .nav-burger{display:flex; position:relative; z-index:56;}
    .nav-close{
      display:none;
      position:fixed; top:18px; right:clamp(20px,5vw,64px); z-index:57;
      width:44px; height:44px; align-items:center; justify-content:center;
      background:none; border:1px solid var(--line-dark); border-radius:50%;
      color:var(--paper); font-size:22px; line-height:1; cursor:pointer;
    }
    .nav-links.open ~ .nav-close, .nav-close.open{display:flex;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    background:var(--ink);
    color:var(--paper);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding-top:120px; padding-bottom:60px;
    overflow:hidden;
    text-align:center;
  }
  .hero-media-bg{
    position:absolute; inset:0; z-index:0;
    overflow:hidden; pointer-events:none;
  }
  .hero-media-layer{
    position:absolute; inset:0;
    opacity:0;
    transition: opacity 1.6s ease;
  }
  .hero-media-layer.active{opacity:1;}
  .hero-media-layer.video-layer iframe{
    position:absolute; top:50%; left:50%;
    width:100vw; height:56.25vw;   /* 16:9 based on width */
    min-height:100%; min-width:177.78vh; /* 16:9 based on height */
    transform:translate(-50%,-50%);
  }
  .hero-media-layer.image-layer img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:saturate(0.9) contrast(1.08);
    animation: heroKenBurns 9s ease-out forwards;
  }
  @keyframes heroKenBurns{
    from{transform:scale(1);}
    to{transform:scale(1.08);}
  }
  .hero-video-mute{
    position:absolute; bottom:24px; right:24px; z-index:3;
    width:40px; height:40px; border-radius:50%;
    background:rgba(11,7,8,0.55); border:1px solid rgba(246,241,234,0.3);
    color:var(--paper); font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: background .25s ease;
  }
  .hero-video-mute:hover{background:rgba(11,7,8,0.8);}
  .hero::before{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(180deg, rgba(11,7,8,0.55) 0%, rgba(11,7,8,0.35) 35%, rgba(11,7,8,0.72) 100%),
      radial-gradient(60% 55% at 82% 12%, rgba(165,45,49,0.25) 0%, rgba(11,7,8,0) 60%),
      radial-gradient(50% 45% at 8% 90%, rgba(165,45,49,0.18) 0%, rgba(11,7,8,0) 60%);
    pointer-events:none;
  }
  .hero-inner{
    position:relative; z-index:2;
    display:flex; flex-direction:row; align-items:center; justify-content:center;
    gap:clamp(24px,4vw,64px);
    width:100%;
    max-width:1180px; margin:0 auto;
  }
  .hero-inner-centered{
    flex-direction:column;
    max-width:680px;
    text-align:center;
  }

  .hero-eyebrow{
    flex:1 1 380px;
    max-width:460px;
    text-align:left;
    opacity:0;
    animation: rise .9s cubic-bezier(.16,.9,.28,1) .55s forwards;
  }
  .hero-eyebrow .eyebrow{justify-content:flex-start;}
  .hero-eyebrow .eyebrow::before{display:block;}
  .hero-inner-centered .hero-eyebrow{
    max-width:100%;
    text-align:center;
  }
  .hero-inner-centered .hero-eyebrow .eyebrow{justify-content:center;}
  .hero-inner-centered .hero-eyebrow .eyebrow::before{display:none;}
  .hero-inner-centered .hero-quote{margin-left:auto; margin-right:auto;}
  .hero-inner-centered .hero-ctas{justify-content:center;}

  .hero-quote{
    margin:clamp(14px,2vw,20px) 0 0;
    max-width:460px;
    font-size:clamp(16px,1.5vw,20px);
    color:rgba(246,241,234,0.86);
    opacity:0;
    animation: rise .9s cubic-bezier(.16,.9,.28,1) .68s forwards;
  }
  .hero-ctas{
    display:flex; gap:16px; flex-wrap:nowrap;
    justify-content:flex-start;
    margin-top:clamp(26px,3.6vw,36px);
    opacity:0;
    animation: rise .9s cubic-bezier(.16,.9,.28,1) .82s forwards;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    text-decoration:none;
    font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    padding:15px 26px; border-radius:999px;
    white-space:nowrap;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  }
  .btn-primary{background:var(--crimson); color:var(--paper);}
  .btn-primary:hover{background:var(--ember); transform:translateY(-2px);}
  .btn-ghost{border:1px solid var(--line-dark); color:var(--paper);}
  .btn-ghost:hover{border-color:var(--paper); transform:translateY(-2px);}

  .scroll-cue{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:10px;
    font-size:11px; letter-spacing:0.28em; color:rgba(246,241,234,0.55);
    opacity:0; animation: rise .9s ease 1.1s forwards;
  }
  .scroll-cue .dash{width:26px; height:1px; background:rgba(246,241,234,0.4);}

  @media (max-width:760px){
    .hero{
      min-height:auto;
      padding-top:96px;
      padding-bottom:40px;
    }
    .hero-inner{flex-direction:column; gap:0;}
    .hero-eyebrow{text-align:center; max-width:100%; padding-top:0;}
    .hero-eyebrow .eyebrow{justify-content:center;}
    .hero-eyebrow .eyebrow::before{display:none;}
    .hero-quote{margin-left:auto; margin-right:auto;}
    .hero-video-mute{bottom:16px; right:16px;}
    .hero-ctas{gap:10px; justify-content:center;}
    .btn{flex:1 1 0; padding:13px 10px; font-size:11px;}
  }

  /* ---------- SECTION SHELL ---------- */
  section{padding:clamp(70px,10vw,120px) 0;}
  .section-head{max-width:640px; margin-bottom:clamp(36px,5vw,56px);}
  .section-head h2{font-size:clamp(32px,4.4vw,54px); margin-top:14px;}

  /* ---------- ABOUT ---------- */

  .about{background:var(--paper);}
  .about-grid{
    display:grid; grid-template-columns: 0.8fr 1.2fr; gap:clamp(30px,5vw,70px);
    align-items:start;
  }
  .about-stat{
    font-family:'Anton', sans-serif; font-size:clamp(54px,7vw,88px);
    color:var(--crimson); line-height:0.9;
  }
  .about-stat-label{
    margin-top:10px; font-size:13px; letter-spacing:0.08em; color:var(--ink); opacity:0.65;
    max-width:220px;
  }
  .about-photo{
    margin-top:clamp(28px,4vw,40px);
    width:100%; max-width:280px;
    aspect-ratio:2/3;
    border-radius:2px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(11,7,8,0.25);
  }
  .about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .about-copy p{
    font-size:clamp(16px,1.4vw,19px); line-height:1.75; color:rgba(11,7,8,0.82);
    margin-bottom:20px; max-width:640px;
  }
  .about-copy .quote-serif{
    display:block; font-size:clamp(20px,2vw,26px); color:var(--ink);
    line-height:1.5; margin:26px 0; max-width:600px;
  }
  .path-underline{
    display:inline-block; position:relative;
  }
  .path-underline::after{
    content:''; position:absolute; left:0; right:0; bottom:-4px; height:3px;
    background:var(--crimson); border-radius:2px;
  }

  /* ---------- WHAT WE DO ---------- */
  .services{background:var(--ink); color:var(--paper);}
  .services .eyebrow::before{background:var(--crimson);}
  .services .section-head{color:var(--paper);}
  .service-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line-dark);
    border:1px solid var(--line-dark);
  }
  .service-card{
    background:var(--ink); padding:clamp(28px,3vw,40px);
    display:flex; flex-direction:column;
    transition: background .3s ease;
  }
  .service-card:hover{background:var(--ink-2);}
  .service-num{font-family:'Anton',sans-serif; font-size:14px; color:var(--crimson); letter-spacing:0.1em; margin-bottom:18px;}
  .service-card h3{font-size:clamp(20px,2vw,25px); margin-bottom:16px; line-height:1.1;}
  .service-card ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
  .service-card li{
    font-size:13.5px; color:rgba(246,241,234,0.72);
    padding-left:16px; position:relative;
  }
  .service-card li::before{
    content:''; position:absolute; left:0; top:8px; width:6px; height:1px; background:var(--crimson);
  }
  .service-info-btn{
    margin-top:auto; align-self:flex-start;
    background:none; border:1px solid rgba(246,241,234,0.28); border-radius:999px;
    color:var(--paper); font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
    padding:12px 20px; cursor:pointer;
    transition: background .25s ease, border-color .25s ease;
  }
  .service-info-btn:hover{background:var(--crimson); border-color:var(--crimson);}
  @media (max-width:900px){
    .service-grid{grid-template-columns:1fr;}
  }

  /* ---------- INFO MODAL (service "ask for more information" popup) ---------- */
  .info-modal{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; visibility:hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .info-modal.open{
    opacity:1; visibility:visible;
    transition: opacity .3s ease, visibility 0s linear 0s;
  }
  .info-modal-overlay{
    position:absolute; inset:0;
    background:rgba(11,7,8,0.78); backdrop-filter:blur(4px);
  }
  .info-modal-panel{
    position:relative; z-index:1;
    background:var(--paper); color:var(--ink);
    max-width:480px; width:100%; max-height:86vh; overflow-y:auto;
    border-radius:6px; padding:clamp(28px,4vw,44px);
    transform:translateY(16px) scale(0.98);
    transition: transform .3s cubic-bezier(.16,.9,.28,1);
    box-shadow:0 40px 90px rgba(0,0,0,0.4);
  }
  .info-modal.open .info-modal-panel{transform:translateY(0) scale(1);}
  .info-modal-close{
    position:absolute; top:16px; right:16px;
    width:36px; height:36px; border-radius:50%; border:1px solid rgba(11,7,8,0.14);
    background:none; font-size:20px; line-height:1; color:var(--ink); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .info-modal-close:hover{background:var(--crimson); border-color:var(--crimson); color:var(--paper);}
  .info-modal-num{font-family:'Anton',sans-serif; font-size:14px; color:var(--crimson); letter-spacing:0.1em; margin-bottom:10px;}
  .info-modal-panel h3{font-size:clamp(21px,2.4vw,26px); margin-bottom:14px; padding-right:30px;}
  .info-modal-blurb{font-size:15px; line-height:1.7; color:rgba(11,7,8,0.75); margin-bottom:20px;}
  .info-modal-items{list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:26px;}
  .info-modal-items li{
    font-size:13.5px; color:rgba(11,7,8,0.7); padding-left:16px; position:relative;
  }
  .info-modal-items li::before{
    content:''; position:absolute; left:0; top:8px; width:6px; height:1px; background:var(--crimson);
  }
  .info-modal-contact{
    border-top:1px solid rgba(11,7,8,0.1); padding-top:20px;
    display:flex; flex-direction:column; gap:8px;
  }
  .info-modal-contact p{font-size:13px; color:rgba(11,7,8,0.6); margin-bottom:4px;}
  .info-modal-phone{
    font-family:'Anton',sans-serif; font-size:clamp(20px,2.4vw,26px); color:var(--crimson);
    text-decoration:none; letter-spacing:0.02em;
  }
  .info-modal-phone:hover{color:var(--ember);}
  .info-modal-email{font-size:14px; color:var(--ink); text-decoration:none; opacity:0.75;}
  .info-modal-email:hover{opacity:1; color:var(--crimson);}

  /* ---------- ENQUIRY FORM (Start a project popup) ---------- */
  .enquiry-modal-panel{max-width:520px;}
  .enquiry-modal-panel h3{margin-bottom:10px;}
  .enquiry-form{margin-top:26px; display:flex; flex-direction:column; gap:16px;}
  .enquiry-field{display:flex; flex-direction:column; gap:6px;}
  .enquiry-field label{
    font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(11,7,8,0.6);
  }
  .enquiry-field input, .enquiry-field textarea{
    font-family:'Jost',sans-serif; font-size:15px; color:var(--ink);
    background:#fff; border:1px solid rgba(11,7,8,0.16); border-radius:4px;
    padding:12px 14px; resize:vertical;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .enquiry-field input:focus, .enquiry-field textarea:focus{
    outline:none; border-color:var(--crimson); box-shadow:0 0 0 3px rgba(165,45,49,0.12);
  }
  .enquiry-honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
  .enquiry-status{
    font-size:13.5px; min-height:1.4em; margin:0;
  }
  .enquiry-status.is-success{color:#2a7a3b;}
  .enquiry-status.is-error{color:var(--crimson);}
  .enquiry-submit{width:100%; border:none;}
  .enquiry-submit:disabled{opacity:0.6; cursor:default;}

  /* ---------- BLOG ARCHIVE ---------- */
  .blog-header{
    background:var(--ink); color:var(--paper);
    padding:clamp(150px,20vw,190px) 0 clamp(50px,6vw,70px);
    text-align:center;
  }
  .blog-header .eyebrow{justify-content:center;}
  .blog-header .eyebrow::before{display:none;}
  .blog-header h1{
    font-size:clamp(38px,6vw,64px); margin-top:14px;
  }
  .blog-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,2.4vw,34px);
    padding:clamp(60px,8vw,90px) 0;
  }
  .blog-card{
    display:flex; flex-direction:column;
    background:#fff; border:1px solid rgba(11,7,8,0.08);
    border-radius:4px; overflow:hidden;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .blog-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(11,7,8,0.12);}
  .blog-card-thumb{
    display:block; width:100%; aspect-ratio:3/2; overflow:hidden; background:var(--ink);
  }
  .blog-card-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
  .blog-card:hover .blog-card-thumb img{transform:scale(1.06);}
  .blog-card-body{padding:clamp(20px,2.2vw,28px); display:flex; flex-direction:column; flex:1;}
  .blog-card-meta{
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--crimson);
    margin-bottom:10px; display:flex; gap:10px; flex-wrap:wrap;
  }
  .blog-card h2{
    font-family:'Jost',sans-serif; text-transform:none; font-weight:700;
    font-size:clamp(18px,1.8vw,21px); line-height:1.3; margin-bottom:12px;
  }
  .blog-card h2 a{color:var(--ink); text-decoration:none;}
  .blog-card h2 a:hover{color:var(--crimson);}
  .blog-card p{font-size:14.5px; line-height:1.7; color:rgba(11,7,8,0.68); flex:1;}
  .blog-card-more{
    margin-top:16px; font-size:12.5px; font-weight:600; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--crimson); text-decoration:none;
  }
  .blog-card-more:hover{color:var(--ember);}
  .blog-empty{
    grid-column:1 / -1; text-align:center; padding:60px 20px; color:rgba(11,7,8,0.6);
  }
  .blog-pagination{
    display:flex; justify-content:center; gap:10px; padding-bottom:clamp(70px,9vw,100px);
  }
  .blog-pagination a, .blog-pagination span{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; padding:0 14px;
    border:1px solid rgba(11,7,8,0.14); border-radius:999px;
    font-size:13px; text-decoration:none; color:var(--ink);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
  .blog-pagination a:hover{background:var(--crimson); border-color:var(--crimson); color:var(--paper);}
  .blog-pagination .current{background:var(--crimson); border-color:var(--crimson); color:var(--paper);}
  @media (max-width:900px){
    .blog-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:600px){
    .blog-grid{grid-template-columns:1fr; padding-top:40px;}
  }

  /* ---------- SINGLE POST ---------- */
  .single-post-header{
    background:var(--ink); color:var(--paper);
    padding:clamp(150px,18vw,190px) 0 clamp(40px,5vw,60px);
  }
  .single-post-header .eyebrow::before{display:none;}
  .single-post-header h1{font-size:clamp(32px,5vw,52px); margin-top:14px; max-width:820px;}
  .single-post-thumb{width:100%; aspect-ratio:16/7; overflow:hidden; background:var(--ink);}
  .single-post-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .single-post-body{
    max-width:760px; margin:0 auto; padding:clamp(50px,7vw,80px) 20px;
    font-size:17px; line-height:1.85; color:rgba(11,7,8,0.85);
  }
  .single-post-body h2{font-size:clamp(24px,2.6vw,32px); margin:40px 0 16px;}
  .single-post-body h3{font-size:clamp(20px,2.2vw,25px); margin:32px 0 14px;}
  .single-post-body p{margin-bottom:20px;}
  .single-post-body img{max-width:100%; height:auto; border-radius:4px; margin:20px 0;}
  .single-post-body a{color:var(--crimson);}
  .single-post-back{
    display:inline-flex; align-items:center; gap:8px; margin-bottom:24px;
    font-size:13px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--crimson); text-decoration:none;
  }

  /* ---------- APPROACH (numbered — real sequence) ---------- */
  .approach{background:var(--paper);}
  .approach-list{position:relative;}
  .approach-item{
    display:grid; grid-template-columns:80px 1fr; gap:clamp(16px,3vw,32px);
    padding:clamp(22px,3vw,32px) 0;
    border-top:1px solid var(--line-light);
  }
  .approach-item:last-child{border-bottom:1px solid var(--line-light);}
  .approach-step{
    font-family:'Anton',sans-serif; font-size:clamp(30px,3.4vw,42px); color:var(--crimson);
    line-height:1;
  }
  .approach-body h3{
    font-family:'Jost',sans-serif; text-transform:none; font-weight:600; font-size:clamp(18px,1.8vw,22px);
    letter-spacing:0.01em; margin-bottom:8px; color:var(--ink);
  }
  .approach-body p{font-size:14.5px; line-height:1.7; color:rgba(11,7,8,0.7); max-width:640px;}

  /* ---------- APART ---------- */
  .apart{background:var(--ink); color:var(--paper);}
  .apart .eyebrow::before{background:var(--crimson);}
  .apart-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,36px); margin-top:10px;}
  .apart-card{
    border:1px solid var(--line-dark); border-radius:4px; padding:clamp(26px,2.6vw,34px);
  }
  .apart-card h3{
    font-family:'Jost',sans-serif; text-transform:none; font-weight:600; font-size:19px;
    margin-bottom:12px;
  }
  .apart-card p{font-size:14px; line-height:1.75; color:rgba(246,241,234,0.72);}
  @media (max-width:820px){ .apart-grid{grid-template-columns:1fr;} }

  /* ---------- PORTFOLIO ---------- */
  .portfolio{background:var(--paper);}
  .portfolio-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px);
    margin-top:10px;
  }
  .portfolio-card{
    position:relative; margin:0; border-radius:4px; overflow:hidden;
    aspect-ratio:4/3; background:var(--ink);
    border:none; padding:0; width:100%; cursor:pointer;
  }
  .portfolio-card img{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
    transition:transform .5s ease;
  }
  .portfolio-card:hover img, .portfolio-card:focus-visible img{transform:scale(1.06);}
  .portfolio-caption{
    position:absolute; inset:0; z-index:1;
    display:flex; flex-direction:column; justify-content:flex-end;
    text-align:left;
    padding:clamp(16px,2vw,24px);
    background:linear-gradient(180deg, rgba(11,7,8,0) 40%, rgba(11,7,8,0.85) 100%);
    opacity:0; transition:opacity .3s ease;
  }
  .portfolio-card:hover .portfolio-caption, .portfolio-card:focus-visible .portfolio-caption{opacity:1;}
  .portfolio-caption-title{
    display:block; color:var(--paper); font-family:'Jost',sans-serif; font-weight:700;
    font-size:16px; margin-bottom:4px;
  }
  .portfolio-caption-desc{display:block; color:rgba(246,241,234,0.8); font-size:12.5px; line-height:1.5;}
  @media (max-width:900px){ .portfolio-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){
    .portfolio-grid{grid-template-columns:1fr;}
    .portfolio-caption{opacity:1; background:linear-gradient(180deg, rgba(11,7,8,0) 20%, rgba(11,7,8,0.85) 100%);}
  }
  .info-modal-work-image{
    width:100%; height:180px; object-fit:cover; object-position:center; border-radius:4px;
    max-height:none; filter:none; opacity:1; margin-bottom:20px;
  }

  /* ---------- CLIENTS ---------- */
  .clients{background:var(--paper); text-align:center;}
  .clients .eyebrow{justify-content:center;}
  .clients .eyebrow::before{display:none;}
  .clients h2{margin-top:14px;}
  .client-wall{
    margin-top:clamp(36px,5vw,50px);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    border-top:1px solid var(--line-light);
    border-left:1px solid var(--line-light);
  }
  .client-tile{
    position:relative;
    border-right:1px solid var(--line-light);
    border-bottom:1px solid var(--line-light);
    padding:clamp(8px,1vw,14px);
    display:flex; align-items:center; justify-content:center;
    aspect-ratio: 5 / 3;
    width:100%;
    background:#fff;
    transition: background .25s ease;
  }
  .client-tile:hover, .client-tile:focus-within{background:rgba(11,7,8,0.04);}
  .client-tile-quote-btn{
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center;
    background:rgba(11,7,8,0.82); color:var(--paper);
    border:none; cursor:pointer;
    font-family:'Jost',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
    opacity:0; transition:opacity .25s ease;
  }
  .client-tile:hover .client-tile-quote-btn,
  .client-tile:focus-within .client-tile-quote-btn,
  .client-tile-quote-btn:focus{
    opacity:1;
  }
  @media (max-width:760px){
    .client-tile-quote-btn{opacity:1; background:rgba(11,7,8,0.55); font-size:10.5px;} /* no hover on touch */
  }
  .client-tile img{
    max-width:100%; max-height:100%; width:auto; height:auto;
    object-fit:contain;
    transition:transform .3s ease;
  }
  .client-tile:hover img, .client-tile:focus-visible img{transform:scale(1.06);}
  @media (max-width:760px){
    .client-wall{grid-template-columns:repeat(2, 1fr);}
  }

  .info-modal-website{
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--crimson); text-decoration:none; margin-bottom:22px;
  }
  .info-modal-website:hover{color:var(--ember);}

  .info-modal-logo{
    max-height:52px; width:auto; margin-bottom:18px;
    filter:grayscale(1); opacity:0.85;
  }
  /* ---------- TEAM ---------- */
  .team{background:var(--ink); color:var(--paper);}
  .team .eyebrow::before{background:var(--crimson);}
  .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,26px); margin-top:10px;}
  .team-card{border:1px solid var(--line-dark); padding:clamp(20px,2vw,26px); border-radius:4px;}
  .team-card .bio{
    margin-top:10px; font-size:13px; line-height:1.6; color:rgba(246,241,234,0.68);
  }
  .team-mono{
    width:54px; height:54px; border-radius:50%;
    background:var(--crimson); color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    font-family:'Anton', sans-serif; font-size:19px;
    margin-bottom:18px;
  }
  .team-card h3{font-family:'Jost'; text-transform:none; font-weight:600; font-size:18px; margin-bottom:4px;}
  .team-card .role{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--crimson);}
  @media (max-width:900px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:480px){ .team-grid{grid-template-columns:1fr;} }

  /* ---------- CONTACT / CTA ---------- */
  .contact{
    background:var(--crimson); color:var(--paper); text-align:center;
    position:relative; overflow:hidden;
  }
  .contact::before{
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,0.08), transparent 70%);
  }
  .contact-inner{position:relative; z-index:1;}
  .contact h2{font-size:clamp(36px,6vw,72px); max-width:800px; margin:0 auto 24px;}
  .contact p.lead{font-size:clamp(15px,1.4vw,18px); opacity:0.9; max-width:520px; margin:0 auto 36px;}
  .contact-links{
    display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,4vw,50px);
    margin-top:10px;
  }
  .contact-links a{
    text-decoration:none; color:var(--paper); font-size:15px;
    border-bottom:1px solid rgba(246,241,234,0.4);
    padding-bottom:4px;
    transition:border-color .25s ease;
  }
  .contact-links a:hover{border-color:var(--paper);}
  .contact-address{
    margin-top:28px; font-size:13.5px; color:rgba(246,241,234,0.55);
  }

  footer{
    background:var(--ink); color:rgba(246,241,234,0.5);
    padding:26px clamp(20px,5vw,64px);
    display:flex; justify-content:space-between; align-items:center;
    font-size:12px; flex-wrap:wrap; gap:10px;
  }
  footer img{height:20px; opacity:0.8;}
  footer .foot-left{display:flex; align-items:center; gap:12px;}

  /* reveal-on-scroll */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}