@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Archivo:wght@400;500;600;700&display=swap');
  :root{--ink:#111111;--paper:#ffffff;--paper-2:#f4f4f4;--accent:#e10f1c;--accent-deep:#b80b16;--line:#e5e5e5;--muted:#5f5f5f;--display:'Fraunces',Georgia,serif;--body:'Archivo',system-ui,sans-serif}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .wrap{max-width:1180px;margin:0 auto;padding:0 30px;position:relative;z-index:2}
  a{color:inherit}
  img{display:block;max-width:100%}

  header.site{position:fixed;top:0;z-index:50;background:rgba(255,255,255,.88); background: transparent;  width: 100%;}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .logo{font-family:var(--display);font-weight:600;font-size:1.55rem;letter-spacing:-.02em;text-decoration:none}
  .logo b{color:var(--accent)}
  .nav img {  max-width: 80%; }
  .nav ul{display:flex;gap:32px;list-style:none}
  .nav a{text-decoration:none;font-size:.92rem;font-weight:500;opacity:1;transition:opacity .2s}
  .nav a:hover{opacity:1}
  .nav .cta{background:var(--ink);color:#fff;padding:11px 22px;border-radius:2px;opacity:1}
  
  
  /* =========================
   HEADER
========================= */

header.site {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

/* Header hidden when scrolling down */
header.site.header-hide {
    transform: translateY(-100%);
}

/* Header visible when scrolling up */
header.site.header-show {
    transform: translateY(0);
}

/* Sticky style */
header.site.header-sticky {
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.thankyou-container{text-align:center; padding:80px 0;}
 .thankyou-container h1, 
  .thankyou-container p {margin-bottom:15px;}
  


  @media(max-width:860px){.nav ul{display:none}}client-grid

  .badge{display:inline-block;background:var(--accent);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:2px;margin-bottom:22px}
  .hero{padding:60px 0 70px; background:url(../images/banner.jpg) no-repeat;     height: 100vh; display: flex;  justify-content: center;   align-items: center; background-size: cover;}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  h1{font-family:var(--display);font-weight:500;font-size:clamp(2.7rem,5.6vw,4.6rem);line-height:.98;letter-spacing:-.03em}
  h1 em{font-style:italic;color:var(--accent)}
  .lead{font-size:1.18rem;max-width:46ch;margin:26px 0 34px;color:var(--muted)}
  .btns{display:flex;gap:14px;flex-wrap:wrap}
  .btn{display:inline-block;padding:16px 30px;border-radius:2px;text-decoration:none;font-weight:600;font-size:.95rem;transition:transform .2s,background .2s}
  .btn-primary{background:var(--accent);color:#fff}
  .btn-primary:hover{transform:translateY(-2px);background:var(--accent-deep)}
  .btn-ghost{border:1.5px solid var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:#fff}
  .hero-img{border-radius:3px;overflow:hidden;box-shadow:0 24px 50px rgba(17,17,17,.18);aspect-ratio:4/3}
  .hero-img img{width:100%;height:100%;object-fit:cover}
  @media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:34px}.hero-img{order:-1}}

  .answer{background:var(--accent);color:#fff}
  .answer .wrap{padding:54px 30px;display:grid;grid-template-columns:150px 1fr;gap:32px;align-items:start}
  .answer h2{font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:.03em;opacity:.8;padding-top:8px}
  .answer p{font-size:1.32rem;line-height:1.5;font-family:var(--display);max-width:64ch}
  @media(max-width:720px){.answer .wrap{grid-template-columns:1fr;gap:12px}.answer p{font-size:1.14rem}}

  section{padding:84px 0}
  .sec-head{margin-bottom:48px;max-width:62ch}
  .eyebrow{font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .sec-head h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.04;letter-spacing:-.02em;margin-top:14px}
  .sec-head p{color:var(--muted);margin-top:16px;font-size:1.05rem;max-width:58ch}

  .services{display:grid;grid-template-columns:1fr 1fr;gap:30px}
  .svc{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:transform .2s,box-shadow .2s}
  .svc:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.08)}
  .svc-img{aspect-ratio:16/11;overflow:hidden}
  .svc-img img{width:100%;height:100%;object-fit:cover}
  .svc-body{padding:28px 30px 32px}
  .svc .num{font-family:var(--display);font-size:.9rem;color:var(--accent);font-weight:600}
  .svc h3{font-family:var(--display);font-weight:500;font-size:1.5rem;margin:8px 0 12px;letter-spacing:-.01em}
  .svc p{color:var(--muted);font-size:1rem}
  @media(max-width:720px){.services{grid-template-columns:1fr}}

  .areas{background:var(--ink);color:#fff;text-align:center}
  .areas h2{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px}
  .areas p{opacity:.7;max-width:50ch;margin:0 auto 30px}
  .area-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
  .area-tags span{border:1px solid rgba(255,255,255,.25);padding:12px 26px;border-radius:40px;font-family:var(--display);font-size:1.15rem}
  .area-tags span b{color:var(--accent);font-weight:500}

  /* CLIENTS */
  .clients{background:var(--ink);color:#fff;text-align:center}
  .clients .eyebrow{color:#fff;opacity:.55}
  .clients h2{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,4vw,2.6rem);margin:14px 0 12px}
  .clients .sub{opacity:.7;max-width:54ch;margin:0 auto 40px;font-size:1.02rem}
  .client-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  .client-grid span{border:1px solid rgba(255,255,255,.16);border-radius:3px;padding:24px 14px;font-family:var(--display);font-size:1.08rem;line-height:1.25;display:flex;align-items:center;justify-content:center;min-height:88px;transition:border-color .2s,color .2s,background .2s}
  .client-grid span:hover{border-color:var(--accent);color:var(--accent)}
  
  .client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  align-items: center;
      border: solid 1px #ccc;
    padding: 50px;
    border-radius: 8px;
	    background: #fff;
}

.client-grid img {
  width: 100%;
  max-width: 180px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.client-grid img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}
  
  @media(max-width:860px){.client-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:861px) and (max-width:1100px){.client-grid{grid-template-columns:repeat(3,1fr)}}
  

  /* PACKAGES */
  .pkgs{background:var(--paper-2)}
  .pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
  .pkg{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 30px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
  .pkg:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.08)}
  .pkg.featured{border:2px solid var(--accent);position:relative}
  .pkg.featured::before{content:"Most popular";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:30px}
  .pkg .tier{font-family:var(--display);font-weight:600;font-size:1.5rem}
  .pkg .who{color:var(--muted);font-size:.92rem;margin:6px 0 18px;min-height:42px}
  .pkg .price{font-family:var(--display);font-size:1.3rem;font-weight:500;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
  .pkg .price small{display:block;font-family:var(--body);font-size:.78rem;color:var(--muted);font-weight:400;letter-spacing:.02em;margin-top:4px}
  .pkg ul{list-style:none;flex:1;margin-bottom:24px}
  .pkg li{font-size:.92rem;padding:7px 0 7px 26px;position:relative;color:#333}
  .pkg li::before{content:"";position:absolute;left:0;top:13px;width:13px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
  .pkg .pbtn{display:block;text-align:center;padding:14px;border-radius:2px;text-decoration:none;font-weight:600;font-size:.92rem;transition:background .2s,transform .2s}
  .pkg .pbtn.solid{background:var(--accent);color:#fff}
  .pkg .pbtn.solid:hover{background:var(--accent-deep);transform:translateY(-2px)}
  .pkg .pbtn.line{border:1.5px solid var(--ink);color:var(--ink)}
  .pkg .pbtn.line:hover{background:var(--ink);color:#fff}
  .pkg-note{margin-top:26px;font-size:.88rem;color:var(--muted);text-align:center}
  @media(max-width:860px){.pkg-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:27px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--display);font-size:1.24rem;font-weight:500;color:var(--ink)}
  .faq-q .ic{font-family:var(--body);font-size:1.7rem;color:var(--accent);transition:transform .25s;flex-shrink:0;line-height:1}
  .faq-item.open .ic{transform:rotate(45deg)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
  .faq-a p{padding:0 0 27px;color:var(--muted);max-width:72ch;font-size:1.02rem}
  .faq-item.open .faq-a{max-height:360px}

  .contact{background:var(--ink);color:#fff}
  .contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .contact h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.02;letter-spacing:-.02em}
  .contact h2 em{font-style:italic;color:var(--accent)}
  .contact .info{margin-top:24px;font-size:.98rem;opacity:.82;line-height:1.95}
  .contact .info a{margin-right:5px;}
   .contact .info a:hover{  color: #ed2324;}
  form{display:flex;flex-direction:column;gap:18px}
  form input,form textarea{background:transparent;border:none;border-bottom:1.5px solid rgba(255,255,255,.3);color:#fff;padding:14px 2px;font-family:var(--body);font-size:1rem}
  form input::placeholder,form textarea::placeholder{color:rgba(255,255,255,.5)}
  form input:focus,form textarea:focus{outline:none;border-color:var(--accent)}
  form button{margin-top:8px;background:var(--accent);color:#fff;border:none;padding:17px;border-radius:2px;font-weight:600;font-size:1rem;cursor:pointer;transition:background .2s}
  form button:hover{background:var(--accent-deep)}
  @media(max-width:820px){.contact .wrap{grid-template-columns:1fr;gap:36px}}

  footer.site{background:var(--ink);color:#fff;padding:42px 0}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.88rem;opacity:.8}

  .reveal{opacity:0;transform:translateY(22px);animation:rise .7s forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
  
    .answer h2 {
     font-size: 3rem;
     line-height: 1;
}
  @media(max-width:1200px){
  .hero {
    padding: 60px 0 70px;
    background: url(../images/banner.jpg) no-repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100%;
    background-position: 0 bottom;
    background-color: #e0dffe;
}
    .hero:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;   background-image: linear-gradient(to bottom, #fff 78%, transparent);  width: 100%;   height: 60%;
    }
  }
  
  @media(max-width:820px){
.hero {
    padding: 0 0 20px;
    background: url(../images/banner.jpg) no-repeat 0 0;
    height: 100vh;
   justify-content: flex-end;
    align-items: flex-end;
 
    background-position: right 0;
   background-size: 100%;
}
   .hero:before {display:none;}
   .contact .info p br{display:none;}
  }
  
    @media(max-width:480px){
		footer .wrap {
    font-size: 12px;
		}
		.hero {
   background-size: 150%;
}
  .wrap {
  padding: 0 22px;}
 


  }