:root{
    --navy: #063260;
    --navy-2: #0a4a86;
    --navy-soft: rgba(6,50,96,0.06);
    --navy-soft-2: rgba(6,50,96,0.16);
    --gold: #d4a250;
    --gold-soft: rgba(212,162,80,0.16);
    --ink: #111111;
    --paper: #faf6ef;
    --card: #ffffff;
    --line: rgba(6,50,96,0.12);
    --shadow: 0 14px 34px rgba(6,50,96,0.09);
    --shadow-sm: 0 6px 18px rgba(6,50,96,0.07);
    --radius: 18px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }

  body{
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-size: 1.02rem;
    line-height: 1.65;
  }

  h1, h2, h3, .display-font{
    font-family: 'Fraunces', serif;
    color: var(--navy);
    letter-spacing: -0.01em;
  }

  a{ color: var(--navy); text-decoration: none; }
  a:hover{ color: var(--gold); }
  .text-gold{ color: var(--gold); }

  /* ---------- Utility bar ---------- */
  .util-bar{ background: var(--ink); color: rgba(255,255,255,0.72); font-size: 0.82rem; padding: 0.55rem 0; }
  .util-bar a{ color: rgba(255,255,255,0.78); }
  .util-bar a:hover{ color: var(--gold); }
  .util-bar .dot{ color: var(--gold); margin: 0 0.6rem; }

  /* ---------- Header ---------- */
  .site-header{
    background: rgba(250,246,239,0.94);
    backdrop-filter: saturate(150%) blur(6px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.25s ease;
  }
  .site-header.scrolled{ box-shadow: var(--shadow-sm); }
  .brand-mark img{ height: 46px; width: auto; display: block; }
  .nav-link{ color: var(--ink) !important; font-weight: 500; font-size: 0.94rem; padding: 0.5rem 1rem !important; position: relative; }
  .nav-link.active, .nav-link:hover{ color: var(--navy) !important; }
  .nav-link.active::after{ content:""; position:absolute; left:1rem; right:1rem; bottom:0.15rem; height:2px; background: var(--gold); border-radius: 2px; }
  .btn-pill{ border-radius: 999px; font-weight: 600; padding: 0.65rem 1.5rem; border: 1px solid transparent; display:inline-flex; align-items:center; gap:0.5rem; }
  .btn-navy{ background: var(--navy); color:#fff; }
  .btn-navy:hover{ background: var(--gold); color: var(--navy); }
  .btn-gold{ background: var(--gold); color: var(--navy); }
  .btn-gold:hover{ background: var(--navy); color:#fff; }
  .btn-ghost-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.5); }
  .btn-ghost-light:hover{ background: rgba(255,255,255,0.12); border-color:#fff; color:#fff; }
  .btn-ghost-dark{ background: transparent; color: var(--navy); border-color: var(--navy-soft-2); }
  .btn-ghost-dark:hover{ background: var(--navy-soft); }

  /* ---------- Hero ---------- */
  .hero{
    position: relative; overflow: hidden; color:#fff;
    min-height: 640px; display:flex; align-items:center;
    padding: 6.5rem 0;
    background:
      radial-gradient(ellipse 800px 520px at 88% 12%, rgba(212,162,80,0.28), transparent 60%),
      linear-gradient(120deg, #04182e 0%, #082f57 48%, #0a3c6e 100%);
  }
  /* Placeholder backdrop built from CSS only (no stock photography).
     To use your own office photo instead, replace the background above with:
     background-image: linear-gradient(rgba(4,14,28,.62),rgba(4,14,28,.72)), url('assets/hero-bg.jpg');
     background-size: cover; background-position: center; */
  .hero::after{
    content:"";
    position:absolute; top:0; right:0; bottom:0; width:60%;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 2px, transparent 2px, transparent 34px);
    opacity:0.7; pointer-events:none;
  }
  .hero .container{ position: relative; z-index: 1; }
  .hero .kicker{
    color: rgba(255,255,255,0.75); font-size: 0.82rem; font-weight: 700; margin-bottom: 1.2rem;
    letter-spacing: 0.08em; text-transform: uppercase; display:flex; align-items:center; gap:0.7rem;
  }
  .hero .kicker .kicker-line{ width: 28px; height:1px; background: var(--gold); display:inline-block; }
  .hero h1{ color:#fff; font-weight: 600; line-height: 1.14; font-size: clamp(2.1rem, 4vw, 3.25rem); max-width: 15ch; }
  .hero p.lead{ color: rgba(255,255,255,0.8); max-width: 46ch; font-size: 1.05rem; }
  .hero .credential-line{ color: rgba(255,255,255,0.58); font-size: 0.88rem; margin-top: 1.8rem; }

  .fade-in-hero{ opacity:0; transform: translateY(10px); animation: heroIn 0.7s ease forwards; }
  @keyframes heroIn{ to{ opacity:1; transform: translateY(0);} }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .fade-in-hero{opacity:1 !important; transform:none !important;} }

  /* floating glass card, right side of the hero */
  .hero-glass-card{
    background: rgba(255,255,255,0.09);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius);
    padding: 2rem 2rem 0;
    box-shadow: 0 24px 60px rgba(0,0,0,0.38);
    overflow: hidden;
  }
  .hero-glass-card .glass-title{ font-family:'Fraunces',serif; font-weight:600; font-size:1.28rem; color:#fff; margin-bottom:0.75rem; line-height:1.3; }
  .hero-glass-card .glass-desc{ color: rgba(255,255,255,0.75); font-size:0.9rem; margin-bottom:1.7rem; }
  .hero-glass-stats{ display:grid; grid-template-columns: repeat(3,1fr); margin: 0 -2rem; border-top: 1px solid rgba(255,255,255,0.18); }
  .hero-glass-stats .stat{ padding: 1.25rem 0.75rem; text-align:center; border-left: 1px solid rgba(255,255,255,0.18); }
  .hero-glass-stats .stat:first-child{ border-left:none; }
  .hero-glass-stats .stat-num{ font-family:'Fraunces',serif; font-weight:700; font-size:1.2rem; color:#fff; }
  .hero-glass-stats .stat-label{ font-size:0.68rem; color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.04em; margin-top:0.25rem; }

  @media (max-width: 991px){
    .hero{ min-height: unset; padding: 4rem 0; }
  }

  /* ---------- Quick value strip ---------- */
  .value-strip{ padding: 4.5rem 0 3rem; }
  .value-strip-item{ display:flex; gap:1rem; align-items:flex-start; }
  .value-strip-item .vs-num{
    font-family:'Fraunces',serif; font-weight:600; color: var(--gold); font-size:1.4rem; flex:none;
  }
  .value-strip-item h5{ font-family:'Inter',sans-serif; font-weight:600; font-size:1rem; color: var(--navy); margin-bottom:0.2rem; }
  .value-strip-item p{ font-size:0.88rem; color:#555; margin:0; }

  /* ---------- Section basics ---------- */
  .section{ padding: 5.5rem 0; }
  .section-heading{ max-width: 46ch; margin-bottom: 3rem; }
  .section-heading .eyebrow{ color: var(--gold); font-weight: 700; font-size: 0.86rem; margin-bottom: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .section-heading h2{ font-size: clamp(1.75rem, 2.6vw, 2.3rem); font-weight: 600; margin-bottom: 0.85rem; }
  .section-heading p{ color:#444; }
  .section-heading.centered{ margin-left:auto; margin-right:auto; text-align:center; }

  /* ---------- About / Founder ---------- */
  .about-photo{
    border-radius: var(--radius); background: linear-gradient(160deg,#0a3c6e,var(--navy));
    aspect-ratio: 4/5; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
    box-shadow: var(--shadow);
  }
  .about-photo svg{ width: 56%; height:auto; }
  .about-photo .tag{
    position:absolute; left:1.4rem; right:1.4rem; bottom:1.4rem;
    background: rgba(255,255,255,0.1); backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 12px;
    padding: 0.8rem 1rem; font-size: 0.82rem; color:#fff;
  }
  .about-copy .pull-line{
    font-family:'Fraunces', serif; font-size: 1.3rem; color: var(--navy); line-height:1.45;
    background: var(--navy-soft); border-radius: var(--radius); padding: 1.6rem 1.8rem; margin: 1.8rem 0;
  }
  .credential-pills{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top: 1.4rem; }
  .credential-pill{ border-radius: 999px; background: var(--gold-soft); color: var(--navy); font-size:0.8rem; font-weight:700; padding:0.4rem 0.95rem; }

  /* ---------- Services (numbered cards) ---------- */
  .service-card{
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 2.2rem; height:100%; position: relative; overflow:hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
  .service-card .ghost-num{
    position:absolute; top: 0.6rem; right: 1.3rem; font-family:'Fraunces',serif; font-weight:700;
    font-size: 3.6rem; color: var(--navy-soft); line-height:1; pointer-events:none;
  }
  .service-card .icon-wrap{
    width:52px; height:52px; border-radius: 14px; background: var(--navy-soft);
    display:flex; align-items:center; justify-content:center; margin-bottom: 1.3rem; position:relative; z-index:1;
  }
  .service-card .icon-wrap svg{ width:26px; height:26px; color: var(--navy); }
  .service-card h3{ font-size:1.2rem; font-weight:600; margin-bottom:0.6rem; position:relative; z-index:1; }
  .service-card p.desc{ color:#555; font-size:0.92rem; margin-bottom:1.1rem; position:relative; z-index:1; }
  .service-card .chips{ display:flex; flex-wrap:wrap; gap:0.5rem; position:relative; z-index:1; }
  .service-card .chip{ font-size:0.76rem; font-weight:600; color: var(--navy); background: var(--gold-soft); border-radius: 999px; padding: 0.3rem 0.75rem; }

  /* ---------- Process ---------- */
  .process-section{ background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 3rem; margin: 0 auto; }
  .process-step{ display:flex; gap:1.1rem; align-items:flex-start; }
  .process-step .num{
    flex:none; width:44px; height:44px; border-radius:50%; background: var(--gold);
    color: var(--navy); font-family:'Fraunces',serif; font-weight:700; font-size:1.05rem;
    display:flex; align-items:center; justify-content:center;
  }
  .process-step h4{ font-family:'Inter',sans-serif; font-weight:600; font-size:1.04rem; color: var(--navy); margin-bottom:0.35rem; }
  .process-step p{ font-size:0.9rem; color:#555; margin:0; }

  /* ---------- Why IKAC (value cards, replaces testimonials) ---------- */
  .why-card{
    background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.9rem; height:100%; transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .why-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
  .why-card .icon-wrap{ width:46px; height:46px; border-radius:12px; background: var(--gold-soft); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
  .why-card svg{ width:22px; height:22px; color: var(--navy); }
  .why-card h4{ font-family:'Fraunces',serif; font-weight:600; font-size:1.06rem; color: var(--navy); margin-bottom:0.5rem; }
  .why-card p{ font-size:0.9rem; color:#555; margin:0; }

  /* ---------- CTA band ---------- */
  .cta-band{ background: var(--ink); color:#fff; border-radius: var(--radius); margin: 0 auto; padding: 3.2rem; }
  .cta-band h2{ color:#fff; font-size: clamp(1.6rem, 3vw, 2.1rem); max-width: 22ch; }
  .cta-band p{ color: rgba(255,255,255,0.65); }
  .cta-contact-line{ color: rgba(255,255,255,0.75); font-size:0.92rem; }
  .cta-contact-line a{ color:#fff; }
  .cta-contact-line a:hover{ color: var(--gold); }
  .cta-contact-line .sep{ color: var(--gold); margin: 0 0.7rem; }

  /* ---------- Footer ---------- */
  .site-footer{ background: var(--navy); color: rgba(255,255,255,0.72); padding: 4rem 0 1.5rem; }
  .site-footer img{ height: 42px; margin-bottom: 1rem; }
  .site-footer p.tagline{ font-size:0.88rem; color: rgba(255,255,255,0.55); max-width:32ch; }
  .site-footer h5{ color:#fff; font-size:0.92rem; font-weight:600; margin-bottom:1.1rem; }
  .site-footer ul{ list-style:none; padding:0; margin:0; }
  .site-footer li{ margin-bottom:0.6rem; font-size:0.9rem; }
  .site-footer a{ color: rgba(255,255,255,0.72); }
  .site-footer a:hover{ color: var(--gold); }
  .footer-bottom{ border-top:1px solid rgba(255,255,255,0.14); margin-top:2.8rem; padding-top:1.4rem; font-size:0.82rem; color: rgba(255,255,255,0.5); }

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