/* Fonts are linked from each page head (render-non-blocking); no @import here. */

/* ============================================================
   Barakaat Farms — "Morning Market"
   Cream ground, sky-blue bands, white cards, deep amber accent.
   Display: Fraunces (soft serif) · Body: Inter Tight
   ============================================================ */

/* Light scheme derived from the split-hero pages: cream ground,
   sky-blue bands, white cards, warm dark type. Every pairing below
   was contrast-checked against its own surface. */
:root{
  --ground:#FDF4E8;        /* page */
  --deep:#FBE8D3;          /* warm tint band */
  --sky:#82C8F8;           /* the hero blue, as a surface only */
  --sky-soft:#DCEFFC;      /* cool tint band */
  --surface:#FFFFFF;       /* cards */
  --surface-2:#F7EBDA;     /* card hover */
  --line:#E8D6BC;
  --line-soft:#F2E7D6;

  --type:#2A1A0C;
  --type-soft:#5A4630;
  --type-mute:#6E5C44;

  --yolk:#96590A;          /* accent: prices, eyebrows, marks */
  --yolk-bright:#B06B0E;
  --yolk-deep:#7A480A;
  --yolk-wash:rgba(150,89,10,.09);
  --yolk-line:rgba(150,89,10,.26);

  --blue-ink:#0E3550;      /* type on the blue panel */
  --blue-deep:#1B4A6B;

  --wa:#12803D;
  --wa-deep:#0E6B32;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --wrap:1180px;
  --narrow:72ch;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  /* light-scheme depth: warm, soft, no inset highlights */
  --lift-1:0 1px 2px rgba(90,70,48,.05), 0 2px 8px rgba(90,70,48,.05);
  --lift-2:0 2px 6px rgba(90,70,48,.06), 0 12px 28px rgba(90,70,48,.09);
  --lift-3:0 6px 12px rgba(90,70,48,.07), 0 24px 52px rgba(90,70,48,.13);
  --glow:0 6px 22px rgba(150,89,10,.22);

  --font-d:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --font-b:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ground)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font-b);
  font-size:17px;
  line-height:1.62;
  color:var(--type);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain, multiplied faintly into the cream ground. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media print{body::before{display:none}}

img,svg{max-width:100%;display:block}
img{height:auto}
a{color:var(--yolk);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--yolk-bright)}

:focus-visible{outline:2.5px solid var(--yolk);outline-offset:3px;border-radius:3px}
.ann :focus-visible{outline-color:#fff}
footer :focus-visible,.cta-band :focus-visible{outline-color:var(--sky)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--narrow);margin-left:auto;margin-right:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
a.sr-only:focus-visible{position:fixed;top:12px;left:12px;width:auto;height:auto;margin:0;
  padding:12px 20px;clip:auto;white-space:normal;background:var(--surface);color:var(--type);
  border:2px solid var(--yolk);border-radius:10px;z-index:1000;box-shadow:var(--lift-2)}

/* ============================ Typography ============================ */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;line-height:1.1;margin:0;
  text-wrap:balance;font-variation-settings:'SOFT' 30,'WONK' 1;color:var(--type)}
h1{font-size:clamp(2.5rem,5.6vw,4.15rem);letter-spacing:-.026em;line-height:1.02;
  font-variation-settings:'SOFT' 42,'WONK' 1,'opsz' 120}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.02em;
  font-variation-settings:'SOFT' 36,'WONK' 1,'opsz' 72}
h3{font-size:1.24rem;line-height:1.24;letter-spacing:-.008em}
h4{font-size:1.06rem}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.lede{font-size:clamp(1.09rem,1.85vw,1.28rem);line-height:1.58;color:var(--type-soft);
  max-width:56ch;font-weight:400}

.em{font-style:italic;color:var(--yolk);font-weight:400}

.eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-b);font-size:11.5px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--yolk);background:var(--yolk-wash);border:1px solid var(--yolk-line);
  padding:7px 15px;border-radius:100px;margin-bottom:24px}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

.sec-head{max-width:62ch;margin-bottom:var(--s5)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--type-soft);font-size:1.07rem;margin:16px 0 0}

/* ============================ Header ============================ */
.ann{background:var(--yolk);color:#FFF6E8;font-size:13.5px;text-align:center;
  padding:10px 18px;font-weight:600;letter-spacing:.015em}
.ann a{color:#fff;font-weight:700;text-decoration-thickness:1.5px;display:inline-block;padding:10px 4px;margin:-10px 0}
.ann a:hover{color:#FFE9C4}

header{position:sticky;top:0;z-index:100;background:rgba(253,244,232,.86);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;gap:20px;padding:13px 24px;
  max-width:var(--wrap);margin:0 auto}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--type);flex:none}
.brand .mark{width:42px;height:42px;flex:none}
.brand-txt b{font-family:var(--font-d);font-size:20px;font-weight:600;
  letter-spacing:-.018em;line-height:1.1;display:block;
  font-variation-settings:'SOFT' 40,'WONK' 1}
.brand-txt span{font-size:10px;color:var(--type-mute);letter-spacing:.18em;
  text-transform:uppercase;font-weight:500}

.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:nowrap}
.nav-links a{text-decoration:none;color:var(--type-soft);font-size:15px;padding:11px 12px;
  border-radius:8px;font-weight:500;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease)}
.nav-links a:hover{background:var(--surface-2);color:var(--type)}
.nav-links a[aria-current="page"]{color:var(--yolk);font-weight:600;background:var(--yolk-wash)}
.nav-cta{margin-left:8px}

.menu-btn{display:none;margin-left:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:10px 14px;font-size:15px;font-weight:500;cursor:pointer;
  color:var(--type);font-family:var(--font-b);min-height:44px;align-items:center;gap:8px}

/* ============================ Buttons ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;min-height:48px;border-radius:10px;text-decoration:none;
  font-weight:600;font-size:16px;font-family:var(--font-b);border:1.5px solid transparent;
  cursor:pointer;line-height:1.2;text-align:center;
  transition:transform .18s var(--ease),background .2s var(--ease),
             box-shadow .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:19px;height:19px;flex:none}

.btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 20px rgba(18,128,61,.26)}
.btn-wa:hover{background:var(--wa-deep);color:#fff;box-shadow:0 10px 26px rgba(14,107,50,.32)}
.btn-primary{background:var(--yolk);color:#fff;box-shadow:var(--glow)}
.btn-primary:hover{background:var(--yolk-deep);color:#fff;box-shadow:0 10px 26px rgba(122,72,10,.32)}
.btn-dark{background:var(--surface-2);color:var(--type);border-color:var(--line)}
.btn-ghost{background:transparent;color:var(--type);border-color:var(--line)}
.btn-sm{padding:11px 18px;min-height:44px;font-size:15px}
.btn-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:var(--s4)}

/* .hero retired — inner pages use .page-head; grid + trustline survive. */
.page-head{background:linear-gradient(180deg,var(--sky-soft) 0%,var(--ground) 82%);
  border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s6);align-items:center}

.trustline{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.trustline div{font-size:12.5px;color:var(--type-mute);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase}
.trustline b{display:block;font-family:var(--font-d);font-size:1.8rem;color:var(--yolk);
  font-weight:600;letter-spacing:-.022em;line-height:1.14;margin-bottom:4px;
  text-transform:none;font-variation-settings:'SOFT' 40,'WONK' 1;
  font-variant-numeric:tabular-nums}

/* ===================== Artwork =====================
   Scenes are lit windows onto the farm; product shots are
   dark studio panels where the eggs themselves glow. */
.art{position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--lift-3);background:var(--surface)}
.art::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(90,70,48,.07);border-radius:inherit}
.art svg,.art img{width:100%;height:auto;display:block}
.art-sm{border-radius:var(--r-lg);box-shadow:var(--lift-2)}
.art-cap{position:absolute;left:16px;bottom:14px;background:rgba(42,26,12,.8);color:#FDF4E8;
  backdrop-filter:blur(8px);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.18)}

/* ============================ Sections ============================ */
section{padding:var(--s7) 0;position:relative}
/* Bands: cream --deep and sky --sky-soft alternate over the ground.
   Each band opens and closes with an egg-carton scallop edge. */
section.tint{background:var(--deep)}
section.olive{background:var(--sky-soft)}
section.tint,section.olive{position:relative}
section.tint::before,section.olive::before,
section.tint::after,section.olive::after{
  content:"";position:absolute;left:0;right:0;height:13px;pointer-events:none;
  background-image:radial-gradient(circle 9px at 12px 13px, var(--ground) 8.5px, transparent 9.5px);
  background-size:24px 13px;background-repeat:repeat-x;
}
section.tint::before,section.olive::before{top:0;transform:scaleY(-1)}
section.tint::after,section.olive::after{bottom:0}
section.tint>*,section.olive>*{position:relative;z-index:1}

/* ============================ Cards ============================ */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--lift-1);
  transition:transform .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease)}
.card:hover{transform:translateY(-4px);background:var(--surface-2);border-color:#D9C3A2}
.card h3{margin-bottom:10px}
.card p{color:var(--type-soft);font-size:15.5px;margin:0}

.ico{width:48px;height:48px;border-radius:12px;background:var(--yolk-wash);color:var(--yolk);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  border:1px solid var(--yolk-line)}
.ico svg{width:24px;height:24px;stroke-width:1.6}
.ico.yolk,.ico.clay{background:var(--yolk-wash);color:var(--yolk);border-color:var(--yolk-line)}

.card .idx{font-family:var(--font-d);font-size:2.3rem;font-weight:600;color:var(--yolk);
  opacity:.55;line-height:1;letter-spacing:-.03em;margin-bottom:14px;display:block;
  font-variation-settings:'SOFT' 40,'WONK' 1;font-variant-numeric:tabular-nums}

/* ============================ Price cards ============================ */
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--lift-1);position:relative;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--lift-3);border-color:#D9C3A2}
.price-card.featured{transform:translateY(-6px);border:1.5px solid var(--yolk);
  box-shadow:var(--lift-2),0 0 0 1px rgba(150,89,10,.35)}
.pc-art{background:var(--deep);border-bottom:1px solid var(--line);padding:16px 16px 0}
.price-card:nth-child(odd) .pc-art{background:var(--sky-soft)}
.pc-art img{border-radius:10px 10px 0 0}
.pc-art svg,.pc-art img{width:100%;height:auto;display:block}
.pc-body{padding:28px;display:flex;flex-direction:column;flex:1}
.pc-tag{display:inline-block;background:var(--yolk);color:#fff;font-size:10.5px;
  font-weight:700;padding:5px 12px;border-radius:100px;letter-spacing:.14em;
  text-transform:uppercase;align-self:flex-start;margin-bottom:14px}
.price{font-family:var(--font-d);font-size:2.6rem;font-weight:600;letter-spacing:-.03em;
  margin:10px 0 3px;color:var(--yolk);line-height:1;
  font-variation-settings:'SOFT' 40,'WONK' 1;font-variant-numeric:tabular-nums}
.price small{font-family:var(--font-b);font-size:.85rem;font-weight:500;color:var(--type-mute);
  letter-spacing:0}
.pc-note{font-size:14px;color:var(--type-mute);margin:0 0 20px}
.pc-body ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.pc-body li{font-size:15px;color:var(--type-soft);padding:7px 0 7px 28px;position:relative}
.pc-body li::before{content:"";position:absolute;left:0;top:13px;width:17px;height:17px;
  background:var(--yolk-wash);border:1px solid var(--yolk-line);border-radius:50%}
.pc-body li::after{content:"";position:absolute;left:4.6px;top:18px;width:7px;height:4px;
  border-left:1.9px solid var(--yolk);border-bottom:1.9px solid var(--yolk);
  transform:rotate(-45deg)}

/* ============================ Table ============================ */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:15.5px}
caption{text-align:left;padding:20px 24px 0;font-size:13.5px;color:var(--type-mute)}
th,td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--line-soft)}
th{background:var(--deep);font-weight:600;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--type-mute)}
td{color:var(--type-soft)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .18s var(--ease)}
tbody tr:hover{background:var(--surface-2)}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:550;color:var(--type)}
tr.hl{background:var(--yolk-wash)}
tr.hl td{font-weight:600;color:var(--type)}
tr.hl td.num{color:var(--yolk)}

/* ============================ Steps ============================ */
.steps{counter-reset:s;display:grid;gap:6px;position:relative}
.step{display:flex;gap:20px;align-items:flex-start;padding:18px 0;position:relative}
.step+.step{border-top:1px solid var(--line-soft)}
.step .n{counter-increment:s;flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--yolk-wash);color:var(--yolk);display:flex;align-items:center;
  justify-content:center;font-family:var(--font-d);font-weight:600;font-size:17px;
  border:1px solid var(--yolk-line);font-variant-numeric:tabular-nums}
.step .n::before{content:counter(s)}
.step p{margin:5px 0 0;color:var(--type-soft);font-size:15.5px}

/* ============================ FAQ ============================ */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:10px;overflow:hidden;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
details:hover{border-color:#D9C3A2}
details[open]{background:var(--surface-2)}
summary{padding:20px 24px;cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start;min-height:44px;
  color:var(--type)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:12px;height:12px;margin-top:6px;
  border-right:2px solid var(--yolk);border-bottom:2px solid var(--yolk);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
details[open] summary::after{transform:rotate(225deg);margin-top:10px}
details .ans{padding:0 24px 22px;color:var(--type-soft);font-size:15.5px}

/* ============================ Callouts ============================ */
.note,.warn{border-radius:var(--r);padding:22px 26px;margin:var(--s4) 0;font-size:15.5px;
  color:var(--type-soft);border:1px solid var(--line);border-left:2px solid var(--type-mute);
  background:var(--surface)}
.warn{border-color:var(--yolk-line);border-left-color:var(--yolk);background:var(--yolk-wash)}
.note strong,.warn strong{color:var(--type);font-weight:600}

.pull{font-family:var(--font-d);font-size:clamp(1.4rem,2.7vw,1.95rem);line-height:1.28;
  letter-spacing:-.016em;color:var(--yolk);border-left:2px solid var(--yolk-line);
  padding:8px 0 8px 30px;margin:var(--s5) 0;font-style:italic;max-width:32ch;
  font-variation-settings:'SOFT' 44,'WONK' 1}

/* ============================ Chips / zones ============================ */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:100px;
  padding:9px 17px;font-size:14.5px;color:var(--type-soft);white-space:nowrap;font-weight:500}

.zone{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--lift-1)}
.zone-hd{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  flex-wrap:wrap;margin-bottom:6px}
.zone-day{font-size:11.5px;font-weight:600;color:var(--yolk);background:var(--yolk-wash);
  border:1px solid var(--yolk-line);padding:6px 13px;border-radius:100px;white-space:nowrap;
  letter-spacing:.12em;text-transform:uppercase}

/* ============================ CTA band ============================ */
.cta-band{background:var(--blue-ink);border:0;color:#FFF6E8;
  border-radius:var(--r-xl);padding:56px 48px;display:flex;gap:var(--s5);align-items:center;
  justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:-130px;right:-90px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(130,200,248,.28),transparent 66%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{margin:0 0 12px;color:#fff}
.cta-band p{margin:0;color:rgba(255,255,255,.82);font-size:1.04rem;max-width:48ch}

/* ============================ Article ============================ */
.article{max-width:70ch;margin:0 auto}
.article p{font-size:1.08rem;line-height:1.76;color:var(--type-soft);margin:0 0 1.2em}
.article h2{margin-top:2.2em;margin-bottom:.5em;font-size:clamp(1.55rem,2.7vw,2.05rem)}
.article h2:first-child{margin-top:0}
.article h3{margin-top:1.7em;margin-bottom:.4em;color:var(--type)}
.article ul,.article ol{color:var(--type-soft);font-size:1.05rem;padding-left:26px;
  line-height:1.74;margin:0 0 1.2em}
.article li{margin-bottom:11px}
.article li::marker{color:var(--yolk)}
.article strong{font-weight:600;color:var(--type)}
.meta{color:var(--type-mute);font-size:12.5px;margin-bottom:16px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase}
.meta a{color:var(--type-mute);display:inline-block;padding:12px 4px;margin:-12px -4px}
.meta a:hover{color:var(--yolk)}

.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--lift-1);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;height:100%;
  transition:transform .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease)}
.post-card:hover{transform:translateY(-4px);background:var(--surface-2);border-color:#D9C3A2}
.post-card h3{margin:12px 0 10px;color:var(--type)}
.post-card p{color:var(--type-soft);font-size:15.5px;flex:1;margin:0 0 18px}
.post-card .more{color:var(--yolk);font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;gap:7px}
.post-card .more svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.post-card:hover .more svg{transform:translateX(5px)}
.post-card:hover .more{gap:11px}

/* ============================ Footer ============================ */
footer{background:var(--blue-ink);color:#B9CBD8;padding:var(--s7) 0 var(--s3);
  font-size:15px;border-top:1px solid var(--line-soft)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s5);margin-bottom:var(--s5)}
footer .fh{color:#fff;font-family:var(--font-b);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 18px;font-weight:600}
footer a{color:#B9CBD8;text-decoration:none;display:block;padding:10px 0;
  transition:color .18s var(--ease)}
footer a:hover{color:var(--sky)}
footer .fb{color:#fff;font-family:var(--font-d);font-size:21px;font-weight:600;
  margin-bottom:12px;letter-spacing:-.018em;font-variation-settings:'SOFT' 40,'WONK' 1}
footer .fdesc{margin:0 0 18px;max-width:34ch;color:#B9CBD8;line-height:1.6}
.f-bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:var(--s3);font-size:13px;
  color:#8FA6B6;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ============================ Mobile bar ============================ */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(255,253,249,.95);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding:10px 14px;gap:10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 26px rgba(90,70,48,.16)}
.mobile-bar .btn{flex:1;padding:12px 10px;font-size:15px}

/* ===================== Scroll reveal =====================
   Progressive enhancement only: visible by default, hidden
   only once JS confirms it can reveal. */
.rv{opacity:1;transform:none}
.js-rv .rv.art,.js-rv .rv.photo-band,.js-rv .rv.price-card{transform:translateY(22px) scale(.985)}
.js-rv .rv{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-rv .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv,.js-rv .rv{opacity:1 !important;transform:none !important;transition:none}
  .btn:hover,.card:hover,.price-card:hover,.post-card:hover{transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================ Responsive ============================ */
@media(max-width:1180px){
  .nav-links{gap:0}
  .nav-links a{padding:9px 9px;font-size:14.5px}
}
/* 801-1024: still the desktop chrome, compacted so all links fit.
   The hamburger, overlay nav and mobile bar arrive together at 800,
   the same width where the split hero stacks — one coherent switch. */
@media(max-width:1024px){
  body{font-size:16.5px}
  :root{--s7:64px;--s6:48px;--s5:40px}
  .hero-grid{grid-template-columns:1fr;gap:var(--s5)}
  .nav{gap:12px;padding:13px 16px}
  .brand{gap:9px}
  .brand-txt span{display:none}
  .brand-txt b{font-size:18px}
  .nav-links a{padding:10px 6px;font-size:13px}
  .nav-cta{padding:10px 11px;min-height:42px;font-size:13.5px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .cta-band{padding:40px 30px}
}
@media(max-width:800px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .menu-btn{display:inline-flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);
    flex-wrap:wrap;flex-direction:column;align-items:stretch;padding:12px;gap:2px;
    border-bottom:1px solid var(--line);box-shadow:var(--lift-2);max-height:78vh;overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 16px;font-size:16px;min-height:48px;display:flex;align-items:center}
  .nav-cta{margin:6px 0 0;min-height:48px}
  .mobile-bar{display:flex}
}
@media(max-width:760px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .cta-band{padding:34px 24px}
  .card{padding:26px}
  .pc-body{padding:24px}
  .trustline{gap:22px}
  .pull{padding-left:20px;margin:var(--s4) 0}
  h1{font-size:clamp(2.15rem,8.4vw,2.8rem)}
}
@media(max-width:420px){
  .wrap{padding:0 18px}
  .trustline{gap:16px}
  .trustline b{font-size:1.5rem}
  .nav{padding:13px 16px;gap:12px}
  .brand{gap:9px}
  .brand .mark{width:36px;height:36px}
  .brand-txt b{font-size:18px}
  .menu-btn{padding:10px 12px}
}

@media print{
  header,footer,.mobile-bar,.ann,.cta-band,.sh-word,.sh-hint{display:none}
  body::after{content:"Barakaat Farms — order on WhatsApp +92 333 5728370";
    display:block;margin-top:24px;padding-top:12px;border-top:1px solid #999;
    font-weight:600;font-size:12pt}
  body{background:#fff;color:#000;font-size:11pt}
  .card,.price-card,.table-scroll,.zone,details{background:#fff;border-color:#ccc;
    box-shadow:none;break-inside:avoid}
  h1,h2,h3,h4,.price,.trustline b,.pull{color:#000}
  p,td,li,.article p{color:#222}
}

/* anchored headings clear the sticky header */
h1[id],h2[id],h3[id],section[id],details{scroll-margin-top:96px}

/* ============================================================
   INTERACTION LAYER
   Hover mechanics modelled on the patterns used by modern
   poultry/food sites: a hairline that grows from the left, a
   button that fills and reveals an arrow, an image that eases
   in scale under a rising tint. Timings match: 0.3s for links
   and buttons, 0.4s for cards, 0.6s for image scale.
   ============================================================ */

/* --- nav: hairline grows from the left, label lifts to the accent --- */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1.5px;
  background:var(--yolk);transform:scaleX(0);transform-origin:left center;opacity:0;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);opacity:1}
.nav-links a:hover{color:var(--yolk);background:transparent}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);opacity:.55}
.nav-links .nav-cta::after{display:none}

/* --- buttons: fill sweeps in, arrow slides out --- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--yolk);
  transform:translateY(101%);transition:transform .3s linear;
}
.btn-ghost:hover::before,.btn-dark:hover::before{transform:translateY(0)}
.btn-ghost:hover,.btn-dark:hover{color:#FFF6E8;border-color:var(--yolk);background:transparent}
.btn-ghost::after,.btn-dark::after{
  content:"";width:0;height:0;flex:none;opacity:0;margin-left:0;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);
  transition:width .3s var(--ease),height .3s var(--ease),
             opacity .3s var(--ease),margin-left .3s var(--ease);
}
.btn-ghost:hover::after,.btn-dark:hover::after{width:7px;height:7px;opacity:1;margin-left:9px}

/* --- cards: image eases in scale beneath a rising tint --- */
.art,.pc-art{position:relative;overflow:hidden}
.art img,.pc-art img{transition:transform .6s var(--ease)}
.price-card:hover .pc-art img,.post-card:hover .art img{transform:scale(1.055)}
.pc-art::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,53,80,.16),rgba(14,53,80,0));
  transition:height .4s var(--ease);
}
.price-card:hover .pc-art::after{height:100%}

/* --- cards ease at 0.4s ---
   Every card also carries .rv, and `.js-rv .rv` (0,2,0) outranks a bare
   `.card` (0,1,0) — it was overriding this and dropping background and
   border-color from the shorthand. Matching that specificity fixes it. */
.card,.price-card,.post-card,.zone,
.js-rv .rv.card,.js-rv .rv.price-card,.js-rv .rv.post-card,.js-rv .rv.zone{
  transition:transform .4s var(--ease),background .4s var(--ease),
             border-color .4s var(--ease),box-shadow .4s var(--ease);
}
/* while still hidden, the reveal still owns opacity + transform */
.js-rv .rv.card:not(.in),.js-rv .rv.price-card:not(.in),
.js-rv .rv.post-card:not(.in),.js-rv .rv.zone:not(.in){
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}

/* --- animated hamburger: lines resize on hover --- */
.menu-icon{display:inline-flex;flex-direction:column;gap:4px;width:20px}
.menu-icon i{
  display:block;height:1.8px;width:20px;background:currentColor;border-radius:2px;
  transition:width .3s var(--ease);
}
.menu-btn:hover .menu-icon i:nth-child(1){width:11px}
.menu-btn:hover .menu-icon i:nth-child(3){width:15px}
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(1){width:11px}
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(3){width:15px}

/* --- footer + inline links pick up the accent on 0.3s ease-out --- */
footer a,.article a,.note a,.warn a{transition:color .3s ease-out}

@media(prefers-reduced-motion:reduce){
  .nav-links a::after,.btn::before,.btn::after,.art img,.pc-art img,.pc-art::after,.menu-icon i{
    transition:none !important}
  .price-card:hover .pc-art img,.post-card:hover .art img{transform:none}
}

/* ============================================================
   BEFORE / AFTER COMPARISON
   Two frames shot in identical framing, stacked. The top one is
   clipped to --pos, so dragging wipes between them. A real range
   input sits over the top: that gives keyboard and touch support
   for free, which a pointer-only implementation never has.
   ============================================================ */
.compare{
  --pos:50%;
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--lift-2);
  background:var(--surface);
  line-height:0;
}
.compare img{width:100%;height:auto;display:block}
.compare__top{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.compare__top img{width:100%;height:100%;object-fit:cover}

.compare__bar{
  position:absolute; top:0; bottom:0; left:var(--pos);
  width:2px; background:var(--yolk);
  transform:translateX(-1px);
  pointer-events:none; z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.7);
}
.compare__bar::after{
  content:""; position:absolute; top:50%; left:50%;
  width:46px; height:46px; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--yolk);
  box-shadow:0 4px 16px rgba(90,70,48,.3);
}
.compare__bar::before{
  content:""; position:absolute; top:50%; left:50%;
  width:14px; height:14px; transform:translate(-50%,-50%) rotate(45deg);
  border-left:2.5px solid #FFF6E8; border-bottom:2.5px solid #FFF6E8;
  z-index:1;
}

.compare__tag{
  position:absolute; bottom:16px; z-index:2;
  font-family:var(--font-b); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; line-height:1;
  padding:8px 14px; border-radius:100px;
  background:rgba(42,26,12,.8); color:#FDF4E8;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  transition:opacity .25s var(--ease);
}
.compare__tag--l{left:16px}
.compare__tag--r{right:16px}

/* the control itself — invisible, but fully operable */
.compare__range{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.compare__range::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%}
.compare__range::-moz-range-thumb{width:52px;height:100%;border:0;background:transparent}
.compare__range:focus-visible{opacity:1;outline:none}
.compare:focus-within .compare__bar::after{
  box-shadow:0 0 0 4px #FFF6E8,0 0 0 6.5px var(--yolk),0 4px 16px rgba(90,70,48,.3);
}

.compare__cap{
  margin:14px 0 0; font-size:14px; color:var(--type-mute);
  line-height:1.5; text-align:center;
}
@media(max-width:600px){
  .compare__tag{font-size:10px;padding:6px 11px;bottom:12px}
  .compare__bar::after{width:38px;height:38px}
}

/* ============================================================
   SPLIT HERO  (homepage)
   Namespaced .sh-* to stay clear of legacy selectors.
   Sky-blue egg panel / warm-cream bird panel; blue-ink and amber
   CTAs. Panels animate on flex-grow; the products slide
   independently so an expanding panel UNCOVERS its half.
   ============================================================ */
.sh{
  position:relative;
  display:flex;
  width:100%;
  min-height:min(86vh, 760px);
  min-height:min(86svh, 760px);
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line-soft);
}
.sh-panel{
  flex:1; position:relative; overflow:hidden;
  display:flex; align-items:center; min-width:0;
  transition:flex .55s var(--ease);
  will-change:flex-grow; cursor:pointer;
}
.sh-panel--egg  { background:var(--sky) }
.sh-panel--bird { background:var(--deep) }
.sh-panel--bird::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 70% 40%, rgba(255,255,255,.5), transparent 70%);
}
/* oversized Urdu ghost words give each colour field depth without clutter */
.sh-word{
  position:absolute; bottom:-.16em; z-index:0; pointer-events:none;
  font-family:var(--font-d); font-style:italic; font-weight:600;
  font-size:clamp(6rem,16vw,13rem); line-height:1; letter-spacing:-.03em;
  user-select:none;
}
.sh-panel--egg  .sh-word{ left:clamp(12px,2vw,32px);  color:rgba(14,53,80,.08) }
.sh-panel--bird .sh-word{ right:clamp(12px,2vw,32px); color:rgba(150,89,10,.09) }
.sh-art{ line-height:0 }
.sh-art::after{
  content:""; position:absolute; left:12%; right:12%; bottom:2%; height:26px; z-index:-1;
  background:radial-gradient(ellipse, rgba(42,26,12,.30), transparent 68%);
  filter:blur(5px);
}
.sh-panel--egg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 30% 40%,rgba(255,255,255,.35),transparent 70%);
}

.sh.is-egg  .sh-panel--egg { flex:4 }
.sh.is-egg  .sh-panel--bird{ flex:1 }
.sh.is-bird .sh-panel--bird{ flex:4 }
.sh.is-bird .sh-panel--egg { flex:1 }

/* copy pinned to the outer edge so it never reflows mid-animation */
.sh-copy{
  position:absolute; top:50%; transform:translateY(-50%);
  width:min(38ch, 33vw); padding:0 clamp(24px,4vw,64px); z-index:2;
  transition:opacity .38s var(--ease), transform .55s var(--ease);
}
.sh-panel--egg  .sh-copy{ left:0;  text-align:left }
.sh-panel--bird .sh-copy{ right:0; text-align:right }
.sh.is-bird .sh-panel--egg  .sh-copy{ opacity:0; transform:translate(-2.5rem,-50%); pointer-events:none }
.sh.is-egg  .sh-panel--bird .sh-copy{ opacity:0; transform:translate(2.5rem,-50%);  pointer-events:none }

.sh-copy .sh-h{
  font-family:var(--font-d);font-weight:600;text-wrap:balance;
  font-variation-settings:'SOFT' 42,'WONK' 1,'opsz' 120;
  font-size:clamp(2.3rem,4.2vw,3.6rem); line-height:1.05;
  letter-spacing:-.026em; margin:0 0 .9rem; color:var(--type);
}
.sh-copy p{
  color:var(--type-soft); font-size:clamp(1rem,1.15vw,1.09rem);
  line-height:1.6; margin:0 0 1.7rem; max-width:31ch;
}
.sh-panel--bird .sh-copy p{ margin-left:auto }

/* products: anchored to each panel's inner edge; the transform reveals */
.sh-art{
  position:absolute; top:50%; pointer-events:none; z-index:1;
  filter:drop-shadow(0 26px 32px rgba(90,70,48,.28));
  transition:transform .55s var(--ease);
}
.sh-art img{ height:clamp(250px,34vw,470px); width:auto; max-width:none; display:block }
.sh-art--egg { right:0; transform:translate(50%,-50%) }
.sh-art--bird{ left:0;  transform:translate(-50%,-50%) }
.sh.is-egg  .sh-art--egg { transform:translate(-16%,-50%) scale(1.04) }
.sh.is-egg  .sh-art--bird{ transform:translate(-78%,-50%) }
.sh.is-bird .sh-art--bird{ transform:translate(16%,-50%) scale(1.04) }
.sh.is-bird .sh-art--egg { transform:translate(78%,-50%) }

.sh-seam{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:rgba(14,53,80,.22); transform:translateX(-.5px);
  z-index:3; pointer-events:none; transition:opacity .3s var(--ease);
}
.sh.is-egg .sh-seam,.sh.is-bird .sh-seam{ opacity:0 }

.sh-hint{
  position:absolute; left:50%; bottom:clamp(18px,3.5vh,36px);
  transform:translateX(-50%); z-index:4; margin:0;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-ink); background:rgba(255,255,255,.62); backdrop-filter:blur(6px);
  padding:8px 15px; border-radius:100px; border:1px solid rgba(14,53,80,.14);
  pointer-events:none; transition:opacity .3s var(--ease);
}
.sh.is-egg .sh-hint,.sh.is-bird .sh-hint{ opacity:0 }

/* trust ledger: a lifted card interlocking hero and page */
.sh-trust{
  display:flex; flex-wrap:wrap; gap:0;
  justify-content:center; padding:var(--s3) clamp(12px,2.5vw,32px);
  background:var(--surface); border:1px solid var(--line-soft);
  width:min(100% - 40px, var(--wrap)); margin:-30px auto 0;
  position:relative; z-index:6; border-radius:var(--r-lg); box-shadow:var(--lift-2);
}
.sh-trust div{ font-size:12.5px; color:var(--type-mute); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-align:left;
  flex:1 1 0; min-width:150px; padding:6px clamp(16px,2.6vw,36px) }
.sh-trust div+div{ border-left:1px solid var(--line-soft) }
.sh-trust b{ display:block; font-family:var(--font-d); font-size:1.8rem;
  color:var(--yolk); font-weight:600; letter-spacing:-.022em; margin-bottom:4px;
  text-transform:none; font-variation-settings:'SOFT' 40,'WONK' 1;
  font-variant-numeric:tabular-nums }
@media(max-width:760px){
  .sh-trust div{flex:1 1 45%;padding:10px 16px}
  .sh-trust div+div{border-left:0}
  .sh-trust div:nth-child(even){border-left:1px solid var(--line-soft)}
}

@media (max-width:800px){
  .sh{ flex-direction:column; min-height:auto }
  .sh-panel{ flex:none !important; width:100%; min-height:auto;
    justify-content:center; padding:clamp(44px,8vw,64px) 0; transition:none; cursor:auto;
    flex-direction:column }
  .sh-copy{ position:static; transform:none !important; opacity:1 !important;
    width:100%; max-width:32rem; margin:0 auto; text-align:center !important;
    pointer-events:auto !important }
  .sh-panel--bird .sh-copy p{ margin-left:auto; margin-right:auto }
  .sh-art{ position:relative; top:auto; left:auto !important; right:auto !important;
    transform:none !important; margin:1.6rem auto 0; display:flex; justify-content:center }
  .sh-art img{ height:min(40vw,190px) }
  .sh-seam,.sh-hint{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .sh-panel,.sh-art,.sh-copy,.sh-seam,.sh-hint{ transition:none !important }
}

/* the left hero panel is blue, so its type takes the blue ink */
.sh-panel--egg .sh-copy .sh-h,
.sh-panel--egg .sh-copy .em{ color:var(--blue-ink) }
.sh-panel--egg .sh-copy p{ color:rgba(14,53,80,.82) }
.sh-panel--egg .eyebrow{ color:var(--blue-ink); background:rgba(255,255,255,.42);
  border-color:rgba(14,53,80,.18) }
.sh-panel--egg .btn-primary{ background:var(--blue-ink); color:#fff; box-shadow:0 6px 20px rgba(14,53,80,.28) }
.sh-panel--egg .btn-primary:hover{ background:#08283E; color:#fff }
.sh-panel--bird .btn-dark{ background:var(--yolk); color:#FFF6E8; border-color:transparent;
  box-shadow:0 6px 20px rgba(150,89,10,.28) }
.sh-panel--bird .btn-dark:hover{ color:#FFF6E8; border-color:transparent; background:transparent }
.sh-panel--bird .btn-dark::before{ background:var(--yolk-deep) }

/* ============================================================
   PHOTO BAND — full-bleed pasture shot; the site's core evidence
   gets a whole band to itself between catalogue and pitch.
   ============================================================ */
.photo-band{padding:0;position:relative;overflow:hidden;line-height:0}
.photo-band img{width:100%;height:clamp(320px,52vh,560px);object-fit:cover;display:block}
.photo-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(42,26,12,.38),transparent 42%)}
.pb-cap{position:absolute;left:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,44px);z-index:2;
  display:inline-flex;align-items:center;gap:10px;line-height:1.3;
  font-family:var(--font-d);font-style:italic;font-size:clamp(1.05rem,2vw,1.5rem);
  color:#FFF6E8;text-decoration:none;letter-spacing:-.01em;
  text-shadow:0 2px 14px rgba(42,26,12,.55)}
.pb-cap svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.pb-cap:hover{color:#fff}
.pb-cap:hover svg{transform:translateX(6px)}

/* ============================================================
   ORDER BUILDER — compose the exact WhatsApp order on-page.
   Pure form + JS; the static prefill link is the no-JS fallback.
   ============================================================ */
.ob{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--lift-2);margin:var(--s5) 0}
.ob h2{font-size:1.24rem;line-height:1.24;margin-bottom:6px}
.ob-sub{color:var(--type-mute);font-size:14px;margin:0 0 18px}
.ob-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.ob-opt{position:relative}
.ob-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.ob-opt span{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;min-height:44px;
  border:1.5px solid var(--line);border-radius:10px;font-size:14.5px;font-weight:500;
  color:var(--type-soft);background:var(--surface);cursor:pointer;line-height:1.25;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.ob-opt input:checked+span{border-color:var(--yolk);background:var(--yolk-wash);
  color:var(--type);font-weight:600}
.ob-opt input:focus-visible+span{outline:2.5px solid var(--yolk);outline-offset:2px}
.ob-qty{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line);
  border-radius:10px;overflow:hidden;vertical-align:middle}
.ob-qty button{width:44px;height:44px;border:0;background:var(--surface-2);color:var(--type);
  font-size:20px;font-weight:600;cursor:pointer;font-family:var(--font-b)}
.ob-qty button:hover{background:var(--deep)}
.ob-qty output{min-width:52px;text-align:center;font-weight:650;font-size:16px;
  font-variant-numeric:tabular-nums}
.ob-line{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:4px 0 18px}
.ob-total{font-family:var(--font-d);font-size:1.5rem;font-weight:600;color:var(--yolk);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ob-del{font-size:13.5px;color:var(--type-mute)}
.ob-del.free{color:var(--wa);font-weight:600}
.ob-note{font-size:13px;color:var(--type-mute);margin:14px 0 0}
select.ob-sel{appearance:none;-webkit-appearance:none;padding:11px 38px 11px 14px;min-height:44px;
  border:1.5px solid var(--line);border-radius:10px;font:500 14.5px var(--font-b);
  color:var(--type);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2396590A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center no-repeat;
  cursor:pointer}
select.ob-sel:focus-visible{outline:2.5px solid var(--yolk);outline-offset:2px}

/* ============================================================
   ASSURE STRIP — three standing promises under the trust ledger
   ============================================================ */
.assure{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;
  padding:18px 24px 0;max-width:var(--wrap);margin:0 auto}
.assure div{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;
  color:var(--type-soft);font-weight:500}
.assure svg{width:17px;height:17px;color:var(--yolk);flex:none}

/* ============================================================
   JOURNEY — five connected steps, laying to doorstep
   ============================================================ */
.journey{display:flex;gap:0;counter-reset:j;position:relative;margin-top:var(--s5)}
.j-step{flex:1;position:relative;padding:0 14px;text-align:center}
.j-step::before{counter-increment:j;content:counter(j);
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0 auto 14px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--yolk-line);color:var(--yolk);
  font-family:var(--font-d);font-weight:600;font-size:17px;position:relative;z-index:1}
.j-step::after{content:"";position:absolute;top:22px;left:calc(50% + 26px);
  right:calc(-50% + 26px);height:1.5px;background:var(--yolk-line)}
.j-step:last-child::after{display:none}
.j-step h3{font-size:1.02rem;margin-bottom:6px}
.j-step p{font-size:13.5px;color:var(--type-mute);margin:0;line-height:1.5}
@media(max-width:800px){
  .journey{flex-direction:column;gap:22px;max-width:22rem;margin-left:auto;margin-right:auto}
  .j-step{display:grid;grid-template-columns:44px 1fr;gap:0 16px;text-align:left;padding:0}
  .j-step::before{margin:0;grid-row:1/3}
  .j-step::after{top:52px;left:21px;right:auto;width:1.5px;height:calc(100% - 22px)}
}

/* ============================================================
   WHATSAPP FAB — desktop only; the mobile bar covers small screens
   ============================================================ */
.fab{position:fixed;right:22px;bottom:22px;z-index:180;width:56px;height:56px;
  border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 8px 26px rgba(18,128,61,.4);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.fab svg{width:26px;height:26px}
.fab:hover{transform:scale(1.08);box-shadow:0 12px 32px rgba(18,128,61,.5);color:#fff}
.fab:focus-visible{outline:3px solid var(--yolk);outline-offset:3px}
@media(max-width:800px){.fab{display:none}}
@media print{.fab{display:none}}
@media(prefers-reduced-motion:reduce){.fab{transition:none}.fab:hover{transform:none}}

/* ============================================================
   ANNOUNCEMENT ROTATION — three messages fade in turn;
   no-JS and reduced-motion get the first message, static.
   ============================================================ */
.ann{position:relative}
.ann-msg{display:none}
.ann-msg.on{display:inline}
.ann-msg:first-child{display:inline}
.ann[data-live] .ann-msg:first-child:not(.on){display:none}