/* ==========================================================================
   Aloowala.pk
   Palette is drawn from the crop and the sack it ships in: soil, field green,
   jute paper, potato-skin ochre. The rate board is the one loud element on
   the site; everything else stays quiet around it.
   ========================================================================== */

:root {
  --soil:    #23201B;
  --soil-2:  #332E26;
  --board:   #2E3A2C;
  --board-2: #263021;
  --paper:   #EDEFE8;
  --paper-2: #F6F7F2;
  --white:   #FFFFFF;
  --ochre:   #C98A3F;
  --ochre-lt:#E5B978;
  --green:   #1F4D2E;
  --green-lt:#2F7043;
  --rule:    #D3D6C9;
  --muted:   #6A6D60;
  --danger:  #9A3412;

  --wrap: 1180px;
  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);
  --step-4:  clamp(2.7rem, 1.8rem + 4vw, 4.8rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--soil);
  font: 400 var(--step-0)/1.62 Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.06;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); letter-spacing: -.012em; }

p { margin: 0 0 1rem; max-width: 68ch; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--soil); }

:focus-visible {
  outline: 3px solid var(--ochre);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--soil); color: var(--paper);
  padding: .7rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.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;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.lede { font-size: var(--step-1); line-height: 1.45; max-width: 56ch; }
.muted { color: var(--muted); }

/* --------------------------------------------------------------- masthead */

.masthead {
  background: var(--soil);
  color: var(--paper);
  position: sticky; top: 0; z-index: 40;
}
.masthead-in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: .7rem 0;
}
.brand { display: flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; }
.brand-mark { color: var(--ochre); display: flex; }
.brand-text b {
  display: block;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.32rem; letter-spacing: -.03em; line-height: 1;
}
.brand-text small { display: block; font-size: .69rem; color: #A9AC9C; margin-top: 2px; }

.nav ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: .15rem 1.05rem; margin: 0; padding: 0; justify-content: center;
}
.nav a {
  color: #D6D9CC; text-decoration: none;
  font-size: .845rem; font-weight: 500;
  padding: .35rem 0; display: block; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--ochre-lt); border-bottom-color: var(--ochre); }

.callbtn {
  display: block; text-align: right; text-decoration: none;
  color: var(--paper); border-left: 1px solid #43403A; padding-left: 1.2rem;
}
.callbtn span { display: block; font-size: .68rem; color: #A9AC9C; }
.callbtn b { font-size: 1rem; letter-spacing: -.01em; color: var(--ochre-lt); }

.navtoggle { display: none; }

/* ------------------------------------------------------------------ hero */

.hero { background: var(--soil); color: var(--paper); padding: 3.2rem 0 4.4rem; }
.hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: start; }
.hero h1 { font-size: var(--step-4); color: var(--white); }
.hero-ur {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 1.28rem; line-height: 2.3; color: var(--ochre-lt);
  margin: .2rem 0 1.4rem; direction: rtl; text-align: right;
  max-width: 30ch;
}
.hero p { color: #CBCEC1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 1.8rem 2.8rem;
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid #45423B;
}
.hero-facts div b {
  display: block;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.85rem; color: var(--ochre); letter-spacing: -.03em;
}
.hero-facts div span { font-size: .8rem; color: #A9AC9C; }

/* ------------------------------------------------------- the rate board */

.board {
  background: var(--board);
  border: 1px solid #46543F;
  border-radius: 3px;
  box-shadow: inset 0 0 0 6px var(--board-2), 0 18px 40px rgba(0,0,0,.35);
  padding: 1.7rem 1.5rem 1.3rem;
  color: #E6EADF;
}
.board-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: .9rem; margin-bottom: .3rem;
  border-bottom: 2px solid #5A6A52;
}
.board-head h2 {
  font-size: 1.35rem; color: var(--white); margin: 0;
}
.board-date { font-size: .76rem; color: #A8B49F; text-align: right; }
.board-date b { color: var(--ochre-lt); display: block; font-size: .88rem; font-weight: 600; }

.board table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board tbody tr { border-bottom: 1px dotted #4E5D47; }
.board tbody tr:last-child { border-bottom: 0; }
.board td { padding: .62rem 0; vertical-align: baseline; }
.board .b-name { color: var(--white); font-weight: 600; }
.board .b-name small { display: block; font-weight: 400; color: #9DAA95; font-size: .74rem; }
.board .b-price {
  text-align: right; white-space: nowrap;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.3rem; color: var(--ochre-lt); letter-spacing: -.02em;
}
.board .b-price em { font-style: normal; font-family: Inter, sans-serif; font-size: .7rem; color: #9DAA95; display: block; font-weight: 400; letter-spacing: 0; }
.board-note {
  margin: 1rem 0 0; font-size: .78rem; color: #9DAA95; max-width: none;
  border-top: 1px solid #46543F; padding-top: .85rem;
}
.board-note a { color: var(--ochre-lt); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  background: var(--ochre); color: var(--soil);
  font-weight: 700; font-size: .93rem;
  padding: .78rem 1.35rem; border-radius: 3px;
  text-decoration: none; border: 2px solid var(--ochre);
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--ochre-lt); border-color: var(--ochre-lt); color: var(--soil); }
.btn-lg { font-size: 1.02rem; padding: .95rem 1.7rem; }
.btn-ghost { background: transparent; color: var(--ochre-lt); border-color: #6E6A61; }
.btn-ghost:hover { background: transparent; border-color: var(--ochre-lt); color: var(--white); }
.btn-solid { background: var(--green); border-color: var(--green); color: var(--white); }
.btn-solid:hover { background: var(--green-lt); border-color: var(--green-lt); color: var(--white); }

/* -------------------------------------------------------------- sections */

.sec { padding: 4rem 0; }
.sec-tight { padding: 2.6rem 0; }
.sec-dark { background: var(--soil); color: var(--paper); }
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--white); }
.sec-dark p { color: #CBCEC1; }
.sec-alt { background: var(--paper-2); }
.sec + .sec { border-top: 1px solid var(--rule); }

.sec-head { max-width: 62ch; margin-bottom: 2.2rem; }

/* Page opener for interior pages */
.pagehead { background: var(--soil); color: var(--paper); padding: 2.9rem 0 2.6rem; }
.pagehead h1 { color: var(--white); max-width: 22ch; }
.pagehead p { color: #CBCEC1; max-width: 60ch; margin-bottom: 0; }
.crumbs { font-size: .78rem; color: #A9AC9C; margin-bottom: .9rem; }
.crumbs a { color: #A9AC9C; }
.crumbs a:hover { color: var(--ochre-lt); }

/* ----------------------------------------------------------- grade table */

.gtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gtable caption { text-align: left; color: var(--muted); font-size: var(--step--1); padding-bottom: .7rem; }
.gtable th {
  text-align: left; font-size: .74rem; font-weight: 600; color: var(--muted);
  padding: 0 .8rem .55rem 0; border-bottom: 2px solid var(--soil);
}
.gtable td { padding: .95rem .8rem .95rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.gtable tbody tr:hover { background: var(--paper-2); }
.gtable .g-name { font-weight: 600; }
.gtable .g-name a { text-decoration: none; }
.gtable .g-name a:hover { text-decoration: underline; }
.gtable .g-name span { display: block; font-weight: 400; color: var(--muted); font-size: var(--step--1); max-width: 42ch; }
.gtable .g-rate { font-family: "Archivo Black", sans-serif; font-size: 1.18rem; white-space: nowrap; letter-spacing: -.02em; }
.gtable .g-rate small { display: block; font-family: Inter, sans-serif; font-size: .7rem; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.gtable td:last-child { text-align: right; }

/* --------------------------------------------------------------- answers */

.answer { border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 1.5rem; }
.answer:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.answer-q { font-size: var(--step-1); margin-bottom: .45rem; }
.answer-a { font-size: 1.05rem; }

/* ----------------------------------------------------------------- steps */

.steps { counter-reset: s; display: grid; gap: 1.6rem; grid-template-columns: repeat(3, 1fr); }
.steps li { list-style: none; counter-increment: s; padding-top: 2.6rem; position: relative; }
.steps li::before {
  content: counter(s);
  position: absolute; top: 0; left: 0;
  font-family: "Archivo Black", sans-serif; font-size: 1.7rem;
  color: var(--ochre); letter-spacing: -.04em;
  border-top: 3px solid var(--ochre); padding-top: .35rem; width: 100%;
}
.steps h3 { margin-bottom: .35rem; }
.steps p { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* ------------------------------------------------------------------ grid */

.cols { display: grid; gap: 2.2rem; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-side { grid-template-columns: 1.4fr .85fr; gap: 3.2rem; align-items: start; }

.panel {
  background: var(--white); border: 1px solid var(--rule);
  border-left: 4px solid var(--ochre);
  padding: 1.5rem 1.6rem;
}
.panel h3 { margin-bottom: .4rem; }
.panel p:last-child { margin-bottom: 0; }

.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { padding: .45rem 0 .45rem 1.6rem; position: relative; border-bottom: 1px solid var(--rule); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: .6rem; height: .6rem; background: var(--ochre); border-radius: 50%;
}

/* ------------------------------------------------------------------ band */

.band { background: var(--ochre); color: var(--soil); padding: 2.4rem 0; }
.band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.band-text {
  font-family: "Archivo Black", sans-serif; font-size: var(--step-1);
  letter-spacing: -.02em; margin: 0; max-width: 46ch; line-height: 1.2;
}
.band-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.band .btn { background: var(--soil); border-color: var(--soil); color: var(--paper); }
.band .btn:hover { background: #000; border-color: #000; color: var(--white); }
.band .btn-ghost { background: transparent; color: var(--soil); border-color: rgba(35,32,27,.4); }
.band .btn-ghost:hover { background: transparent; border-color: var(--soil); color: var(--soil); }

/* ----------------------------------------------------------------- forms */

.form { display: grid; gap: 1.05rem; max-width: 40rem; }
.form-row { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; margin-top: .1rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .68rem .8rem;
  border: 1px solid #B9BDAE; border-radius: 3px;
  background: var(--white); color: var(--soil);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }
.field textarea { min-height: 7rem; resize: vertical; }
.hp { position: absolute; left: -9999px; }

.note { padding: .95rem 1.1rem; border-left: 4px solid var(--green); background: #E4EBE1; font-size: .93rem; }
.note-bad { border-left-color: var(--danger); background: #F6E5DE; }
.note p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- guides */

.guidelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.guidelist li { border-top: 1px solid var(--rule); }
.guidelist li:last-child { border-bottom: 1px solid var(--rule); }
.guidelist a { display: block; padding: 1.5rem 0; text-decoration: none; color: inherit; }
.guidelist a:hover { background: var(--paper-2); }
.guidelist h3 { margin-bottom: .3rem; color: var(--green); }
.guidelist p { color: var(--muted); font-size: var(--step--1); margin: 0; }

.prose h2 { font-size: var(--step-1); margin-top: 2rem; }
.prose p, .prose li { max-width: 68ch; }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--soil); color: #B9BCAF; padding: 3.4rem 0 0; font-size: .9rem; }
.foot-in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.4rem; }
.foot h2 { font-size: .78rem; color: var(--ochre); font-family: Inter, sans-serif; font-weight: 700; letter-spacing: .04em; margin-bottom: .8rem; }
.foot-brand b { font-family: "Archivo Black", sans-serif; font-size: 1.35rem; color: var(--white); display: block; margin-bottom: .6rem; letter-spacing: -.03em; }
.foot-brand p { font-size: .86rem; }
.foot-ur { font-family: "Noto Nastaliq Urdu", serif; direction: rtl; color: var(--ochre-lt); font-size: .95rem; line-height: 2.1; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: .22rem 0; }
.foot a { color: #B9BCAF; text-decoration: none; }
.foot a:hover { color: var(--ochre-lt); text-decoration: underline; }
.foot-contact p { font-size: .86rem; margin-bottom: .8rem; }
.foot-legal {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  border-top: 1px solid #3D3A34; margin-top: 3rem; padding: 1.2rem 0;
  font-size: .78rem; color: #85887C;
}
.foot-legal p { margin: 0; }

/* ------------------------------------------------------------------- fab */

.fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 45;
  width: 3.3rem; height: 3.3rem; border-radius: 50%;
  background: #1E9E52; color: var(--white);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.fab:hover { background: #17853F; color: var(--white); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .masthead-in { grid-template-columns: auto auto; row-gap: .6rem; }
  .nav { grid-column: 1 / -1; order: 3; }
  .nav ul { justify-content: flex-start; gap: .1rem .9rem; }
  .callbtn { border-left: 0; padding-left: 0; }
}

@media (max-width: 900px) {
  .hero-in, .cols-2, .cols-3, .cols-side { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 1.2rem; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .hero { padding: 2.4rem 0 3rem; }
}

@media (max-width: 720px) {
  .navtoggle {
    display: flex; align-items: center; gap: .45rem;
    background: none; border: 1px solid #4E4B44; color: var(--paper);
    font: inherit; font-size: .8rem; padding: .45rem .7rem; border-radius: 3px; cursor: pointer;
  }
  .navtoggle span { display: block; width: 16px; height: 2px; background: currentColor; }
  .navtoggle span:nth-child(2), .navtoggle span:nth-child(3) { display: none; }
  .navtoggle em { font-style: normal; }
  .masthead-in { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding-bottom: .6rem; }
  .nav a { padding: .6rem 0; border-bottom: 1px solid #3D3A34; }
  .callbtn { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; gap: 1.8rem; }
  .gtable thead { position: absolute; left: -9999px; }
  .gtable td { display: block; padding: .2rem 0; border: 0; }
  .gtable tbody tr { display: block; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .gtable td:last-child { text-align: left; padding-top: .6rem; }
  .sec { padding: 2.8rem 0; }
}

@media print {
  .masthead, .band, .fab, .foot-legal, .navtoggle { display: none; }
  body { background: #fff; }
  .board { box-shadow: none; }
}