/* ============================================
     DESIGN TOKENS — edit these to restyle the site
     ============================================ */
  :root{
    /* Colors */
    --color-bg:        #F5F9FD;   /* light blue page background */
    --color-bg-alt:     #EAF2FB;  /* soft blue alternate sections */
    --color-ink:        #15130F;  /* near-black text / dark sections */
    --color-ink-soft:   #2A3848;  /* secondary text on light bg */
    --color-muted:      #5B7290;  /* blue-gray captions */
    --color-accent:     #1B3352; /* warm navy — pairs with logo gold */
    --color-accent-light: #2A4A6E;
    --color-accent-dark:  #152A43;
    --color-section-dark: #152A43;
    --color-section-dark-deep: #0f2035;
    --gradient-section-blue: linear-gradient(135deg, #1B3352 0%, #152A43 52%, #0f2035 100%);
    --gradient-footer-blue: linear-gradient(180deg, #152A43 0%, #0f2035 100%);
    --color-gold:        #AF8B47; /* antique gold — matches logo metal */
    --color-gold-light:  #C4A35E;
    --color-gold-dim:    #8B7038;
    --color-border:      #C5DAEF; /* light blue borders */
    --color-border-dark: rgba(250,246,239,0.16); /* hairline borders on dark bg */
    --color-white:       #FFFFFF;

    /* Typography */
    --font-display: 'Cormorant', Georgia, serif;
    --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;
    --font-arabic:  'Amiri', 'Cormorant', Georgia, serif;

    /* Spacing scale */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  7rem;

    /* Layout */
    --container-max: 1240px;
    --header-h: 56px;
    --topbar-h: 24px;
    --mobile-nav-top: calc(var(--topbar-h) + var(--header-h));
  }

  /* ============================================
     RESET
     ============================================ */
  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }
  h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:500; }
  p{ margin:0; }
  button{ font-family:inherit; cursor:pointer; }

  :focus-visible{
    outline: 1px solid var(--color-gold);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
  }

  .container{
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(0.875rem, 2.5vw, var(--space-md));
  }

  [id]{ scroll-margin-top: calc(var(--header-h) + 12px); }

  body.menu-open{ overflow: hidden; }

  .eyebrow{
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold);
    font-weight: 500;
  }

  /* Signature motif: vitrine corner brackets, used on image frames */
  .frame{
    position: relative;
  }
  .frame::before,
  .frame::after{
    content:"";
    position:absolute;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-gold);
    opacity: 0.85;
    transition: width 0.35s ease, height 0.35s ease;
    pointer-events:none;
  }
  .frame::before{
    top: -10px; left: -10px;
    border-right:none; border-bottom:none;
  }
  .frame::after{
    bottom: -10px; right: -10px;
    border-left:none; border-top:none;
  }
  .frame:hover::before,
  .frame:hover::after{
    width: 40px; height: 40px;
  }

  .img-placeholder{
    width:100%;
    height:100%;
    background:
      linear-gradient(135deg, #E3EEF9 0%, #D4E6F5 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color: var(--color-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    padding: var(--space-sm);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 0.5rem;
    padding: 0.62rem 1.25rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
  }
  .btn-primary{
    background: var(--color-ink);
    color: var(--color-bg);
    border-color: var(--color-ink);
  }
  .btn-primary:hover{
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
  }
  .btn-outline{
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-ink);
  }
  .btn-outline:hover{
    border-color: var(--color-gold);
    color: var(--color-gold);
  }
  .btn-outline.on-dark{
    color: var(--color-bg);
    border-color: var(--color-border-dark);
  }
  .btn-outline.on-dark:hover{
    border-color: var(--color-gold);
    color: var(--color-gold-light);
  }
  .btn-gold{
    background: var(--color-gold);
    color: var(--color-white);
    border-color: var(--color-gold);
  }
  .btn-gold:hover{
    background: var(--color-gold-light);
    border-color: var(--color-gold-light);
  }
  .btn-whatsapp{
    background: #25D366;
    color: #fff;
    border-color: #25D366;
  }
  .btn-whatsapp:hover{
    background: #1da851;
    border-color: #1da851;
    color: #fff;
  }

  /* ============================================
     TOPBAR — slim utility strip above the main header
     ============================================ */
  .topbar{
    position: sticky;
    top: 0;
    z-index: 102;
    background: var(--color-accent-dark);
    color: rgba(255,255,255,0.92);
  }
  .topbar-inner{
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
  .topbar-contact{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
  }
  .topbar-contact a,
  .topbar-location{
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
  }
  .topbar-contact a:hover{
    color: #fff;
    text-decoration: underline;
  }
  .topbar-contact svg{ width: 11px; height: 11px; flex-shrink: 0; }
  .topbar-social{ display: flex; align-items: center; flex-shrink: 0; }
  .topbar-social a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.92);
    transition: color 0.2s ease;
  }
  .topbar-social a:hover{ color: #fff; }
  .topbar-social svg{ width: 13px; height: 13px; }

  /* ============================================
     HEADER
     ============================================ */
  .site-header{
    position: sticky;
    top: var(--topbar-h);
    z-index: 101;
    background: #FFFFFF;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(27, 51, 82, 0.14);
    box-shadow: 0 1px 6px rgba(21, 19, 15, 0.05);
  }
  .header-inner{
    min-height: var(--header-h);
    display:grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    grid-template-areas: "brand nav actions";
    align-items:center;
    gap: clamp(0.3rem, 1.2vw, 0.7rem);
    padding-block: 0.1rem;
    position: relative;
    z-index: 2;
  }
  .menu-toggle{ grid-area: toggle; }
  .brand{ grid-area: brand; }
  .main-nav{ grid-area: nav; }
  .header-actions{ grid-area: actions; }

  .brand{
    line-height:1;
    flex-shrink: 0;
    display:flex;
    align-items:center;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    min-width: 0;
    max-width: min(100%, 360px);
  }
  .brand-mark{
    flex-shrink: 0;
    width: clamp(40px, 7vw, 50px);
    height: clamp(40px, 7vw, 50px);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .brand-mark img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display:block;
  }
  .brand-text{
    display:flex;
    flex-direction:column;
    gap: 0.06rem;
    min-width: 0;
    padding-left: clamp(0.35rem, 0.8vw, 0.5rem);
    border-left: 2px solid var(--color-gold);
  }
  .brand-en-primary{
    font-family: var(--font-display);
    font-size: clamp(0.78rem, 1.55vw, 0.94rem);
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--color-accent);
    line-height: 1.05;
    text-transform: uppercase;
  }
  .brand-en-secondary{
    font-family: var(--font-display);
    font-size: clamp(0.62rem, 1.15vw, 0.72rem);
    letter-spacing: 0.18em;
    font-weight: 500;
    color: var(--color-gold-dim);
    text-transform: uppercase;
    line-height: 1.05;
  }
  .brand-ar{
    font-family: var(--font-arabic);
    font-size: clamp(0.62rem, 1.15vw, 0.72rem);
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1.05;
    direction: rtl;
    unicode-bidi: plaintext;
    margin-top: 0;
  }
  .brand-line1{
    font-family: var(--font-display);
    font-size: clamp(0.92rem, 1.6vw, 1.05rem);
    letter-spacing: 0.12em;
    font-weight: 500;
  }
  .brand-line2{
    font-family: var(--font-body);
    font-size: 0.56rem;
    letter-spacing: 0.28em;
    color: var(--color-gold);
    text-transform: uppercase;
    margin-top: 2px;
  }

  .main-nav{
    display:flex;
    min-width: 0;
    justify-self: center;
  }
  .main-nav ul{
    display:flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(0.3rem, 0.85vw, 0.72rem);
  }
  .main-nav a{
    font-size: clamp(0.56rem, 0.78vw, 0.62rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    position: relative;
    padding: 0.12rem 0 0.18rem;
    white-space: nowrap;
  }
  .main-nav a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-gold) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  .main-nav a:hover{
    color: var(--color-accent);
  }
  .main-nav a:hover::after{ transform: scaleX(1); }

  .main-nav a.is-active{
    color: var(--color-accent);
  }
  .main-nav a.is-active::after{
    transform: scaleX(1);
  }

  .header-actions{
    display:flex;
    align-items:center;
    gap: 0.35rem;
    flex-shrink: 0;
    justify-self: end;
  }
  .btn-header-wa{
    padding: 0.32rem 0.55rem;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
  .btn-label-short{ display:none; }

  .icon-link{
    width: 32px; height: 32px;
    display:flex; align-items:center; justify-content:center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    transition: border-color 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
  }
  .icon-link:hover{ border-color: var(--color-accent); color: var(--color-accent); }
  .icon-link svg{ width:15px; height:15px; }

  .menu-toggle{
    display:none;
    background:none;
    border:none;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: 5px;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    color: var(--color-ink);
  }
  .menu-toggle span{
    display:block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .menu-toggle.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity:0; }
  .menu-toggle.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  .mobile-nav{
    display:none;
    position: fixed;
    top: var(--mobile-nav-top);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 100;
    padding: 1rem clamp(0.875rem, 2.5vw, var(--space-md)) 1.5rem;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 12px 32px rgba(21, 19, 15, 0.12);
  }
  .mobile-nav.is-open{ display:block; }
  .mobile-nav ul{ display:flex; flex-direction:column; gap: 0.15rem; }
  .mobile-nav a{
    display:block;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 4vw, 1.45rem);
    font-weight: 400;
    padding: 0.55rem 0;
    color: var(--color-ink);
  }
  .mobile-nav-footer-links{
    display:flex;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
  }
  .mobile-nav-footer-links a{
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 0;
  }
  .mobile-nav .mobile-actions{
    margin-top: 1.25rem;
    display:flex;
    flex-direction:column;
    gap: 0.65rem;
  }
  .mobile-nav .mobile-actions .btn{ width: 100%; }

  /* ============================================
     HERO — cinematic video on top, copy below
     ============================================ */
  .hero{
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero--cinema{ background: var(--color-bg); }
  .hero-cinema{
    width: 100%;
    background: #15130F;
  }
  .hero-visual{
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: clamp(220px, 56vw, 72vh);
    max-height: none;
    background: #15130F;
  }
  .hero-visual--empty{
    display: grid;
    place-items: center;
  }
  .hero-video-empty{
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 55% at 50% 45%, rgba(30,79,163,0.22), transparent 70%),
      linear-gradient(135deg, #1a1712 0%, #15130F 45%, #0f1218 100%);
  }
  .hero-video-empty-copy{
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1.5rem;
    max-width: 420px;
    color: rgba(250,246,239,0.88);
  }
  .hero-video-empty-copy .eyebrow{
    color: var(--color-accent-light);
    margin-bottom: 0.65rem;
  }
  .hero-video-empty-copy p{
    font-size: 0.88rem;
    color: rgba(250,246,239,0.72);
    margin-bottom: 0.75rem;
  }
  .hero-video-empty-copy ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
  }
  .hero-video-empty-copy code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    background: rgba(0,0,0,0.25);
    color: rgba(250,246,239,0.9);
  }
  .hero-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
    background: #15130F;
  }
  .hero-video-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(to top, rgba(21,19,15,0.88) 0%, rgba(21,19,15,0.45) 38%, rgba(21,19,15,0.12) 68%, rgba(21,19,15,0.35) 100%),
      linear-gradient(to right, rgba(21,19,15,0.35), transparent 45%);
  }
  .hero-video-caption{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
  }
  .hero-video-caption-inner{
    width: 100%;
    padding-bottom: clamp(1.25rem, 3.5vw, 2.25rem);
    max-width: min(760px, 100%);
    overflow: hidden;
  }
  .hero-caption-stage{
    position: relative;
    min-height: clamp(88px, 16vw, 132px);
  }
  .hero-caption-slide{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
  }
  .hero-caption-slide.is-visible{
    opacity: 1;
    transform: translateX(0);
  }
  .hero-caption-slide.is-entering.from-left{
    animation: heroSlideInLeft 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-caption-slide.is-entering.from-right{
    animation: heroSlideInRight 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-caption-slide.is-exiting.to-right{
    animation: heroSlideOutRight 0.58s cubic-bezier(0.55, 0, 0.45, 1) forwards;
  }
  .hero-caption-slide.is-exiting.to-left{
    animation: heroSlideOutLeft 0.58s cubic-bezier(0.55, 0, 0.45, 1) forwards;
  }
  @keyframes heroSlideInLeft{
    from{ opacity: 0; transform: translateX(-72px); }
    to{ opacity: 1; transform: translateX(0); }
  }
  @keyframes heroSlideInRight{
    from{ opacity: 0; transform: translateX(72px); }
    to{ opacity: 1; transform: translateX(0); }
  }
  @keyframes heroSlideOutRight{
    from{ opacity: 1; transform: translateX(0); }
    to{ opacity: 0; transform: translateX(72px); }
  }
  @keyframes heroSlideOutLeft{
    from{ opacity: 1; transform: translateX(0); }
    to{ opacity: 0; transform: translateX(-72px); }
  }
  .hero-caption-slide--eyebrow .eyebrow{
    display: inline-block;
    color: rgba(250,246,239,0.88);
    font-size: clamp(0.64rem, 1.2vw, 0.72rem);
  }
  .hero-caption-slide--title h1{
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 4.8vw, 3.35rem);
    line-height: 1.06;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  }
  .hero-caption-slide--title h1 em{
    font-style: italic;
    font-weight: 400;
    color: #9ec5ff;
  }
  .hero-caption-slide--lead p,
  .hero-caption-slide--statement p{
    margin: 0;
    max-width: 54ch;
    color: rgba(250,246,239,0.9);
    font-size: clamp(0.82rem, 1.55vw, 1.02rem);
    line-height: 1.55;
    text-shadow: 0 1px 12px rgba(0,0,0,0.4);
  }
  .hero-caption-slide--statement p{
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.85vw, 1.2rem);
    line-height: 1.45;
  }
  .hero-caption-slide--statement em{
    font-style: italic;
    color: #9ec5ff;
  }
  @media (max-width: 767px){
    .hero-video-caption-inner{
      padding-bottom: 1rem;
    }
    .hero-caption-slide--lead p,
    .hero-caption-slide--statement p{
      max-width: none;
      font-size: 0.8rem;
      line-height: 1.5;
    }
    .hero-caption-stage{
      min-height: 96px;
    }
    @keyframes heroSlideInLeft{
      from{ opacity: 0; transform: translateX(-42px); }
      to{ opacity: 1; transform: translateX(0); }
    }
    @keyframes heroSlideInRight{
      from{ opacity: 0; transform: translateX(42px); }
      to{ opacity: 1; transform: translateX(0); }
    }
    @keyframes heroSlideOutRight{
      from{ opacity: 1; transform: translateX(0); }
      to{ opacity: 0; transform: translateX(42px); }
    }
    @keyframes heroSlideOutLeft{
      from{ opacity: 1; transform: translateX(0); }
      to{ opacity: 0; transform: translateX(-42px); }
    }
  }
  @media (min-width: 1024px){
    .hero-video-caption-inner{
      padding-bottom: 2rem;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-caption-slide{
      animation: none !important;
      position: relative;
      opacity: 0;
    }
    .hero-caption-slide.is-visible{
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* Hero inquiry form — below video */
  .hero-inquiry{
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    padding: clamp(1rem, 2.5vw, 1.35rem) 0;
  }
  .inquiry-form-head{
    margin-bottom: 0.85rem;
    text-align: center;
  }
  .inquiry-form-head .eyebrow{
    display: inline-block;
    margin-bottom: 0.35rem;
  }
  .inquiry-form-lead{
    margin: 0 auto;
    max-width: 52ch;
    font-size: clamp(0.82rem, 1.4vw, 0.92rem);
    color: var(--color-ink-soft);
    line-height: 1.5;
  }
  .inquiry-alert{
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    border-radius: 4px;
    text-align: center;
  }
  .inquiry-alert-success{
    background: #E3EEF9;
    color: var(--color-accent-dark);
    border: 1px solid rgba(30,79,163,0.22);
  }
  .inquiry-alert-error{
    background: #FCE8EA;
    color: #8B3A32;
    border: 1px solid rgba(139,58,50,0.18);
  }
  .inquiry-form-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    align-items: start;
  }
  .inquiry-field{
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
  }
  .inquiry-field label{
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-muted);
  }
  .inquiry-field input,
  .inquiry-field textarea{
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 0.52rem 0.65rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .inquiry-field input{
    min-height: 42px;
  }
  .inquiry-field textarea{
    resize: vertical;
    min-height: 72px;
    max-height: 160px;
  }
  .inquiry-field input:focus,
  .inquiry-field textarea:focus{
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(30,79,163,0.12);
  }
  .inquiry-field input::placeholder,
  .inquiry-field textarea::placeholder{
    color: var(--color-muted);
    opacity: 0.85;
  }
  .inquiry-field.has-error input,
  .inquiry-field.has-error textarea{
    border-color: #C45A52;
  }
  .inquiry-error{
    font-size: 0.72rem;
    color: #B3413B;
    line-height: 1.3;
  }
  .inquiry-submit{
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 1rem;
    font-size: 0.68rem;
  }

  @media (min-width: 600px){
    .inquiry-form-grid{
      grid-template-columns: 1fr 1fr;
    }
    .inquiry-field-wide,
    .inquiry-field-action{
      grid-column: 1 / -1;
    }
    .inquiry-field-action .inquiry-submit{
      width: auto;
      min-width: 160px;
    }
    .inquiry-field-action{
      justify-self: start;
    }
  }

  @media (min-width: 900px){
    .inquiry-form-head{
      text-align: left;
      margin-bottom: 0.65rem;
    }
    .inquiry-form-lead{
      margin-inline: 0;
    }
    .inquiry-form-grid{
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(130px, auto);
      grid-template-rows: auto auto;
      gap: 0.55rem 0.65rem;
      align-items: end;
    }
    .inquiry-form-grid .inquiry-field:nth-child(1){
      grid-column: 1;
      grid-row: 1;
    }
    .inquiry-form-grid .inquiry-field:nth-child(2){
      grid-column: 2;
      grid-row: 1;
    }
    .inquiry-field-wide{
      grid-column: 1 / 3;
      grid-row: 2;
    }
    .inquiry-field-action{
      grid-column: 3;
      grid-row: 1 / span 2;
      align-self: end;
      justify-self: stretch;
    }
    .inquiry-field-action .inquiry-submit{
      width: 100%;
      min-width: 0;
      height: 100%;
      min-height: 42px;
    }
  }

  @media (max-width: 599px){
    .inquiry-form-lead{ font-size: 0.8rem; }
  }

  /* Category showcase — 3 horizontal rows */
  .category-showcase{
    padding: clamp(1.1rem, 2.8vw, 1.65rem) 0 clamp(0.5rem, 1.5vw, 0.85rem);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }
  .category-row{
    padding: clamp(0.85rem, 2vw, 1.15rem) 0;
  }
  .category-row + .category-row{
    border-top: 1px solid var(--color-border);
  }
  .category-row-head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
  }
  .category-row-title h2{
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 500;
    line-height: 1.15;
    margin-top: 0.15rem;
  }
  .category-row-title .eyebrow{
    font-size: 0.64rem;
    letter-spacing: 0.16em;
  }
  .category-row-controls{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
  }
  .category-view-all{
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-accent);
    margin-right: 0.25rem;
    white-space: nowrap;
  }
  .category-view-all:hover{
    color: var(--color-accent-dark);
    text-decoration: underline;
  }
  .row-slider-btn{
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-ink-soft);
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  }
  .row-slider-btn svg{
    width: 14px;
    height: 14px;
  }
  .row-slider-btn:hover{
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: #fff;
  }
  .row-slider{
    position: relative;
    margin-inline: calc(-1 * clamp(0.875rem, 2.5vw, var(--space-md)));
    padding-inline: clamp(0.875rem, 2.5vw, var(--space-md));
  }
  .row-slider-track{
    display: flex;
    gap: clamp(0.65rem, 1.5vw, 0.85rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
  }
  .row-slider-track::-webkit-scrollbar{
    display: none;
  }
  .row-slider-card{
    flex: 0 0 clamp(168px, 42vw, 220px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .row-slider-card--empty{
    flex: 1 1 auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px dashed var(--color-border);
    background: var(--color-bg-alt);
    font-size: 0.88rem;
    color: var(--color-muted);
  }
  .product-card--compact .product-media{
    aspect-ratio: 1 / 1;
  }
  .product-card--compact .product-info{
    padding-top: 0.55rem;
    gap: 0.2rem;
  }
  .product-card--compact .product-title{
    font-size: clamp(0.88rem, 1.8vw, 0.98rem);
    line-height: 1.25;
  }
  .product-card--compact .product-meta{
    font-size: 0.72rem;
    line-height: 1.35;
  }
  .product-card--compact .product-actions{
    margin-top: 0.35rem;
    gap: 0.35rem;
  }
  .product-card--compact .btn-sm{
    padding: 0.42rem 0.5rem;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }
  .product-card--compact .carousel-arrow{
    width: 24px;
    height: 24px;
  }
  .product-card--compact .carousel-arrow svg{
    width: 12px;
    height: 12px;
  }
  .product-card--compact .frame::before,
  .product-card--compact .frame::after{
    width: 18px;
    height: 18px;
  }

  @media (min-width: 768px){
    .row-slider-card{
      flex-basis: clamp(200px, 24vw, 240px);
    }
  }

  @media (min-width: 1024px){
    .category-row-head{
      margin-bottom: 0.75rem;
    }
    .row-slider-card{
      flex-basis: 220px;
    }
  }

  @media (max-width: 479px){
    .category-view-all{
      display: none;
    }
    .category-row-head{
      align-items: center;
    }
    .category-row-title h2{
      font-size: 1.08rem;
    }
  }

  /* ============================================
     BRAND STATEMENT
     ============================================ */
  .statement{
    padding: var(--space-xl) 0;
    text-align:center;
  }
  .statement .container{
    max-width: 760px;
  }
  .statement h2{
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-ink-soft);
  }
  .statement h2 em{ color: var(--color-gold); font-style:italic; }
  .statement .divider{
    width: 48px; height: 1px;
    background: var(--color-gold);
    margin: 0 auto var(--space-md);
  }

  /* ============================================
     SERVICES
     ============================================ */
  .services{
    padding: clamp(2.5rem, 6vw, var(--space-xl)) 0;
    background:
      linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .section-head{
    text-align:center;
    max-width: 560px;
    margin: 0 auto var(--space-lg);
  }
  .section-head--services{
    max-width: 640px;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  }
  .section-head .eyebrow{ display:block; margin-bottom: var(--space-xs); }
  .section-head h2{
    font-size: clamp(1.8rem, 3vw, 2.4rem);
  }
  .section-intro{
    margin-top: 0.75rem;
    font-size: clamp(0.88rem, 1.5vw, 1rem);
    line-height: 1.6;
    color: var(--color-muted);
  }

  .services-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.85rem, 2vw, 1.15rem);
  }
  .service-card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--color-white);
    padding: clamp(1.15rem, 2.5vw, 1.5rem);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(30, 79, 163, 0.06);
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  }
  .service-card::before{
    content:"";
    position:absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s ease;
  }
  .service-card:hover{
    transform: translateY(-3px);
    border-color: rgba(30, 79, 163, 0.28);
    box-shadow: 0 10px 28px rgba(30, 79, 163, 0.12);
  }
  .service-card:hover::before{
    transform: scaleX(1);
  }
  .service-card-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }
  .service-icon{
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #E3EEF9 0%, #D4E6F5 100%);
    color: var(--color-accent);
  }
  .service-icon svg{
    width: 20px;
    height: 20px;
  }
  .service-index{
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: var(--color-muted);
    letter-spacing: 0.14em;
    opacity: 0.85;
  }
  .service-card h3{
    font-size: clamp(1.08rem, 1.8vw, 1.28rem);
    font-weight: 500;
    margin-bottom: 0.45rem;
    color: var(--color-ink-soft);
    line-height: 1.25;
  }
  .service-card p{
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.55;
    flex: 1;
  }
  .service-more{
    display: inline-block;
    margin-top: 0.85rem;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-accent);
    transition: letter-spacing 0.25s ease, color 0.25s ease;
  }
  .service-card:hover .service-more{
    letter-spacing: 0.16em;
    color: var(--color-accent-dark);
  }

  /* ============================================
     SELL TO US — conversion band
     ============================================ */
  .sell-band{
    background: var(--gradient-section-blue);
    color: var(--color-bg);
    padding: var(--space-xl) 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .sell-band .container{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-lg);
    align-items:center;
  }
  .sell-band .eyebrow{ color: rgba(250,246,239,0.88); }
  .sell-band h2{
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    margin-top: var(--space-sm);
    max-width: 14ch;
  }
  .sell-band p{
    margin-top: var(--space-sm);
    color: rgba(250,246,239,0.72);
    max-width: 46ch;
    font-size: 1rem;
  }
  .sell-band .btn-gold{
    margin-top: var(--space-md);
    background: #fff;
    color: var(--color-accent-dark);
    border-color: #fff;
  }
  .sell-band .btn-gold:hover{
    background: rgba(250,246,239,0.92);
    border-color: rgba(250,246,239,0.92);
    color: var(--color-accent-dark);
  }
  .sell-band-visual{
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .sell-band-visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sell-band-visual .img-placeholder{
    background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%);
    color: rgba(250,246,239,0.65);
  }
  .sell-band-visual.frame::before,
  .sell-band-visual.frame::after{
    border-color: rgba(250,246,239,0.45);
  }

  /* ============================================
     CUSTOM ORDERS
     ============================================ */
  .custom-orders{
    padding: var(--space-xl) 0;
  }
  .custom-orders .container{
    display:grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-lg);
    align-items:center;
  }
  .custom-visual{
    aspect-ratio: 5 / 4;
    overflow: hidden;
  }
  .custom-visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .custom-copy h2{
    font-size: clamp(2rem, 3.2vw, 2.6rem);
  }
  .custom-copy p{
    margin-top: var(--space-sm);
    color: var(--color-ink-soft);
    max-width: 48ch;
    font-size: 1.02rem;
  }
  .custom-copy .btn{ margin-top: var(--space-md); }

  /* ============================================
     FOOTER
     ============================================ */
  .site-footer{
    background: var(--gradient-footer-blue);
    color: rgba(250,246,239,0.88);
    padding-top: clamp(2.5rem, 5vw, var(--space-xl));
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1.35fr 1fr 1fr 0.95fr;
    gap: clamp(1.25rem, 3vw, var(--space-lg));
    padding-bottom: clamp(1.25rem, 3vw, var(--space-lg));
    border-bottom: 1px solid var(--color-border-dark);
  }
  .footer-about .footer-brand-block{
    display:flex;
    flex-direction:column;
    gap: 2px;
    margin: 0.35rem 0 0.75rem;
  }
  .footer-about .footer-brand-block .brand-en-primary{
    font-family: var(--font-display);
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-bg);
    text-transform: uppercase;
  }
  .footer-about .footer-brand-block .brand-en-secondary{
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    font-weight: 500;
    color: rgba(250,246,239,0.88);
    text-transform: uppercase;
  }
  .footer-about .footer-brand-block .brand-ar{
    font-family: var(--font-arabic);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-gold-light);
    direction: rtl;
    unicode-bidi: plaintext;
  }
  .footer-about .footer-brand-name{
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--color-bg);
    margin: 0.35rem 0 0.65rem;
  }
  .footer-about p{
    color: rgba(250,246,239,0.62);
    font-size: 0.88rem;
    line-height: 1.65;
    max-width: 36ch;
  }
  .footer-col h4{
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin-bottom: 0.75rem;
    font-weight: 500;
  }
  .footer-col ul{ display:flex; flex-direction:column; gap: 0.55rem; }
  .footer-col a{
    font-size: 0.86rem;
    color: rgba(250,246,239,0.72);
    transition: color 0.3s ease;
  }
  .footer-col a:hover{ color: var(--color-gold-light); }
  .footer-col address{
    font-style:normal;
    font-size:0.86rem;
    line-height:1.65;
    color: rgba(250,246,239,0.72);
  }
  .footer-map-link-wrap{
    margin-top: 0.65rem;
  }
  .footer-map-link-wrap a{
    font-size: 0.82rem;
    color: var(--color-gold-light);
    font-weight: 500;
  }
  .footer-map-link-wrap a:hover{
    color: #fff;
  }

  .footer-map{
    margin-bottom: clamp(1rem, 2.5vw, var(--space-md));
    border: 1px solid var(--color-border-dark);
    overflow: hidden;
    background: var(--color-section-dark-deep);
  }
  .footer-map iframe{
    display: block;
    width: 100%;
    height: clamp(220px, 38vw, 320px);
    border: 0;
  }

  .footer-bottom{
    padding: 0.85rem 0 1.25rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: rgba(250,246,239,0.5);
  }
  .footer-bottom-links{
    display:flex;
    gap: 1rem;
  }
  .footer-bottom a:hover{ color: var(--color-gold-light); }

  /* ============================================
     RESPONSIVE
     ============================================ */
  @media (max-width: 992px){
    .header-inner{
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "toggle brand actions";
      gap: 0.35rem;
    }
    .main-nav{ display:none; }
    .menu-toggle{
      display:flex;
      margin-left: -0.35rem;
    }
    .brand{
      max-width: none;
      min-width: 0;
    }
    .btn-label-full{ display:none; }
    .btn-label-short{ display:inline; }
    .topbar-location{ display:none; }
  }

  @media (min-width: 993px){
    .main-nav{ display:flex !important; }
    .menu-toggle{ display:none !important; }
    .mobile-nav{ display:none !important; }
  }

  @media (max-width: 1024px){
    .sell-band .container,
    .custom-orders .container{
      grid-template-columns: 1fr;
      gap: clamp(1.5rem, 4vw, var(--space-lg));
    }
    .hero-visual{ min-height: clamp(200px, 52vw, 56vh); }
    .sell-band-visual{ order:-1; aspect-ratio: 16/10; max-height: 300px; }
    .custom-visual{ order:-1; aspect-ratio: 16/10; max-height: 300px; }

    .services-grid{ grid-template-columns: repeat(2, 1fr); }

    .footer-grid{
      grid-template-columns: 1fr 1fr;
      row-gap: 1.25rem;
    }
    .footer-about{ grid-column: 1 / -1; }
  }

  @media (max-width: 768px){
    :root{ --space-xl: 3.5rem; --space-lg: 2rem; --header-h: 50px; --topbar-h: 22px; }

    .statement{ padding: 2.5rem 0; }
    .services{ padding: 2.5rem 0; }
    .sell-band,
    .custom-orders{ padding: 2.5rem 0; }

    .services-grid{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr; }
    .footer-bottom{
      flex-direction:column;
      align-items:flex-start;
      gap: 0.65rem;
    }

    .brand img{ height: 40px; }
    .brand-mark{
      width: 40px;
      height: 40px;
    }
    .brand-en-primary{
      font-size: clamp(0.72rem, 3.2vw, 0.84rem);
      letter-spacing: 0.03em;
    }
    .brand-en-secondary,
    .brand-ar{
      font-size: clamp(0.58rem, 2.6vw, 0.66rem);
    }
    .brand-en-secondary{ letter-spacing: 0.12em; }
    .topbar-inner{ font-size: 0.6rem; }
    .header-inner{ padding-block: 0.08rem; }
  }

  @media (max-width: 480px){
    .brand-line1{ letter-spacing: 0.08em; }
  }

  /* ============================================
     PAGE HERO — used by category pages
     (jewellery.php, diamonds.php, watches.php)
     ============================================ */
  .page-hero{
    padding: clamp(1.25rem, 3vw, 1.75rem) 0 clamp(0.75rem, 2vw, 1rem);
    text-align: center;
  }
  .page-hero .container{ max-width: 600px; }
  .page-hero .eyebrow{ display:block; margin-bottom: 0.35rem; }
  .page-hero h1{
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.15;
  }
  .page-hero p{
    margin-top: 0.4rem;
    color: var(--color-ink-soft);
    font-size: 0.92rem;
    line-height: 1.5;
  }

  /* ============================================
     PRODUCT GRID + CARDS
     ============================================ */
  .products-section{
    padding: clamp(1.5rem, 4vw, var(--space-lg)) 0 var(--space-xl);
  }
  .products-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2.5vw, var(--space-md));
  }
  .product-card{
    display:flex;
    flex-direction:column;
  }

  /* image + carousel */
  .product-media{
    aspect-ratio: 1 / 1;
    overflow:hidden;
  }
  .product-carousel{
    position:relative;
    width:100%;
    height:100%;
  }
  .carousel-track{
    position:relative;
    width:100%;
    height:100%;
  }
  .carousel-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition: opacity 0.3s ease;
  }
  .carousel-slide.is-active{
    opacity:1;
    visibility:visible;
  }
  .carousel-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .carousel-arrow{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border: 1px solid var(--color-border-dark);
    border-radius: 50%;
    background: rgba(21,19,15,0.35);
    color: var(--color-bg);
    backdrop-filter: blur(2px);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    z-index: 2;
    padding: 0;
  }
  .carousel-arrow svg{ width:14px; height:14px; }
  .carousel-arrow:hover{
    background: rgba(21,19,15,0.6);
    border-color: var(--color-gold-light);
    color: var(--color-gold-light);
  }
  .carousel-arrow-prev{ left: 8px; }
  .carousel-arrow-next{ right: 8px; }

  /* text + actions below the image */
  .product-info{
    padding-top: var(--space-sm);
    display:flex;
    flex-direction:column;
    gap: 0.35rem;
  }
  .product-title{
    font-size: 1.05rem;
    font-weight: 500;
  }
  .product-meta{
    font-size: 0.82rem;
    color: var(--color-muted);
  }
  .product-actions{
    display:flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .btn-sm{
    padding: 0.5rem 0.7rem;
    font-size: 0.64rem;
    flex: 1;
  }

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

  /* "View All" links row under a Featured Products grid (homepage) */
  .view-all-row{
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }
  @media (max-width: 480px){
    .view-all-row{ flex-direction: column; }
    .view-all-row .btn{ width: 100%; }
  }
  .products-section--alt{
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }