/* Dar Al Haiba — site styles
   Generated from the design source. Photo-frame rules and --prod-zoom live in the
   block below, copied verbatim from the design; edit them there, not here. */

* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; overflow-x: hidden; background: #FBF8F2; color: #17150F; font-family: "Jost", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #8F6C1E; text-decoration: none; }
  a:hover { color: #17150F; }
  img { display: block; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  /* Photo frames. The photo is taken out of flow so its intrinsic ratio cannot override
     the frame's declared aspect-ratio — otherwise two tiles in one row size differently.
     Every product photo is natively 2:3 and fills its frame with no crop. */
  .frame-img { position: absolute; inset: 0; width: 100%; height: 100%;
               object-fit: cover; display: block; }
  /* Product photos scale inside their fixed frames. Change --prod-zoom to enlarge
     every product photo at once without recutting a single file: 1 = as shot,
     1.1 = 10% larger. The design's productZoom tweak writes this same property. */
  :root { --prod-zoom: 1; }
  [data-prodgrid] .frame-img {
    transform: scale(var(--prod-zoom, 1)); transform-origin: center;
    transition: transform .25s ease; }
  section[id], article[id] { scroll-margin-top: 88px; }
  @media (max-width: 820px) { section[id], article[id] { scroll-margin-top: 128px; } }
  /* Tablet / small laptop: the product grid keeps its three columns; the story timeline
     drops from four across to two, which four cards cannot hold at this width. */
  @media (max-width: 1060px) {
    [data-tl] { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 860px) {
    [data-grid2] { grid-template-columns: 1fr !important; }
    /* Once the hero stacks, cap the photo's width rather than reshaping it — the
       2:3 proportions are preserved and nothing is cut off. */
    [data-heroframe] { width: 100% !important; max-width: 356px !important;
                       justify-self: center !important; }
  }
  @media (max-width: 820px) {
    header nav a[href^="#"] { display: none !important; }
    header { padding: 12px 18px !important; }
  }
  @media (max-width: 820px) {
    [data-mobnav] { display: flex !important; }
  }
  @media (max-width: 620px) {
    [data-tl] { grid-template-columns: 1fr !important; }

    /* Headline first, photo after it: the visitor should read who we are before
       scrolling past a full screen of photograph. */
    [data-heroart] { order: 0 !important; }

    /* The hero photo keeps its own 2:3 proportions — nothing is cropped. It is sized
       down instead, so it stays compact on a phone screen. */
    [data-heroframe] { padding: 0 !important; width: 100% !important;
                       max-width: 264px !important; justify-self: center !important; }
    [data-heroshot] { aspect-ratio: 2 / 3 !important; box-shadow: none !important; }

    /* Tighter vertical rhythm so less scrolling is needed to reach the products. */
    main > section { padding-top: 44px !important; padding-bottom: 44px !important; }
    h2 { margin-bottom: 18px !important; }
    h1 { font-size: 29px !important; }
    h1 + p, h1 ~ p { margin-top: 18px !important; }

    /* Primary actions sit two-up instead of two stacked full-width bars. */
    [data-ctarow] { display: grid !important; grid-template-columns: 1fr 1fr !important;
                    gap: 10px !important; margin-top: 26px !important; }
    [data-ctarow] > a { padding: 14px 10px !important; font-size: 11.5px !important;
                        letter-spacing: 0.08em !important; justify-content: center !important; }
    [data-ctarow] > a:nth-child(3) { grid-column: span 2 !important; }
    [data-cta] { width: auto !important; }

    /* Hero supporting copy a touch tighter. */
    [data-heroart] { margin-top: 26px !important; }
    [data-stats] { margin-top: 26px !important; padding-top: 20px !important; }

    /* Three stats in one tidy row instead of a ragged wrap. */
    [data-stats] { display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
                   gap: 0 10px !important; }
    [data-stats] p:first-child { font-size: 17px !important; }
    [data-stats] p:last-child { font-size: 10px !important; letter-spacing: 0.12em !important; }

    /* Category list becomes one swipeable line rather than three stacked rows. */
    [data-strip] { flex-wrap: nowrap !important; justify-content: flex-start !important;
                   overflow-x: auto !important; gap: 20px !important; padding: 16px 20px !important;
                   scrollbar-width: none !important; }
    [data-strip] span { flex: 0 0 auto !important; }

    /* Product grid: the Kandoura leads full width, the other four fill two clean rows,
       so no tile is left orphaned. align-items:start lets each card end where its text
       ends instead of stretching to the tallest card in the row. */
    [data-prodgrid] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important;
                      align-items: start !important; }
    [data-feature] { grid-column: span 2 !important; }
    [data-feature] h3 { font-size: 16px !important; }
    [data-feature] p { font-size: 13px !important; line-height: 1.5 !important; }
    [data-prodgrid] h3 { font-size: 16px !important; margin-bottom: 6px !important; }
    [data-prodgrid] p { font-size: 13px !important; line-height: 1.5 !important; }
    [data-prodgrid] article > div:last-child { padding: 14px 13px 16px !important; }
    [data-prodgrid] a { font-size: 11px !important; }
  }
  @media (max-width: 430px) {
    [data-cta] { width: 100% !important; justify-content: center !important; }
    [data-stats] { gap: 18px 24px !important; }
    [data-craftgrid] { grid-template-columns: 1fr !important; gap: 22px !important; }
    [data-heroframe] { padding: 0 !important; }
    [data-heroframe] > div:first-child { display: none !important; }
  }
  [data-mobnav] { display: none; }
  /* Touch targets: every tappable link at least 44px tall on phones and tablets. */
  @media (max-width: 1060px) {
    footer a, [data-tapfix], header a { display: inline-flex; align-items: center; min-height: 44px; }
  }
  /* Narrow phones (320-460px): tighten the header so nothing overflows. */
  @media (max-width: 460px) {
    header { padding: 10px 14px !important; gap: 10px !important; }
    header nav { gap: 10px !important; }
    header a[href^="#top"] { font-size: 13px !important; letter-spacing: 0.2em !important; }
    /* Icon-only call button: the word costs ~50px the 320px header cannot spare. */
    header nav > a[data-callbtn] { padding: 11px 15px !important; }
    header nav > a[data-callbtn] [data-walabel] { display: none !important; }
    header nav > button { padding: 11px 12px !important; font-size: 12px !important; }
  }
  @media (max-width: 1060px) {
    header nav > a[data-callbtn] { padding-top: 13px !important; padding-bottom: 13px !important; }
  }
  [data-mobnav]::-webkit-scrollbar { display: none; }

/* Hover states (authored as style-hover in the source design) */
[data-h="h0"]:hover { background:#8F6C1E; }
[data-h="h1"]:hover { background:#FFFFFF; }
[data-h="h2"]:hover { border-color:rgba(148,112,31,0.55); }
[data-h="h3"]:hover { background:#17150F; }
[data-h="h4"]:hover { background:#FBF8F2; }
[data-h="h5"]:hover { border-color:rgba(148,112,31,0.6); }

/* Keyboard focus */
a:focus-visible, button:focus-visible { outline: 2px solid #8F6C1E; outline-offset: 3px; }