/* =======================================================
Ghady Technologies, public website
Page styles. Brand tokens live in tokens.css (single
source of truth from the Brand Pack). This file only
adds page-level layout on top of those tokens.
Design language adapted from brand-pack Website Landing.
======================================================= */
html,body{overflow-x:hidden}
body{background:var(--paper);color:var(--ink)}
/* page-level token additions (brand tokens live in tokens.css) */
:root{--cal-avail:#e3d3a8}
.brand{text-decoration:none;display:inline-flex}
.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
/* visually-hidden (a11y) */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* skip link (hidden above the viewport, not off to the side — RTL-safe) */
.skip{position:absolute;top:-60px;inset-inline-start:0;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 4px 0;font-family:'IBM Plex Mono',monospace;font-size:12px;transition:top .15s}
.skip:focus{top:0}
/* visible focus rings everywhere (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:2px solid var(--harvest-d);outline-offset:2px;border-radius:2px;
}
/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
}
/* =======================================================
NAV (sticky, transparent over hero -> solid on scroll)
======================================================= */
.nav{position:sticky;top:0;z-index:50;transition:background .2s,border-color .2s,box-shadow .2s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(250,248,244,.85);backdrop-filter:saturate(1.2) blur(14px);border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(14,14,12,.03)}
.nav .row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:48px;padding:16px 0}
.nav .links{display:flex;gap:30px;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.nav .links a{color:var(--graphite);text-decoration:none;transition:color .15s;padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap}
.nav .links a:hover{color:var(--harvest-d)}
.nav .links a.active{color:var(--ink);border-bottom-color:var(--harvest)}
.nav .cta{display:flex;gap:12px;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.nav .cta .locale{color:var(--mute)}
.nav .cta .locale b{color:var(--ink);font-weight:500;margin:0 2px}
.nav .burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav .burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
/* mobile overlay menu */
.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--paper);display:none;flex-direction:column;padding:24px 24px 40px}
.mobile-menu.open{display:flex}
.mobile-menu .mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px}
.mobile-menu .close{background:none;border:0;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.mobile-menu a.ml{font-family:'Inter Tight',sans-serif;font-weight:400;font-size:32px;letter-spacing:-.025em;color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}
.mobile-menu .mcta{margin-top:auto;padding-top:32px}
.mobile-menu .mcta .btn{width:100%;justify-content:center}
/* =======================================================
HERO
======================================================= */
.hero-sec{padding:64px 0 56px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero-sec .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:end}
.hero-sec .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:32px;display:flex;align-items:center;gap:12px}
.hero-sec h1{font-weight:300;font-size:clamp(2.8rem,7vw,7.2rem);line-height:.9;letter-spacing:-.04em;color:var(--ink);margin-bottom:28px}
.hero-sec h1 em{font-style:italic;font-weight:400;color:var(--harvest)}
.hero-sec .lead{font-size:clamp(1rem,1.6vw,1.375rem);line-height:1.5;color:#33322d;max-width:560px;margin-bottom:36px}
.hero-sec .actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-sec .mono-note{margin-top:64px;padding-top:28px;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);gap:28px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--mute);line-height:1.6}
.hero-sec .mono-note .label{letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:6px;display:block}
/* tonal landscape panel — finished look with no photo required */
.landscape{aspect-ratio:4/5;border-radius:3px;overflow:hidden;position:relative;
background:linear-gradient(180deg,rgba(14,14,12,0) 0%,rgba(14,14,12,.55) 100%),
linear-gradient(180deg,#dccb9e 0%,#c9a15b 38%,#a4823e 64%,#5b4720 100%);}
.landscape::after{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse 140% 35% at 50% 36%,rgba(250,248,244,.25),transparent 60%),
radial-gradient(circle at 72% 34%,rgba(255,236,196,.6),transparent 30%);
mix-blend-mode:soft-light}
.landscape .horizon{position:absolute;left:0;right:0;top:38%;height:1px;background:rgba(250,248,244,.4)}
.landscape .field{position:absolute;left:-10%;right:-10%;bottom:0;top:38%;
background:repeating-linear-gradient(96deg,transparent 0 14px,rgba(14,14,12,.07) 14px 15px),
repeating-linear-gradient(84deg,transparent 0 22px,rgba(14,14,12,.05) 22px 23px);
transform:perspective(900px) rotateX(45deg);transform-origin:center top}
.landscape .cap{position:absolute;left:24px;right:24px;bottom:24px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,248,244,.75);display:flex;justify-content:space-between;align-items:flex-end}
.landscape .cap b{color:var(--paper);font-weight:500;display:block;font-size:13px;letter-spacing:-.01em;text-transform:none;margin-bottom:4px;font-family:'Inter Tight',sans-serif}
.landscape .sunmark{position:absolute;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:flex-start;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,248,244,.6)}
/* =======================================================
TICKER (product prices)
======================================================= */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:16px 0;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--graphite)}
.ticker .track{display:flex;gap:52px;white-space:nowrap;animation:tck 60s linear infinite;width:max-content}
.ticker:hover .track{animation-play-state:paused}
.ticker .t{display:flex;align-items:center;gap:12px;color:#c9c5ba}
.ticker .t b{color:var(--paper);font-weight:500}
.ticker .t .d{color:var(--harvest);font-weight:500}
.ticker .t .n{color:var(--paper);font-weight:500;letter-spacing:-.01em}
.ticker .t .u{color:#8a857a;letter-spacing:.04em}
.ticker .t .st{font-weight:500;letter-spacing:.06em}
.ticker .t .st.now{color:#a3c184}
.ticker .t .st.soon{color:var(--harvest)}
.ticker .t .st.later{color:#8a857a}
@keyframes tck{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none;flex-wrap:wrap;white-space:normal;width:auto;justify-content:center;gap:24px 40px}}
/* =======================================================
TRUST STRIP (repurposed metrics band)
======================================================= */
.trust{padding:88px 0 80px;border-bottom:1px solid var(--line);background:var(--oat)}
.trust h2{font-weight:300;font-size:clamp(2rem,5vw,4.5rem);line-height:.95;letter-spacing:-.035em;max-width:960px;margin-bottom:56px}
.trust h2 em{font-style:italic;font-weight:400;color:var(--soil)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
.trust-grid .m{padding:32px 24px 28px 0;border-right:1px solid rgba(14,14,12,.18)}
.trust-grid .m:last-child{border-right:0}
.trust-grid .m:not(:first-child){padding-left:32px}
.trust-grid .label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite);font-weight:500;margin-bottom:20px}
.trust-grid .big{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:clamp(2.6rem,5vw,4.5rem);letter-spacing:-.025em;line-height:.88;color:var(--ink)}
.trust-grid .big .u{font-size:.4em;color:var(--graphite);margin-left:3px;letter-spacing:0;font-weight:400}
.trust-grid .sub{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--soil);margin-top:14px;line-height:1.5}
/* =======================================================
SECTION HEADER (shared, numbered)
======================================================= */
.sec{padding:clamp(72px,10vw,128px) 0;border-bottom:1px solid var(--line)}
.sec .hd{display:grid;grid-template-columns:200px 1fr 360px;gap:56px;align-items:end;margin-bottom:64px}
.sec .hd .num{font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:80px;color:var(--harvest);line-height:.85;letter-spacing:-.04em}
.sec .hd .num span{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.22em;text-transform:uppercase;margin-top:12px;font-weight:500}
.sec .hd h2{font-weight:400;font-size:clamp(1.9rem,4.5vw,4rem);line-height:.99;letter-spacing:-.032em}
.sec .hd h2 em{font-style:italic;font-weight:300;color:var(--soil)}
.sec .hd .note{font-size:15px;line-height:1.55;color:#33322d;padding-bottom:8px}
.eyebrow-line{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:20px}
/* =======================================================
PRODUCTS
======================================================= */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pcard{background:var(--pure);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,border-color .18s}
.pcard:hover{border-color:var(--ink);transform:translateY(-3px)}
.pcard .ph{aspect-ratio:4/3;overflow:hidden;background:var(--oat)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .body{padding:22px 26px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard .cat{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--harvest);font-weight:500}
.pcard h3{font-weight:500;font-size:24px;letter-spacing:-.02em;line-height:1.05;margin-top:-2px}
.pcard .var{font-family:'Inter Tight',sans-serif;font-style:italic;font-size:13px;color:var(--soil);margin-top:-4px}
.pcard p{font-size:14px;line-height:1.55;color:#33322d;flex:1}
.pcard .pmeta{display:flex;justify-content:space-between;gap:10px;padding-top:12px;margin-top:2px;border-top:1px dashed var(--line);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pcard .pmeta span:first-child{color:var(--ink);font-weight:500}
.pcard .season{align-self:flex-start;margin-top:4px}
/* also in the book */
.also{margin-top:36px;padding-top:28px;border-top:1px solid var(--line);display:flex;gap:28px;align-items:baseline;flex-wrap:wrap}
.also-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:500;white-space:nowrap}
.also-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:100px;background:var(--pure);font-family:'Inter Tight',sans-serif;font-size:14px;color:var(--ink)}
.chip i{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--mute)}
.chip.muted{background:transparent;color:var(--mute);border-style:dashed}
/* tonal placeholder card (e.g. "more on request") */
.pcard.tonal .ph{display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,var(--oat),#d8c79b 60%,var(--soil));}
.pcard.tonal .ph span{font-family:'Inter Tight',sans-serif;font-weight:300;font-size:30px;letter-spacing:-.02em;color:var(--ink);opacity:.6}
.season{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:100px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;background:#e9f0e4;color:var(--success)}
.season::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
/* =======================================================
SEASONALITY CALENDAR
======================================================= */
.season-sec{background:var(--paper)}
.cal{border-top:1px solid var(--ink)}
.cal-row{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cal-row.head{border-bottom:1px solid var(--line)}
.cal-row .name{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:16px;letter-spacing:-.01em}
.cal-row.head .name{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:500}
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.months .mh{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:center}
.cell{height:28px;border-radius:3px;background:var(--line);display:flex;align-items:center;justify-content:center}
.cell.avail{background:var(--cal-avail)}
.cell.peak{background:var(--harvest)}
.cell .mlabel{display:none}/* month letters: mobile-only (desktop uses header row) */
.cal-legend{display:flex;gap:24px;align-items:center;margin-top:28px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);flex-wrap:wrap}
.cal-legend .sw{display:inline-flex;align-items:center;gap:8px}
.cal-legend .sw i{width:14px;height:14px;border-radius:3px;display:inline-block}
.cal-legend .legnote{color:var(--soil)}
@media (min-width:721px){.cal-legend .legnote{margin-left:auto}}
.cal-cta{margin-top:40px;display:flex;justify-content:center}
/* =======================================================
HOW WE WORK (process steps)
======================================================= */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{background:var(--pure);border:1px solid var(--line);border-radius:4px;padding:34px 32px;display:flex;flex-direction:column;gap:14px;transition:border-color .18s,transform .18s}
.step:hover{border-color:var(--ink);transform:translateY(-3px)}
.step .n{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--harvest);font-weight:500}
.step h3{font-weight:500;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.step p{font-size:14.5px;line-height:1.6;color:#33322d}
/* =======================================================
MARKETS MAP (repurposed corridors, dark)
======================================================= */
.markets{padding:clamp(72px,10vw,128px) 0;border-bottom:1px solid var(--line);background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.markets::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,var(--graphite) 1px,transparent 0);background-size:56px 56px;opacity:.5;pointer-events:none}
.markets .wrap{position:relative;z-index:2}
.markets .hd .num span{color:#8a857a}
.markets .hd h2{color:var(--paper)}
.markets .hd h2 em{color:var(--harvest)}
.markets .hd .note{color:#c9c5ba}
.market-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:48px}
.map-panel{background:var(--graphite);border:1px solid #3a3730;border-radius:3px;padding:36px;position:relative;min-height:440px;overflow:hidden}
.map-panel .map-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8a857a}
.map-panel .map-head b{color:var(--paper);font-weight:500}
.map-svg{width:100%;height:auto;display:block}
.market-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--graphite)}
.market-list .lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8a857a;margin-bottom:12px}
.market-list .r{display:grid;grid-template-columns:18px 1fr auto;gap:18px;padding:18px 0;border-bottom:1px solid var(--graphite);align-items:center}
.market-list .sw{width:10px;height:10px;border-radius:1px}
.market-list .cm{font-size:15px;letter-spacing:-.01em;color:var(--paper)}
.market-list .cm span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a857a;margin-top:4px}
.market-list .vol{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--paper);letter-spacing:.02em;text-align:right}
.market-list .vol span{display:block;font-size:10px;color:#8a857a;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
/* =======================================================
STANDARDS / CERTIFICATIONS
======================================================= */
.standards .cert-chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.cert-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:100px;background:var(--pure);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.cert-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--harvest)}
.standards .cert-body{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:#33322d;max-width:760px}
.standards .verify-note{margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--warn)}
/* =======================================================
ABOUT / MODEL
======================================================= */
.model-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:64px}
.mcard{border:1px solid var(--line);border-radius:4px;padding:38px 36px;background:var(--pure)}
.mcard .tagm{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--harvest);font-weight:500;margin-bottom:18px}
.mcard h3{font-weight:500;font-size:28px;letter-spacing:-.022em;line-height:1.1;margin-bottom:16px}
.mcard h3 em{font-style:italic;font-weight:400;color:var(--soil)}
.mcard p{font-size:15px;line-height:1.65;color:#33322d}
.egypt-thesis{font-family:'Inter Tight',sans-serif;font-weight:300;font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink);max-width:920px}
.egypt-thesis em{font-style:italic;font-weight:400;color:var(--soil)}
/* founder letter */
.letter{padding:clamp(72px,10vw,128px) 0;background:var(--oat);border-bottom:1px solid var(--line)}
.letter .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:start}
.letter .side{position:sticky;top:96px}
.letter .side .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soil);margin-bottom:16px;font-weight:500}
.letter .side h2{font-weight:400;font-size:clamp(2rem,4vw,4rem);line-height:1;letter-spacing:-.032em;color:var(--ink);margin-bottom:24px}
.letter .side h2 em{font-style:italic;font-weight:300;color:var(--soil)}
.letter .side .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--graphite);line-height:1.7;margin-top:24px}
.letter .body p{font-family:'IBM Plex Sans',sans-serif;font-size:17px;line-height:1.65;color:#2a2924;margin-bottom:20px;max-width:620px}
.letter .body p.drop::first-letter{font-family:'Inter Tight',sans-serif;font-weight:300;font-size:72px;float:left;line-height:.85;padding:6px 12px 0 0;color:var(--soil)}
.letter .body .signoff{font-family:'Inter Tight',sans-serif;font-weight:300;font-style:italic;font-size:22px;color:var(--soil);margin-top:32px}
.letter .body .sig{margin-top:24px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--graphite);line-height:1.7}
.letter .body .sig b{color:var(--ink);font-weight:500;display:block;font-family:'Inter Tight',sans-serif;font-size:18px;letter-spacing:-.01em;text-transform:none;margin-bottom:4px}
/* =======================================================
CONTACT / REQUEST A QUOTE
======================================================= */
.contact{padding:clamp(72px,10vw,128px) 0 0;background:var(--ink);color:var(--paper)}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-bottom:80px}
.contact .intro .eyebrow-line{color:var(--harvest)}
.contact h2{font-weight:300;font-size:clamp(2.4rem,6vw,5.5rem);line-height:.92;letter-spacing:-.04em;color:var(--paper);margin-bottom:28px}
.contact h2 em{font-style:italic;font-weight:400;color:var(--harvest)}
.contact .intro p{color:#c9c5ba;font-size:17px;line-height:1.6;max-width:460px;margin-bottom:36px}
.contact .lines{display:flex;flex-direction:column;gap:0;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;color:#8a857a}
.contact .lines .r{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--graphite);padding:12px 0}
.contact .lines .r b{color:var(--paper);font-weight:400;letter-spacing:.02em}
/* form */
.qform{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.qform .field{display:flex;flex-direction:column;gap:7px}
.qform .field.full{grid-column:1 / -1}
.qform label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8a857a}
.qform input,.qform textarea{background:#1a1915;border:1px solid var(--graphite);border-radius:3px;padding:13px 14px;color:var(--paper);font-family:'Inter Tight',sans-serif;font-size:15px;transition:border-color .15s}
.qform input:focus,.qform textarea:focus{border-color:var(--harvest);outline:none}
.qform textarea{resize:vertical;min-height:96px}
.qform .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.qform .submit-row{grid-column:1 / -1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.qform .note{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:#8a857a}
.form-status{grid-column:1 / -1;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;padding:14px 16px;border-radius:3px;display:none}
.form-status.show{display:block}
.form-status.ok{background:#1e2a17;color:#a3c184;border:1px solid var(--success)}
.form-status.err{background:#2a1714;color:#d78a7a;border:1px solid var(--error)}
/* =======================================================
FOOTER
======================================================= */
footer.foot{background:var(--ink);border-top:1px solid var(--graphite);padding:48px 0 44px;color:#8a857a;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em}
footer.foot .frow{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
footer.foot .wmwrap{display:flex;flex-direction:column;gap:8px}
footer.foot .wmwrap .mission{color:#8a857a;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
footer.foot .links{display:flex;gap:22px;text-transform:uppercase;letter-spacing:.2em;font-size:10px;justify-content:center;flex-wrap:wrap}
footer.foot .links a{color:#8a857a;text-decoration:none;transition:color .15s}
footer.foot .links a:hover{color:var(--paper)}
footer.foot .copy{color:#8a857a;font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-align:right}
footer.foot img.fwm{height:22px;width:auto;display:block}
/* =======================================================
RESPONSIVE
======================================================= */
@media (max-width:1024px){
.wrap{padding:0 32px}
.hero-sec .grid{grid-template-columns:1fr;gap:40px}
.hero-sec .landscape{aspect-ratio:16/10;max-height:380px}
.sec .hd,.markets .hd{grid-template-columns:1fr;gap:20px}
.sec .hd .num,.markets .hd .num{font-size:60px}
.products-grid,.steps-grid{grid-template-columns:repeat(2,1fr)}
.trust-grid{grid-template-columns:1fr 1fr}
.trust-grid .m:nth-child(2){border-right:0}
.trust-grid .m:nth-child(3){padding-left:0}
.trust-grid .m:nth-child(n+3){border-top:1px solid rgba(14,14,12,.18);padding-top:24px}
.market-layout{grid-template-columns:1fr;gap:32px}
.letter .grid{grid-template-columns:1fr;gap:40px}
.letter .side{position:static}
.contact .grid{grid-template-columns:1fr;gap:48px}
.model-cards{grid-template-columns:1fr}
}
@media (max-width:720px){
.wrap{padding:0 20px}
.nav .links,.nav .cta .locale,.nav .cta .btn{display:none}
.nav .burger{display:flex}
.nav .cta .btn.nav-quote{display:inline-flex}
.hero-sec .mono-note{grid-template-columns:1fr 1fr;gap:20px}
.products-grid,.steps-grid{grid-template-columns:1fr}
.qform{grid-template-columns:1fr}
/* seasonality -> stacked per-product strips */
.cal-row{grid-template-columns:1fr;gap:10px;padding:18px 0}
.cal-row.head{display:none}
.cal-row .name{font-size:15px}
.months .mh{display:none}
.months{gap:4px}
.cell{height:30px}
.cell .mlabel{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--mute)}
.cell.peak .mlabel{color:var(--ink)}
.cell.avail .mlabel{color:var(--graphite)}
footer.foot .frow{grid-template-columns:1fr;gap:24px;text-align:center}
footer.foot .copy{text-align:center}
footer.foot .links{justify-content:center}
}
/* =======================================================
HERO PHOTO (image inside the .landscape panel)
======================================================= */
.landscape .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.landscape .scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(14,14,12,.32) 0%,rgba(14,14,12,.18) 42%,rgba(14,14,12,.82) 100%)}
.landscape .sunmark,.landscape .cap{z-index:2}
/* when a real photo is present, drop the furrow glow/lines */
.landscape:has(img.bg)::after{display:none}
.landscape:has(img.bg) .horizon,.landscape:has(img.bg) .field{display:none}
/* product cards: volume (first span) removed from view, markets (second) kept */
.pcard .pmeta span:first-child{display:none}
.pcard .pmeta span:last-child{color:var(--ink);font-weight:500}
/* =======================================================
ARABIC / RTL
======================================================= */
[dir="rtl"],[dir="rtl"] body{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif}
/* body carries an explicit family in tokens.css, so target it directly */
html[dir="rtl"] body{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif}
/* keep the Latin wordmark and its dot in order */
[dir="rtl"] .wm{font-family:'Inter Tight',sans-serif;direction:ltr}
/* Arabic has no case and breaks under wide tracking: neutralise mono-label styling */
[dir="rtl"] .nav .links,[dir="rtl"] .nav .cta,[dir="rtl"] .hero-sec .tag,[dir="rtl"] .eyebrow-line,
[dir="rtl"] .sec .hd .num span,[dir="rtl"] .trust-grid .label,[dir="rtl"] .trust-grid .sub,
[dir="rtl"] .pcard .cat,[dir="rtl"] .pcard .pmeta,[dir="rtl"] .season,[dir="rtl"] .also-label,
[dir="rtl"] .chip,[dir="rtl"] .chip i,[dir="rtl"] .step .n,[dir="rtl"] .map-head,
[dir="rtl"] .market-list .lbl,[dir="rtl"] .market-list .cm span,[dir="rtl"] .market-list .vol,
[dir="rtl"] .market-list .vol span,[dir="rtl"] .cert-chip,[dir="rtl"] .mcard .tagm,
[dir="rtl"] .cal-row.head .name,[dir="rtl"] .cal-legend,[dir="rtl"] .contact .lines,
[dir="rtl"] .contact .eyebrow-line,[dir="rtl"] .qform label,[dir="rtl"] .qform .note,
[dir="rtl"] .letter .side .tag,[dir="rtl"] .letter .side .meta,[dir="rtl"] .letter .body .sig,
[dir="rtl"] footer.foot,[dir="rtl"] .ticker,[dir="rtl"] .pcard .var{
font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;letter-spacing:0;text-transform:none}
[dir="rtl"] .pcard .var{font-style:normal}
/* mirror the metric dividers */
[dir="rtl"] .trust-grid .m{border-right:0;border-left:1px solid rgba(14,14,12,.18);padding:32px 0 28px 24px}
[dir="rtl"] .trust-grid .m:last-child{border-left:0}
[dir="rtl"] .trust-grid .m:not(:first-child){padding-left:0;padding-right:32px}
/* keep the month timeline reading Jan to Dec, and digits/coords LTR */
[dir="rtl"] .months{direction:ltr}
/* the scrolling ticker runs LTR like the English page (avoids RTL max-content overflow) */
[dir="rtl"] .ticker,[dir="rtl"] .ticker .track{direction:ltr}
[dir="rtl"] .landscape .sunmark{direction:ltr}
[dir="rtl"] .trust-grid .big{direction:ltr}
/* the gold accent rule before the hero tag sits on the right in RTL automatically */
@media (max-width:720px){
[dir="rtl"] .trust-grid .m{padding-right:0}
[dir="rtl"] .trust-grid .m:nth-child(3){padding-right:0}
}
/* =======================================================
TYPE SYSTEM — brand-pack faces only:
Inter Tight (display + wordmark) + IBM Plex Sans (body)
+ IBM Plex Mono (labels). Display type is scoped to LTR
so the Arabic page keeps its Arabic typeface.
======================================================= */
body{font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif}
html:not([dir="rtl"]) .hero-sec h1,
html:not([dir="rtl"]) .trust h2,
html:not([dir="rtl"]) .sec .hd h2,
html:not([dir="rtl"]) .markets .hd h2,
html:not([dir="rtl"]) .standards h2,
html:not([dir="rtl"]) .pcard h3,
html:not([dir="rtl"]) .mcard h3,
html:not([dir="rtl"]) .letter .side h2,
html:not([dir="rtl"]) .contact h2,
html:not([dir="rtl"]) .egypt-thesis,
html:not([dir="rtl"]) .landscape .cap b,
html:not([dir="rtl"]) .letter .body .signoff,
html:not([dir="rtl"]) .letter .body p.drop::first-letter,
html:not([dir="rtl"]) .pcard.tonal .ph span{
font-family:'Inter Tight','Helvetica Neue',Arial,sans-serif}
/* elements that should stay sans */
.pcard .var,.chip,.cal-row .name,.mobile-menu a.ml,.letter .body .sig b,
.qform input,.qform textarea,.btn{
font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif}
/* display weights tuned for Inter Tight (light + tight, per brand) */
html:not([dir="rtl"]) .hero-sec h1{font-weight:300;letter-spacing:-.04em;line-height:.9}
html:not([dir="rtl"]) .trust h2,html:not([dir="rtl"]) .contact h2{font-weight:300;letter-spacing:-.03em}
html:not([dir="rtl"]) .egypt-thesis{font-weight:300;letter-spacing:-.02em}
html:not([dir="rtl"]) .sec .hd h2,html:not([dir="rtl"]) .markets .hd h2{letter-spacing:-.03em}
/* crisp corners, not pills (serious / agricultural, per the brief) */
.btn{border-radius:3px}
.season,.cert-chip,.chip{border-radius:3px}
/* =======================================================
HERO PANEL — dark furrowed-field treatment (no photo yet).
When a real Egyptian farmland photo is supplied, add
![]()
+ back inside .landscape.
======================================================= */
.landscape{background:linear-gradient(180deg,#3a352b 0%,#211f1a 46%,#14130f 100%)}
.landscape::after{content:"";position:absolute;inset:0;z-index:0;
background:radial-gradient(ellipse 120% 38% at 50% 41%,rgba(201,161,91,.20),transparent 62%);mix-blend-mode:screen}
.landscape .horizon{position:absolute;left:0;right:0;top:42%;height:1px;background:rgba(230,220,196,.28);z-index:1}
.landscape .field{position:absolute;left:-12%;right:-12%;bottom:0;top:42%;z-index:1;
background:repeating-linear-gradient(96deg,transparent 0 16px,rgba(230,220,196,.07) 16px 17px),
repeating-linear-gradient(84deg,transparent 0 24px,rgba(230,220,196,.05) 24px 25px);
transform:perspective(900px) rotateX(48deg);transform-origin:center top}
.landscape .sunmark,.landscape .cap{z-index:2}