/* ==========================================================================
   AURA INTERNATIONAL TRADING PLC. aurainternationaltrading.com
   Import and export house, Addis Ababa. This site is the EXPORT and IMPORT
   business. Construction belongs to the sister site, AGC. Do not mix them.

   The visual system is the fusion Eyoel picked out of the three previews:
     nav and hero        option 1, Harvest    (warm editorial, sun horizon)
     the corridor globe  option 2, Corridor   (dark instrument panel)
     the product wall    option 3, Grade      (uppercase display panels)

   TYPE DISCIPLINE. Three families, each with one job, never borrowed:
     Jost           brand voice. Nav, buttons, labels, h1, prose in panels.
     Archivo        display only. The product wall headings. Uppercase.
     Source Serif 4 long form reading only. The hero lede and body prose.
     IBM Plex Mono  scoped to the dark corridor section, data labels only.

   COLOUR DISCIPLINE. From the client's logo files, 25 September 2026.
   White is the surface and navy is the dark: navy replaces every black
   background, as the client asked. Yellow is the Aura star; it is a fill,
   a bar or a button face and never carries type on white (1.7:1). The one
   type accent on white is the blue from the sky gradient (7:1). The three
   gradients are the designer's own files, brand/src/gradient-*.svg:
     sky    yellow to blue    progress bar, hero horizon, globe routes
     field  yellow to lime    the green farm section only
     night  navy to olive     the footer only
   The 7 swoosh red belongs to the group logo and is not a site colour.

   NO EM DASHES anywhere in this file, in the markup, or in the copy.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --warm:#F6F7F9;
  --navy:#0C2043;
  --deep:var(--navy);
  --ink:var(--navy);
  --mute:#535D70;
  --hair:#E3E6EC;
  --gold:#EFC618;
  --sky:#025D8A;
  --sky-lt:#5DB7E3;
  --accent:var(--sky);
  --field:#2F6B3A;
  --sprout:#7FB069;
  --leaf:#E4F0D8;
  --grad:linear-gradient(100deg,#EFC618 0%,#025D8A 100%);
  --grad-field:linear-gradient(100deg,#EFC618 0%,#E9CC20 23%,#DADE37 59%,#C4F858 100%);
  --grad-night:linear-gradient(135deg,#0C2043 0%,#112341 30%,#202F3F 58%,#3A423A 82%,#656132 100%);
  --wrap:1280px;
  --sans:'Jost',system-ui,-apple-system,sans-serif;
  --disp:'Archivo','Jost',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:84px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17.5px;line-height:1.66;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1.1em}
h1,h2,h3,h4{font-family:var(--sans);margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.06}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.tab{font-variant-numeric:tabular-nums}
.label{font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin:0 0 18px}

/* the skewed index rule, carried over from the Grade preview */
.idx{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.2em;
  color:var(--accent);display:inline-flex;align-items:center;gap:10px}
.idx::after{content:"";width:34px;height:3px;background:var(--gold);transform:skewX(-22deg)}

/* placeholder marker. Deliberately loud so unconfirmed facts cannot ship. */
.chip{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.1em;
  color:#8A4B00;background:#FFF3E0;border:1px dashed #E9A54B;padding:3px 8px;
  display:inline-block;line-height:1.5;white-space:nowrap}
.chip-blk{display:block;white-space:normal;padding:16px 18px;font-size:12.5px;line-height:1.6;letter-spacing:.02em}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.02em;border:0;
  cursor:pointer;padding:15px 26px;color:var(--navy);background:var(--gold);display:inline-flex;
  align-items:center;gap:10px;min-height:48px;text-decoration:none;
  transition:transform .18s ease,filter .18s ease}
.btn:hover{background:var(--navy);color:#fff;transform:translateY(-1px)}
.on-dark .btn:hover{background:#fff;color:var(--navy)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{filter:brightness(.96)}
.btn-ghost{background:none;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:15px;
  border:0;cursor:pointer;padding:15px 2px;position:relative;min-height:48px;
  display:inline-flex;align-items:center;text-decoration:none}
.btn-ghost::after{content:"";position:absolute;left:2px;bottom:11px;height:2px;width:100%;
  background:var(--gold);transform:scaleX(1);transform-origin:left;transition:transform .22s ease}
.btn-ghost:hover::after{transform:scaleX(.42)}
.on-dark .btn-ghost{color:#fff}
.on-dark .idx{color:var(--sky-lt)}

/* ---------- nav ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left;background:var(--grad);z-index:120}
header.nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--hair)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 28px;height:76px;
  display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand img{height:46px;width:auto}
/* The lockup. "AURA" is four letters and the descriptor is twenty one, so the
   name is tracked open and the descriptor tracked tight to bring the two lines
   closer to the same measure. A descriptor wider than the name is normal in a
   lockup; a descriptor twice as wide is not. */
.bw1{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:.34em;line-height:1;
  display:block;text-indent:.34em}
.bw2{font-family:var(--sans);font-weight:400;font-size:7.8px;letter-spacing:.135em;line-height:1;
  color:var(--mute);margin-top:5px;display:block}
.nav-links{display:flex;gap:26px;margin-left:auto;font-family:var(--sans);font-size:15px;font-weight:400}
.nav-links a{text-decoration:none;position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.lang{display:flex;font-family:var(--sans);font-size:13px;font-weight:500;
  border:1px solid var(--hair);overflow:hidden;flex-shrink:0}
.lang a{padding:9px 12px;font:inherit;color:var(--mute);min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="true"]{background:var(--ink);color:#fff}
/* in the phone menu the switch is the last row, full size, never hidden */
#menu .lang{display:flex;margin-top:24px;font-size:16px}
#menu .lang a{font-size:16px;font-weight:500;padding:10px 20px}
.nav .btn{padding:12px 20px;min-height:44px;font-size:14px;flex-shrink:0}
.burger{display:none;border:0;background:none;cursor:pointer;padding:10px;margin-left:auto;
  min-height:44px;min-width:44px}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}

#menu{position:fixed;inset:0;background:#fff;z-index:110;display:none;
  flex-direction:column;padding:100px 28px 40px;gap:2px}
#menu.open{display:flex}
#menu a{font-family:var(--sans);font-size:1.9rem;font-weight:500;text-decoration:none;
  padding:14px 0;border-bottom:1px solid var(--hair)}
#menu .close{position:absolute;top:22px;right:22px;border:0;background:none;font-size:30px;
  cursor:pointer;line-height:1;padding:10px;min-height:44px;min-width:44px}

/* ==========================================================================
   HERO. Option 1, Harvest.
   ========================================================================== */
.hero{position:relative;padding:76px 0 0}
.hero-grid{max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:52px;align-items:center}
.hero h1{font-size:clamp(2.5rem,4.9vw,4.4rem);line-height:1.05;margin:0 0 26px}
.hero h1 .dot{color:var(--gold)}
.lede{font-family:var(--serif);font-size:20px;line-height:1.66;max-width:56ch;color:#27344D;margin:0 0 30px}
.cta-row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-bottom:38px}
.microfacts{display:flex;flex-wrap:wrap;gap:10px 0;border-top:1px solid var(--hair);padding-top:16px}
.microfacts div{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--mute);
  padding-right:22px;margin-right:22px;border-right:1px solid var(--hair)}
.microfacts div:last-child{border-right:0;margin-right:0;padding-right:0}

/* the photo bleeds to the right viewport edge, never past it */
.hero-photo{position:relative;height:min(76vh,660px);
  margin-right:calc(-1 * ((100vw - min(100vw, var(--wrap)))/2 + 28px))}
.hero-photo img{width:100%;height:100%;object-fit:cover}
/* THE HORIZON. The one gradient on the page above the fold: the sun sitting on
   the harvest line. It stays on the photograph. Only a hairline reaches into
   the gutter, so it never crosses the text column. */
.horizon{position:absolute;left:0;right:0;top:46%;height:6px;background:var(--grad);z-index:2}
.horizon::before{content:"";position:absolute;left:-56px;top:2.5px;width:56px;height:1px;background:var(--hair)}

/* destination ticker */
.ticker{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin-top:56px;overflow:hidden;background:var(--warm)}
.ticker-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker span{font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.16em;
  padding:14px 26px;color:var(--mute);white-space:nowrap}
.ticker span.o{color:var(--accent)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   01 THE CORRIDOR. Option 2. The one dark section on the page.
   ========================================================================== */
#corridor{background:var(--deep);color:#fff;padding:92px 0 84px}
#corridor h2{color:#fff;font-size:clamp(2rem,4vw,3.4rem)}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.corridor-note{font-family:var(--mono);font-size:12.5px;line-height:1.9;letter-spacing:.04em;
  color:rgba(255,255,255,.72);max-width:60ch;margin:0}
.g-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:44px;
  align-items:center;margin-top:44px}
/* A grid item defaults to min-width:auto, so a wide child stretches the track
   instead of scrolling inside it. body has overflow-x:hidden, so the blowout is
   silent: the diagram was simply clipped off the side with no way to reach it. */
.g-grid > *,.two > *,.pbody-grid > *{min-width:0}
.g-stage{position:relative;width:100%;height:min(70vh,600px)}
#gcanvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#gcanvas:active{cursor:grabbing}
.g-lbl{position:absolute;left:0;top:0;pointer-events:none;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;color:#fff;padding:2px 8px;background:rgba(12,32,67,.8);
  border-left:2px solid var(--sky-lt);white-space:nowrap;opacity:0;transition:opacity .2s ease}
.g-lbl-eth{color:var(--gold)}
.g-stage.is-narrow .g-lbl{font-size:9.5px;padding:2px 6px;letter-spacing:.06em}
/* Only on touch screens, where the drag is not obvious */
.g-swipe{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.45);text-align:center;margin:6px 0 0}
@media (hover:none){ .g-swipe{display:block} .no-globe .g-swipe{display:none} }
.no-globe .g-fall-hint{display:block}
.dest{list-style:none;padding:0;margin:0;border-bottom:1px solid #23395F}
.dest li{border-top:1px solid #23395F}
.dest button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  color:#fff;font:inherit;padding:16px 12px 16px 0;min-height:44px;
  transition:background .2s ease,padding .2s ease}
.dest button:hover,.dest button.on{background:#13294F;padding-left:14px}
.dest .dn{font-family:var(--sans);font-weight:500;font-size:16px;display:block}
.dest .dd{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.62);display:block;margin-top:4px}
.dest-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--gold);
  display:block;margin-top:16px}
/* The fallback is what most phone visitors actually see, so it gets weight
   rather than being treated as a degraded state. The frame is 660 wide to fit
   the longest market name, which is too wide to read squeezed onto a phone, so
   it sits in its own scroll container instead of shrinking to nothing. The page
   itself still never scrolls sideways. */
.g-fall-wrap{display:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
.g-fall-hint{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin:10px 0 0}
.g-fall-wrap::-webkit-scrollbar{height:3px}
.g-fall-wrap::-webkit-scrollbar-thumb{background:#2A4068}
.g-fallback{display:block;min-width:560px;width:100%;max-width:760px;height:auto;margin:0 auto}
/* The fallback is what most phone visitors actually see, so it gets weight
   rather than being treated as a degraded state. */
.g-fallback circle[stroke],.g-fallback ellipse,.g-fallback line{stroke:#2A4068}

/* ==========================================================================
   02 THE PRODUCT WALL. Option 3, Grade. Full bleed alternating panels.
   ========================================================================== */
.prod-head{padding-top:96px;padding-bottom:56px}
.display{font-family:var(--disp);font-variation-settings:'wdth' 112;font-weight:800;
  text-transform:uppercase;letter-spacing:-.025em;line-height:.94}
.prod-head h2{font-size:clamp(2rem,6.2vw,4.6rem)}
.prod-head .idx{margin-bottom:18px}
.prod-lede{font-family:var(--serif);font-size:19px;color:var(--mute);max-width:62ch;margin:22px 0 0}

.prod{display:grid;grid-template-columns:1fr 1fr;min-height:520px;align-items:stretch}
.prod .pc{padding:76px 0;display:flex;flex-direction:column;justify-content:center}
.prod .pc-in{max-width:600px;padding:0 48px;width:100%;margin-left:auto}
.prod.rev .pc-in{margin-left:0;margin-right:auto}
.prod .pi{overflow:hidden;min-height:380px}
.prod .pi img{width:100%;height:100%;object-fit:cover}
.prod.rev .pc{order:2}
.prod h3{font-size:clamp(1.8rem,3.6vw,3rem);margin:12px 0 2px}
.bot{font-family:var(--serif);font-style:italic;color:var(--mute);font-size:16px;margin-bottom:16px}
.prod p{font-size:17px}
.types{list-style:none;padding:0;margin:20px 0 26px}
.types li{border-top:1px solid var(--hair);padding:11px 0;display:flex;gap:16px;
  font-size:15.5px;line-height:1.5}
.types b{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.16em;
  color:var(--field);flex:0 0 92px}

/* Specification block. The client supplies grades on request, so this block
   states the terms of the conversation rather than pretending to be a spec
   sheet. No fixed purity or moisture figures anywhere on this site. */
.spec{border:1.5px solid var(--ink);border-top-width:6px;padding:20px 22px;max-width:470px}
.spec .gt{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.spec p{font-size:15.5px;color:var(--mute);margin:0 0 14px;line-height:1.6}
.spec ul{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.spec li{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--hair);padding:5px 10px}
.spec .btn-ghost{padding:8px 2px;min-height:40px;font-size:14px}

/* ==========================================================================
   CLOSING BAND
   ========================================================================== */
#cta{background:var(--warm);border-top:1px solid var(--hair);padding:92px 0}
#cta h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:20ch;margin-bottom:20px}
#cta .lede{margin-bottom:28px}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:start}
.contact-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.contact-list li{border-bottom:1px solid var(--hair);padding:16px 0;display:grid;
  grid-template-columns:118px 1fr;gap:16px;align-items:baseline}
.contact-list dt,.contact-list .k{font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.contact-list a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.contact-list a:hover{border-bottom-color:var(--accent)}

/* ---------- footer ---------- */
footer{background:var(--grad-night);color:rgba(255,255,255,.76);padding:64px 0 32px;font-size:15px}
footer h4{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 16px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px}
.foot-grid a{text-decoration:none;display:block;padding:5px 0;color:rgba(255,255,255,.76)}
.foot-grid a:hover{color:#fff}
.foot-logo{display:inline-block;padding:0!important;margin-bottom:18px}
.foot-brand img{height:44px;width:auto}
.foot-brand p{font-size:15px;line-height:1.7;max-width:34ch}
.foot-bot{border-top:1px solid rgba(255,255,255,.14);margin-top:48px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:13px;color:rgba(255,255,255,.5)}

/* ==========================================================================
   QUOTE MODAL. Errors are a blocking dialog with an OK button, never a toast.
   ========================================================================== */
.ovl{position:fixed;inset:0;background:rgba(12,32,67,.62);z-index:130;
  display:none;align-items:center;justify-content:center;padding:24px}
.ovl.open{display:flex}
.modal{background:#fff;max-width:640px;width:100%;max-height:92vh;overflow:auto;
  padding:34px 34px 30px;position:relative}
.modal h3{font-size:1.7rem;margin-bottom:10px}
.modal .close{position:absolute;top:12px;right:14px;border:0;background:none;font-size:28px;
  cursor:pointer;line-height:1;padding:10px;min-height:44px;min-width:44px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 22px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld.full{grid-column:1 / -1}
.fld label{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:16px;font-family:var(--sans);
  border:1px solid var(--hair);padding:12px 13px;background:#fff;color:var(--ink);
  min-height:48px;border-radius:0}
.fld textarea{min-height:88px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink)}

/* ==========================================================================
   MOTION. Every reveal is a progressive enhancement. Without JS, or with
   reduced motion, everything is already in its final position.
   ========================================================================== */
[data-rise]{opacity:0;transform:translateY(22px)}
.js-ready [data-rise]{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
[data-rise].in{opacity:1;transform:none}

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

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Home made the nav eight items long; this band is where it would otherwise crowd the lockup */
@media (max-width:1320px) and (min-width:1101px){
  .nav-in{gap:22px}
  .nav-links{gap:18px}
  .brand img{height:40px}
}
@media (max-width:1100px){
  .nav-links,.nav .btn,.lang{display:none}
  .burger{display:block}
  .hero-grid,.g-grid,.cta-grid{grid-template-columns:1fr;gap:34px}
  .hero-photo{height:46vh;min-height:280px;margin-right:-28px;margin-left:-28px}
  /* the crop, not the sky: the frame is much shorter here than on desktop */
  .hero-photo img{object-position:center 72%}
  .horizon{top:38%}
  /* Phones and tablets: no market list (the ticker names every market), the
     globe is the section, edge to edge. Eyoel, 26 September 2026. */
  .g-grid{margin-top:20px}
  .g-list{display:none}
  .g-stage{height:min(96vw,600px);margin:0 -28px;width:auto}
  .prod{grid-template-columns:1fr}
  .prod.rev .pc{order:0}
  .prod .pc{padding:52px 0}
  .prod .pc-in{padding:0 28px;max-width:none;margin:0}
  .prod .pi{min-height:300px;height:56vw;max-height:420px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .wrap,.nav-in,.hero-grid{padding-left:20px;padding-right:20px}
  .hero{padding-top:44px}
  .hero-photo{margin-left:-20px;margin-right:-20px}
  .prod .pc-in{padding:0 20px}
  .prod-head{padding-top:64px;padding-bottom:36px}
  #corridor{padding:56px 0 40px}
  .g-stage{margin:0 -20px;height:min(104vw,520px)}
  #cta{padding:64px 0}
  .fgrid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .contact-list li{grid-template-columns:1fr;gap:4px}
  .modal{padding:28px 20px 24px}
  .brand img{height:38px}
}

/* ==========================================================================
   INTERIOR PAGES
   Added with the full site, 2026-08-26. Same system, no new colours, no new
   type families. Section chrome is shared so an interior page never looks
   like a different website from the homepage.
   ========================================================================== */

/* Interior page intro. The content column starts at the same left gutter as
   the logo, rather than being centred inside the wrap, which read as a
   misalignment against the nav on every page that used it. */
.page-intro{padding-top:64px}
.page-intro h1{max-width:17ch}
.page-intro .lede{max-width:60ch}

.ilink{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(2,93,138,.35)}
.ilink:hover{border-bottom-color:var(--accent)}

/* breadcrumb */
.crumb{font-family:var(--sans);font-size:13px;color:var(--mute);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb a{text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{border-bottom-color:var(--mute)}
.crumb span[aria-current]{color:var(--ink)}

/* interior page head */
.phead{padding:34px 0 0}
.phead-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:52px;align-items:center}
.phead h1{font-size:clamp(2.3rem,5.4vw,4.2rem);margin:6px 0 2px}
.phead-img{height:min(56vh,470px);overflow:hidden}
.phead-img img{width:100%;height:100%;object-fit:cover}

.pbody{padding:76px 0 40px}
.pbody-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start}
.pbody h2{margin-top:0;margin-bottom:12px}
.spec-sticky{position:sticky;top:100px;max-width:none;background:var(--warm)}

/* tick list, the one icon list on the site */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{border-top:1px solid var(--hair);padding:12px 0 12px 30px;position:relative;
  font-size:16.5px}
.ticks li::before{content:"";position:absolute;left:0;top:19px;width:14px;height:3px;
  background:var(--gold);transform:skewX(-22deg)}
.ticks li:last-child{border-bottom:1px solid var(--hair)}

/* related products */
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rel-card{text-decoration:none;display:block}
.rel-card img{width:100%;height:210px;object-fit:cover;transition:transform .3s ease}
.rel-card:hover img{transform:scale(1.03)}
.rel-card .rel-name{font-family:var(--disp);font-variation-settings:'wdth' 112;font-weight:700;
  text-transform:uppercase;font-size:19px;letter-spacing:-.015em;display:block;margin-top:14px}

/* generic interior section chrome */
.sec{padding:88px 0}
.sec-alt{background:var(--warm)}
.sec h2{font-size:clamp(1.8rem,3.4vw,2.9rem)}
.sec-lede{font-family:var(--serif);font-size:19px;color:var(--mute);max-width:62ch;margin:20px 0 0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}

/* numbered stage rail. Native scroll snap, so it swipes on touch by default. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);gap:0;
  overflow-x:auto;scroll-snap-type:x mandatory;margin-top:44px;
  border-top:1.5px solid var(--ink);-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--hair)}
.stage{scroll-snap-align:start;padding:26px 26px 32px;border-right:1px solid var(--hair)}
.stage:last-child{border-right:0}
.stage .no{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.2em;
  color:var(--accent)}
.stage h3{font-family:var(--sans);font-size:19px;font-weight:600;margin:10px 0 8px;
  letter-spacing:-.01em;text-transform:none}
.stage p{font-size:15.5px;color:var(--mute);margin:0}
.rail-hint{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-top:14px}

/* document set */
.docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;
  list-style:none;padding:0;margin:28px 0 0}
.docs li{border-top:1px solid var(--hair);padding:16px 0}
.docs b{font-family:var(--sans);font-weight:600;font-size:16px;display:block;margin-bottom:4px}
.docs span{font-size:15px;color:var(--mute);line-height:1.6}

/* the green section. Farmers and sourcing, the one place green leads. */
.farm{background:var(--leaf);padding:88px 0;position:relative}
/* the field gradient, yellow into lime, is the farm section's own and appears nowhere else */
.farm::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--grad-field)}
.farm .idx::after{background:var(--grad-field)}
.farm h2{color:var(--field)}
.farm .lede{color:#2A3A2C}

/* values and mission cards */
.vals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:44px;
  border-top:1.5px solid var(--ink)}
.vals div{padding:28px 32px 32px;border-bottom:1px solid var(--hair)}
.vals div:nth-child(odd){border-right:1px solid var(--hair)}
.vals h3{font-family:var(--sans);font-size:19px;font-weight:600;text-transform:none;
  letter-spacing:-.01em;margin-bottom:8px}
.vals p{font-size:16px;color:var(--mute);margin:0}

/* pull quote, used for mission and vision */
.pull{border-left:6px solid var(--gold);padding:6px 0 6px 26px;margin:0}
.pull p{font-family:var(--serif);font-size:clamp(19px,2.1vw,24px);line-height:1.55;
  color:var(--ink);margin:0 0 10px}
.pull cite{font-family:var(--sans);font-style:normal;font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* contact page form, the modal form inline */
.form-card{background:var(--warm);padding:36px 36px 32px;border-top:6px solid var(--ink)}
.form-card h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:8px}

/* legal pages */
.legal{padding-top:56px;padding-bottom:96px}
.legal > *{max-width:760px}
.legal h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:44px 0 12px}
.legal h2:first-of-type{margin-top:28px}
.legal p,.legal li{font-family:var(--serif);font-size:17px;line-height:1.75}
.legal ul{padding-left:20px}
.legal li{margin-bottom:8px}
.legal .updated{font-family:var(--sans);font-size:13px;color:var(--mute);letter-spacing:.02em}

@media (max-width:1100px){
  .pbody-grid,.two,.docs,.vals{grid-template-columns:1fr;gap:36px}
  .vals div:nth-child(odd){border-right:0}
  .spec-sticky{position:static}
  .phead-grid{grid-template-columns:1fr;gap:32px}
  .phead-img{height:44vh;min-height:260px;margin:0 -28px}
  .rel-grid{grid-template-columns:1fr 1fr;gap:18px}
  .rel-card img{height:170px}
  .sec{padding:64px 0}
  .form-card{padding:28px 22px 26px}
}
@media (max-width:640px){
  .phead-img{margin:0 -20px}
  .rel-grid{grid-template-columns:1fr}
  .rel-card img{height:200px}
  .docs{gap:0}
}

/* ==========================================================================
   AMHARIC. Ethiopic has no capitals and does not want tracking: letter spacing
   pulls the syllable forms apart and makes them harder to read, and the
   uppercase transform does nothing. Its forms also stand taller than Latin,
   so the tight display leading that suits Archivo capitals clips here.
   ========================================================================== */
:lang(am) *{letter-spacing:0!important;text-transform:none!important}
:lang(am) h1,:lang(am) h2,:lang(am) h3{line-height:1.3}
:lang(am) .lede,:lang(am) p{line-height:1.8}
:lang(am) .lang a[lang="en"]{letter-spacing:.02em!important}
/* the 11 and 12px uppercase labels read as specks in Ethiopic; lift them */
:lang(am) .idx,:lang(am) .label,:lang(am) .stage .no,:lang(am) footer h4,
:lang(am) .spec .gt,:lang(am) .rail-hint{font-size:13.5px}
:lang(am) .nav-links{font-size:15.5px}
:lang(am) .microfacts div{font-size:14px}