:root{
    --ink: #0D1B2E;
    --ink-deep: #081221;
    --parchment: #F2E8D5;
    --muted: rgba(242, 232, 213, 0.72);
    --label: rgba(242, 232, 213, 0.48);
    --gold: #E8B23D;
    --gold-soft: rgba(232, 178, 61, 0.55);
    --card: rgba(6, 11, 19, 0.6);
    --saffron: #FF9933;
    --tricolor-green: #138808;
    --header-h: 86px;

    --who-bg: #F5F5F4;
    --who-heading: #16181C;
    --who-body: #666B72;
    --who-card-bg: #FFFFFF;
    --who-card-shadow: rgba(16, 19, 23, 0.06);
    --who-accent: #C99A3F;
  }

  *{ box-sizing: border-box;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important; }

  html, body{
    margin: 0;
    padding: 0;
    background: var(--ink);
    color: var(--parchment);
    overflow-x: hidden;
    cursor: none;
  }

  a, button{ cursor: none; }

  @media (hover: none), (pointer: coarse){
    html, body, a, button{ cursor: auto; }
  }

  h1, h2, h3, .heading-font{
    font-weight: 500;
    letter-spacing: 0.015em;
    margin: 0;
  }

  button{ font-family: inherit; cursor: pointer; }

  a:focus-visible,
  button:focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .who-section a:focus-visible,
  .who-section button:focus-visible{
    outline-color: var(--who-accent);
  }

  /* =========================
     TRICOLOR RAIL
  ========================= */
  .tricolor-rail{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 30;
    background: linear-gradient(90deg,
      var(--saffron) 0%, var(--saffron) 33.33%,
      var(--parchment) 33.33%, var(--parchment) 66.66%,
      var(--tricolor-green) 66.66%, var(--tricolor-green) 100%);
    opacity: 0.9;
  }

  /* =========================
     HERO SHELL
  ========================= */
  .hero{
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--ink);
  }

  .hero-base-img{
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image:
      linear-gradient(180deg, rgba(8,14,24,0.42) 0%, rgba(8,14,24,0.15) 30%, rgba(8,14,24,0.65) 100%),
      url('../images/lady-justice.png');
    will-change: transform;
     width: 100%;
  }

  .hero-reveal-img{
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-size: cover;
    background-position: center 30%;
    background-image:
      linear-gradient(180deg, rgba(8,14,24,0.3) 0%, rgba(8,14,24,0.05) 30%, rgba(8,14,24,0.5) 100%),
      url('../images/supreme-court.jpg');
    transform: scale(1.09);
    will-change: transform;
    -webkit-mask-image: radial-gradient(circle 0px at -999px -999px, #fff, transparent);
    mask-image: radial-gradient(circle 0px at -999px -999px, #fff, transparent);
  }

  .cursor-glow{
    position: absolute;
    top: 0;
    left: 0;
    width: 460px;
    height: 460px;
    margin-left: -230px;
    margin-top: -230px;
    z-index: 3;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214,168,74,0.32) 0%, rgba(214,168,74,0.14) 35%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: transform;
  }
  .cursor-glow.is-active{ opacity: 1; }

  /* =========================
     ASHOKA CHAKRA ACCENT (the one bold, deliberate motion of this page)
  ========================= */
  .chakra-mark{
    position: absolute;
    z-index: 4;
    top: calc(36px + var(--header-h) - 18px);
    right: 44px;
    width: 130px;
    height: 130px;
    pointer-events: none;
    opacity: 0.22;
    animation: chakraSpin 48s linear infinite;
    will-change: transform;
  }
  .chakra-mark svg{ width: 100%; height: 100%; display: block; }
  @keyframes chakraSpin{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
  }
  @media (max-width: 900px){
    .chakra-mark{ width: 92px; height: 92px; top: calc(28px + var(--header-h) - 12px); right: 22px; opacity: 0.18; }
  }
  @media (max-width: 720px){
    .chakra-mark{ display: none; }
  }
  @media (prefers-reduced-motion: reduce){
    .chakra-mark{ animation: none; }
  }

  /* =========================
     CUSTOM CURSOR
  ========================= */
  .cursor-dot, .cursor-ring{
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    transform: translate(-50%, -50%);
  }
  .cursor-dot{
    width: 6px;
    height: 6px;
    background: var(--gold);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .cursor-ring{
    width: 34px;
    height: 34px;
    border: 1px solid rgba(232, 178, 61, 0.7);
    opacity: 0;
    transition: width 0.25s cubic-bezier(0.16,1,0.3,1), height 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease, background 0.25s ease, opacity 0.3s ease;
  }
  .cursor-dot.is-active, .cursor-ring.is-active{ opacity: 1; }
  .cursor-ring.is-hover{
    width: 54px;
    height: 54px;
    background: rgba(232, 178, 61, 0.12);
    border-color: var(--gold);
  }
  @media (hover: none), (pointer: coarse){
    .cursor-dot, .cursor-ring{ display: none; }
  }

  /* =========================
     HEADER
  ========================= */
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    z-index: 1000;
    /* justify-content: space-between; */
}

.site-header .logo {
    justify-self: start;
}

.site-header .mega-nav {
    justify-self: center;
}

.site-header .header-cta {
    justify-self: end;
}
  .logo-img{
    height: 100px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35));
  }
  @media (max-width: 480px){
    .logo-img{ height: 30px; }
  }
  .logo-mark{
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    display: grid;
    place-items: center;
    font-family: 'Fraunces', serif;
    font-size: 12.5px;
    color: var(--gold);
  }
  .logo-word{
    font-family: 'Fraunces', serif;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .logo-word em{
    font-style: normal;
    color: var(--gold);
  }

  .nav-links{
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-links a{
    color: var(--muted);
    text-decoration: none;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.25s ease;
  }
  .nav-links a:hover{ color: var(--parchment); }

  .header-cta{
    flex: none;
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 500;
    color: var(--parchment);
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.2s ease;
  }
  .header-cta:hover{
    background: rgba(232, 178, 61, 0.16);
    transform: translateY(-1px);
  }

  @media (max-width: 900px){
    :root{ --header-h: 74px; }
    .site-header{ padding: 20px 22px; }
    .nav-links{ display: none; }
  }

  @media (max-width: 480px){
    :root{ --header-h: 64px; }
    .site-header{padding: 16px 16px;position: absolute;top: 0;left: 0;width: 100%;display: flex;/* grid-template-columns: 1fr auto 1fr; */align-items: center;z-index: 1000;justify-content: space-between;}
    .logo-word{ font-size: 14px; }
    .header-cta{ padding: 6px 14px; font-size: 11px; }
  }

  /* =========================
     HERO EXTRA CONTENT
  ========================= */
  .hero-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .hero-badge .badge-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(232, 178, 61, 0.8);
  }

  .hero-trust{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 14.5px;
    color: var(--muted);
  }
  .hero-trust strong{
    color: var(--parchment);
    font-weight: 600;
  }
  .hero-trust .dot-sep{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold-soft);
    flex: none;
  }

  .hero-ui{
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    padding: calc(36px + var(--header-h)) 44px 40px;
    pointer-events: none;
  }

  /* =========================
     LEFT COLUMN
  ========================= */
  .hero-left{
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
    min-width: 0;
  }

  .hero-copy{
    max-width: 520px;
    padding-right: 56px;
    pointer-events: auto;
    padding-top: 90px;
  }

  .hero-copy h1{
    font-size: clamp(1.55rem, 3.6vw, 3.15rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--parchment);
    text-shadow: 0 2px 28px rgba(0,0,0,0.35);
  }

  .hero-copy h1 > span{
    display: block;
    font-size: 60px;
  }

  .hero-copy h1 > span:nth-child(2){
    color: var(--gold);
    position: relative;
    animation: goldPulse 3.6s ease-in-out 2.4s infinite;
  }
  .hero-copy h1 > span:nth-child(2)::after{
    content: '';
    position: absolute;
    left: 1px;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--gold), transparent);
    animation: drawLine 1s cubic-bezier(0.65,0,0.35,1) 2.1s forwards;
  }
  @keyframes goldPulse{
    0%, 100%{ text-shadow: 0 2px 28px rgba(0,0,0,0.35), 0 0 0 rgba(214,168,74,0); }
    50%{ text-shadow: 0 2px 28px rgba(0,0,0,0.35), 0 0 22px rgba(214,168,74,0.45); }
  }
  @keyframes drawLine{
    to{ width: 92%; }
  }

  .hero-copy p{
    margin-top: 18px;
    /* max-width: 340px; */
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--muted);
  }

  .icon-row{
    display: flex;
    gap: 10px;
    margin-top: 22px;
  }

  .icon-btn{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(242, 232, 213, 0.4);
    background: transparent;
    color: var(--parchment);
    display: grid;
    place-items: center;
    transition: background 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .icon-btn:hover{
    background: rgba(232, 178, 61, 0.14);
    border-color: var(--gold);
    transform: translateY(-2px);
  }
  .icon-btn svg{ width: 16px; height: 16px; }

  /* =========================
     PRODUCT CARD
  ========================= */
  .product-card{
    pointer-events: auto;
    width: min(320px, 100%);
    display: grid;
    grid-template-columns: 86px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 14px;
    padding: 12px;
    border-radius: 18px;
    background: var(--card);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(232, 178, 61, 0.18);
    box-shadow: 0 18px 50px rgba(0,0,0,0.4);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
  }
  .product-card:hover{
    border-color: rgba(232, 178, 61, 0.4);
    box-shadow: 0 22px 60px rgba(0,0,0,0.5);
    transform: translateY(-2px);
  }

  .product-thumb{
    grid-column: 1;
    grid-row: 1 / -1;
    width: 86px;
    min-height: 86px;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-image: url('https://images.unsplash.com/photo-1654588834754-33346e3ee095?fm=jpg&q=80&w=400&auto=format&fit=crop');
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  }
  .product-card:hover .product-thumb{ transform: scale(1.08); }

  .product-body{ grid-column: 2; grid-row: 1; }
  .product-body h2{
    font-size: 11px;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--parchment);
  }
  .product-body p{
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--muted);
  }

  .cart-btn{
    position: relative;
    overflow: hidden;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: end;
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--parchment);
    background: transparent;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  }
  .cart-btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.16,1,0.3,1);
  }
  .cart-btn:hover::before{ left: 130%; }
  .cart-btn:hover{
    transform: translateY(-1px);
    background: rgba(232, 178, 61, 0.16);
  }

  /* =========================
     PAGE LABEL
  ========================= */
  .hero-page{
    position: absolute;
    top: calc(36px + var(--header-h));
    right: 44px;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(242, 232, 213, 0.78);
  }

  /* =========================
     SPECS
  ========================= */
  .specs{
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    pointer-events: auto;
    width: min(340px, 100%);
  }

  .specs h3{
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 14px;
    letter-spacing: 0.12em;
    color: var(--gold);
  }

  .spec-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
  }
  .spec-row + .spec-row{
    border-top: 1px solid rgba(232, 178, 61, 0.22);
  }

  .spec-label{
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--label);
  }
  .spec-value{
    font-size: 12.5px;
    color: var(--parchment);
    text-align: right;
    white-space: nowrap;
  }

  /* =========================
     WHO WE ARE SECTION — exact copy of reference design, Poppins font
  ========================= */

  .who-section{
    position: relative;
    background: var(--who-bg);
    padding: 90px 60px 110px;
    overflow: hidden;
  }

  .who-inner{
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
  }

  

  .who-head{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 70px;
  }

  .who-head-left{
      /* max-width: 640px; */
      text-align: center;
      margin: 0 auto !important;
}

  .who-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.16);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--who-heading);
  }
  .who-badge .badge-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--who-accent);
  }

  .who-head h2{
    font-size: clamp(2.1rem, 3.9vw, 3.35rem);
    line-height: 1.16;
    color: var(--who-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .who-head h2 .accent{ color: var(--who-accent); }

  .who-head-left p{
    margin-top: 24px;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--who-body);
  }

  .who-meta{
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--who-body);
    line-height: 1.9;
    text-align: right;
  }
  .who-meta strong{
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--who-heading);
    margin-bottom: 6px;
  }

  .who-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
  }

  .who-card{
    background: var(--who-card-bg);
    border: none;
    border-radius: 18px;
    padding: 36px 30px 38px;
    box-shadow: 0 4px 18px var(--who-card-shadow);
    opacity: 0;
    transform: translateY(30px);
    transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
  }
  .who-card.is-visible{
    animation: whoCardIn 0.75s cubic-bezier(0.19,1,0.22,1) forwards;
  }
  .who-card:hover{
    box-shadow: 0 16px 40px rgba(16,19,23,0.12);
    transform: translateY(-4px);
  }
  .who-card.is-visible:hover{
    transform: translateY(-4px);
  }

  .who-card-top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .who-card h3{
    font-size: 21px;
    line-height: 1.3;
    color: var(--who-heading);
    font-weight: 700;
    max-width: 72%;
  }

  .who-card-icon{
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--who-accent);
    font-size: 35px;
  }
  .who-card-icon svg{ width: 36px; height: 36px; }

  .who-card-divider{
    height: 1px;
    background: rgba(0,0,0,0.1);
    margin: 24px 0 18px;
  }

  .who-card p{
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--who-body);
  }

  .who-scroll-top{
    position: absolute;
    right: 8px;
    bottom: -6px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E4E3E0;
    border: none;
    display: grid;
    place-items: center;
    color: var(--who-heading);
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
  }
  .who-scroll-top svg{ width: 16px; height: 16px; }
  .who-scroll-top:hover{
    background: var(--who-accent);
    color: #fff;
    transform: translateY(-2px);
  }

  @keyframes whoCardIn{
    from{ opacity: 0; transform: translateY(30px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 1024px){
    .who-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 720px){
    .who-section{ padding: 76px 22px 84px; }
    .who-head{ flex-direction: column; }
    .who-meta{ text-align: left; }
  }

  @media (max-width: 560px){
    .who-grid{ grid-template-columns: 1fr; }
  }

  @media (max-width: 480px){
    .who-section{ padding: 64px 16px 72px; }
    .who-head{ margin-bottom: 40px; gap: 24px; }
    .who-card{ padding: 24px 20px 26px; }
    .who-scroll-top{ width: 38px; height: 38px; right: 4px; }
  }

  @media (prefers-reduced-motion: reduce){
    .who-card{ animation: none !important; opacity: 1 !important; transform: none !important; }
  }

  /* =========================
     ANIMATIONS
  ========================= */
  @keyframes heroImageIn{
    from{ opacity: 0; transform: scale(1.18); }
    to{ opacity: 1; transform: scale(1); }
  }
  .hero-image-animate{
    opacity: 0;
    animation: heroImageIn 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    animation-delay: 0.15s;
  }

  @keyframes wordPullUp{
    from{ opacity: 0; transform: translateY(20px); }
    to{ opacity: 1; transform: translateY(0); }
  }
  .pull-word{
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
  }
  .pull-word:not(:last-child){ margin-right: 0.3em; }
  .words-visible .pull-word{
    animation: wordPullUp 0.55s ease forwards;
  }

  @keyframes fadeUp{
    from{ opacity: 0; transform: translateY(14px); filter: blur(8px); }
    to{ opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  .fade-up-reveal{
    opacity: 0;
    transform: translateY(14px);
    filter: blur(8px);
  }
  .fade-up-reveal.is-visible{
    animation: fadeUp 0.7s ease forwards;
  }

  @media (prefers-reduced-motion: reduce){
    .hero-image-animate, .pull-word, .fade-up-reveal{
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
  }

  /* =========================
     RESPONSIVE
  ========================= */
  @media (max-width: 1024px){
    .hero-ui{ padding: calc(32px + var(--header-h)) 28px 36px; }
    .hero-page{ top: calc(32px + var(--header-h)); right: 28px; }
    .specs{ width: min(300px, 100%); }
  }

  @media (max-width: 900px){
    .hero-ui{ padding: calc(28px + var(--header-h)) 22px 28px; }
    .hero-page{ top: calc(28px + var(--header-h)); right: 22px; }
    .hero-copy h1{ font-size: clamp(1.35rem, 7.2vw, 2.4rem); }
    .hero-base-img, .hero-reveal-img{ background-position: 40% center; }
    .specs{ width: min(280px, 100%); }
  }

  @media (max-width: 768px){
    .hero-ui{
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr auto;
      padding: calc(max(24px, env(safe-area-inset-top)) + var(--header-h)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    }
    .hero-left{ grid-row: 1 / 3; gap: 24px; }
    .hero-page{
      top: calc(max(24px, env(safe-area-inset-top)) + var(--header-h));
      right: max(20px, env(safe-area-inset-right));
    }
    .specs{
      grid-row: 3;
      justify-self: stretch;
      width: 100%;
      margin-top: 8px;
    }
    .hero-base-img, .hero-reveal-img{ background-position: 40% center; }
  }

  @media (max-width: 720px){
    .hero{ height: auto; min-height: 100vh; min-height: 100dvh; }
    .hero-ui{
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100dvh;
      justify-content: flex-start;
      gap: 28px;
      padding: calc(max(22px, env(safe-area-inset-top)) + var(--header-h)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }
    .hero-left{
      grid-row: unset;
      grid-column: unset;
      width: 100%;
      justify-content: flex-start;
    }
    .hero-copy{ max-width: 100%; padding-right: 48px; }
    .hero-copy p{ font-size: 12.5px; width: 100%; max-width: 100%; }
    .product-card{ width: 100%; }
    .specs{ width: 100%; margin-top: auto; padding-top: 4px; }
    .spec-value{ white-space: normal; }
    .hero-base-img, .hero-reveal-img{ position: absolute; background-position: 40% center; }
  }

  @media (max-width: 480px){
    .hero-ui{ gap: 22px; padding: calc(max(18px, env(safe-area-inset-top)) + var(--header-h)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
    .hero-page{ font-size: 12px; }
    .hero-copy h1{ font-size: clamp(1.1rem, 8.5vw, 1.65rem); }
    .hero-copy p{ font-size: 12px; margin-top: 14px; }
    .icon-row{ margin-top: 16px; gap: 8px; }
    .icon-btn{ width: 34px; height: 34px; }
    .hero-left{ gap: 22px; }
    .product-card{ grid-template-columns: 72px 1fr; gap: 8px 12px; padding: 10px; border-radius: 14px; }
    .product-thumb{ width: 72px; min-height: 72px; border-radius: 10px; }
    .product-body h2{ font-size: 10px; }
    .product-body p{ font-size: 11px; }
    .cart-btn{ padding: 6px 14px; font-size: 11px; }
    .specs h3{ font-size: 10px; margin-bottom: 10px; }
    .spec-row{ padding: 6px 0; gap: 10px; }
    .spec-label, .spec-value{ font-size: 11px; }
  }

  @media (max-width: 360px){
    .hero-copy h1{ font-size: 1rem; }
    .product-card{ grid-template-columns: 64px 1fr; }
    .product-thumb{ width: 64px; min-height: 64px; }
  }

  /* =========================
     PROTECTION SHIELD SECTION (new — same tokens/fonts as hero above)
  ========================= */
  .shield-section{
    position: relative;
    background: var(--ink);
    padding: 120px 44px 140px;
    overflow: hidden;
  }

  /* faint rotated-square (diamond) shapes scattered across the dark backdrop */
  .shield-bg-shapes{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .shield-diamond{
    position: absolute;
    border: 1px solid rgba(242, 232, 213, 0.06);
    transform: rotate(45deg);
  }
  .shield-diamond.d1{ width: 300px; height: 300px; top: -6%; left: 4%; }
  .shield-diamond.d2{ width: 170px; height: 170px; top: 46%; left: 15%; border-color: rgba(242, 232, 213, 0.045); }
  .shield-diamond.d3{ width: 380px; height: 380px; bottom: -14%; left: -4%; border-color: rgba(242, 232, 213, 0.05); }

  .shield-watermark{
    position: absolute;
    left: 4%;
    bottom: -4%;
    font-family: 'Fraunces', serif;
    font-size: clamp(6rem, 16vw, 13rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(242, 232, 213, 0.045);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }

  .shield-inner{
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
    align-items: center;
    gap: 70px;
    position: relative;
    z-index: 1;
  }

  .shield-left{ max-width: 460px; }

  .shield-heading{
    font-size: clamp(1.9rem, 3.4vw, 2.95rem);
    line-height: 1.16;
    text-transform: none;
    font-weight: 600;
    color: var(--parchment);
    margin-top: 6px;
    text-shadow: 0 2px 28px rgba(0,0,0,0.35);
  }
  .shield-heading .line{ display: block; }
  .shield-heading .gold{ color: var(--gold); }

  .shield-copy{
    margin-top: 22px;
    max-width: 400px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--muted);
  }

  .shield-checklist{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
    margin-top: 28px;
  }
  .shield-check{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--parchment);
  }
  .shield-check svg{ flex: none; width: 15px; height: 15px; color: var(--gold); }

  .shield-cta{
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding: 6px 6px 6px 22px;
    border-radius: 999px;
    border: 1px solid rgba(242, 232, 213, 0.32);
    background: rgba(255,255,255,0.02);
    color: var(--parchment);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.2s ease;
  }
  .shield-cta:hover{
    border-color: var(--gold);
    background: rgba(232, 178, 61, 0.08);
    transform: translateY(-1px);
  }
  .shield-cta-arrow{
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink-deep);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .shield-cta:hover .shield-cta-arrow{ transform: rotate(45deg); }

  .shield-right{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
  }

  .shield-image-wrap{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 4 / 3.6;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,0.5);
    border: 1px solid rgba(232, 178, 61, 0.16);
    opacity: 0;
    transform: translateX(70px) translateY(18px) scale(0.94);
    transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
  }
  .shield-image-wrap.is-visible{
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  .shield-image-wrap.is-floating{
    animation: shieldFloat 6s ease-in-out infinite;
  }
  @keyframes shieldFloat{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-14px); }
  }

  .shield-image{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-image:
      linear-gradient(180deg, rgba(8,14,24,0.05) 0%, rgba(8,14,24,0.3) 100%),
      url('https://images.unsplash.com/photo-1654588834754-33346e3ee095?fm=jpg&q=80&w=1200&auto=format&fit=crop');
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) scale(1);
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
    will-change: transform;
  }

  /* Cursor-follow gold spotlight, echoes the hero's spotlight motif */
  .shield-image-wrap::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 178, 61, 0.38), rgba(232, 178, 61, 0.08) 45%, transparent 68%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.45s ease;
  }
  .shield-image-wrap:hover::after{ opacity: 1; }

  /* Thin gold rim-light that brightens on hover */
  .shield-image-wrap::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(232, 178, 61, 0);
    transition: box-shadow 0.5s ease;
  }
  .shield-image-wrap:hover::before{
    box-shadow: inset 0 0 0 1px rgba(232, 178, 61, 0.55), inset 0 0 40px rgba(232, 178, 61, 0.12);
  }

  /* small diamond accent peeking above the image, top-centre */
  .shield-accent-diamond{
    position: absolute;
    z-index: 2;
    top: -18px;
    left: 50%;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    background: var(--ink);
    border: 1px solid rgba(232, 178, 61, 0.5);
    transform: rotate(45deg);
    pointer-events: none;
  }

  /* circular arrow button overlapping the bottom-right corner of the image */
  .shield-scroll-btn{
    position: absolute;
    z-index: 4;
    right: -22px;
    bottom: -22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--gold);
    color: var(--ink-deep);
    display: grid;
    place-items: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease;
  }
  .shield-scroll-btn svg{ width: 18px; height: 18px; }
  .shield-scroll-btn:hover{
    transform: translateY(-3px) rotate(45deg);
    background: var(--parchment);
  }

  @media (max-width: 980px){
    .shield-inner{ grid-template-columns: 1fr; gap: 56px; }
    .shield-left{ max-width: 100%; }
    .shield-right{ min-height: 340px; padding-right: 22px; padding-bottom: 22px; }
  }
  @media (max-width: 640px){
    .shield-section{ padding: 84px 22px 96px; }
    .shield-checklist{ grid-template-columns: 1fr; }
    .shield-image-wrap{ width: 100%; }
    .shield-scroll-btn{ width: 46px; height: 46px; right: -14px; bottom: -14px; }
  }
  @media (prefers-reduced-motion: reduce){
    .shield-image-wrap{ transition: none !important; opacity: 1 !important; transform: none !important; }
    .shield-image-wrap.is-floating{ animation: none !important; }
    .shield-image{ transition: none !important; }
  }

  /* =========================
     MEET THE EXPERTS SECTION (fonts match hero/shield: Fraunces + Inter)
  ========================= */
  .experts-section{
    position: relative;
    background: var(--who-bg);
    padding: 100px 60px 120px;
    overflow: hidden;
  }

  .experts-bg-grid{
    position: absolute;
    z-index: 0;
    pointer-events: none;
    bottom: -8%;
    left: -6%;
    width: 46%;
    height: 60%;
    background-image:
      repeating-linear-gradient(0deg, rgba(16,19,23,0.05) 0 1px, transparent 1px 42px),
      repeating-linear-gradient(90deg, rgba(16,19,23,0.05) 0 1px, transparent 1px 42px);
    -webkit-mask-image: linear-gradient(115deg, #000 0%, #000 40%, transparent 78%);
    mask-image: linear-gradient(115deg, #000 0%, #000 40%, transparent 78%);
  }
  .experts-bg-grid::after{
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(-32deg, rgba(16,19,23,0.05) 0 1px, transparent 1px 60px);
  }

  .experts-inner{
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .experts-head{
    max-width: 720px;
    margin: 0 auto 76px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .experts-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.16);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--who-heading);
  }
  .experts-badge .badge-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(232, 178, 61, 0.6);
  }

  .experts-heading{
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    line-height: 1.16;
    letter-spacing: -0.01em;
    color: var(--who-heading);
  }
  .experts-heading .gold{ color: var(--gold); }

  .experts-body{
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 64px;
    align-items: flex-start;
  }

  .experts-image-wrap{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 4.6;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(16,19,23,0.14);
  }

  .experts-image{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity 0.5s ease, transform 6s ease;
    transform: scale(1.03);
  }
  .experts-image.is-shown{ opacity: 1; }

  .experts-list{
    display: flex;
    flex-direction: column;
  }

  .experts-row{
    display: grid;
    grid-template-columns: 34px 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(16,19,23,0.1);
    cursor: default;
  }
  .experts-row:first-child{ padding-top: 4px; }

  .experts-num{
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(16,19,23,0.35);
    transition: color 0.3s ease;
  }

  .experts-name{
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    color: var(--who-heading);
    transition: color 0.3s ease;
  }

  .experts-role{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--who-body);
    white-space: nowrap;
    justify-self: end;
  }

  .experts-arrow{
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--who-heading);
    transition: color 0.3s ease;
  }
  .experts-arrow svg{
    width: 17px;
    height: 17px;
    transform: rotate(-45deg);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), color 0.3s ease;
  }

  .experts-row.is-active .experts-num,
  .experts-row.is-active .experts-name,
  .experts-row.is-active .experts-arrow{
    color: var(--gold);
  }
  .experts-row.is-active .experts-arrow svg{
    transform: rotate(0deg);
  }

  @media (max-width: 900px){
    .experts-body{ grid-template-columns: 1fr; gap: 40px; }
    .experts-image-wrap{ max-width: 380px; aspect-ratio: 4 / 3.4; }
    .experts-row{ grid-template-columns: 28px 1fr auto; }
    .experts-role{ display: none; }
  }

  @media (max-width: 560px){
    .experts-section{ padding: 72px 20px 90px; }
    .experts-name{ font-size: 1.05rem; }
  }

  /* =========================
     STORY / STATS SECTION — exact copy of reference design
     (badge, heading with vertical rule, image + 2x2 stat grid), Poppins font
  ========================= */
  
  .story-section{
    position: relative;
    background: var(--who-bg);
    padding: 90px 60px 100px;
    overflow: hidden;
  }

  .story-inner{
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
  }

  

  .story-head{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 64px;
  }

  .story-badge-col{
    flex: none;
    padding-top: 4px;
    text-align:center;
  }

  .story-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.16);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--who-heading);
  }
  .story-badge .badge-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--who-accent);
  }

  .story-copy{
    flex: 1;
    
    padding-left: 40px;
  }

  .story-copy h2{
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.18;
    font-weight: 700;
    color: var(--who-heading);
    letter-spacing: -0.01em;
  }
  .story-copy h2 .accent{ color: var(--who-accent); }

  .story-copy p{
    /* margin-top: 20px; */
    max-width: 1000px;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--who-body);
    margin: 0 auto;
  }

  .story-body{
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
  }

  .story-image{
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3.6;
    box-shadow: 0 20px 50px rgba(16,19,23,0.12);
  }
  .story-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .story-stats{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px 56px;
  }

  .stat-value{
    font-size: clamp(2rem, 3vw, 2.7rem);
    font-weight: 700;
    color: var(--who-heading);
    line-height: 1;
  }

  .stat-divider{
    height: 1px;
    background: rgba(0,0,0,0.1);
    margin: 18px 0 16px;
  }

  .stat-label{
    font-size: 16px;
    font-weight: 700;
    color: var(--who-heading);
    margin-bottom: 8px;
  }

  .stat-desc{
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--who-body);
  }

  @media (max-width: 1024px){
    .story-body{ grid-template-columns: 1fr; }
    .story-image{ max-width: 520px; margin: 0 auto; }
  }

  @media (max-width: 720px){
    .story-section{ padding: 76px 22px 84px; }
    .story-head{ flex-direction: column; gap: 20px; }
    .story-badge-col{ width: auto; }
    .story-copy{ padding-left: 0; border-left: none; }
    .story-stats{ grid-template-columns: 1fr; gap: 32px; }
  }

  @media (max-width: 480px){
    .story-section{ padding: 64px 16px 72px; }
  }

  /* =========================
     WHAT WE DO SECTION — exact copy of reference design
     (badge, two-tone heading, checklist, CTA, overlapping image pair)
  ========================= */
 

  .whatwedo-section{
    position: relative;
    background: var(--who-bg);
    padding: 100px 60px 120px;
    overflow: hidden;
  }

  .whatwedo-inner{
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 70px;
    align-items: center;
  }

  .whatwedo-left{ max-width: 560px; }

  .whatwedo-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.16);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--who-heading);
  }
  .whatwedo-badge .badge-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--who-accent);
  }

  .whatwedo-left h2{
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.22;
    font-weight: 700;
    color: var(--who-heading);
    letter-spacing: -0.01em;
  }
  .whatwedo-left h2 .accent{ color: var(--who-accent); }

  .whatwedo-checklist{ margin-top: 32px; }

  .whatwedo-check-item{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--who-heading);
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .whatwedo-check-item:first-child{
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  .whatwedo-check-icon{
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--who-accent);
    color: #fff;
    display: grid;
    place-items: center;
  }
  .whatwedo-check-icon svg{ width: 12px; height: 12px; }

  .whatwedo-copy{
    margin-top: 26px;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--who-body);
  }

  .whatwedo-cta{
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding: 6px 6px 6px 22px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.16);
    background: transparent;
    color: var(--who-heading);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.2s ease;
  }
  .whatwedo-cta:hover{
    border-color: var(--who-accent);
    background: rgba(201, 154, 63, 0.08);
    transform: translateY(-1px);
  }
  .whatwedo-cta-arrow{
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--who-accent);
    color: #fff;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .whatwedo-cta:hover .whatwedo-cta-arrow{ transform: rotate(45deg); }

  .whatwedo-images{
    position: relative;
    width: 100%;
    min-height: 460px;
  }

  .whatwedo-image-back{
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    aspect-ratio: 4 / 3.2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(16,19,23,0.14);
    z-index: 1;
  }

  .whatwedo-image-front{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 66%;
    aspect-ratio: 4 / 3.9;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16,19,23,0.18);
    z-index: 2;
    border: 6px solid var(--who-bg);
  }

  .whatwedo-image-back img,
  .whatwedo-image-front img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media (max-width: 1024px){
    .whatwedo-inner{ grid-template-columns: 1fr; gap: 48px; }
    .whatwedo-images{ min-height: 420px; max-width: 520px; margin: 0 auto; }
  }

  @media (max-width: 640px){
    .whatwedo-section{ padding: 76px 22px 84px; }
    .whatwedo-images{ min-height: 340px; }
    .whatwedo-image-back{ width: 70%; }
    .whatwedo-image-front{ width: 78%; }
  }

  @media (max-width: 480px){
    .whatwedo-section{ padding: 64px 16px 72px; }
    .whatwedo-check-item{ font-size: 13.5px; gap: 10px; padding: 13px 0; }
  }

  /* =========================
     CTA SECTION — fixed/parallax background image.
     background-attachment:fixed keeps the image pinned to the viewport
     while this section scrolls past; the moment the next (opaque) section
     scrolls over it, the image is naturally covered and no longer visible.
  ========================= */
  .cta-section{
    position: relative;
    background-image:
      linear-gradient(180deg, rgba(8,14,24,0.72) 0%, rgba(8,14,24,0.82) 100%),
      url('https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1800&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 150px 44px;
    text-align: center;
    overflow: hidden;
  }

  .cta-inner{
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .cta-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .cta-badge .badge-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(232, 178, 61, 0.8);
  }

  .cta-section h2{
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.2;
    color: var(--parchment);
    text-shadow: 0 2px 28px rgba(0,0,0,0.4);
  }
  .cta-section h2 .gold{ color: var(--gold); }

  .cta-copy{
    margin: 22px auto 0;
    max-width: 520px;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--muted);
  }

  .cta-actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap;
  }

  .cta-btn-primary{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink-deep);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .cta-btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(232, 178, 61, 0.3);
  }

  .cta-btn-secondary{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    border: 1px solid rgba(242, 232, 213, 0.4);
    color: var(--parchment);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    background: rgba(255,255,255,0.02);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
  }
  .cta-btn-secondary:hover{
    border-color: var(--gold);
    background: rgba(232, 178, 61, 0.1);
    transform: translateY(-2px);
  }

  @media (max-width: 900px){
    .cta-section{ padding: 120px 32px; }
  }

  /* iOS Safari (and most mobile browsers) don't render fixed backgrounds
     well / at all — fall back to a normal scrolling background there. */
  @media (max-width: 768px), (hover: none) and (pointer: coarse){
    .cta-section{ background-attachment: scroll; padding: 90px 22px; }
  }

  @media (max-width: 480px){
    .cta-section{ padding: 76px 18px; }
    .cta-actions{ gap: 12px; }
    .cta-btn-primary, .cta-btn-secondary{ padding: 12px 22px; font-size: 12.5px; }
  }

  /* =========================
     FAQ SECTION — same layout/font language as the accordion in the
     "Architecture And Interiors" reference (light bg, bold Poppins
     headings, thin divider rule, plus icon that opens into an answer)
  ========================= */
  .faq-section{
    position: relative;
    background: var(--who-bg);
    padding: 100px 60px 110px;
    overflow: hidden;
  }

  .faq-inner{
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 70px;
    align-items: start;
  }

  .faq-head{ max-width: 420px; }

  .faq-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.16);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--who-heading);
  }
  .faq-badge .badge-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--who-accent);
  }

  .faq-head h2{
    font-size: clamp(2.1rem, 3.9vw, 3.35rem);
    line-height: 1.16;
    color: var(--who-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .faq-head h2 .accent{ color: var(--who-accent); }

  .faq-head p{
    margin-top: 24px;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--who-body);
  }

  .faq-cta{
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding: 6px 6px 6px 22px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.16);
    background: transparent;
    color: var(--who-heading);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.2s ease;
  }
  .faq-cta:hover{
    border-color: var(--who-accent);
    background: rgba(201, 154, 63, 0.08);
    transform: translateY(-1px);
  }
  .faq-cta-arrow{
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--who-accent);
    color: #fff;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .faq-cta:hover .faq-cta-arrow{ transform: rotate(45deg); }

  .faq-list{ width: 100%; }

  .faq-item{
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  .faq-item:first-child{
    border-top: 1px solid rgba(0,0,0,0.1);
  }

  .faq-question{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 19px;
    font-weight: 700;
    color: var(--who-heading);
  }

  .faq-icon{
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
  }
  .faq-icon::before,
  .faq-icon::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--who-heading);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease;
  }
  .faq-icon::before{
    width: 14px;
    height: 1.6px;
    transform: translate(-50%, -50%);
  }
  .faq-icon::after{
    width: 1.6px;
    height: 14px;
    transform: translate(-50%, -50%);
  }
  .faq-item.is-open .faq-icon::after{
    transform: translate(-50%, -50%) rotate(90deg) scale(0);
  }
  .faq-item.is-open .faq-icon::before,
  .faq-item.is-open .faq-icon::after{
    background: var(--who-accent);
  }

  .faq-answer{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .faq-answer-inner{
    overflow: hidden;
  }
  .faq-answer p{
    margin: 0 0 26px;
    max-width: 620px;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--who-body);
  }
  .faq-item.is-open .faq-answer{
    grid-template-rows: 1fr;
  }

  @media (max-width: 1024px){
    .faq-inner{ grid-template-columns: 1fr; gap: 44px; }
    .faq-head{ max-width: 100%; }
  }

  @media (max-width: 720px){
    .faq-section{ padding: 76px 22px 84px; }
    .faq-question{ font-size: 16.5px; padding: 20px 0; }
  }

  @media (max-width: 480px){
    .faq-section{ padding: 64px 16px 72px; }
    .faq-question{ font-size: 15px; gap: 14px; }
  }

  /* =========================
     TESTIMONIALS SECTION — dark stats panel + continuous auto-sliding
     marquee of testimonial cards (right → left), matching hero/shield
     tokens: --ink background, --gold accents, Fraunces quotes, Inter body.
  ========================= */
  .testi-section{
    position: relative;
    background: var(--ink);
    padding: 110px 44px 130px;
    overflow: hidden;
  }

  .testi-bg-shapes{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .testi-diamond{
    position: absolute;
    border: 1px solid rgba(242, 232, 213, 0.055);
    transform: rotate(45deg);
  }
  .testi-diamond.t1{ width: 260px; height: 260px; top: -10%; right: 6%; }
  .testi-diamond.t2{ width: 160px; height: 160px; bottom: -6%; left: 4%; border-color: rgba(242, 232, 213, 0.045); }

  .testi-inner{
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .testi-head{
    max-width: 640px;
    margin: 0 auto 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .testi-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .testi-badge .badge-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(232, 178, 61, 0.8);
  }

  .testi-heading{
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.22;
    color: var(--parchment);
    text-shadow: 0 2px 28px rgba(0,0,0,0.35);
  }
  .testi-heading .gold{ color: var(--gold); }

  .testi-heading-sub{
    margin-top: 16px;
    max-width: 480px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--muted);
  }

  .testi-body{
    display: grid;
    grid-template-columns: minmax(220px, 260px) 1fr;
    gap: 54px;
    align-items: center;
  }

  /* ---- left stats rail ---- */
  .testi-stats{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .testi-stat-row{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--parchment);
  }
  .testi-stat-row .stat-icon{
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
  }
  .testi-stat-row .stat-icon svg{ width: 18px; height: 18px; }
  .testi-stat-row .stat-stars{ display: flex; gap: 2px; }
  .testi-stat-row .stat-stars svg{ width: 11px; height: 11px; color: var(--gold); }
  .testi-stat-row strong{ font-weight: 700; margin-right: 2px; }

  .testi-stat-card{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid rgba(232, 178, 61, 0.18);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .testi-stat-card .stat-icon{
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(232, 178, 61, 0.14);
    color: var(--gold);
    display: grid;
    place-items: center;
  }
  .testi-stat-card .stat-icon svg{ width: 17px; height: 17px; flex: none; }
  .testi-stat-card .stat-num{
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--parchment);
    line-height: 1.15;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .testi-stat-card .stat-stars{
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
  .testi-stat-card .stat-stars svg{
    width: 10px;
    height: 10px;
    flex: none;
    display: block;
  }
  .testi-stat-card .stat-caption{
    font-size: 10.5px;
    color: var(--label);
    letter-spacing: 0.02em;
    margin-top: 2px;
  }

  .testi-stat-years{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
  }
  .testi-stat-years .years-num{
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 34px;
    color: var(--gold);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 2px;
  }
  .testi-stat-years .years-caption{
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.5;
    max-width: 90px;
  }

  /* ---- right marquee track ---- */
  .testi-track-wrap{
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }

  .testi-track{
    display: flex;
    align-items: stretch;
    gap: 22px;
    width: max-content;
    animation: testiScroll 34s linear infinite;
  }
  .testi-track-wrap:hover .testi-track,
  .testi-track-wrap.is-paused .testi-track{
    animation-play-state: paused;
  }

  @keyframes testiScroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }

  .testi-card{
    flex: none;
    width: 300px;
    padding: 26px 24px 22px;
    border-radius: 18px;
    background: var(--who-card-bg);
    box-shadow: 0 14px 36px rgba(0,0,0,0.28);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
  }
  .testi-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 22px 46px rgba(0,0,0,0.36);
  }

  .testi-card-stars{ display: flex; gap: 3px; margin-bottom: 14px; }
  .testi-card-stars svg{ width: 12px; height: 12px; color: var(--who-accent); }

  .testi-card-quote{
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--who-heading);
    margin: 0 0 20px;
    min-height: 108px;
  }

  .testi-card-person{
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  .testi-card-avatar{
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  }
  .testi-card:hover .testi-card-avatar{
    transform: translateY(-4px);
  }

  .testi-card-name{
    font-size: 12.5px;
    font-weight: 700;
    color: var(--who-heading);
    line-height: 1.35;
  }
  .testi-card-name span{
    display: block;
    font-weight: 400;
    font-size: 11px;
    color: var(--who-body);
    margin-top: 1px;
  }

  @media (max-width: 980px){
    .testi-body{ grid-template-columns: 1fr; gap: 36px; }
    .testi-stats{
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }
    .testi-stat-years{ margin-top: 0; }
  }

  @media (max-width: 640px){
    .testi-section{ padding: 84px 20px 96px; }
    .testi-card{ width: 260px; }
    .testi-card-quote{ min-height: 128px; }
  }

  @media (prefers-reduced-motion: reduce){
    .testi-track{ animation: none; }
  }

  /* =========================
     FOOTER (same tokens/fonts as hero — Fraunces for the wordmark, Inter for copy)
  ========================= */
  .site-footer{
    position: relative;
    background: var(--ink);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 900px;
  }

  .footer-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center 30%;
    background-image: url('https://images.unsplash.com/photo-1521587760476-6c12a4b040da?q=80&w=1600&auto=format&fit=crop');
  }
  .footer-bg::after{
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(8,14,24,0.94) 0%, rgba(8,14,24,0.9) 45%, rgba(8,14,24,0.75) 100%);
  }

  .footer-top{
    position: relative;
    z-index: 1;
    max-width: 1680px;
    margin: 0 auto;
    padding: 56px 48px 32px;
    display: grid;
    grid-template-columns: 1.15fr repeat(4, 1fr);
    column-gap: 36px;
    align-items: start;
  }

  .footer-brand{ max-width: 300px; }

  .footer-logo{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--parchment);
  }
  .footer-logo-mark{
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    display: grid;
    place-items: center;
    font-family: 'Fraunces', serif;
    font-size: 11px;
    color: var(--gold);
  }
  .footer-logo-word{
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.01em;
    color: var(--parchment);
  }

  .footer-address{
    margin-top: 22px;
    font-style: normal;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--muted);
  }

  .footer-maps-link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
  }
  .footer-maps-link svg{ width: 12px; height: 12px; transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }
  .footer-maps-link:hover svg{ transform: translate(2px, -2px); }

  .footer-social-icons{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
  }
  .footer-social-icons a{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid rgba(242, 232, 213, 0.3);
    display: grid;
    place-items: center;
    color: var(--parchment);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  }
  .footer-social-icons a svg{width: 14px;height: 14px;}
  .footer-social-icons a:hover{
    background: rgba(232, 178, 61, 0.14);
    border-color: var(--gold);
    transform: translateY(-2px);
  }

  .footer-quicklinks{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
  }
  .footer-quicklinks a{
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    width: fit-content;
    transition: color 0.25s ease;
  }
  .footer-quicklinks a:hover{ color: var(--gold); }

  .footer-apps-label{
    margin: 28px 0 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--label);
  }
  .footer-apps{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer-app-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(242, 232, 213, 0.06);
    border: 1px solid rgba(242, 232, 213, 0.16);
    text-decoration: none;
    color: var(--parchment);
    width: fit-content;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
  }
  .footer-app-btn:hover{
    border-color: var(--gold);
    background: rgba(232, 178, 61, 0.1);
    transform: translateY(-1px);
  }
  .footer-app-btn svg{ width: 20px; height: 20px; flex: none; color: var(--gold); }
  .footer-app-btn .app-btn-text{ display: flex; flex-direction: column; line-height: 1.25; }
  .footer-app-btn .app-btn-text small{ font-size: 9px; letter-spacing: 0.03em; color: var(--muted); }
  .footer-app-btn .app-btn-text strong{ font-size: 13.5px; font-weight: 600; }

  .footer-col-stack{
    display: flex;
    flex-direction: column;
  }

  .footer-link-group + .footer-link-group{
    margin-top: 38px;
  }

  .footer-group-heading{
    margin: 0 0 14px;
    padding-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid rgba(232, 178, 61, 0.28);
  }

  .footer-link-group ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .footer-link-group a{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.25s ease;
  }
  .footer-link-group a:hover{ color: var(--gold); }

  .footer-divider{
    position: relative;
    z-index: 1;
    max-width: 1680px;
    margin: 0 auto;
    height: 1px;
    background: rgba(242, 232, 213, 0.12);
  }

  .footer-bottom{
    position: relative;
    z-index: 1;
    max-width: 1680px;
    margin: 0 auto;
    padding: 18px 48px;
    text-align: center;
  }
  .footer-bottom p{
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
  }
  .footer-bottom .gold{ color: var(--gold); font-weight: 500; }

  .footer-watermark-wrap{
    position: relative;
    z-index: 1;
    padding: 16px 44px 0;
    min-height: 110px;
    display: flex;
    align-items: flex-end;
    margin-top: auto;
  }
  .footer-watermark{
    display: block;
    width: 100%;
    font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: clamp(2.4rem, 7.5vw, 6.5rem);
    line-height: 0.82;
    color: rgba(242, 232, 213, 0.16);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
  }

  .footer-scroll-top{
    position: absolute;
    z-index: 2;
    right: 44px;
    bottom: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(242, 232, 213, 0.14);
    color: var(--parchment);
    display: grid;
    place-items: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .footer-scroll-top svg{ width: 16px; height: 16px; }
  .footer-scroll-top:hover{
    background: var(--gold);
    color: var(--ink-deep);
    transform: translateY(-2px);
  }

  @media (max-width: 1280px){
    .footer-top{ grid-template-columns: 1fr 1fr 1fr; row-gap: 40px; padding: 48px 36px 28px; }
    .footer-brand{ max-width: 100%; grid-column: 1 / -1; }
    .footer-watermark-wrap{ padding: 14px 36px 0; min-height: 90px; }
    .footer-bottom{ padding: 16px 36px; }
    .footer-scroll-top{ right: 28px; bottom: 20px; }
  }

  @media (max-width: 820px){
    .footer-top{ grid-template-columns: 1fr 1fr; padding: 44px 26px 24px; column-gap: 28px; row-gap: 32px; }
  }

  @media (max-width: 560px){
    .site-footer{ min-height: auto; }
    .footer-top{ grid-template-columns: 1fr; padding: 40px 22px 20px; }
    .footer-link-group + .footer-link-group{ margin-top: 30px; }
    .footer-watermark-wrap{ padding: 12px 22px 0; min-height: 70px; }
    .footer-watermark{ font-size: clamp(2rem, 13vw, 3.5rem); }
    .footer-bottom{ padding: 14px 22px; }
    .footer-scroll-top{ right: 18px; bottom: 16px; width: 40px; height: 40px; }
  }


  /* =========================================================
   MEGA MENU — extra CSS for the header services dropdowns
   Add this to your existing style.css (or keep it as its own
   file and link it after style.css, as done in index.html).
   Uses the same design tokens already defined in :root
   (--ink, --ink-deep, --parchment, --muted, --gold, --card)
   so it matches the rest of the page automatically.
========================================================= */

.mega-nav{
  position: relative;
}

.mega-nav > li{
  position: relative;
}

/* plain (non-dropdown) links keep the original nav-links look */
.mega-nav > li > a:not(.mega-trigger){
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.mega-nav > li > a:not(.mega-trigger):hover{ color: var(--parchment); }

/* trigger label for items that open a dropdown/mega panel */
.mega-trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease;
}
.mega-trigger::after{
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
  transition: transform 0.25s ease;
}
.mega-item:hover .mega-trigger,
.mega-item:focus-within .mega-trigger{ color: var(--parchment); }
.mega-item:hover .mega-trigger::after,
.mega-item:focus-within .mega-trigger::after{
  transform: rotate(225deg) translateY(1px);
}

/* dropdown / mega panel shell */
.mega-panel{
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ink-deep);
  border: 1px solid rgba(232, 178, 61, 0.18);
  box-shadow: 0 22px 50px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), visibility 0.25s;
  z-index: 30;
}

.mega-panel--wide{
  min-width: 460px;
  display: flex;
  gap: 36px;
}

.mega-item:hover .mega-panel,
.mega-item:focus-within .mega-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-panel-col{
  min-width: 190px;
}

.mega-col-title{
  display: block;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.mega-panel ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mega-panel ul li a{
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}
.mega-panel ul li a:hover{
  color: var(--gold);
  transform: translateX(2px);
}

/* keep existing responsive behaviour: nav-links (incl. the mega menu)
   are hidden below 900px, same breakpoint style.css already uses */
@media (max-width: 900px){
  .mega-nav{ display: none; }
}
/* =========================================================
   RESPONSIVE FIXES
   Link this file AFTER style.css and mega-menu.css in <head>:
   <link rel="stylesheet" href="assets/css/responsive-fixes.css">
========================================================= */

/* ---------------------------------------------------------
   1. FOOTER — was using a fixed height:900px + overflow:hidden.
   On mobile the columns stack into one column (many link groups
   one under another) and the real content height grows well past
   900px, so everything below that point was being clipped off.
   Fix: let the footer grow with its content; keep a sensible
   min-height on larger screens only, where the row-based layout
   already fits comfortably.
--------------------------------------------------------- */
.site-footer{
  height: auto;
  min-height: 640px;
}
@media (min-width: 1281px){
  .site-footer{ min-height: 900px; }
}
@media (max-width: 820px){
  .site-footer{ min-height: auto; }
}

/* ---------------------------------------------------------
   2. HEADER LOGO — was fixed at 100px height all the way down
   to 480px, overflowing the shorter 74px/64px header on
   tablet/small-phone widths.
--------------------------------------------------------- */
@media (max-width: 900px){
  .logo-img{ height: 56px; }
}
@media (max-width: 480px){
  .logo-img{height: 55px;}
}

/* ---------------------------------------------------------
   3. MOBILE NAVIGATION — .mega-nav is simply hidden below
   900px with no replacement, so every nav link (Business
   Setup, Trademark and IP, Registration/License, Legal,
   IT Services, Blogs, Contact) becomes unreachable on mobile.
   This adds a hamburger button + slide-in panel containing
   the same links, grouped the same way as the mega menu.
--------------------------------------------------------- */
.mobile-menu-toggle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(242, 232, 213, 0.35);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  justify-self: end;
  z-index: 1001;
}
.mobile-menu-toggle span{
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--parchment);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }

.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(8,14,24,0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
}
.mobile-menu-overlay.is-open{ opacity: 1; visibility: visible; }

.mobile-menu-panel{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  background: var(--ink-deep);
  border-left: 1px solid rgba(232, 178, 61, 0.18);
  box-shadow: -20px 0 50px rgba(0,0,0,0.4);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto;
  padding: 22px 22px 48px;
}
.mobile-menu-panel.is-open{ transform: translateX(0); }

.mobile-menu-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(242, 232, 213, 0.14);
}
.mobile-menu-title{
  font-family: 'Fraunces', serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}
.mobile-menu-close{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(242, 232, 213, 0.3);
  background: transparent;
  color: var(--parchment);
  font-size: 20px;
  line-height: 1;
  display: none;
  place-items: center;
  cursor: pointer;
}

.mobile-menu-group{ border-bottom: 1px solid rgba(242, 232, 213, 0.1); }
.mobile-menu-group summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--parchment);
  cursor: pointer;
}
.mobile-menu-group summary::-webkit-details-marker{ display: none; }
.mobile-menu-group summary::after{
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.4px solid var(--gold);
  border-bottom: 1.4px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex: none;
}
.mobile-menu-group[open] summary::after{ transform: rotate(225deg); }

.mobile-menu-group ul{
  list-style: none;
  margin: 0;
  padding: 2px 2px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-menu-group ul li a{
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
}
.mobile-menu-group ul li a:hover{ color: var(--gold); }

.mobile-menu-link{
  display: block;
  padding: 15px 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 232, 213, 0.1);
}

body.mobile-menu-open{ overflow: hidden; }

@media (max-width: 900px){
  .mobile-menu-toggle{display:flex;}
  .hero-copy h1 > span {
    font-size: 40px;
  }
}

/* =========================
   LEAD POPUP FORM
========================= */
.lead-popup-overlay{
  position: fixed;
  inset: 0;
  background: rgba(8,14,24,0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 1200;
}
.lead-popup-overlay.is-open{ opacity: 1; visibility: visible; }

.lead-popup{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  width: min(420px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--ink-deep);
  border: 1px solid rgba(232, 178, 61, 0.22);
  border-radius: 20px;
  padding: 34px 30px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1), visibility 0.35s;
  z-index: 1201;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
}
.lead-popup.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.lead-popup-close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(242, 232, 213, 0.3);
  background: transparent;
  color: var(--parchment);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lead-popup-close:hover{
  background: rgba(232, 178, 61, 0.14);
  border-color: var(--gold);
  transform: rotate(90deg);
}

.lead-popup-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead-popup-badge .badge-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(232, 178, 61, 0.8);
}

.lead-popup h3{
  font-size: 22px;
  font-weight: 600;
  color: var(--parchment);
  line-height: 1.25;
  margin: 0;
}

.lead-popup-sub{
  margin: 10px 0 22px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.lead-popup-form{ display: flex; flex-direction: column; gap: 16px; }

.lead-field{ display: flex; flex-direction: column; gap: 7px; }

.lead-field label{
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label);
}

.lead-field input,
.lead-field select,
.lead-field textarea{
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(242, 232, 213, 0.18);
  background: rgba(242, 232, 213, 0.04);
  color: var(--parchment);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
  resize: vertical;
}
.lead-field input::placeholder,
.lead-field textarea::placeholder{ color: rgba(242, 232, 213, 0.35); }

.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus{
  border-color: var(--gold);
  background: rgba(242, 232, 213, 0.07);
}

.lead-field select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23E8B23D' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
  cursor: pointer;
}
.lead-field select option{ background: var(--ink-deep); color: var(--parchment); }

.lead-field input:invalid:not(:placeholder-shown){ border-color: rgba(220,80,80,0.6); }

.lead-popup-submit{
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  padding: 13px 22px;
  border: none;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink-deep);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lead-popup-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(232, 178, 61, 0.32);
}
.lead-popup-submit-arrow{ display: grid; place-items: center; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.lead-popup-submit:hover .lead-popup-submit-arrow{ transform: rotate(45deg); }

.lead-popup-note{
  margin: 12px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(242, 232, 213, 0.4);
  text-align: center;
}

/* success state */
.lead-popup-success{
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 6px 10px;
}
.lead-popup.is-success .lead-popup-form{ display: none; }
.lead-popup.is-success .lead-popup-badge,
.lead-popup.is-success .lead-popup-sub{ display: none; }
.lead-popup.is-success .lead-popup-success{ display: flex; }

.lead-success-icon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(232, 178, 61, 0.14);
  color: var(--gold);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.lead-success-icon svg{ width: 24px; height: 24px; }

.lead-popup-success h3{ margin-bottom: 8px; }
.lead-popup-success p{
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* floating reopen button */
.lead-popup-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px 13px 16px;
  border: none;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink-deep);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.lead-popup-fab.is-visible{ opacity: 1; visibility: visible; }
.lead-popup-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.lead-popup-fab svg{ width: 16px; height: 16px; }

body.lead-popup-open{ overflow: hidden; }

@media (max-width: 480px){
  .lead-popup{ padding: 28px 20px 22px; border-radius: 16px; }
  .lead-popup h3{ font-size: 19px; }
  .lead-popup-fab span{ display: none; }
  .lead-popup-fab{ padding: 14px; right: 16px; bottom: 16px; }
}