/* =========================================================================
   Digaag Poultry Farm — theme styles
   -------------------------------------------------------------------------
   RTL POLICY: every directional property in this file is LOGICAL
   (inline-start / inline-end / block-start / block-end). Arabic therefore
   needs no second stylesheet and no rtlcss build step — the dir attribute
   alone flips the layout. Do not introduce left/right properties here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   Short aliases over the theme.json presets, so component rules stay legible.
   ---------------------------------------------------------------------- */
:root {
  --rust:       var(--wp--preset--color--rust, #A14725);
  --rust-deep:  var(--wp--preset--color--rust-deep, #7B3318);
  --ink:        var(--wp--preset--color--ink, #231F20);
  --ink-soft:   var(--wp--preset--color--ink-soft, #57514B);
  --ink-muted:  var(--wp--preset--color--ink-muted, #837B72);
  --paper:      var(--wp--preset--color--paper, #F2F1EF);
  --surface:    var(--wp--preset--color--surface, #FFFFFF);
  --oyster:     var(--wp--preset--color--oyster, #E6E5E7);
  --line:       var(--wp--preset--color--line, #DCD9D3);
  --yolk:       var(--wp--preset--color--yolk, #B8801C);
  --field:      var(--wp--preset--color--field, #47543C);

  --font-display: var(--wp--preset--font-family--display, Fraunces, Georgia, serif);
  --font-body:    var(--wp--preset--font-family--body, 'IBM Plex Sans', system-ui, sans-serif);
  --font-mono:    var(--wp--preset--font-family--mono, 'IBM Plex Mono', monospace);

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.22,.72,.28,1);
  --ease-spring: cubic-bezier(.34,1.32,.44,1);

  --shadow-soft: 0 1px 2px rgba(35,31,32,.05), 0 10px 28px -14px rgba(35,31,32,.18);
  --shadow-lift: 0 2px 4px rgba(35,31,32,.06), 0 22px 44px -20px rgba(35,31,32,.30);

  --measure: 68ch;
  --header-h: 78px;
}

/* Arabic swaps the whole type system: Fraunces has no Arabic coverage, so the
   display role falls to Plex Arabic rather than a silent serif fallback. */
html[lang^="ar"],
.lang-ar {
  --font-display: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --font-mono:    'IBM Plex Sans Arabic', 'Noto Sans Arabic', monospace;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Arabic runs larger at the same nominal size to stay legible. */
html[lang^="ar"] body { font-size: 1.125rem; line-height: 1.85; }

h1, h2, h3, h4 { text-wrap: balance; }
p  { text-wrap: pretty; }

img, svg, video { max-width: 100%; height: auto; }

::selection { background: var(--rust); color: #fff; }

/* One visible focus treatment everywhere, never removed. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.dg-skip {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -100%;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1.25rem;
  border-end-end-radius: var(--r-md);
  font-size: .9rem;
  text-decoration: none;
}
.dg-skip:focus { inset-block-start: 0; }

.dg-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   3. Layout helpers
   ---------------------------------------------------------------------- */
.dg-shell {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 5vw, 2.5rem);
}
.dg-narrow { max-width: var(--measure); }

.dg-section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.dg-section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.dg-section--oyster { background: var(--oyster); }
.dg-section--surface { background: var(--surface); }

.dg-stack   { display: flex; flex-direction: column; gap: 1.5rem; }
.dg-stack-s { display: flex; flex-direction: column; gap: .65rem; }

/* -------------------------------------------------------------------------
   4. The ring — the badge motif, reused as the site's section marker
   ---------------------------------------------------------------------- */
.dg-ring {
  inline-size: 26px;
  block-size: 26px;
  flex: none;
  color: var(--rust);
}
.dg-ring circle { fill: none; stroke: currentColor; stroke-width: 1.5; }

.dg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust);
}
.dg-eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 1px;
  background: currentColor;
  opacity: .55;
}
html[lang^="ar"] .dg-eyebrow { letter-spacing: 0; font-size: .82rem; }

.dg-sechead { display: flex; flex-direction: column; gap: .85rem; max-width: 58ch; }
.dg-sechead h2 { margin: 0; }
.dg-sechead p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* -------------------------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------------------- */
.dg-btn {
  --btn-bg: var(--rust);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95em 1.75em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .22s var(--ease-out), transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.dg-btn:hover { background: var(--rust-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.dg-btn:active { transform: translateY(0); }

/* Sheen sweep — pointer devices only, and only when motion is welcome. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dg-btn::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    inline-size: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-18deg);
    transition: inset-inline-start .55s var(--ease-out);
  }
  .dg-btn:hover::after { inset-inline-start: 120%; }
}

.dg-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.dg-btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.dg-btn--onDark {
  --btn-bg: #fff;
  --btn-fg: var(--rust-deep);
}
.dg-btn--onDark:hover { background: var(--oyster); color: var(--rust-deep); }

.dg-btn--wa { --btn-bg: var(--field); }
.dg-btn--wa:hover { background: #37422C; }

.dg-btn__icon { inline-size: 1.05em; block-size: 1.05em; flex: none; }
/* Arrows point along the reading direction, so they flip with the document. */
.dg-btn__icon--arrow { transition: transform .22s var(--ease-out); }
.dg-btn:hover .dg-btn__icon--arrow { transform: translateX(3px); }
[dir="rtl"] .dg-btn__icon--arrow { transform: scaleX(-1); }
[dir="rtl"] .dg-btn:hover .dg-btn__icon--arrow { transform: scaleX(-1) translateX(3px); }

/* -------------------------------------------------------------------------
   6. Header
   ---------------------------------------------------------------------- */
.dg-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.dg-header.is-stuck {
  border-block-end-color: var(--line);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  box-shadow: 0 8px 24px -20px rgba(35,31,32,.5);
}

.dg-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-block-size: var(--header-h);
}

.dg-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
  margin-inline-end: auto;
}
.dg-brand img, .dg-brand svg { block-size: 46px; inline-size: auto; }
.dg-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.dg-brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.01em;
}
.dg-brand__tag {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
html[lang^="ar"] .dg-brand__tag { letter-spacing: 0; font-size: .7rem; }

.dg-nav { display: none; }
@media (min-width: 1000px) {
  .dg-nav { display: flex; align-items: center; gap: .35rem; }
}
.dg-nav a {
  position: relative;
  padding: .55rem .8rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .18s var(--ease-out);
}
.dg-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: .28rem;
  inset-inline-start: .8rem;
  inline-size: 0;
  block-size: 1.5px;
  background: var(--rust);
  transition: inline-size .26s var(--ease-out);
}
.dg-nav a:hover, .dg-nav a[aria-current="page"] { color: var(--ink); }
.dg-nav a:hover::after, .dg-nav a[aria-current="page"]::after { inline-size: calc(100% - 1.6rem); }

.dg-header__cta { display: none; }
@media (min-width: 1000px) { .dg-header__cta { display: inline-flex; } }

/* Language switcher — one globe button, menu on demand.
   Three inline codes (EN / SO / ع) crowded the header and mixed scripts
   mid-row; a single control keeps the header calm and scales if a fourth
   language is ever added. */
.dg-lang { position: relative; flex: none; }

.dg-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  inline-size: 44px;
  block-size: 40px;
  padding-inline: .45rem;
  background: none;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.dg-lang__btn:hover { color: var(--ink); background: var(--oyster); }
.dg-lang__btn[aria-expanded="true"] { color: var(--rust); border-color: var(--line); background: var(--surface); }
.dg-lang__globe { inline-size: 20px; block-size: 20px; flex: none; }
.dg-lang__caret { inline-size: 10px; block-size: 10px; flex: none; transition: transform .24s var(--ease-out); }
.dg-lang__btn[aria-expanded="true"] .dg-lang__caret { transform: rotate(180deg); }

.dg-lang__menu {
  position: absolute;
  inset-block-start: calc(100% + .45rem);
  inset-inline-end: 0;
  z-index: 120;
  min-inline-size: 190px;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}
.dg-lang__menu[hidden] { display: none; }

.dg-lang__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .7rem;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out);
}
.dg-lang__menu a:hover { background: var(--oyster); }
.dg-lang__menu a[aria-current="true"] { color: var(--rust); font-weight: 600; }
/* A tick marks the active language, so the cue is not colour alone. */
.dg-lang__menu a[aria-current="true"] .dg-lang__code::after {
  content: "\2713";
  margin-inline-start: .4rem;
}
.dg-lang__name { white-space: nowrap; }
.dg-lang__code {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--ink-muted);
}
.dg-lang__menu a[aria-current="true"] .dg-lang__code { color: var(--rust); }
/* The Arabic option sets its own dir; keep its label reading correctly. */
.dg-lang__menu a[lang="ar"] .dg-lang__name { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 1.02rem; }

/* Mobile menu */
.dg-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 44px;
  block-size: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
@media (min-width: 1000px) { .dg-burger { display: none; } }
.dg-burger span {
  display: block;
  block-size: 1.5px;
  background: var(--ink);
  transition: transform .28s var(--ease-out), opacity .2s;
}
.dg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.dg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.dg-drawer {
  display: none;
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  padding-block: 1rem 1.5rem;
}
.dg-drawer.is-open { display: block; }
@media (min-width: 1000px) { .dg-drawer, .dg-drawer.is-open { display: none; } }
.dg-drawer nav { display: flex; flex-direction: column; }
.dg-drawer nav a {
  padding: .85rem .25rem;
  border-block-end: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
}
.dg-drawer .dg-btn { margin-block-start: 1.25rem; width: 100%; }

/* -------------------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------------- */
.dg-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(161,71,37,.13), transparent 62%),
    radial-gradient(760px 480px at 8% 108%, rgba(71,84,60,.10), transparent 60%),
    var(--paper);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 7rem);
}
.dg-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .dg-hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
}

.dg-hero__title {
  font-size: clamp(2.5rem, 6.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0;
}
.dg-hero__title em {
  font-style: normal;
  color: var(--rust);
  /* A hand-drawn underline reads warmer than a solid rule. */
  background: linear-gradient(transparent 78%, rgba(161,71,37,.20) 78%);
}
.dg-hero__lede {
  font-size: clamp(1.05rem, 2vw, 1.24rem);
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}
.dg-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.dg-hero__media { position: relative; }
.dg-hero__frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 5;
  background: var(--oyster);
}
.dg-hero__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* The badge, sitting proud of the image corner. */
.dg-hero__seal {
  position: absolute;
  inset-block-end: -22px;
  inset-inline-start: -22px;
  inline-size: clamp(96px, 15vw, 132px);
  filter: drop-shadow(0 10px 22px rgba(35,31,32,.28));
  z-index: 2;
}
@media (max-width: 560px) { .dg-hero__seal { inline-size: 86px; inset-inline-start: -10px; } }

/* Ambient drifting shapes. Decorative only — aria-hidden in the markup. */
.dg-float {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.dg-float--a {
  inline-size: 320px; block-size: 320px;
  inset-block-start: -90px; inset-inline-end: -60px;
  border: 1px solid rgba(161,71,37,.16);
}
.dg-float--b {
  inline-size: 180px; block-size: 180px;
  inset-block-end: 8%; inset-inline-start: -70px;
  border: 1px solid rgba(71,84,60,.18);
}
.dg-float--c {
  inline-size: 14px; block-size: 18px;
  inset-block-start: 26%; inset-inline-end: 16%;
  background: rgba(184,128,28,.30);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
@media (prefers-reduced-motion: no-preference) {
  .dg-float--a { animation: dg-drift 26s var(--ease-out) infinite alternate; }
  .dg-float--b { animation: dg-drift 20s var(--ease-out) infinite alternate-reverse; }
  .dg-float--c { animation: dg-bob 9s ease-in-out infinite; }
}
@keyframes dg-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-18px, 22px, 0) scale(1.06); }
}
@keyframes dg-bob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-16px) rotate(8deg); }
}

/* -------------------------------------------------------------------------
   8. Trust strip
   ---------------------------------------------------------------------- */
.dg-trust {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.dg-trust__row {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .dg-trust__row { grid-template-columns: repeat(3, 1fr); } }
.dg-trust__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.35rem clamp(.5rem, 2vw, 1.5rem);
  border-block-end: 1px solid var(--line);
}
@media (min-width: 700px) {
  .dg-trust__item { border-block-end: 0; border-inline-end: 1px solid var(--line); }
  .dg-trust__item:last-child { border-inline-end: 0; }
}
.dg-trust__icon { inline-size: 30px; block-size: 30px; color: var(--rust); flex: none; }
.dg-trust__label { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.dg-trust__note { font-size: .85rem; color: var(--ink-muted); line-height: 1.4; }

/* -------------------------------------------------------------------------
   9. Cards
   ---------------------------------------------------------------------- */
.dg-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.dg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.dg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .26s var(--ease-out), box-shadow .26s var(--ease-out), border-color .26s var(--ease-out);
}
@media (hover: hover) {
  .dg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
}
.dg-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--oyster);
}
.dg-card__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease-out);
}
@media (hover: hover) { .dg-card:hover .dg-card__media img { transform: scale(1.05); } }

.dg-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem 1.25rem 1.35rem; flex: 1; }
.dg-card__title { font-family: var(--font-display); font-size: 1.24rem; font-weight: 600; margin: 0; }
.dg-card__text  { font-size: .93rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* The stamped data line — the provenance device. */
.dg-stamp {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rust);
  padding: .22rem .5rem;
  border: 1px solid color-mix(in srgb, var(--rust) 30%, transparent);
  border-radius: 2px;
  align-self: flex-start;
}
.dg-stamp--muted { color: var(--ink-muted); border-color: var(--line); }
html[lang^="ar"] .dg-stamp { letter-spacing: 0; font-size: .78rem; }

/* Feature card with an animated icon */
.dg-feature {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.5rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .26s var(--ease-out), box-shadow .26s var(--ease-out);
}
@media (hover: hover) { .dg-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } }
.dg-feature__icon {
  inline-size: 46px; block-size: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rust) 9%, transparent);
  color: var(--rust);
}
.dg-feature__icon svg { inline-size: 23px; block-size: 23px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dg-feature__icon { transition: transform .4s var(--ease-spring), background-color .3s var(--ease-out); }
  .dg-feature:hover .dg-feature__icon { transform: scale(1.09) rotate(-6deg); background: color-mix(in srgb, var(--rust) 15%, transparent); }
}
.dg-feature h3 { font-size: 1.14rem; margin: 0; }
.dg-feature p  { font-size: .92rem; color: var(--ink-soft); line-height: 1.62; margin: 0; }

/* -------------------------------------------------------------------------
   10. Process — the traceability story
   ---------------------------------------------------------------------- */
.dg-steps { display: grid; gap: 1.1rem; counter-reset: step; }
@media (min-width: 860px) { .dg-steps { grid-template-columns: repeat(4, 1fr); } }
.dg-step { position: relative; display: flex; flex-direction: column; gap: .6rem; padding-block-start: 2.6rem; }
.dg-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--rust);
}
/* The connecting rule runs along the reading direction. */
.dg-step::after {
  content: "";
  position: absolute;
  inset-block-start: .55rem;
  inset-inline-start: 2.4rem;
  inline-size: calc(100% - 2.4rem);
  block-size: 1px;
  background: var(--line);
}
@media (max-width: 859px) { .dg-step::after { display: none; } }
.dg-steps .dg-step:last-child::after { display: none; }
.dg-step h3 { font-size: 1.1rem; margin: 0; }
.dg-step p  { font-size: .91rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* -------------------------------------------------------------------------
   11. Counters
   ---------------------------------------------------------------------- */
.dg-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.dg-stat {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.4rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.dg-stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}
.dg-stat__label { font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }

/* -------------------------------------------------------------------------
   12. CTA band
   ---------------------------------------------------------------------- */
.dg-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--rust) 0%, var(--rust-deep) 100%);
  color: #fff;
}
.dg-band::before {
  /* Concentric rings, echoing the badge. Decorative. */
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -8%;
  inline-size: 520px;
  block-size: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 40px rgba(255,255,255,.05), inset 0 0 0 41px rgba(255,255,255,.12);
  pointer-events: none;
}
.dg-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: flex-start;
  padding-block: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 900px) {
  .dg-band__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
}
.dg-band h2 { color: #fff; margin: 0; max-width: 20ch; }
.dg-band p  { color: rgba(255,255,255,.86); margin: .6rem 0 0; max-width: 46ch; line-height: 1.65; }
.dg-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; flex: none; }

/* -------------------------------------------------------------------------
   13. Gallery
   ---------------------------------------------------------------------- */
.dg-gallery { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.dg-gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--oyster);
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.dg-gallery__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.dg-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(35,31,32,.42), transparent 55%);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
@media (hover: hover) {
  .dg-gallery__item:hover img { transform: scale(1.06); }
  .dg-gallery__item:hover::after { opacity: 1; }
}
.dg-gallery__item--tall { grid-row: span 2; aspect-ratio: 1 / 2.06; }

.dg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(23,21,19,.94);
  border: 0;
}
.dg-lightbox::backdrop { background: rgba(23,21,19,.94); }
.dg-lightbox img { max-block-size: 86vh; inline-size: auto; border-radius: var(--r-md); }
.dg-lightbox__close {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
}
.dg-lightbox__close:hover { background: rgba(255,255,255,.2); }

/* -------------------------------------------------------------------------
   14. Contact
   ---------------------------------------------------------------------- */
.dg-contact { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 900px) { .dg-contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

.dg-detail {
  display: flex;
  gap: .9rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--line);
  align-items: flex-start;
}
.dg-detail:last-child { border-block-end: 0; }
.dg-detail__icon { inline-size: 22px; block-size: 22px; color: var(--rust); flex: none; margin-block-start: .2rem; }
.dg-detail__k {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
html[lang^="ar"] .dg-detail__k { letter-spacing: 0; font-size: .76rem; }
.dg-detail__v { font-size: 1.02rem; font-weight: 500; }
.dg-detail__v a { color: var(--ink); text-decoration: none; }
.dg-detail__v a:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }

/* Form — styled generically so a form plugin's markup inherits it. */
.dg-form { display: flex; flex-direction: column; gap: 1rem; }
.dg-field { display: flex; flex-direction: column; gap: .4rem; }
.dg-field label { font-size: .875rem; font-weight: 600; }
.dg-field .req { color: var(--rust); }
.dg-form input[type="text"],
.dg-form input[type="email"],
.dg-form input[type="tel"],
.dg-form select,
.dg-form textarea {
  inline-size: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: .8rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.dg-form textarea { min-block-size: 140px; resize: vertical; }
.dg-form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust) 16%, transparent);
}
.dg-form__hint { font-size: .82rem; color: var(--ink-muted); }
.dg-form__row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .dg-form__row { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------------------------
   15. Footer
   ---------------------------------------------------------------------- */
.dg-footer { background: var(--ink); color: rgba(255,255,255,.72); }
.dg-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.dg-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.dg-footer__grid {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .dg-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1040px) { .dg-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; } }
.dg-footer h3 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
html[lang^="ar"] .dg-footer h3 { letter-spacing: 0; font-size: .82rem; }
.dg-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .93rem; }
.dg-footer__about { max-width: 38ch; font-size: .93rem; line-height: 1.7; }
.dg-footer__brand { display: flex; align-items: center; gap: .7rem; margin-block-end: 1rem; }
.dg-footer__brand img { block-size: 52px; inline-size: auto; }
.dg-footer__name { font-family: var(--font-display); color: #fff; font-size: 1.15rem; font-weight: 700; }

.dg-social { display: flex; gap: .5rem; }
.dg-social a {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  transition: background-color .22s var(--ease-out), transform .22s var(--ease-out), border-color .22s;
}
.dg-social a:hover { background: var(--rust); border-color: var(--rust); transform: translateY(-3px); }
.dg-social svg { inline-size: 18px; block-size: 18px; }

.dg-footer__base {
  border-block-start: 1px solid rgba(255,255,255,.12);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
}

/* -------------------------------------------------------------------------
   16. Reveal animations
   Elements start hidden ONLY when the script is present and motion is
   welcome — the .dg-js class is set by motion.js. Without JavaScript
   everything renders visible, which is the accessible default.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .dg-js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .58s var(--ease-out), transform .58s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .dg-js [data-reveal].is-in { opacity: 1; transform: none; }

  .dg-js [data-reveal="mask"] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .82s var(--ease-out);
  }
  .dg-js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
}

/* Parallax is desktop-only and opt-in via data attribute. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .dg-js [data-parallax] { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   17. Print
   ---------------------------------------------------------------------- */
@media print {
  .dg-header, .dg-footer, .dg-band, .dg-float { display: none !important; }
  body { background: #fff; color: #000; }
}

/* -------------------------------------------------------------------------
   18. Bridging core block markup
   WordPress renders its own class names for navigation, site title and page
   lists. These rules adopt that markup into the design rather than fighting
   it, so the owner keeps the native editing experience.
   ---------------------------------------------------------------------- */
.dg-brand-wrap { gap: .7rem !important; margin-inline-end: auto; }
.dg-brand-wrap .wp-block-site-logo img { block-size: 46px; inline-size: auto; display: block; }
.dg-brand__text {
  gap: .4rem !important;    /* was 0 — the two lines were touching */
  line-height: 1.15;
  justify-content: center;
}
.dg-brand__name,
.dg-brand__name a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}
.dg-brand__tag { margin: 0 !important; line-height: 1; }

/* Main navigation */
.dg-header .wp-block-navigation { --navigation-layout-gap: .1rem; }
.dg-header .wp-block-navigation__container { gap: .1rem; }
/* (see section 24 — nav visibility is element-qualified there) */
.dg-nav .wp-block-navigation-item__content {
  position: relative;
  display: block;
  padding: .55rem .8rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .18s var(--ease-out);
}
.dg-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset-block-end: .3rem;
  inset-inline-start: .8rem;
  inline-size: 0;
  block-size: 1.5px;
  background: var(--rust);
  transition: inline-size .26s var(--ease-out);
}
.dg-nav .wp-block-navigation-item__content:hover,
.dg-nav .current-menu-item .wp-block-navigation-item__content {
  color: var(--ink);
}
.dg-nav .wp-block-navigation-item__content:hover::after,
.dg-nav .current-menu-item .wp-block-navigation-item__content::after {
  inline-size: calc(100% - 1.6rem);
}

/* Drawer navigation */
.dg-drawer__nav .wp-block-navigation__container { flex-direction: column; gap: 0; align-items: stretch; }
.dg-drawer__nav .wp-block-navigation-item__content {
  display: block;
  padding: .85rem .25rem;
  border-block-end: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
}

/* Footer page list */
.dg-footer .wp-block-page-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .6rem;
  font-size: .93rem;
}
.dg-footer .wp-block-page-list .wp-block-pages-list__item__link { text-decoration: none; }
.dg-footer__col > * { margin-block: 0; }

/* -------------------------------------------------------------------------
   19. Interior page header
   ---------------------------------------------------------------------- */
.dg-pagehead {
  background:
    radial-gradient(760px 380px at 88% -30%, rgba(161,71,37,.11), transparent 62%),
    var(--oyster);
  border-block-end: 1px solid var(--line);
  padding-block: clamp(2.75rem, 7vw, 5rem);
}
.dg-pagehead__title { margin: 0; max-width: 20ch; }
.dg-pagehead__lede {
  margin: 1rem 0 0;
  max-width: 56ch;
  font-size: 1.1rem;
  line-height: 1.68;
  color: var(--ink-soft);
}
.dg-pagehead__meta {
  margin: .9rem 0 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Editorial prose inside post content, when a page is written normally. */
.dg-main .wp-block-post-content > :where(p, h2, h3, h4, ul, ol, blockquote) {
  max-width: var(--measure);
  margin-inline: auto;
}
.dg-main .wp-block-post-content > :where(p, ul, ol) { color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   20. Fixes found in browser testing
   ---------------------------------------------------------------------- */

/* A closed <dialog> is display:none by UA default — but .dg-lightbox set
   display:grid unconditionally, which overrode it and left the lightbox
   permanently on screen. Only paint it when it is actually open. */
.dg-lightbox:not([open]) { display: none; }

/* The brand lockup and the header CTA were both wrapping onto two lines,
   which pushed the navigation into a second row. */
.dg-brand__name,
.dg-brand__name a { white-space: nowrap; line-height: 1.1; display: block; }
.dg-brand__tag { white-space: nowrap; font-size: .58rem; letter-spacing: .14em; }
.dg-btn { white-space: nowrap; }

/* Buy the navigation back some horizontal room. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .dg-nav .wp-block-navigation-item__content { padding-inline: .55rem; font-size: .89rem; }
  .dg-header__cta { padding-inline: 1.15em; }
}
.dg-header .wp-block-navigation__container { flex-wrap: nowrap; }

/* Keep the header a single row at every width it is shown. */
.dg-header__inner { flex-wrap: nowrap; }

/* Core's navigation layout CSS is not reliably present, which left the menu
   stacking as a plain list. Own the layout here instead of depending on it. */
.dg-header .wp-block-navigation__container {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dg-nav .wp-block-navigation__container {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: .1rem;
}
.dg-nav .wp-block-navigation-item { display: block; }

/* The drawer is the one place the menu should stack. */
.dg-drawer__nav .wp-block-navigation__container {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* -------------------------------------------------------------------------
   21. FAQ accordion
   Built on <details>/<summary>: keyboard operable and open-by-default without
   a single line of JavaScript.
   ---------------------------------------------------------------------- */
.dg-faq { display: flex; flex-direction: column; gap: .7rem; max-width: 60rem; }
.dg-faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.dg-faq__item[open] { border-color: color-mix(in srgb, var(--rust) 34%, transparent); box-shadow: var(--shadow-soft); }
.dg-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.dg-faq__q::-webkit-details-marker { display: none; }
.dg-faq__q::after {
  content: "";
  inline-size: 11px; block-size: 11px;
  flex: none;
  border-inline-end: 2px solid var(--rust);
  border-block-end: 2px solid var(--rust);
  transform: rotate(45deg);
  transition: transform .28s var(--ease-out);
  margin-block-start: -4px;
}
.dg-faq__item[open] .dg-faq__q::after { transform: rotate(225deg); margin-block-start: 4px; }
.dg-faq__q:hover { color: var(--rust); }
.dg-faq__a { padding: 0 1.3rem 1.25rem; }
.dg-faq__a p { margin: 0; color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }

/* -------------------------------------------------------------------------
   22. Editorial notice
   Used wherever the site is honest about missing information rather than
   filling the gap with something invented.
   ---------------------------------------------------------------------- */
.dg-notice {
  border: 1px solid color-mix(in srgb, var(--yolk) 40%, transparent);
  border-inline-start: 3px solid var(--yolk);
  background: color-mix(in srgb, var(--yolk) 7%, var(--surface));
  border-radius: var(--r-sm);
  padding: 1.05rem 1.25rem;
}
.dg-notice p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--ink-soft); max-width: 78ch; }
.dg-notice strong { color: var(--ink); }

/* -------------------------------------------------------------------------
   23. Grid refinements
   ---------------------------------------------------------------------- */

/* Four product cards were breaking 3 + 1 orphan at 1120px of usable width.
   Lowering the track floor lets all four sit on one row. */
@media (min-width: 1040px) {
  .dg-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }
}

/* The tall gallery tile left an empty cell beside it. Dense packing pulls a
   later tile up into the hole instead. */
.dg-gallery {
  grid-auto-flow: dense;
  align-items: start;
}

/* -------------------------------------------------------------------------
   24. Mobile corrections
   These rules come last on purpose: the desktop-nav visibility must win over
   the core-block bridging above, which also matches .dg-nav.
   ---------------------------------------------------------------------- */
nav.dg-nav { display: none; }
@media (min-width: 1000px) { nav.dg-nav { display: block; } }
ul.wp-block-navigation__container { display: flex; }

/* The hero headline could not fit "home raised chicken" on one line at 390px
   and pushed the page sideways. */
@media (max-width: 620px) {
  .dg-hero__title { font-size: clamp(2rem, 8.8vw, 2.6rem); }
  .dg-hero__actions .dg-btn { flex: 1 1 100%; }
}

/* A long stamp line must wrap rather than widen the page. */
.dg-stamp { white-space: normal; max-inline-size: 100%; }

/* Belt and braces: nothing may push the document sideways. */
.dg-main, .dg-hero, .dg-band, .dg-footer { max-inline-size: 100vw; }

/* The nowrap header shrank the burger from 44px to 22px, and its 20px of
   inline padding then collapsed the bars to zero width. Controls must not
   shrink; the brand lockup is what should give way instead. */
.dg-burger { flex: 0 0 44px; }
.dg-burger span { inline-size: 100%; min-inline-size: 20px; }
.dg-lang { flex: none; }
.dg-brand-wrap { min-inline-size: 0; }
.dg-brand__text { min-inline-size: 0; overflow: hidden; }

@media (max-width: 430px) {
  .dg-brand__tag { display: none; }
  .dg-brand__name, .dg-brand__name a { font-size: 1rem; }
}