@font-face { font-family: "Nauryz"; src: url("../fonts/NauryzRedKeds.ttf") format("truetype"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Akzidenz"; src: url("../fonts/AkzidenzGroteskPro-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Akzidenz"; src: url("../fonts/AkzidenzGroteskPro-Medium.ttf") format("truetype"); font-weight: 600; font-display: swap; }

  :root{
    --blue:#13369D; --graphite:#24262B; --lime:#D3F44F;
    --warm:#F4F3EF; --white:#FFFFFF; --muted:#8A8D93;
  }
  *{box-sizing:border-box;}
  body{margin:0;}
  a{color:var(--blue); text-decoration:none;}
  a:hover{color:var(--lime);}
  .page{font-family:"Akzidenz",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; color:var(--graphite); background:var(--white); width:100%; overflow-x:hidden;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 40px;}
  .wrap-narrow{max-width:760px; margin:0 auto; padding:0 40px;}
  .eyebrow{font-family:"Akzidenz",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.14em; font-size:13px; color:var(--muted);}
  .eyebrow.on-dark{color:rgba(255,255,255,0.65);}
  h1,h2{font-family:"Nauryz",sans-serif; font-weight:400; margin:0; letter-spacing:0.001em;}
  .section{padding:84px 0;}
  .section-head{max-width:680px; margin-bottom:44px;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px); margin-top:14px; color:var(--graphite);}
  .section-head.on-dark h2{color:var(--white);}
  .body-lg p{font-size:18px; line-height:1.65; color:#3a3c40; max-width:680px;}
  .body-md p{font-size:16px; line-height:1.6; color:#4b4d52;}

  /* NAV */
  .nav{display:flex; align-items:center; justify-content:space-between; padding:26px 40px; max-width:1440px; margin:0 auto;}
  .logo{font-family:"Nauryz",sans-serif; font-size:20px; color:var(--graphite); display:flex; align-items:center; gap:8px;}
  .navlinks{display:flex; gap:32px; font-size:15px; font-weight:600;}
  .navlinks a{color:var(--graphite);}
  .navlinks a.current{color:var(--blue); border-bottom:2px solid var(--lime);}

  /* GEOMETRIC PHOTO FRAME — blue+lime construction behind/around a B&W photo, not a flat fill */
  .photoframe{position:relative; width:100%; max-width:420px;}
  .photoframe .shape{position:absolute; border-radius:0;}
  .photoframe.style-a .shape.blue{background:var(--blue); width:82%; height:80%; top:-9%; left:-11%; transform:rotate(-7deg);}
  .photoframe.style-a .shape.lime{background:var(--lime); width:66%; height:64%; bottom:-9%; right:-10%; transform:rotate(9deg);}
  .photoframe.style-b .shape.blue{background:var(--blue); width:70%; height:66%; bottom:-8%; left:-9%; transform:rotate(8deg);}
  .photoframe.style-b .shape.lime{background:var(--lime); width:58%; height:56%; top:-7%; right:-8%; transform:rotate(-10deg);}
  .photoframe .photo{position:relative; z-index:3; width:100%; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .photoframe .photo img{width:100%; height:100%; object-fit:cover;}
  .photoframe .photo .ph-label{color:rgba(255,255,255,0.55); font-size:13px; font-weight:600; letter-spacing:0.04em; text-align:center; max-width:70%;}

  /* HERO v2 — full blue background, lime layered headline behind photo, stat column, marquee band (Pinterest ref: Aurelia-style hero) */
  .spark{display:inline-block; flex:0 0 auto;}
  .hero-v2{background:var(--blue); color:var(--white); position:relative; overflow:hidden;}
  .hero-v2-inner{position:relative; display:grid; grid-template-columns:200px 1fr 280px; gap:32px; align-items:center; padding:56px 0 64px 0; min-height:560px;}
  .hero-v2-left{align-self:start; padding-top:8px;}
  .hero-v2-left .eyebrow{color:rgba(255,255,255,0.6);}
  .stat-col{margin-top:28px; display:flex; flex-direction:column; gap:22px;}
  .stat-col .stat{border-top:1px solid rgba(255,255,255,0.22); padding-top:12px;}
  .stat-col .num{display:block; font-family:"Nauryz",sans-serif; font-size:34px; color:var(--lime); line-height:1;}
  .stat-col .lbl{display:block; font-size:12px; color:rgba(255,255,255,0.65); margin-top:6px; line-height:1.4; max-width:150px;}

  .hero-v2-center{position:relative; align-self:center; min-height:460px; display:flex; align-items:center; justify-content:center;}
  .hero-v2-headline{position:absolute; z-index:1; font-family:"Nauryz",sans-serif; font-weight:400; color:var(--lime); font-size:clamp(40px,7vw,88px); line-height:0.98; text-align:center; margin:0; width:100%; text-transform:uppercase;}
  .hero-v2-photo{position:absolute; z-index:2; left:9.5%; bottom:7%; height:88%; width:auto; max-width:none;}
  .hero-v2-photo .ph-label{color:rgba(255,255,255,0.5); font-size:12px; font-weight:600; text-align:center; max-width:70%; line-height:1.4;}
  .hero-ring{position:absolute; top:6%; right:2%; width:64px; height:64px; z-index:3;}

  .hero-v2-right{align-self:center;}
  .hero-v2-right p{font-size:15px; line-height:1.6; color:rgba(255,255,255,0.82); margin:0;}
  .hero-cta-v2{display:inline-flex; align-items:center; gap:8px; margin-top:22px; background:var(--lime); color:var(--graphite); font-weight:600; font-size:15px; padding:14px 22px; border-radius:2px;}
  .hero-cta-v2:hover{background:var(--white);}

  .marquee{background:var(--lime); transform:skewY(-1.2deg); margin:0 -2px -10px -2px; overflow:hidden;}
  .marquee-track{display:flex; align-items:center; gap:28px; padding:14px 24px; white-space:nowrap; transform:skewY(1.2deg);}
  .marquee-track span{font-size:15px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; color:var(--graphite);}
  .marquee-track .star{color:var(--graphite); display:flex; align-items:center;}

  /* SUBNAV — page-specific anchor links to key blocks */
  .subnav{border-top:1px solid #e6e4dc; border-bottom:1px solid #e6e4dc;}
  .subnav-inner{display:flex; gap:26px; padding:12px 0; overflow-x:auto;}
  .subnav-inner a{font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap;}
  .subnav-inner a:hover{color:var(--blue);}

  /* SPLIT — text + reserved photo slot, reused across sections 2/3/7 */
  .split{display:flex; gap:48px; align-items:center;}
  .split .split-text{flex:1 1 58%; min-width:0;}
  .split .split-photo{flex:1 1 42%; display:flex; flex-direction:column; align-items:center; gap:10px;}
  .imgph{width:100%; max-width:380px; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center;}
  .imgph img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
  .imgph.fill img{width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;}
  .imgph .ph-label{color:rgba(255,255,255,0.55); font-size:12px; font-weight:600; padding:0 20px; line-height:1.5;}
  .imgph.on-blue{background:none; border:none;}
  .imgph.on-blue .ph-label{color:rgba(255,255,255,0.75);}
  .imgph-dims{font-size:12px; color:var(--muted);}

  /* PROBLEM */
  .problem-highlight{border-left:4px solid var(--lime); padding:6px 0 6px 26px; margin-top:32px; max-width:640px;}
  .problem-highlight p{font-family:"Nauryz",sans-serif; font-weight:400; font-size:24px; line-height:1.35; color:var(--graphite); margin:0;}

  /* WHAT IS IT */
  .checklist{list-style:none; margin:24px 0 0 0; padding:0; max-width:520px;}
  .checklist li{position:relative; padding:10px 0 10px 26px; font-size:16px; line-height:1.5; color:#33353a; border-bottom:1px solid #e6e4dc;}
  .checklist li::before{content:""; position:absolute; left:0; top:18px; width:8px; height:8px; background:var(--lime);}
  .flow{display:flex; align-items:center; gap:0; margin-top:48px; flex-wrap:wrap; row-gap:16px;}
  .flow .node{background:var(--graphite); color:var(--white); font-size:13px; font-weight:600; padding:10px 16px; text-align:center;}
  .flow .arrow{color:var(--muted); font-size:18px; padding:0 8px;}

  /* CARDS (bento, varied sizes) */
  .bento{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px;}
  .bento .card{padding:32px 28px; grid-column:span 3;}
  .bento .card.wide{grid-column:span 6;}
  .bento .card.blue{background:var(--blue); color:var(--white);}
  .bento .card.graphite{background:var(--graphite); color:var(--white);}
  .bento .card.warm{background:var(--warm); color:var(--graphite); border:1px solid #e6e4dc;}
  .bento .tag{display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; padding:5px 10px; margin-bottom:16px;}
  .bento .card.blue .tag, .bento .card.graphite .tag{background:var(--lime); color:var(--graphite);}
  .bento .card.warm .tag{background:var(--graphite); color:var(--lime);}
  .bento .card h3{font-family:"Nauryz",sans-serif; font-weight:400; font-size:23px; margin:0 0 12px 0;}
  .bento .card p{font-size:15px; line-height:1.55; margin:0;}
  .bento .card.blue p, .bento .card.graphite p{color:rgba(255,255,255,0.85);}
  .bento .card.warm p{color:#4b4d52;}

  /* CASE STUDY */
  .case{background:var(--graphite); color:var(--white);}
  .case .section-head h2{color:var(--white);}
  .case-intro{max-width:680px; font-size:17px; line-height:1.6; color:rgba(255,255,255,0.82);}
  .case-cols{display:flex; gap:24px; margin-top:44px;}
  .case-col{flex:1; padding:32px 28px; background:rgba(255,255,255,0.06); border-top:2px solid var(--lime);}
  .case-col .stat{font-family:"Nauryz",sans-serif; font-size:44px; color:var(--lime); line-height:1;}
  .case-col h4{font-size:16px; font-weight:600; margin:14px 0 10px 0;}
  .case-col p{font-size:14.5px; line-height:1.55; color:rgba(255,255,255,0.75); margin:0;}
  .case-col .example-btn{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; font-weight:600; color:var(--lime); border-bottom:1px solid var(--lime); padding-bottom:2px;}
  .case-col .example-btn:hover{color:var(--white); border-color:var(--white);}

  /* STEPS */
  .steps5{display:flex; flex-direction:column; margin-top:12px;}
  .step5{display:flex; gap:28px; padding:26px 0; border-top:1px solid #e6e4dc;}
  .step5:last-child{border-bottom:1px solid #e6e4dc;}
  .step5 .n{font-family:"Nauryz",sans-serif; font-size:34px; color:var(--blue); line-height:1; flex:0 0 70px;}
  .step5 h4{font-size:17px; font-weight:600; margin:0 0 6px 0;}
  .step5 p{font-size:15px; line-height:1.55; color:#4b4d52; margin:0; max-width:520px;}

  /* PRINCIPLE (color band) */
  .principle{background:var(--blue); color:var(--white);}
  .principle h2{color:var(--white); font-size:clamp(24px,3vw,34px); max-width:680px; line-height:1.25;}
  .principle p{font-size:17px; line-height:1.6; color:rgba(255,255,255,0.85); max-width:640px; margin-top:20px;}

  /* ABOUT ME */
  .about{display:flex; gap:56px; align-items:flex-start;}
  .about-visual{flex:0 0 320px;}
  .about-copy{flex:1;}
  .about-copy p{font-size:16.5px; line-height:1.65; color:#33353a; max-width:600px;}
  .proof-list{list-style:none; margin:28px 0 0 0; padding:0; display:flex; flex-direction:column; gap:0; max-width:600px;}
  .proof-list li{font-size:14.5px; font-weight:600; color:var(--graphite); padding:12px 0; border-top:1px solid #e6e4dc;}

  /* FIT / NOT FIT */
  .fitcols{display:flex; gap:32px;}
  .fitcol{flex:1; padding:32px 30px;}
  .fitcol.yes{background:var(--warm); border:1px solid #e6e4dc;}
  .fitcol.no{background:var(--white); border:1px solid #e6e4dc;}
  .fitcol h4{font-family:"Nauryz",sans-serif; font-weight:400; font-size:20px; margin:0 0 18px 0;}
  .fitcol ul{list-style:none; margin:0; padding:0;}
  .fitcol li{position:relative; padding:9px 0 9px 22px; font-size:15px; line-height:1.5; color:#33353a;}
  .fitcol.yes li::before{content:"+"; position:absolute; left:0; top:8px; color:var(--blue); font-weight:700;}
  .fitcol.no li::before{content:"–"; position:absolute; left:0; top:8px; color:var(--muted); font-weight:700;}

  /* FAQ */
  .faq{display:flex; flex-direction:column; margin-top:8px;}
  .faqitem{padding:24px 0; border-top:1px solid #e6e4dc;}
  .faqitem:last-child{border-bottom:1px solid #e6e4dc;}
  .faqitem h4{font-size:17px; font-weight:600; margin:0 0 8px 0; color:var(--graphite);}
  .faqitem p{font-size:15px; line-height:1.55; color:#4b4d52; margin:0; max-width:640px;}

  /* FINAL CTA */
  .finalcta{background:var(--graphite); color:var(--white);}
  .finalcta-inner{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}
  .finalcta h2{color:var(--white); font-size:clamp(28px,3.8vw,44px); max-width:560px; line-height:1.15;}
  .finalcta p{color:rgba(255,255,255,0.75); font-size:16px; max-width:460px; margin-top:16px;}
  .finalcta-btn{background:var(--lime); color:var(--graphite); font-weight:600; font-size:17px; padding:18px 30px; display:inline-block; border-radius:2px; margin-top:28px;}
  .finalcta-btn:hover{background:var(--white);}

  /* FOOTER */
  .foot{background:var(--white); border-top:1px solid #e6e4dc; padding:48px 0 40px 0;}
  .foot-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-bottom:28px; border-bottom:1px solid #e6e4dc;}
  .foot-links{display:flex; gap:28px; font-size:14px; font-weight:600;}
  .foot-social{display:flex; gap:20px; font-size:14px;}
  .foot-legal{font-size:12.5px; color:var(--muted); line-height:1.6; padding-top:22px;}

  @media (max-width:820px){
    .wrap,.wrap-narrow{padding:0 22px;}
    .nav{padding:20px 22px; flex-direction:column; gap:14px; align-items:flex-start;}
    .navlinks{gap:20px; flex-wrap:wrap;}
    .section{padding:52px 0;}
    .hero-v2-inner{grid-template-columns:1fr; padding:36px 0 44px 0; min-height:0; gap:28px;}
    .hero-v2-center{min-height:320px; order:-1;}
    .hero-v2-headline{font-size:clamp(30px,9vw,46px);}
    .hero-v2-photo{position:relative; left:auto; bottom:auto; height:auto; width:78%; max-width:220px; margin:0 auto; display:block; order:-1;}
    .stat-col{flex-direction:row; flex-wrap:wrap; gap:18px;}
    .stat-col .lbl{max-width:110px;}
    .marquee-track span{font-size:12px;}
    .about{flex-direction:column; gap:32px;}
    .split{flex-direction:column; gap:28px;}
    .split .split-photo{order:-1;}
    .about-visual{flex:none; max-width:260px;}
    .bento{grid-template-columns:1fr;}
    .bento .card{grid-column:1;}
    .case-cols{flex-direction:column;}
    .fitcols{flex-direction:column;}
    .finalcta-inner{flex-direction:column; align-items:flex-start;}
    .foot-top{flex-direction:column;}
    .flow{justify-content:flex-start;}
  }