/* ===========================================================================
   AGROHA VEGETABLES & FRUITS TRADING L.L.C
   assets/css/site.css

   The language is the market floor, not the boardroom. Near black forest for
   the grounds that carry weight, a cool off white for the reading sections,
   and one acid lime that does every job an accent has to do. The green is
   sampled out of the company's own logo vector and then driven dark, so the
   brand is still the brand, it is just no longer printed on cream paper.

   Four rules this file keeps everywhere:

   1. NO BOXES. Nothing on this site is enclosed in a frame. Structure comes
      from hairlines that sit under or beside content, from vertical rails,
      from the type scale and from space. There are no bordered cards and no
      grids of bordered cells. The only filled shapes are the buttons, which
      have to look pressable, and the ownership bar, which is a chart.
   2. Corner radius is zero, everywhere, on everything.
   3. Lime is never text on a light ground. It fails contrast at 1.1 to 1.
      On light grounds the green that carries meaning is --lime-ink.
   4. Grounds publish their own context. A section sets --on, --on-soft,
      --line and --accent-text, and every component inside reads those. That
      is why one component works on the white and the dark bands without a
      single override.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Grounds, dark. The hero, the register, the call to action, the footer. */
  --night:        #06110A;
  --night-2:      #0A190F;

  /* Grounds, light. Cool, with a green cast. Not cream, not beige. */
  --paper:        #F4F5EF;
  --stone:        #E9ECE2;

  /* Ink on light grounds */
  --ink:          #0A1710;   /* 17.2 to 1 on paper */
  --ink-2:        #46524A;   /*  7.1 to 1 on paper */
  --ink-3:        #6B7668;   /*  4.6 to 1 on paper, labels only */

  /* The accent. One colour. */
  --lime:         #C6F24E;   /* 14.8 to 1 on night */
  --lime-2:       #A4D232;
  --lime-ink:     #41610A;   /*  6.4 to 1 on paper, the accent as readable text */

  /* Text on dark grounds */
  --on-dark:      #E9EFE4;   /* 16.4 to 1 on night */
  --on-dark-dim:  rgba(233, 239, 228, 0.72);
  --on-dark-faint:rgba(233, 239, 228, 0.50);

  /* Hairlines. After the type, this is the only structural device. */
  --rule:         rgba(10, 23, 16, 0.13);
  --rule-strong:  rgba(10, 23, 16, 0.28);
  --rule-d:       rgba(233, 239, 228, 0.15);
  --rule-d-strong:rgba(233, 239, 228, 0.32);

  /* Type */
  --display: "Bricolage Grotesque", "Archivo", system-ui, -apple-system, sans-serif;
  --sans:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Measure and rhythm */
  --shell:    1400px;
  --gutter:   clamp(1.15rem, 4vw, 4rem);
  --band:     clamp(4.5rem, 9vw, 9rem);
  --band-sm:  clamp(3rem, 5.5vw, 5rem);

  /* Default ground context, overridden per band. */
  --on:          var(--ink);
  --on-soft:     var(--ink-2);
  --on-faint:    var(--ink-3);
  --line:        var(--rule);
  --line-strong: var(--rule-strong);
  --accent-text: var(--lime-ink);
}

/* ----------------------------------------------------------------- 2. RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, not hidden. hidden would make the root a scroll container and kill
     the sticky header. clip contains the overflow without that side effect. */
  overflow-x: clip;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.975rem, 0.3vw + 0.9rem, 1.0625rem);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

a { color: inherit; }

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

::selection { background: var(--lime); color: var(--night); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--lime);
  color: var(--night);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ 3. TYPE SCALE */

/* Display is Bricolage Grotesque, set wide and tight, so headlines read as
   signage. Emphasis inside a headline is the italic of the same family, never
   a second typeface. */
.display-xl, .display-l, .display-m, .display-s {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.display-xl { font-size: clamp(2.65rem, 7.4vw, 6.25rem); font-weight: 800; line-height: 0.93; }
.display-l  { font-size: clamp(2.05rem, 4.4vw, 3.75rem); font-weight: 700; line-height: 0.99; }
.display-m  { font-size: clamp(1.7rem, 3.1vw, 2.75rem);  font-weight: 700; line-height: 1.03; letter-spacing: -0.03em; }
.display-s  { font-size: clamp(1.2rem, 1.5vw, 1.55rem);  font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; }

/* A headline is composed with a hard break in it, for the width the break was
   drawn at. Below this the type is sitting on the 2.65rem floor of the clamp
   and the line is a third as wide, so the break has nothing to do with how the
   words actually fall and only adds an orphan to a line the balancer above was
   going to set properly anyway. Hide it and let the balancer see the whole
   sentence. Every one of these breaks is written with a space after it so the
   words stay apart once the break is gone. */
@media (max-width: 560px) {
  .display-xl br { display: none; }
}

/* The bottom padding keeps the descender of a letter like g clear of the line
   below. The right padding pays back the side bearing the italic eats: a word
   like Dubai leans its last stroke into the space after it, and with the
   headline already tracked in by 0.035em the next word ends up touching it. */
.display-xl em, .display-l em, .display-m em {
  font-style: italic;
  color: var(--accent-text);
  display: inline-block;
  line-height: 1.1;
  padding-bottom: 0.06em;
  padding-right: 0.07em;
}

.nb { white-space: nowrap; }

.lede {
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem);
  line-height: 1.52;
  color: var(--on-soft);
  max-width: 54ch;
}

.prose { max-width: 62ch; color: var(--on-soft); }
.prose--wide { max-width: 80ch; }
.prose p + p { margin-top: 1.05em; }
.prose strong { color: var(--on); font-weight: 600; }

/* Every figure on this site is monospaced. Licence numbers, phone numbers,
   share counts, line counts, dates. A buyer scanning for a number finds it
   because it is the only thing on the page set in mono. */
.tnum {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* The small uppercase label. Mono, wide tracked, accent coloured. */
.hero__kicker, .place__tag, .cat-row__act, .desk__tag, .spec__label,
.why__src, .status__tag, .foot__col h3, .licence__head h2, .crumbs,
.fact__label, .docset__when, .owners__role {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.numeral {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}

.note { font-size: 0.875rem; line-height: 1.55; color: var(--on-faint); max-width: 68ch; }
.note--strong { color: var(--on-soft); }
.note--dark { color: var(--on-dark-dim); }

.on-dark {
  --on: var(--on-dark);
  --on-soft: var(--on-dark-dim);
  --on-faint: var(--on-dark-faint);
  --line: var(--rule-d);
  --line-strong: var(--rule-d-strong);
  --accent-text: var(--lime);
  color: var(--on);
}

/* A value the company has not confirmed. It is never dressed up to look like
   data. Restated at component specificity below, because a descendant rule
   like .ledger__row dd scores higher than a bare class and would win. */
.pending,
.ledger__row dd.pending,
.status__row dd.pending,
.licence__rows dd.pending,
.docset__row dd.pending {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-faint);
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: 1px;
  /* The dashed rule underlines the words and stops. Left to fill its cell it
     ran the width of the record and read as another divider. These values sit
     in grid cells, which blockifies inline-block, so the alignment does it. */
  display: inline-block;
  justify-self: start;
}

/* A tag is a word, not a pill. The lime mark in front of it does the work a
   border used to do. */
.tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-soft);
}
.tag::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--accent-text);
  transform: translateY(-0.15em);
}

.tagset { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.tlink {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.18s ease;
}
.tlink:hover { opacity: 0.68; }

.req { color: var(--accent-text); font-weight: 600; }

/* --------------------------------------------------- 4. SHELL AND THE BANDS */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  --on: var(--ink);
  --on-soft: var(--ink-2);
  --on-faint: var(--ink-3);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --accent-text: var(--lime-ink);
  background: var(--paper);
  color: var(--on);
  padding-block: var(--band);
}

.band--tight { padding-block: var(--band-sm); }

.band--panel { background: var(--stone); }

.band--dark {
  --on: var(--on-dark);
  --on-soft: var(--on-dark-dim);
  --on-faint: var(--on-dark-faint);
  --line: var(--rule-d);
  --line-strong: var(--rule-d-strong);
  --accent-text: var(--lime);
  background: var(--night);
}

/* ----------------------------------------------------------- 5. THE RIBBON  */

.ribbon {
  background: var(--night);
  color: var(--on-dark-dim);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ribbon__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding-block: 0.7rem;
}

.ribbon__set { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; }

.ribbon__set span + span { position: relative; }
.ribbon__set span + span::before {
  content: "";
  position: absolute;
  left: -0.95rem;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: var(--lime);
}

.ribbon b { color: var(--lime); font-weight: 500; }

@media (max-width: 760px) {
  .ribbon__set:last-child { display: none; }
}

/* The separator between two ribbon items is drawn to the left of the second
   one, so when the pair stopped fitting on one line the second item took its
   point with it and a stray lime dot opened the next line on its own. A ribbon
   is a single line by definition. Below this width it carries the one fact a
   buyer wants from it, which is where the company stands; the registered office
   is in the footer of every page and on the contact page in full. */
@media (max-width: 560px) {
  .ribbon__set span + span { display: none; }
}

/* ----------------------------------------------------------- 6. THE HEADER  */

/* The header is a sticky bar, so it is a stacking context, and the mobile
   navigation panel lives inside it. The panel's own z-index therefore only
   orders it within the header, not against the page, and with the header
   underneath the scrim the open menu was being painted through seventy percent
   black: the headings went to grey, the current page lost its lime and the
   telephone chip went olive. The header sits above the scrim so that the panel
   and the control that closes it both stay lit. It sits above the floating
   WhatsApp button too, which never shares a corner with it. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--night);
  color: var(--on-dark);
  border-bottom: 1px solid var(--rule-d);
}

.site-head__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 5.25rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}

/* The engraved seal carries fine line work, so it is given real size. Below
   about 48px the banner inside it stops being legible and the whole mark
   reads as a smudge, which is what was happening before. */
.brand__mark { width: 56px; height: 56px; object-fit: contain; flex: none; }

.brand__type { display: block; line-height: 1; }

.brand__name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.015em;
  font-variation-settings: "wdth" 100;
  color: var(--on-dark);
}

.brand__sub {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav__list { display: flex; align-items: center; gap: 1.6rem; }

.nav__link {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-dark-dim);
  text-decoration: none;
  transition: color 0.18s ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__link:hover { color: var(--on-dark); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--lime); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.call-chip {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--night);
  background: var(--lime);
  /* 0.8rem rather than 0.65 so the chip clears 44px on a phone, where it
     is the only way to call from inside the drawer. */
  padding: 0.8rem 1.05rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.call-chip:hover { background: #FFFFFF; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-d-strong);
  color: var(--on-dark);
  padding: 0.45rem 0.1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-toggle__bars { display: grid; gap: 4px; width: 16px; }
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: var(--lime);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-scrim { display: none; }

@media (max-width: 1040px) {
  /* The panel is fixed to the top of the viewport and its first eighty eight
     pixels are empty padding, which is the room the control that opened it is
     meant to keep. Without a layer of its own the control was painted under
     that empty padding, so the bars never became the cross and the only ways
     out of the menu were the strip of scrim at the left edge and the escape
     key. It also grows to a thumb's height here. */
  .nav-toggle {
    display: inline-flex;
    position: relative;
    z-index: 95;
    min-height: 44px;
  }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(23rem, 86vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--night-2);
    padding: 5.5rem var(--gutter) 2rem;
    transform: translateX(101%);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 90;
    overflow-y: auto;
  }

  /* The state is written as a value, not a bare flag: closing sets the
     attribute to false rather than removing it, and a presence selector would
     hold the panel open and the scrim over the page for good after the first
     time the menu was shut. */
  .nav[data-open="true"] { transform: translateX(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--rule-d); }

  .nav__link {
    padding-block: 1rem;
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  .nav__link::after { display: none; }

  .call-chip { margin-top: 1.75rem; text-align: center; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 17, 10, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 80;
  }
  .nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* ---------------------------------------------------------- 7. THE BUTTONS  */

/* Buttons are the one place a filled shape is allowed, because a thing you
   press has to look pressable. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.65rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.16s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:active { transform: translateY(1px); }

.btn--solid, .btn--lime {
  background: var(--lime);
  color: var(--night);
  border-color: var(--lime);
}
.btn--solid:hover, .btn--lime:hover { background: #FFFFFF; border-color: #FFFFFF; }

.btn--ghost-dark {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--rule-d-strong);
}
.btn--ghost-dark:hover { border-color: var(--lime); color: var(--lime); }

.btn--full { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The reset strips every paragraph margin and the gap inside a button row only
   separates the buttons from each other, so a row set straight after running
   text sat on the last line of it and read as part of the sentence. */
.note + .btn-row,
.prose > p + .btn-row { margin-top: clamp(1.35rem, 2.5vw, 1.75rem); }

@media (max-width: 420px) {
  .btn { width: 100%; white-space: normal; }
}

/* ------------------------------------------- 8. LAYOUT FAMILY A: THE HERO   */

/* One photograph, full bleed, carrying the whole opening. Legibility over it is
   bought with a two stop scrim rather than by dimming the entire picture, so the
   produce still reads as produce on the right of the frame while the headline
   keeps a near solid ground on the left. The four licensed product groups are
   named at the foot of it, each one a link into its part of the catalogue, so a
   buyer knows what is sold here before scrolling once. */
.hero {
  --on: var(--on-dark);
  --on-soft: var(--on-dark-dim);
  --on-faint: var(--on-dark-faint);
  --line: var(--rule-d);
  --line-strong: var(--rule-d-strong);
  --accent-text: var(--lime);
  position: relative;
  isolation: isolate;
  background: var(--night);
  color: var(--on-dark);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; margin: 0; z-index: -2; }

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 46%;
  filter: saturate(1.04) contrast(1.03);
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(6, 17, 10, 0.97) 0%,
      rgba(6, 17, 10, 0.93) 30%,
      rgba(6, 17, 10, 0.62) 58%,
      rgba(6, 17, 10, 0.34) 100%),
    linear-gradient(to top,
      rgba(6, 17, 10, 0.94) 0%,
      rgba(6, 17, 10, 0.10) 54%);
}

.hero__inner {
  position: relative;
  display: grid;
  align-content: end;
  min-height: min(44rem, 84dvh);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.25rem, 4vw, 3.5rem);
}

.hero__kicker { margin-bottom: 1.4rem; }

.hero .display-xl { margin-bottom: 1.45rem; max-width: 15ch; }
.hero .lede { margin-bottom: 2rem; max-width: 50ch; }

.hero__lines {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-d);
}

.hero__lines a { display: grid; gap: 0.3rem; padding-block: 0.4rem; text-decoration: none; }

.hero__lines b {
  font-family: var(--mono);
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--lime);
}

.hero__lines span {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--on-dark-dim);
  transition: color 0.18s ease;
}

.hero__lines a:hover span { color: var(--on-dark); }

@media (max-width: 900px) {
  /* On a phone the picture is behind the whole column rather than beside it, so
     the scrim is vertical and considerably heavier. */
  .hero__bg img { object-position: 58% 44%; }
  .hero__bg::after {
    background: linear-gradient(to top,
      rgba(6, 17, 10, 0.97) 0%,
      rgba(6, 17, 10, 0.88) 46%,
      rgba(6, 17, 10, 0.64) 100%);
  }
  .hero__inner { min-height: min(37rem, 80dvh); }
  .hero .display-xl { max-width: none; }
}

@media (max-width: 620px) {
  .hero__lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0.4rem 1.25rem;
  }
}

/* ------------------------------ 9. THE LICENCE FIGURES AND THE VALIDITY BAR */

/* The licence used to sit in a bordered card. It is now an open row of figures
   under a single hairline. Nothing encloses it: the numbers are large enough
   to hold the space on their own. */
.licence { position: relative; }

.licence__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.9rem; }
.licence__head h2 { margin: 0; color: var(--lime); }
.licence__head::after { content: ""; flex: 1; height: 1px; background: var(--rule-d); }

.licence__seal {
  order: 3;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  flex: none;
}

.licence__rows {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem clamp(2rem, 5vw, 5rem);
  margin-bottom: 2.1rem;
}

.licence__rows > div { display: grid; gap: 0.5rem; align-content: start; }

.licence__rows dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}

.licence__rows dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--on-dark);
  line-height: 1.2;
}

.licence__rows dd.licence__big {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  color: var(--lime);
  letter-spacing: -0.045em;
  line-height: 1;
}

/* The validity bar. Drawn from the two dates on the licence and updated in the
   browser, so the page states the real position rather than a fixed claim. */
.validity { display: grid; gap: 0.65rem; max-width: 46rem; }

.validity__labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--on-dark-faint);
}
.validity__labels b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--on-dark-dim);
  letter-spacing: -0.02em;
}

.validity__track { position: relative; height: 4px; background: rgba(233, 239, 228, 0.13); }

.validity__fill {
  display: block;
  height: 100%;
  background: var(--lime);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.validity__now { position: absolute; top: -4px; width: 2px; height: 12px; background: #FFFFFF; }

.validity__note {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--on-dark-dim);
}

.validity[data-state="expired"] .validity__fill { background: var(--on-dark-faint); }
.validity[data-state="expired"] .validity__note { color: var(--lime); }

@media (prefers-reduced-motion: reduce) { .validity__fill { transition: none; } }

/* --------------------------------------------------------- 10. SECTION HEAD */

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: end;
  padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

/* The section numeral stands on its own. There was a short accent rule running
   out of it here and it has been taken out, along with every other decorative
   line on the site. */
.sec-head__rail { display: flex; align-items: center; margin-bottom: 0.9rem; }

.sec-head__lede {
  color: var(--on-soft);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 46ch;
  padding-bottom: 0.3rem;
}

.sec-head--dark {
  --on: var(--on-dark);
  --on-soft: var(--on-dark-dim);
  --line: var(--rule-d);
  --accent-text: var(--lime);
  color: var(--on-dark);
}

@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; }
}

/* A section head draws a hairline under itself. Several of the blocks that
   follow one open with a hairline of their own, and the two end up a couple of
   centimetres apart with nothing between them, which reads as a printing fault
   rather than as structure. Where that happens the head gives up its rule and
   lets the block's own rule start the record. */
.sec-head:has(+ .ledger),
.sec-head:has(+ .docset),
.sec-head:has(+ .status),
.sec-head:has(+ .places) {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: clamp(1.9rem, 3.4vw, 3rem);
}

/* The same pair of rules, in the one place the ruled block sits inside a split
   column. Above this width the block is half the measure and the head is the
   whole of it, so the two rules read as different things and both stay. */
@media (max-width: 880px) {
  .sec-head:has(+ .split .place) { border-bottom: 0; padding-bottom: 0; }
}

/* --------------------- 11. LAYOUT FAMILY B: THE DIVIDED PAIR, NO CONTAINER  */

/* Two, not three. The licence carries exactly two activities, so the layout
   carries exactly two columns and never invents a third. One vertical hairline
   between them and nothing at all around them. */
.acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}

.act { display: grid; gap: 1rem; align-content: start; }

.act + .act {
  padding-left: clamp(2rem, 5vw, 5rem);
  margin-left: calc(clamp(2rem, 5vw, 5rem) * -1);
  border-left: 1px solid var(--line);
}

.act__no {
  font-family: var(--mono);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--accent-text);
  opacity: 0.38;
}

.act h3 { color: var(--on); }
.act p { color: var(--on-soft); max-width: 44ch; }

@media (max-width: 760px) {
  .acts { grid-template-columns: 1fr; gap: 2rem; }
  .act + .act {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
  }
}

/* ------------------------------- 12. LAYOUT FAMILY C: THE RULED RECORD      */

/* Label on the left, value on the right, one hairline between every pair.
   This is how a registry extract reads. */
.ledger { display: grid; }

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.75rem 1.5rem;
  align-items: baseline;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.ledger__row:first-child { border-top: 1px solid var(--line); }

.ledger__row dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-faint);
}

.ledger__row dd {
  margin: 0;
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.0625rem);
  font-weight: 500;
  color: var(--on);
  line-height: 1.35;
}

.ledger--light { --line: var(--rule); }

.ledger--dark {
  --on: var(--on-dark);
  --on-faint: var(--on-dark-faint);
  --line: var(--rule-d);
  color: var(--on-dark);
}

.ledger--wide .ledger__row { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); }
/* A record set inside running text needs air above it. Its first row draws its
   own rule, and with nothing between them that rule lands directly under the
   last line of the paragraph and reads as an underline on the sentence. */
.prose > .ledger { margin-top: clamp(1.6rem, 3vw, 2.25rem); }

.ledger--mini .ledger__row { padding-block: 0.65rem; }
.ledger--mini .ledger__row dd { font-size: 0.9375rem; }

/* Two columns stop working on a phone. The labels here are long, LEGAL FORM is
   the short one and DUBAI CHAMBER MEMBERSHIP NO. is not, so holding the value
   on the right wraps a four word label into four lines beside a six digit
   number. The label goes above its value and the hairlines carry the record. */
@media (max-width: 560px) {
  .ledger .ledger__row,
  .ledger--wide .ledger__row,
  .ledger--mini .ledger__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-block: 0.85rem;
  }
  .ledger__row dt { font-size: 0.65rem; }
}

/* Every record foot on the site sits directly under a ruled record, and that
   record's last row already draws a hairline across the column. A second rule
   of its own landed a finger's width below the first, so the note underneath
   arrived behind two parallel lines with nothing between them. The air does the
   separating; the ledger's own closing rule is the line. */
.record-foot { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Two pages close the record with a standing caveat set below the call to
   action. Without this it sat hard against the bottom edge of the button. */
.record-foot + .note { margin-top: clamp(1.4rem, 3vw, 2rem); }

/* ------------------------------------------ 13. THE ADDRESSES, SIDE BY SIDE */

.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 4rem); }

.place {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

/* One address above the other, for the contact page where the pair sits in a
   narrow column beside a photograph. */
.places--stack { grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.75rem); }

/* The caveat about the map pin is an aside to the pair of addresses, not a third
   address. Without this it ran straight on from the last line above it and read
   as one more paragraph of the Al Aweer entry. It gets the same hairline and the
   same room the two plates give each other. */
.places--stack + .note {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.place address { color: var(--on); font-weight: 500; line-height: 1.5; }
.place p { color: var(--on-soft); max-width: 42ch; }

@media (max-width: 760px) { .places { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- 14. OWNERSHIP SPLIT   */

.owners { display: grid; gap: 2rem; }

/* This one is a chart, so it is allowed to be a filled shape. */
.owners__bar { display: flex; height: 2.25rem; }

.owners__seg {
  display: flex;
  align-items: center;
  padding-inline: 0.9rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.owners__seg--a { background: var(--lime); color: var(--night); }
.owners__seg--b { background: var(--line-strong); color: var(--on); }

.owners__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 4rem); }

.owners__list li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line-strong);
}

.owners__list h3 {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--on);
}

.owners__num { font-size: 0.875rem; color: var(--on-soft); }

@media (max-width: 700px) { .owners__list { grid-template-columns: 1fr; } }

/* ------------------ 15. LAYOUT FAMILY D: THE RUNNING INDEX AND RUNNING LIST */

/* The catalogue index is a line of links, not a row of tiles. The rule under
   each one is the only chrome it gets, and it fills with the accent on hover. */
.contents {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.75rem, 4vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.contents__item {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.6rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.contents__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.contents__item:hover::after { transform: scaleX(1); }

.contents__letter {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-text);
}

.contents__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  letter-spacing: -0.03em;
  color: var(--on);
}

.contents__count { font-size: 0.8125rem; color: var(--on-faint); }

.catalogue { display: grid; }

/* A catalogue row. The photograph holds the left column. The produce names run
   as one continuous line of text with a small accent point between them, the
   way a market board is written, instead of eighty five little boxes. */
.cat-row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  /* the column gap is wide, the row gap is nil. The head rule and the closing
     note carry their own spacing, so a row gap here would only open a hole
     between the title and the first produce name. */
  gap: 0 clamp(1.5rem, 3.5vw, 3.5rem);
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  border-top: 1px solid var(--line);
}

.cat-row:last-child { border-bottom: 1px solid var(--line); }

.cat-row__shot {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;
  overflow: hidden;
}

.cat-row__shot img {
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-row:hover .cat-row__shot img { transform: scale(1.045); }

.cat-row__head {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

.cat-row__no {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--accent-text);
}

.cat-row__title { color: var(--on); }
.cat-row__count { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--on-faint); }
.cat-row__act { padding-top: 0.4rem; white-space: nowrap; }

/* The names set as a printed index, read down a column rather than across a
   paragraph. They used to run as one continuous line with a small accent point
   between them, and because the measure wrapped well before the edge of the
   column there was a point left stranded at the end of almost every line. A
   column of names strands nothing, and a buyer looking for one item finds it by
   scanning down instead of reading a sentence of thirty two words. */
.cat-items {
  grid-column: 2;
  columns: 4;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.1875rem);
  line-height: 1.9;
  color: var(--on-soft);
}

/* a name that wraps would read as two entries, so each one holds together */
.cat-items li { break-inside: avoid; }

.cat-row > .note { grid-column: 2; margin-top: 1.4rem; }

@media (max-width: 1080px) { .cat-items { columns: 3; } }

@media (max-width: 820px) {
  .cat-row { grid-template-columns: 1fr; gap: 1.5rem 0; }
  .cat-row__head, .cat-items, .cat-row > .note { grid-column: 1; }
  .cat-row__shot { grid-column: 1; grid-row: auto; }
  .cat-row__shot img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) { .cat-items { columns: 2; } }

@media (max-width: 480px) {
  .cat-row__head { grid-template-columns: auto minmax(0, 1fr); }
  .cat-row__act { grid-column: 1 / -1; }
}

/* ------------------------------------- 16. LAYOUT FAMILY E: THE FULL BLEED  */

.bleed { position: relative; background: var(--night); }

.bleed img {
  width: 100%;
  height: clamp(16rem, 38vw, 30rem);
  object-fit: cover;
  object-position: 50% 48%;
}

.bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Two stops, same idea as the hero. The vertical one puts a near solid floor
     under the caption, the angled one weights the left where the words are, and
     both let go before the right of the frame so the picture still reads. */
  background:
    linear-gradient(to top,
      rgba(6, 17, 10, 0.94) 0%,
      rgba(6, 17, 10, 0.60) 40%,
      rgba(6, 17, 10, 0.06) 78%),
    linear-gradient(100deg,
      rgba(6, 17, 10, 0.74) 0%,
      rgba(6, 17, 10, 0.20) 54%,
      rgba(6, 17, 10, 0) 78%);
  pointer-events: none;
}

.bleed__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.bleed__cap p {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.6rem;
}


.bleed__cap h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--on-dark);
  max-width: 22ch;
}

.shot { margin: 0; position: relative; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; }

.shot__cap {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-faint);
}

/* ----------------------------------------------- 17. THE SMALLER COMPONENTS */

/* Every one of these used to be a bordered tile inside a grid of bordered
   tiles. They are now columns under a single hairline, which is enough
   separation once the gaps are generous. */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }

.spec { display: grid; gap: 0.65rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--line-strong); }
.spec p { color: var(--on-soft); font-size: 0.9375rem; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }

.fact { display: grid; gap: 0.5rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--line-strong); }

.fact__value {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--on);
}

.fact__note { font-size: 0.8125rem; color: var(--on-faint); line-height: 1.45; }

.desks { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.75rem, 3.5vw, 3.5rem); }

.desk { display: grid; gap: 0.75rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--line-strong); }
.desk p { color: var(--on-soft); font-size: 0.9375rem; }

.desk__num {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.12;
  color: var(--on);
  text-decoration: none;
  transition: color 0.18s ease;
}
.desk__num:hover { color: var(--accent-text); }

.desk--pending .desk__num { color: var(--on-faint); font-size: 1.0625rem; letter-spacing: 0; }

.docset { display: grid; }

.docset__row {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr) auto;
  gap: 0.6rem 1.5rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line);
}
.docset__row:first-child { border-top: 1px solid var(--line); }

.docset__row dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
  color: var(--on);
}

.docset__row dd { margin: 0; color: var(--on-soft); font-size: 0.9375rem; }
.docset__when { text-align: right; white-space: nowrap; }

@media (max-width: 760px) {
  .docset__row { grid-template-columns: 1fr; }
  .docset__when { text-align: left; }
}

/* The marker is a short accent rule, never a drawn icon. */
.checks { display: grid; gap: 0.65rem; }

.checks li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.9375rem;
  color: var(--on-soft);
  line-height: 1.5;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--accent-text);
}

.status { display: grid; }

.status__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.status__row:first-child { border-top: 1px solid var(--line); }

.status__row dt { font-size: 0.9375rem; font-weight: 500; color: var(--on); }
.status__row dd { margin: 0; color: var(--on-soft); font-size: 0.9375rem; }

.status__row dd.status__tag {
  justify-self: end;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.625rem;
}
.status__row dd.status__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  transform: translateY(-0.1em);
}

.status__row--yes dd.status__tag::before { background: var(--accent-text); }

.status__row--no dd { color: var(--on-faint); }
.status__row--no dd.status__tag { color: var(--on-faint); }
.status__row--no dd.status__tag::before { background: none; box-shadow: inset 0 0 0 1px var(--on-faint); }

/* Three columns will not fit a phone, so the row folds to two. The placement is
   explicit because auto placement sent the tag to a third line of its own, where
   a lone right aligned CONFIRMED sat under the value with nothing to belong to.
   The tag answers the label, so it sits beside the label. */
@media (max-width: 620px) {
  .status__row { grid-template-columns: minmax(0, 1fr) auto; }
  .status__row dt { grid-column: 1; grid-row: 1; }
  .status__row dd.status__tag { grid-column: 2; grid-row: 1; }
  .status__row dd:not(.status__tag) { grid-column: 1 / -1; grid-row: 2; }
}

/* The numbered arguments, each one beside the document it rests on. */
.whys { display: grid; }

.why {
  display: grid;
  grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--line);
}
.why:last-child { border-bottom: 1px solid var(--line); }

.why__no {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--accent-text);
}

.why h2 { color: var(--on); margin-bottom: 0.7rem; }
.why p { color: var(--on-soft); }

.why__check { padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--line-strong); align-self: start; }
.why__ev { font-size: 0.8125rem; line-height: 1.5; color: var(--on-soft); margin-top: 0.45rem; }

.why__to {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.why__to:hover { opacity: 0.68; }

@media (max-width: 900px) {
  .why { grid-template-columns: auto minmax(0, 1fr); }
  .why__check { grid-column: 2; }
}

.reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: clamp(1.75rem, 4vw, 4rem); }

.reason { display: grid; gap: 0.75rem; align-content: start; padding-top: 1.15rem; border-top: 1px solid var(--line-strong); }
.reason h3 { color: var(--on); }
.reason p { color: var(--on-soft); }

/* ------------------------------------------------------------- 18. SPLITS   */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4.5rem); align-items: start; }
.split--rev > *:first-child { order: 2; }
.split--form { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

@media (max-width: 880px) {
  /* Stacked, the two halves are no longer read side by side but one after the
     other, and the column gap that separated them left to right is too small to
     separate them top to bottom. */
  .split, .split--form { grid-template-columns: 1fr; row-gap: clamp(2.5rem, 7vw, 3.5rem); }
  .split--rev > *:first-child { order: 0; }
}

/* ----------------------------------------------------------- 19. CTA BAND   */

.cta-band {
  --on: var(--on-dark);
  --on-soft: var(--on-dark-dim);
  --line: var(--rule-d);
  --accent-text: var(--lime);
  background: var(--night);
  color: var(--on-dark);
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}

.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
}

.cta-band h2 { color: var(--on-dark); margin-bottom: 0.65rem; }
.cta-band p { color: var(--on-dark-dim); max-width: 48ch; }

@media (max-width: 880px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- 20. FORMS    */

/* Underline fields, not boxed inputs. A boxed input is the most box shaped
   thing on a web page, and eight of them stacked makes the whole enquiry read
   as a grid of rectangles. The rule under the field does the same job. */
.form { display: grid; gap: 1.4rem; }

.field { display: grid; gap: 0.35rem; }

.field label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-faint);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--on);
  padding: 0.55rem 0 0.5rem;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color 0.18s ease;
}

.field textarea { min-height: 6.5rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--accent-text);
  padding-bottom: calc(0.5rem - 1px);
}

.field input::placeholder, .field textarea::placeholder { color: var(--on-faint); }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.4rem; }

.field__error { font-family: var(--mono); font-size: 0.75rem; color: var(--accent-text); min-height: 1em; }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: var(--accent-text); border-bottom-width: 2px; }

.form__fallback { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--on-faint); line-height: 1.5; }

/* --------------------------------------------------------- 21. PAGE HEAD    */

.page-head {
  --on: var(--on-dark);
  --on-soft: var(--on-dark-dim);
  --on-faint: var(--on-dark-faint);
  --line: var(--rule-d);
  --accent-text: var(--lime);
  background: var(--night);
  color: var(--on-dark);
  padding-block: clamp(2.75rem, 5.5vw, 5rem) clamp(2.75rem, 5vw, 4.5rem);
}

.page-head__inner { display: grid; gap: 1.2rem; max-width: 62rem; }

.crumbs { display: flex; align-items: center; gap: 0.55rem; }
.crumbs a { color: var(--on-dark-dim); text-decoration: none; }
.crumbs a:hover { color: var(--lime); }
.crumbs i { font-style: normal; color: var(--on-dark-faint); }
.crumbs span { color: var(--lime); }

.page-head .lede { color: var(--on-dark-dim); max-width: 58ch; }

/* ------------------------------------------------------------ 22. FOOTER    */

.site-foot {
  --on: var(--on-dark);
  --on-soft: var(--on-dark-dim);
  --line: var(--rule-d);
  --accent-text: var(--lime);
  background: var(--night-2);
  color: var(--on-dark);
  padding-block: clamp(3.25rem, 5vw, 4.75rem) 1.75rem;
}

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--rule-d);
}

.foot__brand img { width: 104px; height: 104px; object-fit: contain; margin-bottom: 1.25rem; }

.foot__legal {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--on-dark);
  margin-bottom: 0.65rem;
  max-width: 24ch;
}

.foot__addr { font-size: 0.875rem; line-height: 1.55; color: var(--on-dark-dim); }

.foot__col h3 { margin-bottom: 1.1rem; }
.foot__col ul { display: grid; gap: 0.65rem; }

.foot__col a {
  font-size: 0.875rem;
  color: var(--on-dark-dim);
  text-decoration: none;
  transition: color 0.18s ease;
}
.foot__col a:hover { color: var(--lime); }

.foot__col span { font-size: 0.8125rem; color: var(--on-dark-faint); }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--on-dark-faint);
}

@media (max-width: 900px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* On a phone the four columns had been dropping into one, which ran the footer
   to a full screen and a half of links a thumb had to scroll past to reach the
   licence numbers. The two short link lists sit beside each other instead. The
   address and the desks keep the full width: one has a building name in it and
   the other has telephone numbers, and neither survives a half column. */
@media (max-width: 520px) {
  .foot__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 1.25rem;
  }
  .foot__brand { grid-column: 1 / -1; }
  .foot__top > .foot__col:last-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- 23. WHATSAPP    */

.wa {
  position: fixed;
  right: clamp(0.85rem, 2vw, 1.75rem);
  bottom: clamp(0.85rem, 2vw, 1.75rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--lime);
  color: var(--night);
  padding: 0.8rem 1.05rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(6, 17, 10, 0.4);
  transition: transform 0.2s ease;
}
.wa:hover { transform: translateY(-2px); }

.wa__dot { width: 8px; height: 8px; background: var(--night); flex: none; }

/* The label goes and the dot grows, so what is left is a square. It has to
   stay a 44px square: at 0.95rem of padding it measured 40. */
@media (max-width: 560px) {
  .wa__label { display: none; }
  .wa { padding: 1.1rem; }
  .wa__dot { width: 10px; height: 10px; }
}

/* ------------------------------------------------- 23b. THE MOBILE PASS     */

/* Everything below is phone only. It is collected here rather than scattered
   through the file so that the small screen behaviour can be read in one go. */

/* No word may push the page sideways. Long produce names, licence numbers and
   email style strings all break rather than scroll the body. */
h1, h2, h3, h4, p, dd, dt, li, address, a { overflow-wrap: break-word; }

@media (max-width: 620px) {
  /* The full bleed photographs are shorter and their captions step down a size,
     so a two line heading still clears the picture. */
  .bleed img { height: 17rem; }
  .bleed__cap h2 { font-size: 1.3rem; max-width: none; }

  /* Headline sizes are already fluid, but the tightest tracking is a desktop
     setting. It is loosened a little so small type does not collide. */
  .display-xl { letter-spacing: -0.03em; }

  /* A thumb needs somewhere to land. Every row that is a link or carries one
     gets its vertical padding opened up. */
  .contents__item { padding-block: 0.8rem; }

  /* Wrapped onto a phone the four entries fell into a ragged two then one then
     one, each underlined only as far as its own name ran, so the rules ended at
     four different places down the page. One entry per line, each rule the full
     measure, which is how a table of contents is set anyway. */
  .contents { display: grid; gap: 0; }
  .contents__item { justify-content: start; }
  /* the line count goes to the right margin, where a contents page keeps it */
  .contents__count { margin-left: auto; }
  .foot__col ul { gap: 0.85rem; }
  .foot__col a { display: inline-block; padding-block: 0.15rem; }

  /* A field underlined rather than boxed still has to be big enough to hit. The
     desktop padding puts the row at about thirty three pixels, which is under
     what a thumb can be trusted to find. */
  .field input, .field select { padding-block: 0.8rem 0.7rem; }

  /* The ribbon is one line of plant, not two. */
  .ribbon__inner { padding-block: 0.6rem; }

  /* The licence number is the largest figure on the site and it was set for a
     wide column. Wrapping flex put the five figures into ragged rows, two then one then two,
     because the labels are different lengths. On a phone they go into a fixed
     pair of columns, with the licence number itself across the top where it is
     the first thing read. */
  .licence__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.5rem;
  }
  .licence__rows > div:first-child { grid-column: 1 / -1; }
  .licence__rows dd.licence__big { font-size: 2.1rem; }
  .validity__labels { font-size: 0.6875rem; }

  /* Section heads lose the desktop air. */
  .sec-head { margin-bottom: 1.75rem; }
}

/* Small type, and a thumb. Measured at 390px, the links set in mono came out
   between 18 and 27 pixels tall, against the 44 a fingertip needs. The ones
   below are either already the full measure of their column or stand alone with
   at least 39 pixels of clear space, so each is given its 44 pixels as an
   invisible overlay instead of as padding. Padding would move the composition:
   on .tlink and .why__to it would push the underline away from the text it
   belongs to, and on the footer telephone number it would separate the number
   from the country label directly beneath it. The overlay paints nothing. */
@media (max-width: 620px) {
  .crumbs a, .tlink, a.desk__num, .why__to, .foot__col--desks .tnum {
    position: relative;
  }
  .crumbs a::after, .tlink::after, a.desk__num::after, .why__to::after,
  .foot__col--desks .tnum::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  /* The one that is also too narrow, not just too short: a breadcrumb reading
     Home is 34 pixels wide, so its area reaches past the word on both sides.
     The separator beside it is a glyph, not a link, so there is nothing there
     to cover. */
  .crumbs a::after { left: -7px; right: -7px; }

  /* The footer number's area reaches 3px into the country label under it, and
     that one is wanted: the label says which desk the number belongs to, so a
     tap there placing that call is what a reader means. It is the opposite of
     the number set inside the sentence on the contact page, which keeps its
     natural size because the words around it are unrelated prose.

     The two link columns can afford the room, so they take it honestly. Each
     link becomes a row of its column at 44 pixels and the gap goes to nothing,
     which puts the rows edge to edge rather than 14 pixels apart with 27 pixels
     of target between them. The desks column keeps its gap: its items are a
     number, a break and a country label, and with no gap each label would run
     into the next number. */
  .foot__col:not(.foot__col--desks) ul { gap: 0; }
  .foot__col:not(.foot__col--desks) a {
    display: block;
    padding-block: 0.7rem;
  }
}

@media (max-width: 420px) {
  /* The two figures either side of the ownership bar stop fitting inside their
     own segments at this width, so the bar carries the split and the names
     carry the detail. */
  .owners__seg { padding-inline: 0.6rem; font-size: 0.8125rem; }

  /* The fixed WhatsApp button must never sit on top of a call to action. */
  .cta-band { padding-bottom: 5.5rem; }
}

/* The narrowest phones still in use, which is the 320 class and nothing else.
   The display clamp bottoms out at 2.65rem well above this width, so these
   screens get the same type as a 390 with 70px less measure to set it in. On
   the home headline that was the difference between three lines and four, the
   fourth being the word "to" by itself: the phrase "global farms" is kept whole
   by .nb, and "global farms to" came to 286px against a measure of 283. One
   step down and it fits, and every headline on the site sets the way it does on
   a wider phone. */
@media (max-width: 350px) {
  .display-xl { font-size: 2.45rem; letter-spacing: -0.025em; }
  .display-l { font-size: 1.95rem; }
}

/* ----------------------------------------------------- 24. THE 404 PAGE   */

/* The host serves this page for any address that does not exist, so its job is
   to say so plainly and then hand the visitor the whole site in one list. The
   rows are built the way the catalogue rows are built, a hairline above each
   and the number out in the margin, so a visitor who lands here by accident is
   still on the Agroha site and not on a server error page. */
.gone-nav { display: grid; }

.gone-nav a {
  display: grid;
  grid-template-columns: auto minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  align-items: baseline;
  padding-block: 1.15rem;
  padding-inline: 0.75rem;
  margin-inline: -0.75rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--on);
  transition: background 0.2s ease;
}

.gone-nav a:last-child { border-bottom: 1px solid var(--line); }
.gone-nav a:hover,
.gone-nav a:focus-visible { background: var(--stone); }

.gone-nav__no {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}

.gone-nav__name { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.gone-nav a:hover .gone-nav__name { color: var(--accent-text); }
.gone-nav__what { color: var(--on-soft); font-size: 0.9375rem; line-height: 1.5; }

/* Below this the name and the description stop fitting side by side, so the
   description drops under the name and keeps the number in the margin. */
@media (max-width: 680px) {
  .gone-nav a { grid-template-columns: auto minmax(0, 1fr); }
  .gone-nav__what { grid-column: 2; }
}

/* ------------------------------------------------------------- 25. MOTION   */

/* Driven by IntersectionObserver in assets/js/site.js. There is no scroll
   listener anywhere on this site. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal][data-shown] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------- 26. PRINT   */

@media print {
  .ribbon, .nav, .nav-toggle, .nav-scrim, .wa, .cta-band, .skip-link,
  .hero__bg, .bleed, .cat-row__shot, .shot { display: none !important; }

  body { background: #FFFFFF; color: #000000; font-size: 10.5pt; }

  .site-head, .hero, .page-head, .band, .band--dark, .band--panel, .licence, .site-foot {
    background: #FFFFFF !important;
    color: #000000 !important;
    --on: #000000;
    --on-soft: #333333;
    --on-faint: #555555;
    --line: #BBBBBB;
    --line-strong: #888888;
    --accent-text: #000000;
  }

  .brand__name, .display-xl, .display-l, .display-m, .display-s { color: #000000; }

  .owners__seg--a, .owners__seg--b {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #000000;
  }

  a { text-decoration: none; }

  .band { padding-block: 1.25rem; break-inside: avoid; }
  .cat-row, .why, .ledger__row { break-inside: avoid; }
}