:root{
    --navy: #0D2B52;
    --navy-deep: #081b36;
    --navy-soft: rgba(13,43,82,0.06);
    --gold: #C9A227;
    --gold-soft: #e4cd80;
    --white: #FFFFFF;
    --grey: #F5F5F5;
    --ink: #1c2733;
    --ink-muted: #5c6773;
    --line: rgba(13,43,82,0.12);
    --serif: 'Cormorant Garamond', serif;
    --sans: 'Jost', sans-serif;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family: var(--sans);
    color: var(--ink);
    background: var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  .container{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  h1,h2,h3,h4{
    font-family: var(--serif);
    font-weight:500;
    color: var(--navy);
    letter-spacing:.2px;
  }

  .eyebrow{
    font-family: var(--sans);
    font-size:.72rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color: var(--gold);
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:'';
    width:28px;
    height:1px;
    background: var(--gold);
    display:inline-block;
  }

  .section{
    padding: 120px 0;
  }
  .section-head{
    max-width:640px;
    margin-bottom:64px;
  }
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-head h2{
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    line-height:1.15;
  }
  .section-head p{
    margin-top:20px;
    color: var(--ink-muted);
    font-size:1.05rem;
    max-width:520px;
  }
  .section-head.center p{margin-left:auto;margin-right:auto;}

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 34px;
    font-size:.85rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:500;
    border-radius:2px;
    transition: all .35s var(--ease);
    white-space:nowrap;
  }
  .btn-primary{
    background: var(--gold);
    color: var(--navy-deep);
  }
  .btn-primary:hover{
    background: var(--navy);
    color: var(--white);
  }
  .btn-outline{
    border:1px solid rgba(255,255,255,.5);
    color: var(--white);
  }
  .btn-outline:hover{
    background: rgba(255,255,255,.12);
    border-color: var(--white);
  }
  .btn-outline-navy{
    border:1px solid var(--navy);
    color: var(--navy);
  }
  .btn-outline-navy:hover{
    background: var(--navy);
    color: var(--white);
  }

  /* reveal on scroll */
  .reveal{
    opacity:0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .reveal.is-visible{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ============ HEADER ============ */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:500;
    padding: 22px 0;
    transition: all .4s var(--ease);
    background: transparent;
  }
  header.scrolled{
    background: rgba(13,43,82,0.96);
    backdrop-filter: blur(10px);
    padding: 14px 0;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
  }
  header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .logo{
    font-family: var(--serif);
    color: var(--white);
    font-size:1.35rem;
    letter-spacing:.04em;
    line-height:1.1;
  }
  .logo span{
    display:block;
    font-family: var(--sans);
    font-size:.62rem;
    letter-spacing:.32em;
    color: var(--gold);
    text-transform:uppercase;
    margin-top:4px;
  }
  nav ul{
    display:flex;
    gap:38px;
  }
  nav a{
    color: var(--white);
    font-size:.82rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    position:relative;
    padding-bottom:4px;
  }
  nav a::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    width:0;height:1px;
    background: var(--gold);
    transition: width .3s var(--ease);
  }
  nav a:hover::after{width:100%;}
  .nav-cta{
    display:flex;
    align-items:center;
    gap:22px;
  }
  .nav-cta .btn{padding:12px 26px;font-size:.72rem;}
  .menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    width:26px;
  }
  .menu-toggle span{height:1px;background:var(--white);width:100%;}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
      linear-gradient(120deg, rgba(8,27,54,.94) 0%, rgba(13,43,82,.88) 55%, rgba(13,43,82,.72) 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 90px);
    overflow:hidden;
  }
  .hero::before{
    content:'';
    position:absolute;
    right:-10%;
    top:50%;
    transform:translateY(-50%);
    width:640px;height:640px;
    border:1px solid rgba(201,162,39,.18);
    border-radius:50%;
  }
  .hero::after{
    content:'';
    position:absolute;
    right:2%;
    top:50%;
    transform:translateY(-50%);
    width:440px;height:440px;
    border:1px solid rgba(201,162,39,.28);
    border-radius:50%;
  }
  .hero-content{
    position:relative;
    z-index:2;
    max-width:680px;
    padding-top:60px;
  }
  .hero .eyebrow{color:var(--gold-soft);}
  .hero .eyebrow::before{background:var(--gold-soft);}
  .hero h1{
    font-size: clamp(2.5rem, 5.4vw, 4rem);
    color: var(--white);
    line-height:1.12;
    font-weight:500;
  }
  .hero h1 em{
    color: var(--gold-soft);
    font-style:italic;
  }
  .hero p.sub{
    margin-top:26px;
    font-size:1.15rem;
    color: rgba(255,255,255,.82);
    max-width:520px;
    font-weight:300;
  }
  .hero-actions{
    margin-top:44px;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }
  .hero-scroll{
    position:absolute;
    bottom:40px;
    left:32px;
    display:flex;
    align-items:center;
    gap:14px;
    color: rgba(255,255,255,.6);
    font-size:.7rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    z-index:2;
  }
  .hero-scroll .line{
    width:1px;height:44px;
    background: linear-gradient(var(--gold), transparent);
  }

  /* ============ ABOUT ============ */
  .about{
    background: var(--grey);
  }
  .about-grid{
    display:grid;
    grid-template-columns: .9fr 1.1fr;
    gap:80px;
    align-items:center;
  }
  .about-visual{
    position:relative;
    aspect-ratio: 4/5;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(255,255,255,.55);
    text-align:center;
    padding:40px;
  }
  .about-visual .frame-note{
    font-family: var(--serif);
    font-style:italic;
    font-size:1.05rem;
    line-height:1.5;
  }
  .about-visual::before{
    content:'';
    position:absolute;
    top:22px;left:22px;right:22px;bottom:22px;
    border:1px solid rgba(201,162,39,.4);
  }
  .about-badge{
    position:absolute;
    bottom:-28px;
    right:-28px;
    background: var(--gold);
    color: var(--navy-deep);
    padding:26px 30px;
    text-align:center;
    box-shadow: 0 20px 40px rgba(13,43,82,.25);
  }
  .about-badge strong{
    display:block;
    font-family: var(--serif);
    font-size:2.1rem;
    line-height:1;
  }
  .about-badge span{
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .about-copy p{
    color: var(--ink-muted);
    margin-bottom:18px;
    font-size:1.03rem;
  }
  .about-points{
    margin-top:34px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:22px 28px;
  }
  .about-points li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:.92rem;
    color: var(--navy);
    font-weight:500;
  }
  .about-points svg{flex-shrink:0;margin-top:2px;}

  /* ============ AREAS ============ */
  .areas-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:2px;
    background: var(--line);
    border:1px solid var(--line);
  }
  .area-card{
    background: var(--white);
    padding:42px 36px;
    transition: background .4s var(--ease);
    position:relative;
  }
  .area-card:hover{background: var(--navy);}
  .area-card:hover h3, .area-card:hover p{color: rgba(255,255,255,.88);}
  .area-card:hover .area-num{color: rgba(255,255,255,.25);}
  .area-card:hover .icon-wrap{border-color:var(--gold);}
  .area-card:hover .icon-wrap svg{stroke:var(--gold);}
  .area-card:hover .learn{color:var(--gold-soft);}
  .area-num{
    font-family: var(--serif);
    font-size:.85rem;
    color: rgba(13,43,82,.2);
    transition: color .4s var(--ease);
  }
  .icon-wrap{
    width:52px;height:52px;
    border:1px solid var(--line);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:18px 0 22px;
    transition: border-color .4s var(--ease);
  }
  .icon-wrap svg{stroke:var(--navy);transition:stroke .4s var(--ease);}
  .area-card h3{
    font-size:1.28rem;
    margin-bottom:10px;
    transition: color .4s var(--ease);
  }
  .area-card p{
    font-size:.92rem;
    color: var(--ink-muted);
    margin-bottom:20px;
    transition: color .4s var(--ease);
  }
  .learn{
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color: var(--navy);
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition: color .4s var(--ease), gap .3s var(--ease);
  }
  .area-card:hover .learn{gap:12px;}

  /* ============ DIFFERENTIALS ============ */
  .differentials{
    background: var(--navy);
    color: var(--white);
    position:relative;
    overflow:hidden;
  }
  .differentials::before{
    content:'';
    position:absolute;
    left:-160px;bottom:-160px;
    width:420px;height:420px;
    border:1px solid rgba(201,162,39,.14);
    border-radius:50%;
  }
  .differentials .eyebrow{color:var(--gold-soft);}
  .differentials .eyebrow::before{background:var(--gold-soft);}
  .differentials .section-head h2{color:var(--white);}
  .differentials .section-head p{color:rgba(255,255,255,.65);}
  .diff-grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:1px;
    background: rgba(255,255,255,.1);
    position:relative;
    z-index:1;
  }
  .diff-card{
    background: var(--navy);
    padding:38px 34px;
  }
  .diff-card .check{
    width:38px;height:38px;
    border-radius:50%;
    border:1px solid var(--gold);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;
  }
  .diff-card h4{
    color: var(--white);
    font-size:1.1rem;
    margin-bottom:10px;
    font-weight:500;
  }
  .diff-card p{
    color: rgba(255,255,255,.6);
    font-size:.9rem;
  }

  /* ============ TESTIMONIALS ============ */
  .testi-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:56px;
  }
  .rating-box{
    text-align:right;
  }
  .rating-box .stars{color:var(--gold);letter-spacing:3px;font-size:1.1rem;}
  .rating-box strong{
    font-family: var(--serif);
    font-size:2.6rem;
    color: var(--navy);
    display:block;
    line-height:1;
    margin:6px 0 4px;
  }
  .rating-box span{
    font-size:.8rem;
    color: var(--ink-muted);
  }
  .testi-grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:30px;
  }
  .testi-card{
    background: var(--grey);
    padding:38px 32px;
    border-top:2px solid var(--gold);
  }
  .testi-card .stars{color:var(--gold);letter-spacing:3px;margin-bottom:18px;display:block;}
  .testi-card p{
    font-family: var(--serif);
    font-style:italic;
    font-size:1.12rem;
    color: var(--navy);
    line-height:1.55;
    margin-bottom:22px;
  }
  .testi-card .who{
    font-size:.78rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color: var(--ink-muted);
    font-weight:500;
  }

  /* ============ TIMELINE ============ */
  .timeline-wrap{position:relative;}
  .timeline{
    display:grid;
    grid-template-columns: repeat(5,1fr);
    gap:0;
    position:relative;
  }
  .timeline::before{
    content:'';
    position:absolute;
    top:26px;left:0;right:0;
    height:1px;
    background: var(--line);
  }
  .tl-step{
    position:relative;
    padding:0 20px;
    text-align:left;
  }
  .tl-dot{
    width:52px;height:52px;
    border-radius:50%;
    background: var(--white);
    border:1px solid var(--navy);
    color: var(--navy);
    display:flex;align-items:center;justify-content:center;
    font-family: var(--serif);
    font-size:1.15rem;
    position:relative;
    z-index:1;
    margin-bottom:24px;
    transition: all .4s var(--ease);
  }
  .tl-step:hover .tl-dot{
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy-deep);
  }
  .tl-step h4{
    font-size:1.05rem;
    margin-bottom:8px;
  }
  .tl-step p{
    font-size:.87rem;
    color: var(--ink-muted);
  }

  /* ============ FAQ ============ */
  .faq-wrap{max-width:800px;margin:0 auto;}
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-q{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:26px 4px;
    text-align:left;
    font-family: var(--serif);
    font-size:1.18rem;
    color: var(--navy);
  }
  .faq-q .plus{
    flex-shrink:0;
    width:26px;height:26px;
    position:relative;
  }
  .faq-q .plus::before, .faq-q .plus::after{
    content:'';
    position:absolute;
    background: var(--gold);
    transition: transform .35s var(--ease);
  }
  .faq-q .plus::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
  .faq-q .plus::after{left:50%;top:0;height:100%;width:1px;transform:translateX(-50%);}
  .faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition: max-height .45s var(--ease);
  }
  .faq-a p{
    padding: 0 4px 28px;
    color: var(--ink-muted);
    max-width:640px;
    font-size:.96rem;
  }

  /* ============ CTA ============ */
  .cta{
    background: linear-gradient(120deg, var(--navy-deep), var(--navy));
    color: var(--white);
    text-align:center;
    padding:130px 0;
    position:relative;
    overflow:hidden;
  }
  .cta::before{
    content:'';
    position:absolute;
    inset:0;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 90px);
  }
  .cta-inner{position:relative;z-index:1;}
  .cta .eyebrow{justify-content:center;color:var(--gold-soft);}
  .cta .eyebrow::before{display:none;}
  .cta h2{
    color: var(--white);
    font-size: clamp(2rem, 4vw, 3rem);
    max-width:680px;
    margin:0 auto 20px;
  }
  .cta p{
    color: rgba(255,255,255,.68);
    max-width:520px;
    margin:0 auto 40px;
    font-size:1.05rem;
  }

  /* ============ CONTACT ============ */
  .contact-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:70px;
  }
  .form-field{
    margin-bottom:22px;
  }
  .form-field label{
    display:block;
    font-size:.75rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color: var(--navy);
    margin-bottom:9px;
    font-weight:500;
  }
  .form-field input, .form-field textarea, .form-field select{
    width:100%;
    padding:14px 16px;
    border:1px solid var(--line);
    background: var(--grey);
    font-family: var(--sans);
    font-size:.95rem;
    color: var(--ink);
    transition: border-color .3s var(--ease);
  }
  .form-field input:focus, .form-field textarea:focus, .form-field select:focus{
    border-color: var(--gold);
    background: var(--white);
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .map-box{
    width:100%;
    height:100%;
    min-height:420px;
    border:1px solid var(--line);
    overflow:hidden;
  }
  .map-box iframe{width:100%;height:100%;border:0;min-height:420px;}

  /* ============ FOOTER ============ */
  footer{
    background: var(--navy-deep);
    color: rgba(255,255,255,.75);
    padding:90px 0 30px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap:50px;
    padding-bottom:60px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .footer-logo{
    font-family: var(--serif);
    color: var(--white);
    font-size:1.4rem;
    margin-bottom:16px;
  }
  .footer-grid p{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.55);}
  .footer-col h5{
    color: var(--white);
    font-family: var(--sans);
    font-size:.75rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:20px;
    font-weight:500;
  }
  .footer-col li{margin-bottom:12px;font-size:.9rem;color:rgba(255,255,255,.6);}
  .footer-col a:hover{color:var(--gold-soft);}
  .social-row{display:flex;gap:14px;margin-top:8px;}
  .social-row a{
    width:38px;height:38px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition: all .3s var(--ease);
  }
  .social-row a:hover{border-color:var(--gold);background:rgba(201,162,39,.12);}
  .footer-bottom{
    padding-top:28px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size:.78rem;
    color: rgba(255,255,255,.4);
  }

  /* ============ FLOATING ELEMENTS ============ */
  .float-btns{
    position:fixed;
    right:26px;
    bottom:26px;
    z-index:600;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .fab{
    width:56px;height:56px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    transition: transform .3s var(--ease);
  }
  .fab:hover{transform: translateY(-4px);}
  .fab-whats{background:#25D366;}
  .fab-top{
    background: var(--navy);
    opacity:0;
    pointer-events:none;
    transform: translateY(10px);
    transition: all .35s var(--ease);
  }
  .fab-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}

  /* ============ RESPONSIVE ============ */
  @media (max-width: 980px){
    .about-grid, .contact-grid{grid-template-columns:1fr;gap:56px;}
    .about-visual{max-width:420px;margin:0 auto;}
    .areas-grid{grid-template-columns: repeat(2,1fr);}
    .diff-grid{grid-template-columns: repeat(2,1fr);}
    .testi-grid{grid-template-columns:1fr;}
    .timeline{grid-template-columns: repeat(3,1fr);row-gap:50px;}
    .timeline::before{display:none;}
    .footer-grid{grid-template-columns: 1fr 1fr;}
  }
  @media (max-width: 760px){
    nav, .nav-cta .btn-outline{display:none;}
    .menu-toggle{display:flex;}
    .section{padding:80px 0;}
    .container{padding:0 22px;}
    .areas-grid{grid-template-columns:1fr;}
    .diff-grid{grid-template-columns:1fr;}
    .timeline{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;gap:36px;}
    .testi-head{flex-direction:column;align-items:flex-start;}
    .rating-box{text-align:left;}
    .about-badge{position:static;margin-top:-1px;}
  }