/* =========================================================
     KLEVA DESIGNS — V7 DESIGN SYSTEM
     Strictly black + white. No grey hue anywhere — hierarchy on
     light sections comes from type weight/size/spacing, hierarchy
     on black sections comes from opacity-of-white, never a grey hex.
  ========================================================= */
  :root{
    --black:#0A0A0A;
    --white:#FFFFFF;
    --grey:var(--black);
    --light-grey:var(--black);
    --hair:rgba(10,10,10,.14);
    --paper:rgba(10,10,10,.035);   /* barely-there black tint for hover/success states — no grey, no off-white */
    --ease:cubic-bezier(.16,.84,.44,1);
    --easeOut:cubic-bezier(.22,1,.36,1);

    /* spacing scale */
    --s-1:8px; --s-2:12px; --s-3:16px; --s-4:24px; --s-5:32px;
    --s-6:48px; --s-7:64px; --s-8:96px; --s-9:128px; --s-10:180px;

    --radius-sm:2px;
    --radius-md:6px;
    --radius-lg:20px;
    --radius-pill:100px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;color-scheme:light only;background:#FFFFFF;}
  body{
    font-family:'Poppins',sans-serif;
    background:var(--white);
    color:var(--black);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color-scheme:light only;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:1280px;margin:0 auto;padding:0 64px;}
  .eyebrow{
    font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
    color:var(--grey);
  }
  ::selection{background:var(--black);color:var(--white);}

  /* ---------- LOGO ---------- */
  .logo-mark{display:flex;align-items:center;gap:10px;}
  .logo-mark img{height:40px;width:auto;display:block;}

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid transparent;
    transition:border-color .4s var(--ease), background .4s var(--ease);
  }
  header.scrolled{border-bottom-color:var(--hair);}
  nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:26px 64px;max-width:1280px;margin:0 auto;
  }
  .nav-links{display:flex;gap:48px;list-style:none;}
  .nav-links a{
    font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--black);position:relative;padding-bottom:4px;
    transition:color .3s var(--ease);
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--black);
    transition:width .45s var(--easeOut);
  }
  .nav-links a:hover::after{width:100%;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--black);color:var(--white);
    padding:15px 30px;border-radius:var(--radius-pill);
    font-size:13.5px;font-weight:600;letter-spacing:.02em;
    transition:transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
    white-space:nowrap;
    box-shadow:0 0 0 rgba(10,10,10,0);
  }
  .btn:hover{transform:translateY(-2px);background:#1c1c1c;box-shadow:0 16px 32px rgba(10,10,10,.16);}
  .btn:active{transform:translateY(0) scale(.98);box-shadow:0 4px 12px rgba(10,10,10,.12);}
  .btn.light{background:var(--white);color:var(--black);}
  .btn.light:hover{background:rgba(10,10,10,.05);box-shadow:0 16px 32px rgba(0,0,0,.3);}
  button.btn{font-family:inherit;border:none;cursor:pointer;}
  .option-pill{font-family:inherit;border-style:solid;}
  .nav-cta{display:flex;align-items:center;gap:32px;}
  .nav-menu-cta{display:none;} /* only ever shown inside the mobile full-screen menu */
  .menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:12px;position:relative;z-index:160;}
  .menu-toggle span{width:22px;height:1.5px;background:var(--black);display:block;transition:transform .35s var(--ease), opacity .35s var(--ease);}
  .menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  /* ---------- HERO ---------- */
  .hero{
    padding-top:252px;padding-bottom:208px;
    min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  }
  .hero .eyebrow{margin-bottom:var(--s-6);display:flex;align-items:center;gap:10px;}
  .hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--black);display:inline-block;}
  .hero h1{
    font-size:clamp(42px,8.4vw,124px);
    font-weight:800;
    line-height:.98;
    letter-spacing:-.03em;
    max-width:1220px;
  }
  .hero h1 em{
    font-style:normal;
    font-weight:800;
    -webkit-text-stroke:1.5px var(--black);
    color:var(--white);
  }
  .hero-sub{
    margin-top:var(--s-6);font-size:clamp(17px,1.6vw,21px);color:var(--grey);
    max-width:44ch;line-height:1.65;font-weight:400;
  }
  .hero-actions{margin-top:var(--s-8);display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
  .scroll-hint{font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--light-grey);display:flex;align-items:center;gap:12px;}
  .scroll-hint .line{width:40px;height:1px;background:var(--light-grey);animation:pulse 2.2s infinite;}
  @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
  /* hero copy: full sentence on larger screens, a tightened one-liner on phones */
  .hero-sub-short{display:none;}
  @media(max-width:480px){
    .hero-sub-full{display:none;}
    .hero-sub-short{display:block;}
  }

  /* reveal */
  .reveal{opacity:0;transform:translateY(42px);transition:opacity 1s var(--easeOut), transform 1s var(--easeOut);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in{transition-delay:.1s;}
  .reveal-delay-2.in{transition-delay:.2s;}
  .reveal-delay-3.in{transition-delay:.3s;}
  .reveal-delay-4.in{transition-delay:.4s;}
  .reveal-delay-5.in{transition-delay:.5s;}

  /* ---------- SECTION SHELL ---------- */
  section{position:relative;}
  .section-pad{padding-top:var(--s-10);padding-bottom:var(--s-10);}
  .rule{border-top:1px solid var(--hair);}
  .kicker{
    display:flex;align-items:center;gap:18px;margin-bottom:var(--s-8);
  }
  .kicker .eyebrow{margin:0;}
  .kicker::after{content:"";flex:1;height:1px;background:var(--hair);}

  /* ---------- STORY (numbered staged) ---------- */
  .story-item{
    display:grid;grid-template-columns:130px 1fr;gap:var(--s-5);
    padding:var(--s-7) 0;border-top:1px solid var(--hair);
  }
  .story-item:last-child{border-bottom:1px solid var(--hair);}
  .story-num{font-size:15px;font-weight:600;color:var(--light-grey);padding-top:8px;}
  .story-item h3{
    font-size:clamp(24px,3.2vw,38px);font-weight:700;line-height:1.2;letter-spacing:-.01em;
    max-width:820px;
  }
  .story-item p{margin-top:var(--s-4);font-size:16.5px;color:var(--grey);max-width:56ch;line-height:1.75;}

  /* ---------- MANIFESTO / VISION ---------- */
  .manifesto{
    padding:var(--s-10) 0;text-align:center;
  }
  .manifesto p.tag{font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--light-grey);margin-bottom:var(--s-5);}
  .manifesto h2{
    font-size:clamp(30px,5vw,64px);font-weight:700;line-height:1.22;letter-spacing:-.02em;
    max-width:920px;margin:0 auto;
  }
  .manifesto h2 .accent{color:var(--light-grey);}

  /* ---------- WHAT MAKES A GREAT WEBSITE (numbered list) ---------- */
  .method-list{border-top:1px solid var(--hair);}
  .method-row{
    display:grid;grid-template-columns:120px 1fr 1fr;gap:var(--s-5);align-items:start;
    padding:var(--s-7) 0;border-bottom:1px solid var(--hair);
    position:relative;
    transition:padding-left .4s var(--easeOut);
  }
  .method-row::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--black);
    transform:scaleY(0);transform-origin:top;transition:transform .4s var(--easeOut);
  }
  .method-row:hover{padding-left:var(--s-4);}
  .method-row:hover::before{transform:scaleY(1);}
  .method-num{font-size:14px;font-weight:600;color:var(--light-grey);}
  .method-row h4{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.01em;}
  .method-row p{font-size:16px;color:var(--grey);line-height:1.7;max-width:46ch;}
  @media(max-width:760px){
    .method-row{grid-template-columns:1fr;gap:14px;padding:var(--s-6) 0;}
    .method-row:hover{padding-left:0;}
    .method-row::before{display:none;}
    .method-num{order:0;}
    .method-row h4{font-size:21px;}
    .method-row p{font-size:15.5px;max-width:100%;}
  }

  /* ---------- HONEST / COMPARISON SECTION ---------- */
  .honest-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-9);align-items:start;}
  .honest-grid h2{font-size:clamp(28px,3.8vw,46px);font-weight:700;line-height:1.18;letter-spacing:-.01em;}
  .honest-grid > div:first-child p{margin-top:var(--s-4);font-size:17px;color:var(--grey);line-height:1.75;max-width:46ch;}
  .compare{display:flex;flex-direction:column;gap:0;}
  .compare-item{padding:var(--s-4) 0;border-top:1px solid var(--hair);}
  .compare-item:last-child{border-bottom:1px solid var(--hair);}
  .compare-item .label{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--light-grey);margin-bottom:var(--s-1);}
  .compare-item .val{font-size:18.5px;font-weight:600;line-height:1.5;}
  .compare-item.kleva .val{position:relative;padding-left:24px;}
  .compare-item.kleva .val::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--black);}
  @media(max-width:860px){.honest-grid{grid-template-columns:1fr;gap:var(--s-6);}}
  @media(max-width:760px){
    .honest-grid h2{font-size:clamp(25px,7vw,32px);}
    .honest-grid > div:first-child p{font-size:15.5px;}
  }

  /* ---------- VALUES ---------- */
  .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);}
  .value-card{
    background:var(--white);padding:var(--s-6) var(--s-5);min-height:280px;
    display:flex;flex-direction:column;justify-content:space-between;
    transition:background .35s var(--ease);
  }
  .value-card:hover{background:var(--paper);}
  .value-card .vnum{font-size:12.5px;color:var(--light-grey);font-weight:600;letter-spacing:.06em;}
  .value-card h4{font-size:21px;font-weight:700;margin-top:var(--s-8);letter-spacing:-.01em;}
  .value-card p{margin-top:var(--s-2);font-size:15px;color:var(--grey);line-height:1.65;}
  @media(max-width:900px){.values-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.values-grid{grid-template-columns:1fr;}}
  @media(max-width:760px){
    .value-card{padding:var(--s-5) var(--s-4);min-height:0;gap:var(--s-6);}
    .value-card h4{margin-top:0;font-size:19px;}
  }

  /* ---------- INDUSTRIES / CONCEPT BUILDS ---------- */
  .pf-intro{max-width:760px;margin-bottom:var(--s-8);}
  .pf-intro h2{font-size:clamp(28px,4.2vw,50px);font-weight:800;line-height:1.12;letter-spacing:-.02em;}
  .pf-intro p{margin-top:var(--s-4);font-size:17px;color:var(--grey);line-height:1.75;max-width:52ch;}
  .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);}
  .pf-card{
    border:1px solid var(--hair);background:var(--white);display:flex;flex-direction:column;border-radius:var(--radius-md);overflow:hidden;
    transition:transform .45s var(--easeOut), box-shadow .45s var(--easeOut), border-color .45s var(--easeOut);
  }
  .pf-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(10,10,10,.12);border-color:transparent;}
  .pf-thumb{height:220px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
  .pf-thumb .pf-word{position:relative;z-index:1;}
  .pf-t1{background:#101418;}
  .pf-t1 .pf-word{font-weight:900;font-size:26px;letter-spacing:.06em;text-transform:uppercase;color:#fff;}
  .pf-t1 .pf-word i{font-style:normal;color:#ffb61e;}
  .pf-t2{background:#faf8f3;}
  .pf-t2 .pf-word{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:23px;letter-spacing:.24em;text-transform:uppercase;color:#1c1a16;}
  .pf-t2 .pf-word i{font-style:normal;color:#b5a48b;}
  .pf-t3{background:#221a14;}
  .pf-t3 .pf-word{font-family:Georgia,'Times New Roman',serif;font-size:26px;color:#f3ead9;}
  .pf-t3 .pf-word i{font-style:italic;color:#d96c3a;}
  .pf-t4{background:#ffffff;}
  .pf-t4 .pf-word{font-family:Georgia,'Times New Roman',serif;font-size:20px;letter-spacing:.1em;color:#0d0d0d;}
  .pf-t5{background:#0a0a10;}
  .pf-t5 .pf-word{font-weight:800;font-size:28px;letter-spacing:-.02em;text-transform:uppercase;background:linear-gradient(90deg,#c8ff2e,#7b5bff,#ff4d8d);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .pf-t6{background:#fdfdfe;}
  .pf-t6 .pf-word{font-weight:700;font-size:24px;letter-spacing:-.02em;color:#0f1222;}
  .pf-t6 .pf-word i{font-style:normal;color:#5b5bf7;}
  .pf-swatches{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:8px;}
  .pf-swatches i{width:12px;height:12px;border-radius:50%;display:block;border:1px solid rgba(127,127,127,.25);}
  .pf-body{padding:var(--s-5) var(--s-5) var(--s-6);display:flex;flex-direction:column;flex:1;}
  .pf-ind{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--light-grey);}
  .pf-body h3{font-size:21px;font-weight:700;letter-spacing:-.01em;margin-top:var(--s-2);}
  .pf-body p{margin-top:var(--s-2);font-size:14.5px;color:var(--grey);line-height:1.65;flex:1;}
  .pf-link{margin-top:var(--s-4);display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--black);}
  .pf-link svg{transition:transform .35s var(--ease);}
  .pf-card:hover .pf-link svg{transform:translate(3px,-3px);}
  .pf-note{
    margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--hair);
    display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;align-items:baseline;
  }
  .pf-note p{font-size:15px;color:var(--grey);line-height:1.75;max-width:60ch;}
  .pf-note p b{color:var(--black);font-weight:600;}
  @media(max-width:960px){.pf-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:620px){.pf-grid{grid-template-columns:1fr;gap:var(--s-4);}}
  @media(max-width:760px){
    .pf-thumb{height:160px;}
    .pf-body{padding:var(--s-4);}
    .pf-body h3{font-size:19px;}
    .pf-note{margin-top:var(--s-6);padding-top:var(--s-4);gap:var(--s-2);}
  }

  /* ---------- CLOSING CTA (black bookend, feeds straight into footer) ---------- */
  .closing{
    background:var(--black);color:var(--white);
    padding:calc(var(--s-10) + 24px) 0 var(--s-9);text-align:center;position:relative;overflow:hidden;
  }
  .closing .eyebrow{color:rgba(255,255,255,.5);justify-content:center;display:flex;}
  .closing h2{
    font-size:clamp(34px,6.4vw,80px);font-weight:800;letter-spacing:-.02em;line-height:1.06;
    margin:var(--s-5) auto var(--s-4);max-width:920px;
  }
  .closing h2 .out{color:rgba(255,255,255,.25);}
  .closing-sub{margin:0 auto;color:rgba(255,255,255,.6);font-size:18px;line-height:1.6;max-width:52ch;}
  .closing-actions{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:var(--s-7);}
  .closing-actions .btn{padding-left:40px;padding-right:40px;min-height:58px;font-size:15.5px;}
  .closing-note{margin-top:var(--s-4);color:rgba(255,255,255,.4);font-size:13.5px;letter-spacing:.02em;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--black);color:rgba(255,255,255,.68);
    padding:var(--s-9) 0 var(--s-9);border-top:1px solid rgba(255,255,255,.08);
    position:relative;
  }

  .footer-cols{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:var(--s-8);
  }

  .footer-logo-col{display:flex;flex-direction:column;align-items:center;}
  .footer-logo-col .logo-mark img{height:72px;width:auto;display:block;}
  .footer-logo-col .footer-brand-name{
    margin-top:20px;font-size:23px;font-weight:700;letter-spacing:.04em;
    color:var(--white);text-transform:uppercase;
  }

  .footer-block{max-width:340px;}
  .footer-heading{
    position:relative;display:inline-block;
    font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--white);padding-bottom:14px;margin-bottom:22px;
  }
  .footer-heading::after{
    content:"";position:absolute;left:0;bottom:0;width:38px;height:2px;background:var(--white);
  }

  .footer-contact-lines{display:flex;flex-direction:column;gap:14px;}
  .footer-contact-lines a, .footer-contact-lines span{
    font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);
    transition:color .25s var(--ease);
  }
  .footer-contact-lines a:hover{color:var(--white);}

  .footer-socials{display:flex;justify-content:center;gap:16px;margin-top:26px;}
  .footer-socials a{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
    color:rgba(255,255,255,.78);transition:border-color .25s var(--ease), color .25s var(--ease);
  }
  .footer-socials a svg{width:17px;height:17px;}
  .footer-socials a:hover{border-color:var(--white);color:var(--white);}

  .footer-services-list{display:flex;flex-direction:column;gap:15px;}
  .footer-services-list a{
    font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);
    transition:color .25s var(--ease);
  }
  .footer-services-list a:hover{color:var(--white);}

  .footer-bottom{
    display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
    gap:var(--s-3);padding-top:var(--s-8);margin-top:var(--s-8);
    border-top:1px solid rgba(255,255,255,.08);
    font-size:13px;color:rgba(255,255,255,.4);text-align:center;
  }
  footer a:focus-visible{outline-color:var(--white);}

  .back-to-top{
    position:fixed;right:24px;bottom:24px;z-index:90;
    width:46px;height:46px;border-radius:50%;
    background:var(--black);border:1px solid rgba(255,255,255,.28);color:var(--white);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    opacity:0;pointer-events:none;transform:translateY(8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), border-color .25s var(--ease);
  }
  .back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
  .back-to-top:hover{border-color:var(--white);}
  .back-to-top svg{width:18px;height:18px;}

  /* ---------- FOOTER: DESKTOP ---------- */
  @media(min-width:900px){
    .footer-cols{
      display:grid;grid-template-columns:1.3fr 1fr 1fr;align-items:start;text-align:left;
      gap:var(--s-9);
    }
    .footer-logo-col{align-items:flex-start;}
    .footer-socials{justify-content:flex-start;}
    .footer-heading::after{left:0;}
    .footer-block{max-width:300px;}
  }

  /* ---------- FOOTER: MOBILE ---------- */
  @media(max-width:600px){
    .closing{padding:88px 0 var(--s-9);}
    .closing h2{margin:18px auto 20px;}
    .closing-sub{font-size:16px;}
    .closing-actions{margin-top:var(--s-6);}
    .closing-actions .btn{width:100%;justify-content:center;}
    .closing-note{margin-top:var(--s-4);}

    footer{padding-top:var(--s-7);}
    .footer-cols{gap:var(--s-7);}
    .footer-contact-lines a, .footer-contact-lines span,
    .footer-services-list a{min-height:38px;display:flex;align-items:center;font-size:15.5px;}
    .footer-contact-lines{align-items:center;}
    .back-to-top{right:16px;bottom:16px;width:42px;height:42px;}
  }


  @media(max-width:760px){
    /* touch targets + tap safety, site-wide */
    .btn{min-height:48px;touch-action:manipulation;}
    a, button{touch-action:manipulation;}
    .logo-mark img{height:34px;}

    /* full-screen mobile menu */
    .nav-links{
      display:flex;position:fixed;inset:0;top:0;z-index:150;
      flex-direction:column;justify-content:flex-start;gap:0;
      background:var(--white);
      padding:calc(100px + env(safe-area-inset-top,0px)) 28px 32px;
      overflow-y:auto;-webkit-overflow-scrolling:touch;
      transform:translateX(100%);transition:transform .5s var(--easeOut);
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links li{width:100%;}
    .nav-links a{
      display:flex;align-items:center;min-height:66px;
      font-size:24px;font-weight:600;letter-spacing:-.01em;
      border-bottom:1px solid var(--hair);
    }
    .nav-links li:first-child a{border-top:1px solid var(--hair);}
    .nav-links a::after{display:none;}
    .nav-links a:active{opacity:.55;}
    .nav-menu-cta{display:none;}
    .nav-links .nav-menu-cta{
      display:flex;margin-top:32px;padding:0;border:none;
    }
    .nav-links .nav-menu-cta .btn{
      width:100%;justify-content:center;min-height:56px;font-size:16px;
    }
    .menu-toggle{display:flex;min-width:44px;min-height:44px;justify-content:center;align-items:center;}
    .nav-cta{gap:14px;}
    .nav-cta > .btn.modal-trigger{display:none;}
    .nav-cta .btn{min-height:44px;padding:12px 20px;font-size:13.5px;}
    body.menu-open{overflow:hidden;}

    /* CONTAINER — a touch tighter than desktop, still generous */
    .wrap{padding:0 32px;}
    nav{padding:18px 32px;}

    /* HERO — headline immediately visible, CTA above the fold, no oversized graphics */
    .hero{padding-top:132px;padding-bottom:76px;min-height:100svh;min-height:100dvh;}
    .hero .eyebrow{margin-bottom:20px;}
    .hero h1{line-height:1.04;}
    .hero-sub{margin-top:24px;max-width:100%;}
    .hero-actions{margin-top:44px;flex-direction:column;align-items:stretch;gap:16px;}
    .hero-actions .btn{width:100%;justify-content:center;min-height:52px;}
    .scroll-hint{justify-content:center;}

    /* SECTION RHYTHM — generous, but doesn't overrun a small screen */
    .section-pad{padding-top:92px;padding-bottom:92px;}
    .manifesto{padding:84px 0;}
    .process-section{padding-top:92px;padding-bottom:92px;}
    .choose-section{padding-top:92px;padding-bottom:92px;}
    .services-dark{padding:88px 0 72px;}
    .kicker{margin-bottom:44px;gap:12px;}
    .sec-head, .pf-intro, .services-dark-head{margin-bottom:44px;}
    .sec-head p, .pf-intro p, .services-dark-head p{margin-top:20px;}

    /* TYPOGRAPHY — nothing requires zooming, comfortable measure */
    .hero h1{font-size:clamp(36px,10.4vw,50px);}
    .sec-head h2, .services-dark-head h2, .pf-intro h2{font-size:clamp(27px,7.2vw,35px);}
    .manifesto h2{font-size:clamp(25px,7.8vw,35px);}
    p{max-width:100%;}

    .story-item{grid-template-columns:1fr;gap:16px;padding:48px 0;}
    .story-item h3{max-width:100%;}

    .closing{padding:104px 0 60px;}
    .closing h2{margin:22px auto 36px;}
    .closing-actions{margin-bottom:0;gap:16px;}
    .closing-actions .btn{width:100%;justify-content:center;min-height:52px;}
    .closing-sub{text-align:center;}
  }
  @media(max-width:480px){
    .wrap{padding:0 28px;}
    nav{padding:16px 28px;}
    .section-pad{padding-top:76px;padding-bottom:76px;}
    .manifesto{padding:68px 0;}
    .process-section{padding-top:76px;padding-bottom:76px;}
    .choose-section{padding-top:76px;padding-bottom:76px;}
    .services-dark{padding:72px 0 60px;}
    .hero{padding-top:120px;padding-bottom:64px;}
    .closing{padding:88px 0 52px;}
  }

  /* ---------- SHARED SECTION HEAD ---------- */
  .sec-head{max-width:760px;margin-bottom:var(--s-8);}
  .sec-head h2{font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.2;letter-spacing:-.01em;margin-top:var(--s-3);}
  .sec-head p{margin-top:var(--s-4);font-size:17px;color:var(--grey);line-height:1.7;max-width:56ch;}

  /* ---------- WHAT WE DO (dark flagship section) ---------- */
  .services-dark{background:var(--black);color:var(--white);padding:var(--s-10) 0 var(--s-9);position:relative;overflow:hidden;}
  .services-dark .kicker .eyebrow{color:rgba(255,255,255,.55);}
  .services-dark .kicker::after{background:rgba(255,255,255,.09);}
  .services-dark-head{max-width:800px;position:relative;z-index:1;}
  .services-dark-head h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1.2;letter-spacing:-.02em;margin-top:var(--s-4);color:var(--white);}
  .services-dark-head p{margin-top:var(--s-4);font-size:17px;color:rgba(255,255,255,.55);max-width:52ch;line-height:1.7;}
  .services-watermark{
    position:absolute;top:8%;right:-3%;font-size:min(30vw,340px);font-weight:800;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.035);letter-spacing:-.04em;
    line-height:.8;z-index:0;pointer-events:none;user-select:none;
  }
  .marquee-mono{margin-top:var(--s-8);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:var(--s-4) 0;overflow:hidden;white-space:nowrap;position:relative;z-index:1;}
  .marquee-mono-track{display:inline-flex;gap:3rem;animation:slideMono 32s linear infinite;will-change:transform;}
  .marquee-mono span{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);display:inline-flex;align-items:center;gap:3rem;}
  .marquee-mono span::after{content:"◆";font-size:8px;color:rgba(255,255,255,.12);}
  @keyframes slideMono{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5);margin-top:var(--s-9);position:relative;z-index:1;}
  .svc-item{
    background:#111111;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);
    padding:var(--s-7) var(--s-6);position:relative;overflow:hidden;
    min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;
    transition:background .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
    will-change:transform;
  }
  .svc-item:hover{
    background:#151515;border-color:rgba(255,255,255,.14);
    transform:translateY(-8px);
    box-shadow:
      0 30px 60px rgba(0,0,0,.55),
      0 0 46px rgba(255,255,255,.04);
    z-index:2;
  }
  /* light sweep */
  .svc-item::before{
    content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.06), transparent);
    transform:skewX(-18deg);pointer-events:none;transition:left .9s var(--ease);
  }
  .svc-item:hover::before{left:130%;}
  .svc-item .ico{
    width:28px;height:28px;color:rgba(255,255,255,.4);position:relative;z-index:1;
    transition:color .4s var(--ease), transform .4s var(--ease);
  }
  .svc-item:hover .ico{color:rgba(255,255,255,.95);transform:translateY(-2px);}
  .svc-item h3{
    font-size:clamp(22px,2.2vw,27px);font-weight:700;letter-spacing:-.01em;
    position:relative;z-index:1;max-width:320px;margin-top:var(--s-5);
    transition:color .4s var(--ease), text-shadow .4s var(--ease);
  }
  .svc-item:hover h3{color:#ffffff;text-shadow:0 0 24px rgba(255,255,255,.3);}
  .svc-item p{margin-top:var(--s-3);color:rgba(255,255,255,.55);font-size:15.5px;line-height:1.7;max-width:340px;position:relative;z-index:1;}
  .svc-item .tags{margin-top:var(--s-5);display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1;}
  .svc-item .tag{
    font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.1);padding:6px 14px;border-radius:var(--radius-pill);
    transition:border-color .4s var(--ease), color .4s var(--ease);
  }
  .svc-item:hover .tag{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.78);}
  @media(max-width:860px){
    .svc-grid{grid-template-columns:1fr;margin-top:var(--s-6);}
    .svc-item{padding:var(--s-6) var(--s-4);min-height:auto;}
    .svc-item:hover{transform:translateY(-4px);}
  }
  @media(max-width:760px){
    .services-watermark{display:none;}
    .marquee-mono{margin-top:var(--s-6);padding:var(--s-2) 0;}
    .marquee-mono span{font-size:12px;gap:2rem;}
    .marquee-mono-track{gap:2rem;}
    .svc-item h3{font-size:20px;margin-top:18px;}
    .svc-item p{max-width:100%;}
    .svc-item:active{transform:scale(.98);}
  }

  /* ---------- HOW IT WORKS (horizontal connected timeline) ---------- */
  .process-section{padding-top:var(--s-10);padding-bottom:var(--s-10);}
  .process-track{position:relative;display:flex;justify-content:space-between;gap:20px;margin-top:var(--s-9);padding-top:16px;}
  .process-track::before{content:"";position:absolute;top:16px;left:0;right:0;height:1px;background:var(--hair);z-index:0;}
  .process-track .rail-fill{position:absolute;top:16px;left:0;height:1px;background:var(--black);width:0;z-index:1;transition:width 1.8s var(--easeOut);}
  .process-track.in .rail-fill{width:100%;}
  .proc-step{position:relative;z-index:2;flex:1;min-width:0;}
  .proc-step .dot{
    width:12px;height:12px;border-radius:50%;background:var(--black);
    border:3px solid var(--white);box-shadow:0 0 0 1px var(--hair);
    margin-bottom:var(--s-5);transition:transform .4s var(--ease) .3s, background .4s var(--ease) .3s;
  }
  .process-track.in .proc-step .dot{transform:scale(1.2);}
  .proc-step:nth-child(even){margin-top:var(--s-6);}
  .proc-step .pnum{
    font-size:clamp(36px,4.2vw,54px);font-weight:800;letter-spacing:-.02em;line-height:1;
    color:transparent;-webkit-text-stroke:1.2px var(--black);
  }
  .proc-step h4{margin-top:var(--s-3);font-size:19px;font-weight:700;letter-spacing:-.01em;}
  .proc-step p{margin-top:var(--s-2);font-size:14.5px;color:var(--grey);line-height:1.6;max-width:210px;}
  @media(max-width:900px){
    .process-track{flex-direction:column;gap:var(--s-6);}
    .process-track::before{top:0;bottom:0;left:16px;right:auto;width:1px;height:auto;}
    .process-track .rail-fill{top:0;left:16px;width:1px;height:0;}
    .process-track.in .rail-fill{height:100%;width:1px;}
    .proc-step{padding-left:44px;}
    .proc-step:nth-child(even){margin-top:0;}
    .proc-step .dot{position:absolute;left:10px;top:2px;margin-bottom:0;}
    .proc-step p{max-width:none;}
  }
  @media(max-width:760px){
    .process-track{margin-top:var(--s-6);gap:var(--s-4);}
    .proc-step .pnum{font-size:clamp(30px,10vw,40px);}
    .proc-step h4{font-size:17px;}
  }

  /* ---------- WHY CHOOSE KLEVA (3D coverflow) ---------- */
  .choose-section{padding-top:var(--s-10);padding-bottom:var(--s-10);}
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .coverflow{
    position:relative;margin-top:var(--s-8);display:flex;align-items:center;justify-content:center;gap:0;
    outline:none;
  }
  .cf-viewport{
    position:relative;width:100%;max-width:960px;height:420px;
    perspective:1700px;overflow:hidden;
  }
  .cf-track{
    position:relative;width:100%;height:100%;
    transition:transform .5s var(--ease);
  }
  .cf-card{
    position:absolute;top:50%;left:50%;width:300px;min-height:340px;
    background:var(--white);border:1px solid var(--hair);border-radius:var(--radius-lg);
    padding:var(--s-6) var(--s-5);display:flex;flex-direction:column;justify-content:space-between;
    box-shadow:0 22px 50px rgba(10,10,10,.05);
    transition:transform .7s var(--ease), opacity .7s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
    will-change:transform, opacity;cursor:pointer;
  }
  .cf-card.is-active{
    box-shadow:0 40px 84px rgba(10,10,10,.14);border-color:rgba(10,10,10,.14);cursor:default;
  }
  .cf-card .cf-num{font-size:13px;font-weight:600;color:var(--light-grey);}
  .cf-card h3{margin-top:var(--s-8);font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25;}
  .cf-card p{margin-top:var(--s-2);font-size:15px;color:var(--grey);line-height:1.6;}
  .cf-arrow{
    flex:0 0 auto;width:54px;height:54px;border-radius:50%;border:1px solid var(--hair);
    background:var(--white);display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--black);z-index:5;
    transition:background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  }
  .cf-arrow:hover{background:var(--black);color:var(--white);transform:translateY(-2px);box-shadow:0 14px 30px rgba(10,10,10,.16);}
  .cf-arrow:active{transform:translateY(0) scale(.94);}
  .cf-arrow:disabled{opacity:.28;cursor:default;pointer-events:none;}
  .cf-arrow svg{transition:transform .3s var(--ease);}
  .cf-arrow:hover svg{transform:scale(1.08);}
  .cf-dots{display:flex;justify-content:center;gap:10px;margin-top:var(--s-6);}
  .cf-dot{
    width:7px;height:7px;border-radius:50%;background:var(--hair);border:none;cursor:pointer;padding:0;
    transition:background .3s var(--ease), transform .3s var(--ease), width .3s var(--ease);
  }
  .cf-dot.is-active{background:var(--black);width:24px;border-radius:4px;}
  .cf-dot{position:relative;}
  .cf-dot::before{content:"";position:absolute;inset:-13px;}
  @media(max-width:760px){
    /* Desktop's 3D coverflow becomes a simple one-card-at-a-time deck:
       easier to read, easier to swipe, no accidental taps on peeking cards. */
    .coverflow{gap:12px;margin-top:var(--s-6);}
    .cf-viewport{height:auto;min-height:0;perspective:none;max-width:none;flex:1;}
    .cf-track{position:relative;height:auto;}
    .cf-card{
      display:none;position:static !important;top:auto !important;left:auto !important;
      transform:none !important;opacity:1 !important;pointer-events:auto !important;
      width:100% !important;min-height:0;padding:32px 26px;box-shadow:0 14px 34px rgba(10,10,10,.07) !important;
    }
    .cf-card.is-active{display:flex;animation:cfFadeIn .35s ease;}
    @keyframes cfFadeIn{from{opacity:0}to{opacity:1}}
    .cf-card h3{margin-top:44px;font-size:20px;}
    .cf-arrow{width:46px;height:46px;flex:0 0 auto;}
    .cf-dots{margin-top:28px;flex-wrap:wrap;row-gap:10px;}
  }

  /* ---------- WHO WE WORK WITH ---------- */
  .fit-panel{background:var(--black);border-radius:var(--radius-lg);padding:var(--s-7) var(--s-6);}
  .fit-lists{display:flex;flex-direction:column;gap:0;}
  .fit-col{padding:var(--s-4) 0;border-top:1px solid rgba(255,255,255,.12);}
  .fit-col:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
  .fit-col .flabel{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:var(--s-3);display:block;}
  .fit-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--s-2);}
  .fit-col li{font-size:16px;font-weight:500;position:relative;padding-left:24px;line-height:1.5;color:var(--white);}
  .fit-col li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--white);}
  .fit-col.no li{color:rgba(255,255,255,.55);}
  .fit-col.no li::before{background:rgba(255,255,255,.25);}
  @media(max-width:560px){.fit-panel{padding:var(--s-5) var(--s-4);}}

  /* ---------- CONTACT MODAL ---------- */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(10,10,10,.74);backdrop-filter:blur(6px);
    z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  }
  .modal-overlay.open{opacity:1;pointer-events:auto;}
  .modal-card{
    background:var(--white);color:var(--black);width:100%;max-width:660px;max-height:88vh;overflow-y:auto;
    border-radius:var(--radius-md);padding:var(--s-7) var(--s-7);position:relative;
    transform:translateY(24px) scale(.98);opacity:0;transition:transform .45s var(--easeOut), opacity .45s var(--easeOut);
  }
  .modal-overlay.open .modal-card{transform:translateY(0) scale(1);opacity:1;}
  .modal-close{
    position:absolute;top:28px;right:28px;width:36px;height:36px;border-radius:50%;
    border:1px solid var(--hair);background:none;display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--black);transition:background .25s var(--ease), transform .25s var(--ease);
  }
  .modal-close:hover{background:rgba(10,10,10,.05);transform:rotate(90deg);}
  .modal-card h3{font-size:clamp(24px,3.2vw,32px);font-weight:800;letter-spacing:-.01em;margin-top:var(--s-1);max-width:400px;}
  .modal-card .modal-sub{margin-top:var(--s-3);color:var(--grey);font-size:15px;max-width:420px;line-height:1.6;}
  form.enquiry{display:flex;flex-direction:column;gap:var(--s-5);margin-top:var(--s-6);}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);}
  .field{display:flex;flex-direction:column;gap:10px;}
  .field label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--light-grey);}
  .field input, .field textarea{
    background:transparent;border:none;border-bottom:1px solid var(--hair);
    color:var(--black);font-family:'Poppins',sans-serif;font-size:15px;padding:12px 0;
  }
  .field input:focus, .field textarea:focus{outline:none;border-bottom-color:var(--black);}
  .field textarea{resize:vertical;min-height:110px;}
  .field input::placeholder, .field textarea::placeholder{color:rgba(10,10,10,.32);}
  .option-group{display:flex;flex-wrap:wrap;gap:12px;}
  .option-pill{
    padding:11px 20px;border:1px solid var(--hair);border-radius:var(--radius-pill);font-size:13.5px;font-weight:500;
    cursor:pointer;transition:all .25s var(--ease);color:var(--grey);
  }
  .option-pill.active{background:var(--black);color:var(--white);border-color:var(--black);}
  .submit-row{margin-top:var(--s-1);}
  .submit-row .btn{width:100%;justify-content:center;}
  .form-footnotes{display:flex;flex-direction:column;gap:6px;margin-top:-8px;}
  .form-note{font-size:12.5px;color:var(--light-grey);}
  .form-reassurance{font-size:12.5px;color:var(--light-grey);}
  .form-err{display:none;padding:14px 16px;border:1px solid #E3B9B9;border-radius:var(--radius-sm);color:#7A2E2E;font-size:14px;background:#FBF3F3;}
  .form-err.show{display:block;}

  /* smooth reveal for the "Other" free-text field */
  .reveal-field{
    display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;
    transition:grid-template-rows .4s var(--easeOut), opacity .3s var(--easeOut), margin-top .4s var(--easeOut);
    margin-top:0;
  }
  .reveal-field.open{grid-template-rows:1fr;opacity:1;margin-top:14px;}
  .reveal-field > input{min-height:0;}

  /* success modal */
  .success-card{text-align:center;padding-top:var(--s-8);}
  .success-check{
    width:56px;height:56px;border-radius:50%;background:var(--black);color:var(--white);
    display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-5);
    animation:successPop .5s var(--easeOut);
  }
  @keyframes successPop{
    0%{transform:scale(.4);opacity:0;}
    60%{transform:scale(1.08);opacity:1;}
    100%{transform:scale(1);}
  }
  .success-card h3{font-size:clamp(24px,3.2vw,30px);}
  .success-card .modal-sub{max-width:440px;margin-left:auto;margin-right:auto;}
  .success-card .submit-row{margin-top:var(--s-6);}
  .success-card .submit-row .btn{width:auto;padding-left:36px;padding-right:36px;margin:0 auto;}
  .option-pill:hover{border-color:var(--black);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--black);outline-offset:3px;}
  .btn.light:focus-visible, .closing a:focus-visible{outline-color:var(--white);}
  input:focus-visible, textarea:focus-visible{outline:none;}
  @media(max-width:560px){
    .modal-overlay{padding:0;align-items:flex-end;}
    .modal-card{
      padding:36px 24px 28px;max-width:none;width:100%;max-height:92dvh;
      border-radius:20px 20px 0 0;
    }
    .two-col{grid-template-columns:1fr;}
    .field input, .field textarea{font-size:16px;padding:12px 0;}
    .option-pill{min-height:44px;padding:11px 18px;display:inline-flex;align-items:center;}
    .modal-close{width:44px;height:44px;top:18px;right:18px;}
    .submit-row .btn{min-height:52px;}
  }

  /* ---------- ACCESSIBILITY: REDUCED MOTION ---------- */
  /* ---------- LEGAL PAGES (Terms & Conditions / Privacy Policy) ---------- */
  .legal-page{display:none;background:var(--white);min-height:100vh;}
  .legal-page.is-open{display:block;}
  body.legal-open{overflow-x:hidden;}
  .legal-header{
    padding-top:calc(var(--s-8) + 40px);padding-bottom:var(--s-5);
  }
  .legal-back{
    display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;
    letter-spacing:.02em;color:var(--black);padding-bottom:2px;position:relative;
  }
  .legal-back::before{content:"←";font-size:15px;transition:transform .3s var(--ease);}
  .legal-back:hover::before{transform:translateX(-4px);}
  .legal-content{max-width:760px;padding-bottom:var(--s-9);}
  .legal-content .eyebrow{margin-bottom:var(--s-3);}
  .legal-content h1{
    font-size:clamp(32px,5vw,54px);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin-bottom:var(--s-4);
  }
  .legal-dates{font-size:14px;color:var(--light-grey);line-height:1.8;margin-bottom:var(--s-6);}
  .legal-intro{font-size:17px;color:var(--grey);line-height:1.75;margin-bottom:var(--s-8);max-width:64ch;}
  .legal-section{padding:var(--s-6) 0;border-top:1px solid var(--hair);}
  .legal-section:first-of-type{border-top:1px solid var(--hair);}
  .legal-section h2{
    font-size:clamp(19px,2.2vw,23px);font-weight:700;letter-spacing:-.01em;margin-bottom:var(--s-3);
  }
  .legal-section p{font-size:15.5px;color:var(--grey);line-height:1.8;max-width:64ch;}
  .legal-section p + p{margin-top:var(--s-3);}
  .legal-section ul{margin-top:var(--s-3);padding-left:22px;display:flex;flex-direction:column;gap:10px;}
  .legal-section li{font-size:15.5px;color:var(--grey);line-height:1.75;max-width:62ch;}
  .legal-questions{margin-top:var(--s-2);}
  .legal-contact{
    margin-top:var(--s-7);padding:var(--s-6);border-radius:var(--radius-md);background:var(--paper);
  }
  .legal-contact p{font-size:15px;color:var(--grey);line-height:1.9;}
  .legal-contact strong{color:var(--black);font-size:17px;font-weight:700;}
  .legal-contact a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair);}
  .legal-contact a:hover{text-decoration-color:var(--black);}
  @media(max-width:760px){
    .legal-header{padding-top:calc(100px + env(safe-area-inset-top,0px));padding-bottom:var(--s-4);}
    .legal-content{padding-bottom:76px;}
    .legal-intro{margin-bottom:44px;}
    .legal-section{padding:36px 0;}
    .legal-contact{padding:var(--s-5) var(--s-4);margin-top:var(--s-6);}
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.001ms !important;
      scroll-behavior:auto !important;
    }
    .reveal{opacity:1;transform:none;}
    .cf-track, .cf-card{transition:none !important;}
  }