/* ============================================================
   BIO-SILICA — shared stylesheet
   English-first. White ground, one green accent, clay as the
   second colour. Type: IBM Plex Sans, Outfit for the wordmark.
   ============================================================ */
:root{
  --green:#17811C;
  --green-d:#0F5E13;
  --panel:#123F1A;         /* agriculture slab */
  --clay:#B86A2E;
  --clay-deep:#6E3D16;     /* industry slab */
  --clay-text:#8A4E1F;
  --deep:#15181A;          /* the one near-black block */

  --paper:#FFFFFF;
  --card:#FFFFFF;
  --wash:#E9EFE6;        /* the one pale green: every neutral surface */
  --wash-2:#DCE5D9;      /* the same tone, one step down, for photo wells */
  --ink:#1B1F1C;
  --ink-2:#5C625C;
  --ink-3:#6E746D;
  --line:#D9E2D6;

  --on-d:#F0F2EF;
  --on-d-2:#9BA29B;
  --line-d:#2B2F31;

  --r-photo:2rem;
  --r-card:1.15rem;
  --r-panel:1.5rem;

  --shell:min(88vw,84rem);
  --loop-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6h21M16 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --loop-arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24'%3E%3Cpath d='M6 0v21M1 16l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lat:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --ar:'Tajawal','Segoe UI',system-ui,sans-serif;
  --logo:'Outfit','Segoe UI',system-ui,sans-serif;

  --nav-h:5.6rem;          /* what the fixed nav occupies */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}

*{box-sizing:border-box}
/* ---- one design, one viewport -----------------------------------------
   The root em is tied to the viewport, so every rem in this sheet is a
   fraction of the screen: the page composes identically on any 16:9
   display instead of growing emptier as the monitor grows. 1.34vw is the
   1440px design at 120% — the whole layout reads one step closer. The vh
   term keeps a short browser window from overflowing the pinned scenes. */
html{font-size:clamp(15px,min(1.34vw,2.6vh),34px)}
body{margin:0;background:var(--wash);color:var(--ink);
  font-family:var(--lat);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}
img{display:block;width:100%;height:100%;object-fit:cover}
ul{margin:0;padding:0;list-style:none}

.shell{width:var(--shell);margin-inline:auto}
/* one vertical rhythm for the whole site. It used to be 8vw top AND
   bottom, so two short rows in a row left a 230px void between them and
   the page read as fragments floating in green. */
.sec{padding-block:clamp(3rem,5vw,4.4rem)}
.wash{background:var(--wash)}   /* the ground already carries it; kept so the class still means something */

.eyebrow{font-size:.84rem;color:var(--green);font-weight:500;margin-block-end:1.1rem;
  display:flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:.38rem;height:.38rem;border-radius:50%;background:currentColor;flex:none}
.h1{font-size:clamp(2.4rem,4.86rem,4.9rem);line-height:1.04}
/* An article headline is a sentence, not a two-word hero. At the .h1 size
   it ran to three lines and read as a poster rather than as the top of
   something you are about to read. Only the article page: the home and
   section heroes are short and stay large. */
.pagehead--run-on .h1{font-size:clamp(1.95rem,3.1rem,3.2rem);line-height:1.1;
  letter-spacing:-.015em;max-width:26ch}
.h2{font-size:2.7rem;line-height:1.08}
/* the statement reads as the quiet line it is: a step under the .h2 of
   the section below it (2.7rem), not a step over it */
.h-big{font-size:2.45rem;line-height:1.22}
.lede{font-size:1.08rem;line-height:1.7;color:var(--ink-2);max-width:58ch}

/* --- wordmark --- */
.mark{display:inline-flex;flex-direction:column;line-height:1}
.mark b{font-family:var(--logo);font-weight:700;color:var(--green);font-size:var(--ms,1.25rem);letter-spacing:-.035em}
.mark i{font-family:var(--logo);font-style:normal;font-weight:600;color:var(--green);
  font-size:calc(var(--ms,1.25rem)*.3);letter-spacing:.2em;text-align:center;margin-block-start:.32em;opacity:.85}

/* --- nav --- */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:70;display:flex;align-items:center;
  gap:2rem;padding:1.15rem 6vw;
  transition:background 220ms var(--ease-out),padding 220ms var(--ease-out),
             box-shadow 220ms var(--ease-out),transform 300ms var(--ease-out)}
/* slides up out of the way, comes back the moment you scroll up */
.nav{will-change:transform}
.nav--away{transform:translateY(-100%)}
.nav.stuck{padding-block:.8rem;background:color-mix(in srgb,var(--wash) 88%,transparent);
  backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.nav__links{display:flex;gap:1.9rem;margin-inline-start:auto}
.nlink{font-size:.94rem;color:var(--ink-2);transition:color 150ms var(--ease-out)}
.nlink:hover,.nlink[aria-current="page"]{color:var(--green)}
@media (max-width:980px){.nav__links{display:none}.nav .pill{margin-inline-start:auto}}

/* ---- the Products menu ----------------------------------------------
   Opens on hover and on keyboard focus. The word itself stays a link to
   the Products page, so nothing depends on the menu appearing.
   The ::before is a bridge across the gap between the nav and the panel —
   without it the menu closes while the pointer is still travelling to it,
   which is the single most common way this pattern is got wrong. */
.nav__group{position:relative;display:flex;align-items:center}
/* the little chevron that says there is more here */
.nlink--menu{display:inline-flex;align-items:center;gap:.34rem}
/* the rotation lives on a span, not on the <svg>: a CSS transform applied
   to an svg root resolves against its view-box and came back as identity */
.nlink--menu .caret{display:block;line-height:0;
  transition:transform 180ms var(--ease-out)}
.nlink--menu .caret svg{display:block;width:.62rem;height:.44rem;overflow:visible}
.nlink--menu .caret path{fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  .nav__group:hover .nlink--menu .caret{transform:rotate(180deg)}
}
.nav__group:focus-within .nlink--menu .caret{transform:rotate(180deg)}

/* A menu, not a panel. It was built at page scale — card radius, card
   padding, reading-size rows — and read as a slab of the site that had
   fallen out of the header. Everything here is one step down from the
   page: tighter rows, a smaller corner, a lighter shadow, and it sits
   close enough to the word that the two read as one object. */
.nav__menu{position:absolute;inset-block-start:100%;inset-inline-start:50%;
  min-width:13.5rem;padding:.3rem;margin-block-start:2.25rem;
  background:var(--paper);border:1px solid rgba(27,31,28,.06);border-radius:.7rem;
  box-shadow:0 1px 1px rgba(27,31,28,.04),
             0 .45rem .9rem -.5rem rgba(27,31,28,.14),
             0 1.4rem 2.2rem -1.4rem rgba(27,31,28,.22);
  display:flex;flex-direction:column;z-index:80;
  opacity:0;visibility:hidden;transform:translate(-50%,-.25rem);
  transition:opacity 140ms var(--ease-out),transform 140ms var(--ease-out),
             visibility 140ms}
/* the bridge the pointer crosses on its way down */
.nav__menu::before{content:"";position:absolute;inset-block-start:-2.35rem;inset-inline:0;height:2.35rem}
.nav__menu a{display:flex;align-items:center;gap:.5rem;white-space:nowrap;
  padding:.46rem .7rem;border-radius:.45rem;font-size:.86rem;line-height:1.3;
  color:var(--ink-2);transition:background 140ms var(--ease-out),color 140ms var(--ease-out)}
.nav__menu a:hover{background:var(--wash);color:var(--ink)}
.nav__menu-all{color:var(--green) !important;font-weight:500;
  margin-block-start:.28rem;padding-block-start:.5rem !important;
  border-block-start:1px solid var(--line);border-radius:0 0 .45rem .45rem}
.nav__menu-all em{font-style:normal;transition:transform 160ms var(--ease-out)}
.nav__menu-all:hover em{transform:translateX(.18rem)}
[dir="rtl"] .nav__menu-all em{transform:scaleX(-1)}
[dir="rtl"] .nav__menu-all:hover em{transform:scaleX(-1) translateX(.18rem)}
@media (hover:hover) and (pointer:fine){
  .nav__group:hover .nav__menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
}
.nav__group:focus-within .nav__menu{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* over the hero the nav is drawn in light, but the menu is a white card */
.has-hero .nav:not(.stuck) .nav__menu a{color:var(--ink-2)}
.has-hero .nav:not(.stuck) .nav__menu a:hover{color:var(--ink)}

/* the drawer lists them indented under Products */
.drawer__sub{font-size:clamp(1rem,4vw,1.25rem) !important;font-weight:400 !important;
  color:var(--ink-2);padding-inline-start:1.2rem;border-block-end:0 !important;
  padding-block:.3rem !important}

/* The full-bleed hero starts at the top of the page, so the fixed nav now
   floats on the photograph. Until it sticks it is drawn in light — the
   dark ink it inherits was invisible on the picture.
   Desktop only: on a phone the crop is bright at the top and white on it
   measured 2.6:1. No scrim fixes that without turning the head of the
   photograph into a black bar, so the phone gets a solid nav instead —
   which is what Apple does on a phone too. */
@media (min-width:901px){
.has-hero .nav:not(.stuck) .nlink{color:rgba(255,255,255,.88)}
.has-hero .nav:not(.stuck) .nlink:hover,
.has-hero .nav:not(.stuck) .nlink[aria-current="page"]{color:#fff}
.has-hero .nav:not(.stuck) .mark b,
.has-hero .nav:not(.stuck) .mark i{color:#fff}
.has-hero .nav:not(.stuck) .pill--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.has-hero .nav:not(.stuck) .pill--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.has-hero .nav:not(.stuck) .burger{color:#fff;border-color:rgba(255,255,255,.45)}
}

/* --- pills --- */
.pill{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;padding:.9rem 1.75rem;
  font-size:.95rem;font-weight:500;background:var(--green);color:#fff;border:1px solid var(--green);
  transition:background 180ms var(--ease-out),border-color 180ms var(--ease-out),
             color 180ms var(--ease-out),transform 160ms var(--ease-out)}
.pill:active{transform:scale(.97)}
.pill em{font-style:normal;transition:transform 200ms var(--ease-out)}
.pill:hover em{transform:translateX(.3rem)}
@media (hover:hover) and (pointer:fine){.pill:hover{background:var(--green-d);border-color:var(--green-d)}}
.pill--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.pill--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--wash)}
.pill--sm{padding:.62rem 1.25rem;font-size:.86rem}

/* --- burger + drawer --- */
.burger{display:none;width:2.62rem;height:2.62rem;border-radius:999px;border:1px solid var(--line);
  align-items:center;justify-content:center;flex:none;transition:transform 160ms var(--ease-out)}
.burger:active{transform:scale(.94)}
.burger i{display:block;width:1rem;height:1.5px;background:currentColor;position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;inset-inline-start:0;width:1rem;height:1.5px;
  background:currentColor;transition:transform 240ms var(--ease-out)}
.burger i::before{transform:translateY(-.32rem)}
.burger i::after{transform:translateY(.32rem)}
.burger.on i{background:transparent}
.burger.on i::before{transform:rotate(45deg)}
.burger.on i::after{transform:rotate(-45deg)}
@media (max-width:980px){.burger{display:inline-flex}}
.drawer{position:fixed;inset:0;z-index:65;background:var(--wash);padding:7rem 8vw 3rem;
  display:flex;flex-direction:column;gap:.4rem;justify-content:center;
  transform:translateY(-101%);visibility:hidden;
  transition:transform 380ms var(--ease-drawer),visibility 380ms}
.drawer.open{transform:none;visibility:visible}
.drawer a{font-size:clamp(1.5rem,7vw,2.2rem);font-weight:600;padding-block:.55rem;
  border-block-end:1px solid var(--line)}
.drawer .pill{margin-block-start:2.45rem;align-self:start;font-size:1rem}
/* the products fold away behind a caret instead of sitting open */
.drawer__row{display:flex;flex-wrap:wrap;align-items:center}
.drawer__row > a{flex:1 1 auto}
.drawer__more{flex:0 0 auto;display:grid;place-items:center;inline-size:3rem;block-size:3rem;
  padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.drawer__more .caret{display:block;inline-size:1.1rem;transition:transform 200ms var(--ease-out)}
.drawer__more[aria-expanded="true"] .caret{transform:rotate(180deg)}
.drawer__more svg{display:block;inline-size:100%;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drawer__subs{flex:1 0 100%;display:flex;flex-direction:column;
  padding-block-end:.6rem;padding-inline-start:1.1rem}
/* display:flex above beats the browser's own rule for [hidden], so the
   fold stayed open however correct the markup was. Say it here. */
.drawer__subs[hidden]{display:none}
[dir="rtl"] .drawer__subs{padding-inline-start:0;padding-inline-end:1.1rem}

.skip{position:absolute;inset-block-start:-100px;inset-inline-start:1rem;z-index:200;
  background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 .5rem .5rem;font-size:.9rem}
.skip:focus{inset-block-start:0}

/* --- photo frames --- */
.ph{position:relative;border-radius:var(--r-photo);overflow:hidden;background:var(--wash-2);
  display:grid;place-items:center}
.ph > span{padding:2rem;text-align:center;font-size:.86rem;color:var(--ink-3);max-width:34ch;line-height:1.7}
.ph.has img{position:absolute;inset:0}
.ph.has > span{display:none}
.band-ph.has img,.panel__ph.has img{position:absolute;inset-inline:0;height:118%;inset-block-start:-9%}

/* --- hero --- */
/* --- hero: full bleed -------------------------------------------------
   The photograph is the section. No shell, no gutter, no rounded card —
   it runs edge to edge and fills the screen below the nav, with the words
   centred on it. */
.hero{padding:0}
.hero > .shell{width:100%;margin-inline:0}
.hero__ph{position:relative;width:100%;height:calc(100svh - var(--nav-h));min-height:30rem;
  /* align-content centres the row; justify-content would also shrink the
     track to its content, which is what squeezed the Arabic headline */
  border-radius:0;overflow:hidden;display:grid;align-content:center;
  justify-items:center;text-align:center;
  padding:clamp(1.5rem,4vw,3.6rem);background:var(--wash-2)}
/* Two scrims, not one. The old single bottom gradient was clear by 70%
   height, which is fine for a two-line headline sitting on the floor of
   the frame and useless for the About banner, whose copy starts high on
   a bright, busy photograph. The second gradient shades the start edge,
   so the type keeps its field without flattening the whole picture. */
/* the words sit in the middle of the frame now, so the scrim is centred
   too: an even pool of shade under the type, deepening at both edges so
   the photograph still has somewhere to breathe */
.hero__ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* a band under the nav. The nav is drawn in white over this picture and
       the crop is bright at the top on a phone: measured 2.8:1, which is
       not legible. This is the layer that guarantees it. */
    linear-gradient(to bottom,rgba(12,16,12,.5) 0%,
      rgba(12,16,12,.28) calc(var(--nav-h) * .95),
      rgba(12,16,12,0) calc(var(--nav-h) * 1.7)),
    radial-gradient(115% 85% at 50% 50%,rgba(12,16,12,.60) 0%,rgba(12,16,12,.52) 45%,rgba(12,16,12,.30) 100%),
    linear-gradient(to top,rgba(12,16,12,.55) 0%,rgba(12,16,12,0) 40%,rgba(12,16,12,0) 72%,rgba(12,16,12,.4) 100%)}
.hero__ph > span{position:absolute;inset-block-start:40%;z-index:1}
/* width, not max-width: centred in a grid the block shrink-wraps to its
   longest word, which is why the Arabic headline broke onto a third
   line while the English one did not */
.hero__copy{position:relative;z-index:2;color:#fff;width:min(52rem,88%);text-align:center}
.hero__copy .eyebrow{color:rgba(255,255,255,.9)}
.hero__copy .eyebrow::before{background:#7FD184;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.hero__copy .lede{color:rgba(255,255,255,.9);max-width:52ch;margin-inline:auto}
.hero__copy .pill--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.hero__copy .pill--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero__act{display:flex;gap:.8rem;flex-wrap:wrap;margin-block-start:2rem}
.hero__copy .hero__act{justify-content:center}
.drift{display:block}
@media (max-width:900px){.hero__ph{height:auto;aspect-ratio:3/4;min-height:auto;border-radius:0}
  .hero__copy{max-width:100%}}

/* --- page head ---------------------------------------------------------
   Only the home page opens on a photograph. Every other page states its
   title on the ground colour and gets out of the way. */
/* the title screen: one viewport, the title centred in it, nothing else
   showing. The curtain engine hands over from here on the first scroll. */
.pagehead{padding-block:clamp(7rem,12vh,9rem) 6rem}
/* About runs long and heading-heavy; a step down from the 2.7rem used
   elsewhere keeps it from shouting every two screens */
.about-page .h2{font-size:2.25rem}
[dir="rtl"] .about-page .h2{font-size:2.05rem}
/* a title screen only where the head stands alone; the articles head runs
   on into its own grid and must not be centred in a viewport */
.pagehead:not(.pagehead--run-on){min-height:100vh;min-height:100svh;
  display:grid;align-content:center}
@media (max-width:900px){.pagehead:not(.pagehead--run-on){min-height:0}
  .pagehead{padding-block:clamp(7rem,14vh,9rem) 3rem}}
/* the destination holds still while it rides in */
.is-curtain-riding *{animation-play-state:paused !important}
/* the articles head runs on into its own grid, so the space below belongs
   under the grid, not under the title */
.pagehead--run-on{padding-block-end:clamp(4rem,8vw,7rem)}

/* --- pillars --- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pillar{padding:1.6rem 1.4rem}
/* line art at the head of each pillar, drawn in the one green.
   Specificity matters here: .pillar span already sets the muted body
   colour, and the icon wrapper IS a span - it was inheriting ink-2. */
.pillar .pillar__ico{display:block;margin:0 0 1.05rem;font-size:0;
  color:var(--green)}
.pillar__ico svg{display:block;width:1.9rem;height:1.9rem}
.pillar__ico svg *{fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.pillar b{display:block;font-size:1.02rem;font-weight:600}
.pillar span{display:block;font-size:.9rem;color:var(--ink-2);margin-block-start:.4rem;line-height:1.55}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}

/* --- statement / word-ink --- */
.statement{max-width:min(62rem,88vw);margin-inline:auto;text-align:center}
.w-hl{color:#C6D3C2}
.tagline{font-size:2.16rem;font-weight:600;text-align:center;
  letter-spacing:-.02em;margin-block-start:.4rem}

/* --- split rows ---
   Every row on the site has the same anatomy now: words on the start edge,
   the object beside them, both hung from the top of the row. The three
   different column ratios and the mix of centred and top-aligned rows were
   what made these pages read as messy. */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);
  align-items:start}
.split--wide{grid-template-columns:1.05fr .95fr}
/* A bare list floating in the vertical middle of a row, aligned to
   nothing, was the ugliest thing on these two pages. The list is a thing,
   so it is given the site's card and hung from the top of the row with
   the heading beside it. */
.split--specs{align-items:start}  /* now the default; kept for the card styling below */
.split--pair{align-items:stretch}   /* a pair of cards sits as one block */
/* start is right when the second column is a list or a card, which is why
   it is the default. It is wrong when the second column is a tall
   photograph: the words then hang from the top with a drift of empty
   ground beneath them. Here the text is centred on the picture. */
.split--mid{align-items:center}
/* the light-ground twin of .deepstate__p: supporting prose in the second
   column, hung off a hairline so it reads as commentary on the heading
   rather than as a second, competing statement */
.split__aside{margin:0;padding-inline-start:clamp(1rem,1.6vw,1.6rem);
  border-inline-start:2px solid var(--line)}
@media (max-width:900px){
  .split__aside{border-inline-start:0;padding-inline-start:0}
}
@media (max-width:900px){.split--mid{align-items:start}}
.speccard{padding:clamp(1.4rem,2.2vw,2rem)}

/* the card's own title. It used to borrow .eyebrow, which carries a bullet
   on this site, so it queued up as a fourth item in the list beneath it. */
.speccard__t{font-size:.94rem;font-weight:600;letter-spacing:.01em;color:var(--green);
  margin:0 0 .9rem;padding-block-end:.85rem;border-block-end:1px solid var(--line)}

/* --- the agriculture loop ---------------------------------------------
   Agriculture -> Advanced Materials -> Agriculture. It was two ASCII
   arrows inside a heading; it is a three-step cycle, so it is drawn as
   one. The arrow is a ::after on the gap rather than a character in the
   text, which also means it mirrors correctly in Arabic. */
.loop{list-style:none;margin:1.2rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:stretch;gap:.55rem}
.loop li{display:flex;align-items:center;gap:.55rem}
.loop li span{display:inline-flex;align-items:center;
  padding:.6rem 1.05rem;border-radius:999px;
  background:var(--wash-2);border:1px solid var(--line);
  font-size:1rem;font-weight:500;line-height:1.25;color:var(--ink);
  transition:transform 240ms var(--ease-out),background-color 240ms var(--ease-out)}
.loop li:last-child span{background:transparent;border-style:dashed;color:var(--green);
  border-color:currentColor}
/* --arrow is driven from 0 to 1 as the sequence plays; it defaults to 1 so
   the arrow is simply there when nothing animates it */
.loop li{--arrow:1}
.loop li:not(:last-child)::after{content:"";flex:0 0 auto;inline-size:1.15rem;block-size:.62rem;
  background:currentColor;color:var(--green);opacity:calc(.55 * var(--arrow));
  transform:scaleX(var(--arrow));transform-origin:0 50%;
  -webkit-mask:var(--loop-arrow) no-repeat center/contain;
          mask:var(--loop-arrow) no-repeat center/contain}
[dir="rtl"] .loop li:not(:last-child)::after{transform-origin:100% 50%}
[dir="rtl"] .loop li:not(:last-child)::after{transform:scaleX(calc(-1 * var(--arrow)))}
@media (hover:hover) and (pointer:fine){
  .loop:hover li span{background:var(--wash)}
  .loop li span:hover{transform:translateY(-2px);background:#DFE9DB}
}
@media (max-width:600px){.loop li span{font-size:.92rem;padding:.5rem .85rem}}

/* --- the one statement that takes the whole width ----------------------
   This block used to sit in a two-column grid with an empty second
   column. It is the strongest claim on the page, so it gets the room
   rather than half of it. */
.deepstate{background:var(--deep);color:var(--on-d)}
.deepstate .eyebrow{color:#9FCF9C}
/* The statement and its evidence sit side by side and the block is paid
   for. Baseline-aligned at the bottom so the two columns land together
   however many lines each one runs to. */
.deepstate__grid{display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,5vw,5rem);align-items:end}
.deepstate__h{color:var(--on-d);margin-block-start:.7rem;
  font-size:clamp(2rem,3.5vw,3.3rem);line-height:1.08;letter-spacing:-.018em}
.deepstate__p{color:rgba(240,242,239,.74) !important;margin:0;
  padding-block-end:.4rem;border-inline-start:2px solid rgba(159,207,156,.35);
  padding-inline-start:clamp(1rem,1.6vw,1.6rem)}
@media (max-width:900px){
  .deepstate__grid{grid-template-columns:1fr;gap:1.8rem;align-items:start}
  .deepstate__p{border-inline-start:0;padding-inline-start:0}
}
.speccard .eyebrow{margin-block-end:.95rem}
.speccard .ticks{margin-block-start:0 !important}
.speccard .lede{font-size:1rem}
.speccard .lede + .lede{margin-block-start:1rem !important}

/* ---- the process rail ------------------------------------------------
   The El Sewedy Integration Center workflow, stood on its end. A rule is
   drawn down the card and each item's node ignites exactly as the drawing
   edge reaches it. Everything resting here IS the finished state; the
   start values live under .is-armed, which the timeline adds in onStart
   and drops on complete — so no script means a finished rail, never an
   empty one. */
/* One number drives the geometry: --rail-x is where the rule's centre sits,
   and the node is hung from the same figure so the two cannot drift. They
   did drift — the node sat 6px to the right of its own rail. */
ul.rail-list{position:relative;--rail-x:.52rem;--node:.62rem;
  padding-inline-start:1.85rem;gap:.72rem}
/* .ticks li already sets a 1.5rem indent and matches on equal specificity,
   so it won on source order and pushed the text 55px off its node */
ul.rail-list li{position:relative;padding-inline-start:0}
ul.rail-list li::before{display:none}
ul.rail-list .rail{position:absolute;inset-block:.72rem;
  inset-inline-start:calc(var(--rail-x) - 1px);
  width:2px;border-radius:2px;background:rgba(23,129,28,.18)}
ul.rail-list .rail i{position:absolute;inset:0;border-radius:2px;background:var(--green);
  transform-origin:top center;transform:scaleY(1)}
ul.rail-list .node{position:absolute;
  inset-inline-start:calc(var(--rail-x) - (var(--node) / 2) - 1.85rem);
  inset-block-start:.42rem;
  width:var(--node);height:var(--node);border-radius:50%;background:var(--green);
  box-shadow:0 0 0 2px rgba(23,129,28,.15);
  transition:transform .25s var(--ease-out)}
ul.rail-list .node::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(23,129,28,.5);opacity:0;pointer-events:none}
/* the armed (pre-animation) state — present only while the timeline runs */
ul.rail-list.is-armed .rail i{transform:scaleY(0)}
ul.rail-list.is-armed .node{opacity:0;transform:scale(.2);transition:none}
ul.rail-list.is-armed .txt{opacity:0}
/* one ring per node, once: a loop reads as "still loading" long after it
   has finished */
ul.rail-list.is-armed li.is-on .node::after{animation:rail-ring .95s ease-out 1 forwards}
@keyframes rail-ring{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(3.4);opacity:0}
}
@media (hover:hover) and (pointer:fine){
  ul.rail-list li:hover .node{transform:scale(1.32)}
  ul.rail-list li:hover .txt{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  ul.rail-list.is-armed .rail i{transform:none}
  ul.rail-list.is-armed .node{opacity:1;transform:none}
  ul.rail-list.is-armed .txt{opacity:1}
}
.speccard .ticks li{font-size:.96rem}
@media (max-width:900px){.speccard{padding:1.3rem}}
.split .ph{aspect-ratio:4/3;border-radius:1.75rem}
@media (max-width:900px){.split,.split--wide{grid-template-columns:1fr;gap:2rem}}

.applist{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:1.8rem}
.applist span{font-size:.85rem;color:var(--ink-2);background:var(--paper);border-radius:999px;
  padding:.35rem .9rem;box-shadow:0 1px 2px rgba(27,31,28,.05);
  transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out),
             color 220ms var(--ease-out)}

/* --- ticks --- */
.ticks{display:flex;flex-direction:column;gap:.85rem;margin-block-start:1.8rem}
/* the dot used to be a flex item, which made a bold label inside the line
   a second flex item — so "Rubber & Polymers — functional filler" broke
   into two ragged columns. The dot is positioned instead and the line is
   ordinary text again. */
.ticks li{position:relative;padding-inline-start:1.5rem;font-size:1rem;
  color:var(--ink-2);line-height:1.6}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62rem;
  width:.44rem;height:.44rem;border-radius:50%;background:var(--green)}

/* --- product cards --- */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-block-start:3rem}
@media (max-width:900px){.prods{grid-template-columns:1fr}}
.prod{overflow:hidden;display:flex;flex-direction:column}
.prod .ph{border-radius:0;aspect-ratio:4/3}
.prod__b{padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.prod h3{font-size:1.18rem}
.prod__k{font-size:.78rem;color:var(--clay-text);font-weight:500}
.prod p{font-size:.94rem;line-height:1.65;color:var(--ink-2)}
.prod__cta{margin-block-start:auto;padding-block-start:1.2rem;font-size:.9rem;color:var(--green);
  font-weight:500;display:inline-flex;align-items:center;gap:.4rem}
.prod:hover .prod__cta em{transform:translateX(.25rem)}
.prod__cta em{font-style:normal;transition:transform 200ms var(--ease-out)}

/* --- applications carousel ------------------------------------------
   Tinted panel, heading left, arrows right, a row of cards that steps
   one card at a time and loops. Cards carry a hard offset shadow.     */
/* full-bleed: no rounded box, the band runs edge to edge and takes the
   whole screen while the scroll is locked to it */
.carousel{background:var(--wash);border-radius:0;overflow:hidden;
  min-height:100vh;min-height:100svh;display:grid;align-content:center;
  padding-block:clamp(3rem,7vh,5rem)}
.carousel__head{display:flex;align-items:flex-start;gap:2rem;
  width:var(--shell);margin-inline:auto;margin-block-end:clamp(1.8rem,4vh,2.8rem)}
.carousel__nav{display:flex;gap:.6rem;margin-inline-start:auto;flex:none}
.cbtn{width:2.88rem;height:2.88rem;border-radius:999px;border:1px solid rgba(27,31,28,.10);
  display:grid;place-items:center;background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(27,31,28,.05),0 10px 20px -14px rgba(27,31,28,.35);
  transition:background 180ms var(--ease-out),color 180ms var(--ease-out),
             transform 160ms var(--ease-out),opacity 180ms var(--ease-out)}
.cbtn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.cbtn:hover{background:var(--ink);color:#fff}}
.cbtn svg{width:1.06rem;height:1.06rem;pointer-events:none}
.cbtn svg path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .cbtn svg{transform:scaleX(-1)}

/* cards start on the page's own left gutter and run off the right edge */
.carousel__vp{overflow:hidden;padding-block-end:10px;
  /* same gutter both sides: the first and last card line up with the heading */
  padding-inline:calc((100% - var(--shell)) / 2)}
.carousel__track{display:flex;gap:1.5rem;will-change:transform}
/* ---- the shared card treatment --------------------------------------
   No drawn outline. The card is a sheet of white that lifts off the page
   on a soft ambient shadow, with the faintest wash toward its foot — the
   edge is read from the light, not from a rule. One shape everywhere:
   applications, products, articles and the pillar strip. Sizes unchanged. */
.capp,.prod,.art__body,.pillar,.speccard{
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFDFB 54%,#F1F6EF 100%);
  border:1px solid rgba(27,31,28,.05);
  border-radius:var(--r-card);
  box-shadow:0 1px 1px rgba(27,31,28,.03),
             0 .5rem 1.1rem -.6rem rgba(27,31,28,.10),
             0 2.1rem 3.6rem -2rem rgba(27,31,28,.26);
  transition:transform 420ms var(--ease-out),box-shadow 420ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .prod:hover,.art:hover .art__body,.capp:hover,.pillar:hover{
    transform:translateY(-.45rem);
    box-shadow:0 1px 1px rgba(27,31,28,.03),
               0 .9rem 1.6rem -.75rem rgba(27,31,28,.12),
               0 3rem 5rem -2.4rem rgba(27,31,28,.30);
  }
}
.capp{
  /* flex shorthand does not reliably parse clamp(); set the width separately */
  flex:0 0 auto;width:24rem;
  padding:1.6rem;display:flex;flex-direction:column;gap:.8rem;min-height:20rem;
}
.capp__n{font-family:var(--logo);font-size:.74rem;font-weight:600;letter-spacing:.08em;
  color:var(--green);direction:ltr;text-align:start;align-self:start;
  background:rgba(23,129,28,.09);border-radius:999px;padding:.3rem .62rem;line-height:1}
.capp h3{font-size:1.06rem;line-height:1.3}
.capp p{font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.capp__ico{margin-block-start:auto;display:grid;place-items:center;padding-block-start:1rem;
  -webkit-mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,0) 100%)}
.capp__ico svg{width:5.25rem;height:5.25rem}
/* The viewBox is 80 wide and the icon draws at 5.25rem, so 1.1 came out
   as a hairline — it read as a watermark rather than a drawing. */
.capp__ico svg [stroke]{fill:none;stroke:var(--green);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.capp{width:78vw;min-height:18rem}}
/* no pinning on a phone: a plain swipeable row with snap is what a thumb wants */
@media (max-width:900px){
  .carousel{min-height:0;padding-block:clamp(2.5rem,6vw,4rem)}
  .carousel__vp{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .carousel__vp::-webkit-scrollbar{display:none}
  .carousel__track{transform:none !important}
  .capp{scroll-snap-align:start}
  .carousel__nav{display:none}
}

/* --- stacking panels --- */
.stack{display:flex;flex-direction:column;gap:0}
.panel{position:sticky;inset-block-start:5.5rem;border-radius:var(--r-panel);
  padding:clamp(2rem,4vw,3.4rem);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.4rem);align-items:center;min-height:min(84vh,45rem);transform-origin:50% 0%}
/* A 70px blur across a full-width sticky panel is a very large raster
   job, and with three of them plus smooth scrolling the compositor never
   finished a frame — the page went unresponsive to paint while its
   JavaScript kept running. A 22px blur reads the same at this scale. */
.panel + .panel{box-shadow:0 -8px 22px -14px rgba(0,0,0,.5)}
.panel--ag{background:var(--panel);color:#EDF4EA}
.panel--in{background:var(--clay-deep);color:#F6EFE9}
.panel--dk{background:var(--deep);color:var(--on-d)}
.panel--dk .eyebrow{color:#9FCF9C}

/* ---- the action in each panel ---------------------------------------
   Each panel gets a button in a high-value TINT OF ITS OWN HUE: the hue
   stays in the family so it belongs to the panel, and the value jump is
   what does the work. Measured rather than eyeballed — 9.6:1, 9.1:1 and
   10.6:1 against their own text. The third panel takes the brand green
   back, so the stack closes where it started.
   The outline button was inheriting dark ink on a dark ground and had all
   but vanished; it is drawn in the panel's light now. */
.panel .pill{border-width:1px}
.panel--ag .pill{background:#A9E3A8;border-color:#A9E3A8;color:#0D3212}
.panel--in .pill{background:#F2CB9E;border-color:#F2CB9E;color:#46250A}
.panel--dk .pill{background:#8FD98F;border-color:#8FD98F;color:#15181A}
@media (hover:hover) and (pointer:fine){
  .panel--ag .pill:hover{background:#C4EDC2;border-color:#C4EDC2;color:#0D3212}
  .panel--in .pill:hover{background:#F9DDBC;border-color:#F9DDBC;color:#46250A}
  .panel--dk .pill:hover{background:#ACE7AC;border-color:#ACE7AC;color:#15181A}
}
.panel .pill--ghost{background:transparent;color:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.34)}
@media (hover:hover) and (pointer:fine){
  .panel--ag .pill--ghost:hover{background:#A9E3A8;border-color:#A9E3A8;color:#0D3212}
  .panel--in .pill--ghost:hover{background:#F2CB9E;border-color:#F2CB9E;color:#46250A}
  .panel--dk .pill--ghost:hover{background:#8FD98F;border-color:#8FD98F;color:#15181A}
}

/* the products stack: the same panel, carrying a product instead of an
   audience. Two lists and a photograph make it taller than the two-up
   version, so it is padded a little tighter and sits closer to the top. */
/* The products do NOT stack. On the home page the sticky stack is the
   point — one idea sliding over the last. Here it reads as three cards
   climbing on top of each other, which is exactly what came back as a
   complaint. Each product is its own card, standing still, with room
   around it. The home page keeps the effect; this page does not. */
.stack--products{gap:clamp(2.6rem,5vw,4.6rem)}
.stack--products .panel{position:relative;inset-block-start:auto;
  padding:clamp(1.7rem,2.6vw,2.3rem);
  align-items:start;min-height:0;gap:clamp(1.8rem,3.2vw,3rem);
  grid-template-columns:1.08fr .92fr}
/* nothing is sliding over anything, so nothing needs a shadow to say so */
.stack--products .panel + .panel{box-shadow:none}
/* Each card is its own object now, so it gets an object's manners: it
   lifts a little under the pointer and its photograph leans in with it.
   Transform and box-shadow only — both composite, so this stays cheap
   next to three full-width cards and smooth scrolling. */
.stack--products .panel{
  box-shadow:0 1px 2px rgba(15,30,18,.08), 0 18px 38px -28px rgba(15,30,18,.55);
  transition:transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .stack--products .panel:hover{transform:translateY(-6px);
    box-shadow:0 2px 4px rgba(15,30,18,.10), 0 30px 60px -30px rgba(15,30,18,.62)}
  .stack--products .panel:hover .panel__ph img{transform:scale(1.045)}
}
@media (prefers-reduced-motion: reduce){
  .stack--products .panel,
  }
/* a link from the nav drop-down lands the card clear of the fixed header */
.stack--products .panel{scroll-margin-block-start:7rem}
.stack--products .panel .h2{font-size:2rem;line-height:1.12}
/* The product's name carries the card, so it gets the weight and the
   tightest tracking on the page. */
.panel__name{letter-spacing:-.018em;margin-block-start:.5rem}
/* and the claim sits under it as a caption, in the panel's own accent so
   the two read as one block rather than as two competing headings */
.panel__claim{margin-block-start:.6rem;font-size:1.02rem;line-height:1.4;
  font-weight:500;max-width:34ch}
.panel--ag .panel__claim{color:#9FCF9C}
.panel--in .panel__claim{color:#F1D0AA}
.panel--dk .panel__claim{color:#9FCF9C}
.panel__lede{margin-block-start:1.1rem;color:rgba(255,255,255,.82) !important;
  font-size:.98rem;line-height:1.6}
.panel__alias{margin-block-start:.85rem;font-size:.86rem;color:rgba(255,255,255,.55)}
.panel__sub{margin-block:1.45rem .2rem}
/* applications and characteristics are single names now, so they read as a
   row of chips rather than thirty bullet points down the panel */
.panel__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.7rem}
.panel__chips li{font-size:.92rem;line-height:1.3;color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:.42rem .9rem;
  transition:transform 220ms var(--ease-out),background-color 220ms var(--ease-out),
             border-color 220ms var(--ease-out),color 220ms var(--ease-out)}
[dir="rtl"] .panel__chips li{direction:rtl}
.panel__act{margin-block-start:1.45rem}

/* The headline figures, above the applications: what a buyer looks for
   before they will open a PDF. Three across, wrapping to two on a narrow
   card rather than shrinking to unreadable. */
.panel__stats{display:flex;flex-wrap:wrap;gap:.55rem;margin-block-start:1.35rem;
  padding:0;list-style:none}
.panel__stats li{flex:1 1 7.5rem;min-inline-size:0;
  padding:.62rem .8rem;border-radius:.7rem;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12)}
.panel__stats b{display:block;font-size:1.12rem;line-height:1.15;font-weight:600;
  color:#fff;letter-spacing:-.01em}
.panel--in .panel__stats b{color:#FDF3E9}
.panel__stats span{display:block;margin-block-start:.2rem;font-size:.76rem;
  line-height:1.3;color:rgba(255,255,255,.66)}
[dir="rtl"] .panel__stats li{direction:rtl}
@media (max-width:600px){.panel__stats li{flex:1 1 45%}}
/* the characteristics list has gone; the photograph gets the room */
@media (max-width:900px){.stack--products .panel{position:static;min-height:0}}
.panel h2{color:inherit}
.panel--ag .eyebrow{color:#9FCF9C}
.panel--in .eyebrow{color:#F1D0AA}
.panel .ticks li{color:rgba(255,255,255,.8)}
.panel .ticks li::before{background:currentColor}
.panel__ph{position:relative;border-radius:1.15rem;overflow:hidden;aspect-ratio:4/3;background:rgba(255,255,255,.08)}
.panel__ph > span{display:grid;place-items:center;height:100%;padding:2rem;text-align:center;
  font-size:.86rem;color:rgba(255,255,255,.6);line-height:1.7}
.panel__ph.has > span{display:none}
@media (max-width:900px){.panel{grid-template-columns:1fr;min-height:0;position:static}}

/* --- articles --- */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-block-start:3rem}
@media (max-width:900px){.arts{grid-template-columns:1fr}}
.art{display:flex}
.art__body{overflow:hidden;display:flex;flex-direction:column;width:100%}
.art .ph{aspect-ratio:16/10;border-radius:0}
.art__txt{padding:1.3rem;display:flex;flex-direction:column;gap:.6rem}
.art__meta{font-size:.8rem;color:var(--ink-3)}
.art h3{font-size:1.16rem;line-height:1.3}
.art p{font-size:.94rem;color:var(--ink-2);line-height:1.6}

/* --- contact + footer --- */
.contact{background:var(--deep);color:var(--on-d)}
.contact .eyebrow{color:var(--on-d-2)}
.contact .eyebrow::before{background:var(--on-d-2)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);
  padding-block:clamp(4.5rem,9vw,7.5rem)}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}
.contact h2{color:var(--on-d);font-size:2.25rem}
[dir="rtl"] .contact h2{font-size:2.05rem}
.contact__lede{color:var(--on-d-2);max-width:44ch;margin-block-start:1.4rem}
.contact dl{margin:3rem 0 0}
.contact dl div{display:flex;gap:1.4rem;padding-block:1.05rem;border-block-start:1px solid var(--line-d)}
.contact dt{font-size:.84rem;color:var(--on-d-2);width:9rem;flex:none;margin:0}
.contact dd{margin:0;font-size:.96rem}
.tbd{color:var(--on-d-2);border-block-end:1px dashed currentColor;padding-block-end:1px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.2rem;align-content:start}
.form .w{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:.5rem}
.f label{font-size:.8rem;color:var(--on-d-2)}
.f input,.f textarea,.f select{font:inherit;font-size:.95rem;color:var(--on-d);background:transparent;
  border:0;border-block-end:1px solid var(--line-d);padding-block:.6rem;border-radius:0;
  transition:border-color 160ms var(--ease-out)}
.f textarea{resize:vertical;min-height:4rem}
.f input:focus-visible,.f textarea:focus-visible,.f select:focus-visible{
  outline:2px solid var(--on-d);outline-offset:3px;border-block-end-color:var(--green)}
.f select option{background:var(--deep);color:var(--on-d)}
.form .pill{justify-content:center;background:var(--on-d);border-color:var(--on-d);color:var(--deep)}
.form .pill:hover{background:#fff;border-color:#fff}
.toast{grid-column:1/-1;font-size:.84rem;color:var(--on-d-2);min-height:1.3rem}

.ft{background:var(--deep);color:var(--on-d-2);padding-block:clamp(3rem,5vw,4.5rem) 2rem;
  border-block-start:1px solid var(--line-d)}
.ft__grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:2.8rem}
@media (max-width:820px){.ft__grid{grid-template-columns:1fr 1fr;gap:2.2rem}}
.ft .mark b,.ft .mark i{color:var(--on-d)}
.ft h4{font-size:.88rem;font-weight:500;color:var(--on-d);margin-block-end:1.1rem}
.ft ul{display:flex;flex-direction:column;gap:.65rem;font-size:.9rem}
.ft a:hover{color:var(--green)}
.ft__end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-block-start:3.5rem;
  padding-block-start:1.5rem;border-block-start:1px solid var(--line-d);font-size:.8rem}

/* ============================================================
   ARABIC / RTL
   Everything above is written with logical properties, so the
   layout mirrors on its own. These rules handle what logical
   properties cannot: the typeface, Arabic leading, and the few
   glyphs and origins that are directional by nature.
   ============================================================ */
[dir="rtl"] body{font-family:var(--ar);line-height:1.8}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-weight:700;              /* Tajawal ships no 600 */
  letter-spacing:0;             /* never letter-space Arabic */
}
[dir="rtl"] .h1{line-height:1.32;font-size:clamp(2.1rem,4.32rem,4.4rem)}
[dir="rtl"] .h2{line-height:1.36}
[dir="rtl"] .h-big{line-height:1.45;font-size:2.25rem}
[dir="rtl"] .lede{line-height:1.9;max-width:40em}
[dir="rtl"] .tagline{letter-spacing:0}
[dir="rtl"] .eyebrow{font-size:.88rem}

/* the wordmark and any spec string stay left-to-right */
[dir="rtl"] .mark{direction:ltr}
[dir="rtl"] .app__n,[dir="rtl"] .art__meta{direction:ltr;text-align:start}

/* directional glyphs and origins */
[dir="rtl"] .pill em,[dir="rtl"] .prod__cta em{transform:scaleX(-1);display:inline-block}
[dir="rtl"] .pill:hover em{transform:scaleX(-1) translateX(.3rem)}
[dir="rtl"] .prod:hover .prod__cta em{transform:scaleX(-1) translateX(.25rem)}
[dir="rtl"] .app::before{transform-origin:right}
[dir="rtl"] .skip{border-radius:0 0 .5rem .5rem}

/* Arabic needs a touch more room under a masked headline line */
[dir="rtl"] .ln > i{padding-block-end:.04em}

/* the language button keeps its own face so "ع" and "EN" both sit right */
#lang{font-family:var(--lat);min-width:3.2rem;justify-content:center}
[dir="rtl"] #lang{font-family:var(--ar)}

/* ---- hover, everywhere -----------------------------------------------
   Anything that reads as an object should answer the pointer. The chips
   were the last things on the site that stayed dead under the cursor.
   Non-interactive, so the response is tactile rather than a call to
   action: a 2px lift and a little more light. */
@media (hover:hover) and (pointer:fine){
  .applist span:hover{transform:translateY(-2px);color:var(--ink);
    box-shadow:0 2px 3px rgba(27,31,28,.06),0 .6rem 1.1rem -.6rem rgba(27,31,28,.24)}
  .panel__chips li:hover{transform:translateY(-2px);color:#fff;
    background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3)}
  .mark{transition:opacity 180ms var(--ease-out)}
  .mark:hover{opacity:.72}
  .ft h4 + ul a{display:inline-block;transition:transform 180ms var(--ease-out),color 150ms var(--ease-out)}
  .ft h4 + ul a:hover{transform:translateX(.18rem)}
  [dir="rtl"] .ft h4 + ul a:hover{transform:translateX(-.18rem)}
}

/* --- motion gates --- */
.ln{display:block;overflow:hidden}
.ln > i{display:block;font-style:normal}
.fx .ln > i{transform:translateY(112%)}
.fx .up{opacity:0;transform:translateY(22px)}
/* the wrapper the headings are masked with */
.h2 > i.rise{display:block;font-style:normal}
.fx .zoom{opacity:0;transform:scale(1.04)}
/* The product cards start hidden ONLY when the animation can actually run.
   Without the .fx gate a blocked CDN leaves three invisible cards and a
   page that looks empty — which is the usual way a reveal effect turns
   into a bug report. */
.fx .stack--products .panel{opacity:0;transform:translateY(34px) scale(.985)}
.fx .stack--products .panel [data-pfx]{opacity:0;transform:translateY(14px)}
.fx /* the deck's start state, only where the deck exists */
/* the cards lift in at every width now that the grid uses them too */
.fx .pswipe__card{opacity:0;transform:translateY(34px) scale(.965)}
@media (max-width:600px){
  .fx .pswipe__dots{opacity:0;transform:translateY(10px)}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;
    transition-property:opacity,color,background-color,border-color !important;
    transition-duration:120ms !important}
  .drawer{transition:none}
}

/* ============================================================
   PHONE
   Everything above is written for a desk, and a phone is not a
   narrow desk. Below 1120px the root em stops scaling and pins
   at 15px, so every rem the desktop scale relies on arrives
   oversized: the hero headline broke across four lines and the
   product panel kept its two columns and ran off the screen.
   These are the decisions a phone needs, not patches.
   ============================================================ */
@media (max-width:900px){
  .h1{font-size:2.45rem;line-height:1.1}
  .h2{font-size:1.85rem;line-height:1.15}
  .h-big{font-size:1.6rem;line-height:1.32}
  .tagline{font-size:1.4rem}
  .lede{font-size:1rem}
  [dir="rtl"] .h1{font-size:2.15rem;line-height:1.42}
  [dir="rtl"] .h2{font-size:1.65rem;line-height:1.45}
  [dir="rtl"] .h-big{font-size:1.45rem}

  /* the hero still fills the phone; it just stops being a 16:9 frame */
  .hero__ph{height:auto;aspect-ratio:auto;min-height:calc(100svh - var(--nav-h));
    border-radius:0}
  .hero__copy{width:min(52rem,92%)}
  .hero__act{gap:.6rem;width:100%}
  .hero__copy .hero__act .pill{flex:1 1 10rem;justify-content:center}

  /* THE product-panel bug: .stack--products sets its own columns and beats
     the generic single-column phone rule, so the photograph and the
     characteristics sat off the right edge of the screen. */
  /* align-items:start comes down from the desktop grid. In a COLUMN flex
     box that is the cross axis, so it means "do not stretch" — every part
     sized to its own content. The photograph's content is a lazy-loaded
     image, which is 0x0 until it loads, so the box collapsed to nothing,
     the image never entered the viewport, and it never loaded. The card
     had no picture on a phone at all. */
  .stack--products .panel{display:flex;flex-direction:column;gap:0;
    align-items:stretch;
    grid-template-columns:1fr;padding:1.4rem;position:static}
  /* the two wrappers step aside so the parts can be ordered for a phone:
     picture, then the words, then the action at the foot */
  .stack--products .panel > div{display:contents}
    
  /* The three figures ran two-up and left the third stranded on its own
     row. One per line reads as a spec list rather than a broken grid, and
     puts the number first where a buyer looks. */
  .panel__stats{gap:.45rem}
  .panel__stats li{flex:1 1 100%;display:flex;align-items:baseline;gap:.6rem;
    padding:.55rem .8rem}
  .panel__stats b{font-size:1.02rem}
  .panel__stats span{margin-block-start:0;margin-inline-start:auto;text-align:end}

  /* Both actions full width and stacked: a 133px button beside a 181px one
     is a thumb aiming at the smaller of two unequal targets. */
  .stack--products .panel__act{flex-direction:column;align-items:stretch;gap:.6rem}
  .stack--products .panel__act .pill{justify-content:center;inline-size:100%}

  /* ---- one product, one screen -------------------------------------
     The first attempt at this shrank every element until the card fit,
     and it read as cramped because that is what it was. The height comes
     out of WHAT IS ON SCREEN instead: the applications fold behind their
     own count, which frees roughly a photograph's worth of room and lets
     the rest sit at a comfortable size. */
  .stack--products{gap:1.6rem}
  .stack--products .panel{padding:1.3rem}
    .stack--products .panel .h2,.stack--products .panel .panel__name{font-size:1.6rem}
  .panel__name{margin-block-start:.35rem}
  .panel__claim{margin-block-start:.5rem;font-size:.97rem;line-height:1.38}
  .panel__lede{margin-block-start:.8rem;font-size:.94rem;line-height:1.55}
  .panel__stats{margin-block-start:1rem;gap:.42rem}
  .panel__stats li{padding:.5rem .8rem}
  .panel__stats b{font-size:1rem}
  .panel__stats span{font-size:.74rem}

  /* two figures across, the third taking the full width under them */
  .panel__stats li{flex:1 1 calc(50% - .21rem)}
  .panel__stats li:last-child{flex-basis:100%}

  /* a shallower crop: still a photograph, 22px less of it */
    .stack--products .panel__act{order:1;margin-block-start:1.5rem}
  .stack--products .panel .h2{font-size:1.7rem}
  .panel__sub{margin-block:1.3rem .2rem}
  .panel__lede{font-size:1rem}

  /* the nav is a solid bar on a phone and the hero starts beneath it */
  .nav{background:color-mix(in srgb,var(--wash) 94%,transparent);
    backdrop-filter:blur(14px)}
  .has-hero .hero{padding-block-start:var(--nav-h)}

  .sec{padding-block:2.8rem}
  .speccard{padding:1.25rem}
}
@media (max-width:520px){
  .h1{font-size:2.1rem}
  [dir="rtl"] .h1{font-size:1.9rem}
  .h2{font-size:1.7rem}
}


/* --- article body ------------------------------------------------------
   What the editor writes, set in the site's own measure. The allowlist in
   the admin decides which of these can ever appear. */
.prose{max-width:68ch;font-size:1.05rem;line-height:1.75;color:var(--ink-2)}
[dir="rtl"] .prose{line-height:1.95}
.prose > * + *{margin-block-start:1.15rem}
.prose h2{font-size:1.6rem;color:var(--ink);line-height:1.2;margin-block-start:2.4rem}
.prose h3{font-size:1.25rem;color:var(--ink);margin-block-start:2rem}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:.2em}
.prose ul,.prose ol{padding-inline-start:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.prose li{padding-inline-start:.2rem}
.prose blockquote{margin:2rem 0;padding-inline-start:1.2rem;
  border-inline-start:3px solid var(--green);color:var(--ink);font-size:1.15rem}
.prose strong{color:var(--ink);font-weight:600}

/* The Active Silica photograph is a wide composition — field on the left,
   plant on the right. A 4:3 crop would cut one end off it. */
#material .ph{aspect-ratio:16/9}

/* the whole product card is the link now — the little "Discover" line
   stays as the visible affordance, but the target is the card */
.prod__link{display:flex;flex-direction:column;flex:1;color:inherit}
.prod__link:hover .prod__cta{color:var(--green-d)}

/* ---- where an anchor lands -------------------------------------------
   The header is fixed, so a plain jump to #potassium-silicate parks that
   panel's top edge underneath it and you arrive looking at the middle of
   a card. Every anchor target keeps the header's height clear, plus a
   little air. */
[id]{scroll-margin-block-start:calc(var(--nav-h) + 1.2rem)}
html{scroll-padding-block-start:calc(var(--nav-h) + 1.2rem)}

/* the second, quieter half of the phone row */
.contact dd .wa{margin-inline-start:.6rem;padding:.1rem .5rem;border-radius:999px;
  border:1px solid currentColor;font-size:.78rem;opacity:.75}
.contact dd .wa:hover{opacity:1}

/* =====================================================================
   PHONE CORRECTIONS

   Found by measuring the rendered page at 375px rather than by looking at
   it. Every item here is a number that was wrong, not a preference.
   ===================================================================== */

/* The logotype was breaking across two lines ("BIO-" / "SILICA") and the
   Contact pill across three — not for want of room: the nav's children
   came to 240px inside a 375px viewport. They were simply allowed to
   wrap. A word mark and a button label never should. */
.mark b,.mark i{white-space:nowrap}
.pill,.pill span,.btn{white-space:nowrap}

@media (max-width:600px){
  /* The sublabel computed to 5.6px — that is a texture, not a word. It is
     a third of the logotype, which works at desktop size and collapses at
     phone size, so it gets a floor. */
  .mark i{font-size:max(calc(var(--ms,1.25rem)*.3), .56rem);letter-spacing:.14em}

  /* 39px square. A fingertip is about 44. */
  .burger{width:2.95rem;height:2.95rem}

  /* The logo is the "go home" link on every page and was a 30px target.
     The mark does not change size — the area around it does. */
  .nav .mark{padding-block:.42rem}

  /* Footer links were 18px tall — tappable only on purpose. The text size
     is unchanged; the target around it is not. */
  .ft h4 + ul a{display:block;padding-block:.6rem}
  .ft h4 + ul li{margin-block:0}

  /* The hero pill sat on two lines once it could not wrap; give it room
     by letting it use the full measure rather than shrinking the words. */
  .hero__act .pill{padding-inline:1.35rem}

}

/* A short phone (an SE is 667 tall, leaving 588 once the header is off)
   cannot take the same card as a 812-tall one. Rather than one size that
   overflows the small screens or wastes the big ones, the parts that can
   give without losing meaning give a little more: a shallower photograph,
   the description held to two lines, tighter rhythm throughout. The
   figures and every application stay. */
@media (max-width:600px) and (max-height:730px){
  .stack--products .panel{padding:.95rem}
    .stack--products .panel .h2,.stack--products .panel .panel__name{font-size:1.32rem}
  .panel__claim{font-size:.86rem;margin-block-start:.3rem}
  /* The clamp that was here cut the description to two lines. Folding the
     applications away bought back more room than the clamp ever saved, so
     nothing on the card is truncated any more. */
  .panel__lede{margin-block-start:.5rem;font-size:.88rem;line-height:1.45}
  .panel__stats{margin-block-start:.6rem}
  .panel__stats li{padding:.34rem .6rem}
  .panel__stats b{font-size:.88rem}
  .panel__sub{margin-block:.7rem .1rem}
  .panel__chips li{font-size:.76rem;padding:.26rem .58rem}
  .stack--products .panel__act{margin-block-start:.75rem}
  .stack--products .panel__act .pill{padding-block:.6rem;font-size:.86rem}
}

/* --- the applications fold --------------------------------------------
   A <details> so it works without JavaScript and is announced correctly
   to a screen reader. Open and inert on a wide screen; a real control
   only where the room is short. */
.apps{margin-block-start:0}
.apps summary{list-style:none;cursor:default}
.apps summary::-webkit-details-marker{display:none}
.apps summary i{display:none}
/* Open in the markup, closed by script on a phone. The other way round —
   closed by default, forced open on desktop — lost the chips entirely:
   Chrome hides a closed <details> with content-visibility, which
   display:flex cannot override. This way the worst case if the script
   never runs is a taller card, not missing content. */
@media (min-width:601px){ .apps{display:contents} }

@media (max-width:600px){
  .apps summary{cursor:pointer;display:flex;align-items:center;gap:.6rem;
    padding-block:.55rem;margin-block-start:.9rem;
    border-block-start:1px solid rgba(255,255,255,.14)}
  .apps summary .panel__sub{margin:0}
  /* the count is the disclosure: "six applications" says what is behind
     the arrow, an arrow on its own says only that something is */
  .apps summary i{display:inline-grid;place-items:center;font-style:normal;
    inline-size:1.45rem;block-size:1.45rem;border-radius:999px;
    background:rgba(255,255,255,.14);font-size:.76rem;font-weight:600;
    color:rgba(255,255,255,.92)}
  .apps summary::after{content:"";margin-inline-start:auto;inline-size:.62rem;
    block-size:.62rem;border-inline-end:1.8px solid rgba(255,255,255,.6);
    border-block-end:1.8px solid rgba(255,255,255,.6);
    transform:rotate(45deg) translate(-.1em,-.1em);
    transition:transform 220ms var(--ease-out)}
  .apps[open] summary::after{transform:rotate(225deg) translate(-.05em,-.05em)}
  .apps .panel__chips{margin-block-start:.7rem}
}

/* =====================================================================
   THE PRODUCT PICKER AND THE SINGLE PRODUCT PAGE

   Phones only for the picker; the single product page stands at any
   width because it is a real URL someone can be sent.
   ===================================================================== */

/* the deck is a phone idea — the desktop page keeps its stacked cards */
.pswipe{display:none}

/* ---- one product, one page ---- */
.prod1{min-block-size:100vh;padding-block:clamp(5.5rem,13vw,8rem) clamp(3rem,9vw,5rem)}
.prod1.panel--ag{background:var(--panel);color:#EDF4EA}
.prod1.panel--in{background:var(--clay-deep);color:#F6EFE9}
.prod1.panel--dk{background:var(--deep);color:var(--on-d)}
.prod1__in{max-inline-size:44rem}
.prod1__back{display:inline-flex;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.7);text-decoration:none;font-size:.92rem;
  transition:color 160ms var(--ease-out)}
.prod1__back:hover{color:#fff}
.prod1__back em{font-style:normal}
[dir="rtl"] .prod1__back em{transform:scaleX(-1);display:inline-block}
.prod1__n{margin-block-start:2.2rem;color:rgba(255,255,255,.62)}
.prod1 .panel--ag .prod1__n{color:#9FCF9C}
.prod1__name{margin:.5rem 0 0;font-size:clamp(2rem,7vw,2.9rem);line-height:1.1;
  font-weight:600;letter-spacing:-.02em;color:inherit}
.prod1__claim{margin:.7rem 0 0;font-size:clamp(1rem,3.6vw,1.15rem);line-height:1.4;
  font-weight:500;max-width:32ch}
.panel--ag .prod1__claim{color:#9FCF9C}
.panel--in .prod1__claim{color:#F1D0AA}
.panel--dk .prod1__claim{color:#9FCF9C}
.prod1__ph{margin-block-start:1.9rem;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:4/3;background:var(--wash-2)}
.prod1__ph img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.prod1__says{margin-block-start:1.5rem;font-size:1rem;line-height:1.65;
  color:rgba(255,255,255,.82);max-width:46ch}
.prod1__stats{list-style:none;margin:1.6rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.55rem}
.prod1__stats li{flex:1 1 9rem;padding:.8rem .95rem;border-radius:.8rem;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12)}
.prod1__stats b{display:block;font-size:1.2rem;font-weight:600;color:#fff;line-height:1.15}
.panel--in .prod1__stats b{color:#FDF3E9}
.prod1__stats span{display:block;margin-block-start:.22rem;font-size:.78rem;
  color:rgba(255,255,255,.66)}
.prod1__sub{margin-block:2rem .1rem;color:rgba(255,255,255,.62)}
.panel--ag .prod1__sub{color:#9FCF9C}
.prod1__uses{list-style:none;margin:.75rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem}
.prod1__uses li{font-size:.92rem;line-height:1.3;color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:.44rem .9rem}
[dir="rtl"] .prod1__uses li{direction:rtl}
.prod1__act{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:2.2rem}
.prod1 .pill{border-width:1px}
.panel--ag .prod1__act .pill{background:#A9E3A8;border-color:#A9E3A8;color:#0D3212}
.panel--in .prod1__act .pill{background:#F2CB9E;border-color:#F2CB9E;color:#46250A}
.panel--dk .prod1__act .pill{background:#8FD98F;border-color:#8FD98F;color:#15181A}
.prod1__act .pill--ghost{background:transparent;color:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.34)}
.prod1__next{display:flex;flex-direction:column;gap:.2rem;
  margin-block-start:3.2rem;padding-block-start:1.4rem;
  border-block-start:1px solid rgba(255,255,255,.16)}
.prod1__next a{display:flex;align-items:center;gap:.6rem;padding-block:.75rem;
  color:rgba(255,255,255,.78);text-decoration:none;font-size:1rem;
  transition:color 160ms var(--ease-out)}
.prod1__next a:hover{color:#fff}
.prod1__next em{margin-inline-start:auto;font-style:normal;opacity:.6}
[dir="rtl"] .prod1__next em{transform:scaleX(-1)}
@media (max-width:600px){
  .prod1__act{flex-direction:row;flex-wrap:wrap}
  .prod1__act .pill{flex:1 1 auto;justify-content:center}
}

/* =====================================================================
   THE TITLE SCREEN ON A PHONE

   A page head standing alone fills the viewport on desktop — that is the
   "open on type" the site was built around. It was then switched off
   below 900px (min-height:0), so a phone got the title and the content
   crammed together and the effect existed only on a laptop.

   It comes back here, minus the fixed header so the title is centred in
   what you can actually see rather than in the whole viewport.
   ===================================================================== */
@media (max-width:600px){
  /* 100svh, NOT 100svh minus the header. The header is fixed — it floats
     over the page rather than taking a row of it — so a section that
     subtracts its height ends one header short of the screen, and the
     next section pokes up into view. That is exactly what was leaving a
     strip of the first product visible under the title. The header's
     height becomes top padding instead, so the words clear it while the
     section still measures a full screen. */
  .pagehead:not(.pagehead--run-on){
    min-height:100svh;
    display:grid;align-content:center;
    padding-block:calc(var(--nav-h) + 1rem) 2.5rem}

  /* the deck gets a screen of its own */
  .pswipe{display:flex;flex-direction:column;justify-content:center;
    min-block-size:100svh;padding-block:calc(var(--nav-h) + 1rem) clamp(1.5rem,6vw,2.5rem)}

  /* And the stacked cards go. They are the desktop layout; on a phone the
     deck above replaces them entirely. Hidden rather than removed so the
     desktop page and search engines still get the full markup.
     (This rule lived with the old vertical picker and I deleted it along
     with that picker — which left 2156px of the cards sitting under the
     deck on every phone.) */
  .stack--wrap{display:none}

  /* One swipe moves you one screen: title, then the deck, then the foot.
     mandatory, not proximity — proximity only tidies up a scroll that
     happened to stop nearby, which is not the same thing as a swipe
     carrying you from one screen to the next.

     scroll-snap-stop:always is what stops a hard flick skipping the deck
     entirely and landing on the footer.

     The footer HAS to be a snap point too. With mandatory snapping every
     rest position must be one, or the browser pulls you back off anything
     that is not — and the footer becomes unreachable. */
  .products-page{scroll-snap-type:y mandatory}
  .products-page .pagehead,
  .products-page .pswipe,
  .products-page .ft{scroll-snap-align:start;scroll-snap-stop:always}
}

/* =====================================================================
   THE SWIPE DECK  (phones only)
   ===================================================================== */
@media (max-width:600px){
  /* The rail. scroll-padding is what centres a card when it snaps —
     without it the first and last sit hard against the screen edge. */
  .pswipe__track{display:flex;gap:.8rem;overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-inline:8vw;scroll-padding-inline:8vw;
    padding-block:.4rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain}
  .pswipe__track::-webkit-scrollbar{display:none}

  /* 84% of the screen, so the next card always shows at the edge. That
     peek is the whole instruction: nothing has to say "swipe". */
  .pswipe__card{flex:0 0 84%;scroll-snap-align:center;
    display:flex;flex-direction:column;
    min-block-size:min(66svh,34rem);
    padding:1.5rem 1.15rem 1.15rem;border-radius:var(--r-panel);
    color:#fff;text-decoration:none;
    box-shadow:0 1px 2px rgba(15,30,18,.10),0 18px 38px -26px rgba(15,30,18,.6);
    transition:transform 260ms var(--ease-out)}
  .pswipe__card:active{transform:scale(.982)}
  /* words at the top, centred */
  .pswipe__say{text-align:center;padding-inline:.2rem}
  .pswipe__n{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;opacity:.55}
  .pswipe__t{margin:.5rem 0 0;font-size:1.5rem;line-height:1.16;
    font-weight:600;letter-spacing:-.018em;color:inherit}
  .pswipe__d{margin:.55rem 0 0;font-size:.92rem;line-height:1.45;
    color:rgba(255,255,255,.76)}
  .panel--in .pswipe__d{color:rgba(255,255,255,.8)}
  /* and the picture takes everything left, however long the words ran */
  .pswipe__ph{flex:1;margin-block-start:1.15rem;min-block-size:0;
    border-radius:calc(var(--r-panel) - .55rem);overflow:hidden;
    background:rgba(0,0,0,.22)}
  .pswipe__ph img{inline-size:100%;block-size:100%;object-fit:cover;display:block}

  /* The indicator. The active dot stretches into a bar, so it reports
     both where you are and how many there are — a row of identical dots
     only does the second. */
  .pswipe__dots{display:flex;align-self:center;align-items:center;gap:.45rem;
    margin-block-start:1.5rem;padding:.55rem .8rem;border-radius:999px;
    background:var(--wash-2)}
  .pswipe__dots button{inline-size:.42rem;block-size:.42rem;padding:0;border:0;
    border-radius:999px;background:var(--ink-3);opacity:.42;cursor:pointer;
    transition:inline-size 300ms var(--ease-out),opacity 300ms var(--ease-out),
               background-color 300ms var(--ease-out)}
  .pswipe__dots button.on{inline-size:1.5rem;opacity:1;background:var(--green)}
}
@media (prefers-reduced-motion: reduce){
  .pswipe__track{scroll-behavior:auto}
  .pswipe__dots button{transition:none}
}

/* The page title on a phone was sized for a laptop column. It has a whole
   screen to itself here, so it takes it.

   Every standalone head, not just Products: "Who we are." earns the same
   screen as "What we make." The articles head is excluded by the
   :not() — it runs on into its own grid rather than standing alone, so a
   title at this size would crowd the first card. */
@media (max-width:600px){
  .pagehead:not(.pagehead--run-on) .h1{font-size:clamp(2.6rem,13vw,3.6rem);line-height:1.02}
  .pagehead:not(.pagehead--run-on) .lede{font-size:1.05rem;line-height:1.55;max-width:26ch}
}

/* =====================================================================
   THE CONTACT BLOCK ON A PHONE

   1203px — a screen and a half — of which a fifth was a details list
   that said "to be supplied" four times. That list now renders only what
   exists (see home.php); the rest is here.
   ===================================================================== */
@media (max-width:600px){
  .contact .h2{font-size:1.85rem;line-height:1.14}
  .contact__lede{margin-block-start:.8rem;font-size:.97rem;line-height:1.55}
  .contact__tbd{margin-block-start:.7rem;font-size:.9rem;color:var(--on-d-2)}

  /* Whatever rows survive sit two across instead of four down — and the
     label goes ABOVE its value inside each one. The desktop row puts them
     side by side, which in a half-width cell wrapped the word "Company"
     over four lines and made a single row 124px tall. */
  /* .contact .contact__dl, not .contact__dl: the desktop rule is
     ".contact dl div" — two classes-worth of specificity — so a single
     class lost and the label stayed beside its value, wrapping
     "Bio-Silica - Egypt" over four lines in a half-width cell. */
  .contact .contact__dl{display:grid;grid-template-columns:1fr 1fr;
    gap:1rem;margin-block-start:1.1rem}
  .contact .contact__dl div{display:block;gap:0;margin:0;padding-block:0;
    border-block-start:0}
  .contact .contact__dl dt{margin-block-end:.15rem;font-size:.76rem;line-height:1.35}
  .contact .contact__dl dd{margin:0;font-size:.92rem;line-height:1.4}

  /* Name and Company share a line: two short answers that never needed a
     row each. Email, interest and the message keep the full width. */
  .form{gap:.85rem}
  .form .f{margin:0}
  .form .f:nth-child(3),.form .f:nth-child(4){grid-column:span 1}
  .contact__grid{gap:2rem}

  /* a textarea deep enough to write in, not deep enough to scroll past */
  .form textarea{min-block-size:6.2rem}
}

/* --- the agriculture loop on a phone ---------------------------------
   Sideways, the three stops wrap: in English "Agriculture -> Advanced
   Materials" takes the first row and the returning "Agriculture" is
   stranded on the second, with the arrow between them dangling off the
   end of row one. The sequence stops reading as a sequence. Arabic only
   escaped it because its words are shorter — which is exactly the kind
   of thing that breaks the moment a word changes.

   So it stands up instead. A column always fits, in any language, and a
   downward arrow reads as "then" just as well as a sideways one. */
@media (max-width:600px){
  /* Centred and sized to their own words. Stretching them to the full
     column turned three steps into three buttons — and the dashed one,
     full width, stopped reading as "back to where we started". */
  /* The two gaps have to match, because the arrow belongs to the step
     ABOVE it: the li's own gap sets the space over the arrow and the
     loop's gap sets the space under it. At .3rem that was 4px either
     side — symmetric, but so tight the arrow read as stuck to the pill
     above rather than standing in the space between. */
  .loop{flex-direction:column;align-items:center;gap:.75rem}
  .loop li{flex-direction:column;align-items:center;gap:.75rem}
  .loop li span{justify-content:center;text-align:center;
    padding:.5rem 1.1rem;font-size:.97rem}
  /* A DIFFERENT ARROW, not the sideways one rotated. The box is the full
     width of the column — 330px — so rotating it by 90 degrees drew a
     330px-tall line down the page, and the transform collapsed to a
     degenerate matrix on top of that. A down arrow gets a box the shape
     of a down arrow. */
  .loop li:not(:last-child)::after{
    inline-size:.7rem;block-size:.95rem;margin-inline:auto;margin-block:0;
    -webkit-mask:var(--loop-arrow-down) no-repeat center/contain;
            mask:var(--loop-arrow-down) no-repeat center/contain;
    /* it grows downward now, so the sequence still draws itself in order */
    transform:scaleY(var(--arrow));transform-origin:50% 0}
  /* down means the same thing in both directions of reading, so there is
     no mirror to apply here */
  [dir="rtl"] .loop li:not(:last-child)::after{
    transform:scaleY(var(--arrow));transform-origin:50% 0}
}

/* --- "there is more below" --------------------------------------------
   A thin line that travels down inside a taller one, once every couple of
   seconds. It reads as a direction rather than a button, which is what it
   is — the page scrolls the same whether or not anyone touches it.

   It fades the moment the page moves. An indicator that is still
   insisting after you have obeyed it is just noise. */
.scrollcue{position:absolute;inset-inline-start:50%;inset-block-end:clamp(1.6rem,5vh,2.8rem);
  translate:-50% 0;
  inline-size:1.45rem;block-size:2.35rem;border-radius:999px;
  border:1px solid currentColor;color:var(--ink-3);opacity:.5;
  display:grid;justify-items:center;padding-block-start:.42rem;
  transition:opacity 420ms var(--ease-out),translate 420ms var(--ease-out);
  cursor:default}
.scrollcue i{display:block;inline-size:1.5px;block-size:.42rem;border-radius:2px;
  background:currentColor;
  animation:cuedrop 2.1s var(--ease-out) infinite}
@keyframes cuedrop{
  0%   {transform:translateY(0);opacity:0}
  22%  {opacity:1}
  70%  {transform:translateY(.72rem);opacity:0}
  100% {transform:translateY(.72rem);opacity:0}
}
/* once the page has moved, its job is done */
.has-scrolled .scrollcue{opacity:0;translate:-50% .4rem;pointer-events:none}
.scrollcue.is-tappable{cursor:pointer}
@media (hover:hover){ .scrollcue.is-tappable:hover{opacity:.85} }
/* the head is the positioning context for it */
.pagehead:not(.pagehead--run-on){position:relative}
@media (prefers-reduced-motion: reduce){
  .scrollcue i{animation:none;transform:translateY(.36rem)}
}

/* the tax number sits with the copyright, not with the contact details */
.ft__tax{color:var(--on-d-2)}
.ft__tax b{font-weight:500;color:var(--on-d)}

/* =====================================================================
   /products AS AN INDEX

   One card component, two layouts. Under 600px it is a swipe rail with
   dots; above, the same three cards are a row you take in at a glance.
   There is no second set of markup and no third layout to keep in step —
   the tall stacked panels this replaces have been deleted outright.
   ===================================================================== */
@media (min-width:601px){
  .pswipe{display:block;padding-block:clamp(1rem,3vw,2rem) clamp(4rem,9vw,7rem)}
  .pswipe__track{display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(1rem,2vw,1.6rem);
    inline-size:var(--shell);margin-inline:auto;
    /* a grid, so every rail behaviour is switched off explicitly */
    overflow:visible;scroll-snap-type:none;padding:0}
  .pswipe__card{flex:none;scroll-snap-align:none;
    display:flex;flex-direction:column;min-block-size:0;
    padding:1.5rem 1.35rem 1.35rem;border-radius:var(--r-panel);
    color:#fff;text-decoration:none;
    box-shadow:0 1px 2px rgba(15,30,18,.08),0 20px 40px -30px rgba(15,30,18,.55);
    transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out)}
  @media (hover:hover){
    .pswipe__card:hover{transform:translateY(-6px);
      box-shadow:0 2px 5px rgba(15,30,18,.10),0 34px 60px -32px rgba(15,30,18,.62)}
    .pswipe__card:hover .pswipe__ph img{transform:scale(1.05)}
    .pswipe__card:hover .pswipe__go em{transform:translateX(.25rem)}
  }
  .pswipe__say{text-align:start}
  .pswipe__n{display:block;font-size:.76rem;font-weight:600;letter-spacing:.1em;opacity:.55}
  .pswipe__t{margin:.45rem 0 0;font-size:1.42rem;line-height:1.16;font-weight:600;
    letter-spacing:-.018em;color:inherit}
  .pswipe__d{margin:.5rem 0 0;font-size:.93rem;line-height:1.5;
    color:rgba(255,255,255,.76)}
  .pswipe__ph{margin-block-start:1.1rem;aspect-ratio:4/3;
    border-radius:calc(var(--r-panel) - .55rem);overflow:hidden;
    background:rgba(0,0,0,.22)}
  .pswipe__ph img{inline-size:100%;block-size:100%;object-fit:cover;display:block;
    transition:transform 520ms var(--ease-out)}
  /* the dots belong to the rail; a grid has nowhere to scroll */
  .pswipe__dots{display:none}
}

/* the figures on the card: desktop only, where there is room */
.pswipe__stats{display:none}
@media (min-width:601px){
  .pswipe__stats{display:flex;flex-wrap:wrap;gap:.4rem;
    margin:1.05rem 0 0;padding:0;list-style:none}
  .pswipe__stats li{flex:1 1 0;min-inline-size:0;
    padding:.5rem .65rem;border-radius:.6rem;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12)}
  .pswipe__stats b{display:block;font-size:.95rem;font-weight:600;color:#fff;
    line-height:1.15;white-space:nowrap}
  .panel--in .pswipe__stats b{color:#FDF3E9}
  .pswipe__stats span{display:block;margin-block-start:.15rem;font-size:.68rem;
    line-height:1.3;color:rgba(255,255,255,.62)}
}

/* the call to action sits at the foot of the card, whatever it holds */
.pswipe__go{display:none}
@media (min-width:601px){
  .pswipe__go{display:inline-flex;align-items:center;gap:.45rem;
    margin-block-start:auto;padding-block-start:1.15rem;
    font-size:.92rem;font-weight:500;color:rgba(255,255,255,.9)}
  .pswipe__go em{font-style:normal;transition:transform 220ms var(--ease-out)}
  [dir="rtl"] .pswipe__go em{transform:scaleX(-1)}
}

/* On /products the title must NOT take the whole screen: the whole point
   of the index is seeing all three products without scrolling, and a
   full-height head pushes them under the fold by definition. The title
   keeps its air, the cards come up to meet it, and the two together are
   one screen. Other pages keep the title screen — they have nothing that
   needs to be seen beside the heading. */
@media (min-width:601px){
  .products-page .pagehead:not(.pagehead--run-on){
    min-height:0;
    padding-block:var(--nav-h) 0}
  .products-page .pagehead .eyebrow{margin-block-end:.2rem}
  /* the title on this page is a label for the three cards, not a statement
     that owns the screen — it is sized to leave them room */
  .products-page .pagehead .h1{font-size:clamp(2.1rem,3.4vw,3.1rem);line-height:1.05}
  .products-page .pagehead .lede{margin-block-start:.8rem;font-size:1rem;max-width:44ch}
  .products-page .scrollcue{display:none}
  .pswipe{padding-block:clamp(.7rem,1.8vh,1.4rem) clamp(2.5rem,6vw,4rem)}

  /* THE PHOTOGRAPH KEEPS ITS SHAPE.

     It used to be capped by viewport height — aspect-ratio:4/3 with a
     max-block-size — which is a contradiction: the box cannot be both
     4:3 and 130px tall, so the height won and the picture was silently
     cropped to about 2:1. That is the "cut / too zoomed in" the client
     saw, and it was the CSS doing it, not the upload.

     So the ratio is fixed and the ROW gives instead: on a screen that
     is short relative to its width the three cards get narrower and the
     picture scales with them, still 4:3. 130vh is the widest the row can
     be before the cards stop fitting the screen — and narrower than that
     is worse, not better, because the names start wrapping onto an extra
     line and give the height straight back. */
  /* The row was capped at 130vh so three 4:3 photographs would fit the
     screen. It fitted — and left 286px of the shell empty, which made
     three tall narrow cards with a small picture in each. Wrong trade:
     the cap bought vertical room by spending the thing the cards are
     actually made of. So the row takes the full width again and the
     height comes out of the fixed furniture instead — the space under
     the nav, the standfirst, the padding around the figures. Same three
     cards on one screen, 24% more card and a 27% bigger photograph. */
  .pswipe__track{max-inline-size:100%;gap:1rem}
  /* A second row of figures arrived with the client's extra numbers and
     cost about 50px, which put the third card under the fold again. The
     picture gives it back WITHOUT changing shape: it keeps 4:3 exactly —
     same crop as the product page, which is the whole point of the fix —
     and simply sits a little inside the card. Squashing the ratio is what
     caused the "too zoomed in" complaint; this cannot. */
  .pswipe__ph{aspect-ratio:4/3;margin-block-start:.45rem;
    max-inline-size:88%;margin-inline:auto}
  .products-page .pagehead__lede{margin-block-start:.6rem}
  .pswipe__card{padding:.8rem .95rem .6rem}
  .pswipe__stats{margin-block-start:.85rem;gap:.35rem}
  .pswipe__stats li{padding:.42rem .55rem}
  .pswipe__stats b{font-size:.9rem}
  .pswipe__go{padding-block-start:.85rem}
}


/* Anything that is not a tall screen needs more than a smaller picture.
   The threshold is 1100px, not 820, because the root font size on this
   site grows with viewport WIDTH — so a 1920x1080 monitor renders the
   whole design at ~26px root and the cards overflowed a screen that is
   not short at all by the numbers. Everything gives a little, and the
   description holds to two lines so one long sentence cannot push the
   third card under the fold. */
@media (min-width:601px) and (max-height:1500px){
  /* One Arabic product name wraps onto a second line, and in a grid row
     every card stretches to the tallest — so one wrapped name costs the
     whole row 30px and pushed the third card under the fold in Arabic
     while English fitted. The name cannot be cut, so the heading above
     gives up the space instead: it is a label for the three cards, and
     they are the reason anyone is on this page. */
  .products-page .pagehead .h1{font-size:clamp(1.55rem,2.1vw,1.95rem)}
  .products-page .pagehead .eyebrow{margin-block-end:.3rem}
  .products-page .pagehead .lede{font-size:.9rem;margin-block-start:.6rem}
  /* No clamp any more — the card carries a line written to fit, so nothing
     is cut mid-word to protect the fold. */
  .pswipe__d{font-size:.88rem;line-height:1.4}
  .pswipe__t{font-size:1.28rem}
  .pswipe__stats{margin-block-start:.55rem}
  .pswipe__stats b{font-size:.85rem}
  .pswipe__stats span{font-size:.64rem}
  .pswipe__go{padding-block-start:.8rem;font-size:.88rem}
  .pswipe{padding-block:0 clamp(2rem,4vw,3rem)}
  .products-page .pagehead__lede{margin-block-start:.5rem}
  .products-page .pagehead .lede{font-size:.8rem;line-height:1.4}
  .pswipe__stats{margin-block-start:.35rem;gap:.3rem}
  /* The figures stretch to fill the card by default (flex:1 1 0). On a
     card this wide that is two half-card boxes holding "26%" — mostly
     empty. They hug their own content instead, which reads as two facts
     rather than as two under-filled containers. */
  /* Two to a row, not one row of everything: a card carries three or
     four of these now, and four across would be the old squeeze again. */
  .pswipe__stats li{flex:1 1 calc(50% - .3rem);min-inline-size:0;padding:.3rem .5rem}
  .pswipe__stats b{font-size:.84rem}
  .pswipe__stats span{font-size:.62rem}
  .pswipe__act{padding-block-start:.3rem}
}

/* --- the card's two links ---------------------------------------------
   The product name is the card's link; its ::after covers the whole card
   so anywhere you click goes to the product. The data sheet sits above
   that overlay, so it is a real second destination rather than a button
   that quietly opens the wrong thing. */
.pswipe__card{position:relative}
.pswipe__t .pswipe__main{color:inherit;text-decoration:none}
.pswipe__t .pswipe__main::after{content:"";position:absolute;inset:0;z-index:1}
.pswipe__sheet{position:relative;z-index:2}
.pswipe__act{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-block-start:auto}
.pswipe__sheet{display:none}

@media (min-width:601px){
  .pswipe__act{padding-block-start:.75rem}
  .pswipe__go{margin-block-start:0;padding-block-start:0}
  /* the PDF is what an industrial buyer came for; one click was one too
     many, so it is back on the index beside "View product" */
  .pswipe__sheet{display:inline-flex;align-items:center;gap:.4rem;
    margin-inline-start:auto;
    font-size:.88rem;font-weight:500;text-decoration:none;
    color:rgba(255,255,255,.72);
    border-block-end:1px solid rgba(255,255,255,.3);
    transition:color 180ms var(--ease-out),border-color 180ms var(--ease-out)}
  .pswipe__sheet em{font-style:normal}
  .pswipe__sheet:hover{color:#fff;border-block-end-color:#fff}
  [dir="rtl"] .pswipe__sheet{margin-inline-start:auto}
}

/* =====================================================================
   THE INDEX CARDS ARE ONE SURFACE

   They were the three panel tones — deep green, clay, near-black — side
   by side. Three saturated blocks in a row read as three brands rather
   than one range, and nothing on the card was legible against all three
   without a per-tone override.

   One surface instead. The photographs carry the variety, and the only
   colour is the accent that means something: the number and the action.
   Each product keeps its own colour where a single colour reads as
   identity rather than as a clash — filling its own page.
   ===================================================================== */
.pswipe__card,
.pswipe__card.panel--ag,
.pswipe__card.panel--in,
.pswipe__card.panel--dk{
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(27,31,28,.04),0 14px 30px -26px rgba(27,31,28,.30)}

.pswipe__card .pswipe__n{color:var(--green);opacity:1}
.pswipe__card .pswipe__t,
.pswipe__card .pswipe__t .pswipe__main{color:var(--ink)}
.pswipe__card .pswipe__d{color:var(--ink-2)}

.pswipe__card .pswipe__ph{background:var(--wash-2)}

.pswipe__card .pswipe__stats li{
  background:var(--wash);border-color:var(--line)}
.pswipe__card .pswipe__stats b,
.pswipe__card.panel--in .pswipe__stats b{color:var(--ink)}
.pswipe__card .pswipe__stats span{color:var(--ink-3)}

.pswipe__card .pswipe__go{color:var(--green)}
.pswipe__card .pswipe__sheet{color:var(--ink-3);
  border-block-end-color:var(--line)}
.pswipe__card .pswipe__sheet:hover{color:var(--ink);
  border-block-end-color:var(--ink-3)}

@media (hover:hover) and (min-width:601px){
  .pswipe__card:hover{border-color:var(--wash-2);
    box-shadow:0 2px 4px rgba(27,31,28,.05),0 26px 48px -28px rgba(27,31,28,.38)}
}

/* The page title's standfirst. This was an inline style on the element,
   which meant no media query could reach it — so it is a class now, and
   the value it used to hardcode lives here. The narrower tiers below
   tighten it; on a phone it keeps the original 1.6rem, because without a
   rule at all the standfirst climbed into the heading. */
.pagehead__lede{margin-block-start:1.6rem}

/* A figure like "70–80%" came out as "80%–70" on the Arabic pages.
   That is the bidi algorithm doing its job, not a typo: the en dash is a
   neutral character, and a neutral between two numbers takes the
   paragraph's direction — right-to-left — so the two halves of the range
   swap places. The client would have read a wrong number off his own
   site. Giving the value its own left-to-right direction keeps the range
   in order, and text-align:right puts the box's content back against the
   card's starting edge so nothing moves visually.

   plaintext, not direction:ltr. Forcing LTR fixes "70–80%" and breaks
   "أعلى من 90%" in the same stroke — that one is a real Arabic
   sentence, and in an LTR box its percent sign jumps to the front.
   plaintext takes each value's direction from its own first strong
   character: none in a number, so the range runs left-to-right; Arabic in
   the sentence, so the sentence stays right-to-left. */
[dir="rtl"] .pswipe__stats b,
[dir="rtl"] .prod1__stats b{unicode-bidi:plaintext;text-align:right}

/* =====================================================================
   PHONES: THE THREE ARE A LIST, NOT A RAIL

   The deck showed one product at a time and asked for a swipe to learn
   the other two existed. That is the same complaint the client made about
   the desktop page — "I should not have to scroll to reach the 2nd and
   3rd" — and a sideways swipe is scrolling that hides its own scrollbar.

   So the phone now says what the desktop says: here are three products,
   all of them, at once. Each row is a picture, a name, a line and an
   arrow; the whole row is the link. Nothing is hidden behind a gesture.

   This block sits after every other .pswipe rule on purpose: it is
   undoing the rail declared further up, and in CSS the later rule of
   equal weight is the one that stands.
   ===================================================================== */
@media (max-width:600px){

  /* the rail becomes a stack */
  .pswipe__track{
    display:flex;flex-direction:column;
    gap:.7rem;
    overflow:visible;
    scroll-snap-type:none;
    padding-inline:clamp(1rem,5vw,1.6rem);
    padding-block:0;
    scroll-padding-inline:0}

  /* Picture beside the words, not above them: three stacked cards with a
     picture on top would be three screens again. The columns are written
     as 1 and 2 rather than in source order, so the picture sits on the
     starting edge — left in English, right in Arabic — without a
     separate rule for each direction. */
  .pswipe__card{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:36% 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    gap:.9rem;
    min-block-size:0;
    padding:.8rem;
    border-radius:var(--r-card, 1rem);
    scroll-snap-align:none}

  .pswipe__ph{
    grid-column:1;grid-row:1 / span 2;
    flex:none;
    margin:0;
    aspect-ratio:4/3;
    max-block-size:none;
    border-radius:.7rem;
    overflow:hidden}
  .pswipe__ph img{inline-size:100%;block-size:100%;object-fit:cover;display:block}

  .pswipe__say{
    grid-column:2;grid-row:1;
    align-self:end;
    text-align:start;
    padding-inline:0;
    min-inline-size:0}
  .pswipe__n{font-size:.7rem;letter-spacing:.09em}

  /* Two lines each, reserved whether or not they are used.
     Without this the rows came out 141, 160 and 160 tall, because one
     product name wraps and another does not — three boxes of three
     different heights, which reads as a mistake rather than as a list.
     Reserving the space makes every row the same height by construction,
     and the clamp means no sentence can ever make one taller. */
  .pswipe__t{margin-block-start:.2rem;
    font-size:1.02rem;line-height:1.2;
    min-block-size:2.4em;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    overflow:hidden}
  .pswipe__d{
    margin-block-start:.3rem;
    font-size:.8rem;line-height:1.35;
    min-block-size:2.7em;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    overflow:hidden}

  /* the row is already a link; this is the sign that says so */
  .pswipe__act{
    grid-column:2;grid-row:2;
    align-self:start;
    display:flex;
    margin:.4rem 0 0;padding:0;
    /* the whole row is already the link, so this must not eat the tap */
    pointer-events:none}
  .pswipe__go{
    display:inline-flex;align-items:center;gap:.35rem;
    margin:0;padding:0;
    font-size:.8rem;font-weight:500}
  /* The arrow means "onwards", so in Arabic it points the other way.
     The desktop rule for this lived inside a min-width:601px block, so
     the Arabic phone showed an arrow pointing back the way you read. */
  [dir="rtl"] .pswipe__go em{transform:scaleX(-1)}

  /* dots reported a position on a rail; there is no rail */
  .pswipe__dots{display:none}

  /* THE CARDS COME UP TO THE TITLE.

     The title had a screen of its own and the cards had the next one, so
     "What we make." was a slide you swiped past to reach the thing it
     names. That made sense when the cards were a deck you had to swipe
     anyway; now that all three are visible at once, the page is the
     desktop page and the title is their heading. So: no full-height
     title, no snap points, no scroll cue — heading, then the three
     products, on one screen. */
  .products-page .pagehead:not(.pagehead--run-on){
    min-height:0;display:block;
    padding-block:calc(var(--nav-h) + .5rem) 0}
  .products-page .pagehead .h1{font-size:2rem;line-height:1.08}
  /* Four classes, to clear .pagehead:not(.pagehead--run-on) .lede, which
     is three and sets the size for every page title on a phone. */
  .products-page .pagehead:not(.pagehead--run-on) .lede{margin-block-start:.7rem;font-size:.9rem}
  .products-page .scrollcue{display:none}

  /* the snap chain described a journey between screens that no longer
     exists; leaving it on would hold the page at the title */
  .products-page{scroll-snap-type:none}
  .products-page .pagehead,
  .products-page .pswipe,
  .products-page .ft{scroll-snap-align:none;scroll-snap-stop:normal}

  .pswipe{min-block-size:0;justify-content:flex-start;
    padding-block:1.1rem clamp(2rem,8vw,3rem)}
}

/* Very short phones (a 667px iPhone SE, and anything in landscape): the
   picture is the part that gives, so three rows still fit without the
   text shrinking to nothing. */
/* The heading and the three cards now share one screen, so the screen's
   height is the budget and every phone spends it differently: 844 tall
   had 73px to spare, 740 was 31px over, 667 was 78px over. These two
   tiers give the difference back — the heading first, because it is a
   label for the cards, then the cards' own padding and type.

   The photograph is NOT what gives here, unlike on the desktop cards: at
   this size the picture is 67px tall and the words beside it are 120px,
   so the text sets the row height and shrinking the picture buys
   nothing. Measured, not assumed.

   Below about 645px tall the page scrolls a little. That is the right
   place to stop: past it the type would have to get smaller than is
   comfortable to read, and a short scroll is the better trade. */
@media (max-width:600px) and (max-height:790px){
  .products-page .pagehead:not(.pagehead--run-on){
    padding-block:calc(var(--nav-h) + .2rem) 0}
  .products-page .pagehead .h1{font-size:1.65rem}
  .products-page .pagehead .eyebrow{margin-block-end:.15rem}
  .products-page .pagehead:not(.pagehead--run-on) .lede{margin-block-start:.5rem;font-size:.82rem;line-height:1.4}
  .pswipe{padding-block:.8rem clamp(1.5rem,6vw,2.5rem)}
  .pswipe__track{gap:.5rem}
  .pswipe__card{padding:.6rem;grid-template-columns:33% 1fr;gap:.7rem}
  .pswipe__t{font-size:.94rem;min-block-size:2.3em}
  .pswipe__d{font-size:.75rem;min-block-size:2.6em}
  .pswipe__go{font-size:.75rem}
  .pswipe__act{margin-block-start:.25rem}
}

@media (max-width:600px) and (max-height:685px){
  .products-page .pagehead .h1{font-size:1.5rem}
  /* four lines of English standfirst at 360px wide, so the leading is
     where the last ten pixels are */
  .products-page .pagehead:not(.pagehead--run-on) .lede{font-size:.85rem;margin-block-start:.4rem;line-height:1.38}
  .pswipe{padding-block:.4rem clamp(1.2rem,5vw,2rem)}
  .pswipe__track{gap:.45rem}
  .pswipe__card{padding:.55rem;gap:.6rem}
  .pswipe__t{font-size:.9rem;min-block-size:2.25em}
  .pswipe__d{font-size:.73rem;min-block-size:2.5em}
  .pswipe__go{font-size:.72rem}
  .pswipe__act{margin-block-start:.15rem}
}

/* =====================================================================
   THE PRODUCT PAGE IS ALSO ONE SURFACE

   A whole page flooded with the product's tone was the same problem as
   the three coloured cards, one step louder — and on the clay one the
   fixed header stopped being legible over it: dark nav links on a dark
   brown ground, with the green Contact pill fighting the background.

   The page takes the site's own ground. The photograph carries the
   product, and the colour survives where it still means something: the
   number, the claim line and the actions.
   ===================================================================== */
.prod1,
.prod1.panel--ag,
.prod1.panel--in,
.prod1.panel--dk{background:var(--wash);color:var(--ink)}

.prod1 .prod1__back{color:var(--ink-3)}
.prod1 .prod1__back:hover{color:var(--ink)}
.prod1 .prod1__n,
.prod1.panel--ag .prod1__n{color:var(--green)}
.prod1 .prod1__name{color:var(--ink)}
.prod1 .prod1__claim,
.prod1.panel--ag .prod1__claim,
.prod1.panel--in .prod1__claim,
.prod1.panel--dk .prod1__claim{color:var(--green)}
.prod1 .prod1__says{color:var(--ink-2)}
.prod1 .prod1__ph{background:var(--wash-2)}

.prod1 .prod1__stats li{background:var(--card);border:1px solid var(--line)}
.prod1 .prod1__stats b,
.prod1.panel--in .prod1__stats b{color:var(--ink)}
.prod1 .prod1__stats span{color:var(--ink-3)}

.prod1 .prod1__sub,
.prod1.panel--ag .prod1__sub{color:var(--green)}
.prod1 .prod1__uses li{background:var(--card);border:1px solid var(--line);
  color:var(--ink-2)}

/* the actions go back to the site's own buttons */
.prod1 .prod1__act .pill,
.prod1.panel--ag .prod1__act .pill,
.prod1.panel--in .prod1__act .pill,
.prod1.panel--dk .prod1__act .pill{
  background:var(--green);border-color:var(--green);color:#fff}
/* .pill.pill--ghost, doubled, so it matches the specificity of the tone
   overrides above — a single class lost to them and both buttons came
   out solid green. */
.prod1 .prod1__act .pill.pill--ghost{background:transparent;color:var(--ink);
  border-color:var(--line)}
@media (hover:hover){
  .prod1 .prod1__act .pill:hover{background:var(--green-d);border-color:var(--green-d)}
  .prod1 .prod1__act .pill.pill--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
}

.prod1 .prod1__next{border-block-start-color:var(--line)}
.prod1 .prod1__next a{color:var(--ink-2)}
.prod1 .prod1__next a:hover{color:var(--green)}
.prod1 .prod1__next em{opacity:.5}

/* =====================================================================
   THE WHATSAPP BUTTON

   A pill that shrinks to a circle. At rest it is the mark alone, bottom
   corner, out of the way; on hover and on keyboard focus the label slides
   out of it. A permanent full-width pill would sit on top of the page's
   own buttons on every screen, which is what makes most of these feel
   like an advert rather than part of the site.

   It uses the starting edge logically, so Arabic gets it bottom-left
   without a mirrored rule, and it lifts above the safe-area inset so it
   does not land under a phone's home indicator.
   ===================================================================== */
.wafab{
  position:fixed;z-index:60;
  inset-block-end:calc(1.1rem + env(safe-area-inset-bottom,0px));
  inset-inline-end:1.1rem;
  /* No gap. The space before the label belongs to the label, so it can
     collapse with it and the closed button is a true circle. */
  display:inline-flex;align-items:center;gap:0;
  block-size:3.1rem;padding-inline:.85rem;
  border-radius:999px;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 2px 6px rgba(15,30,18,.18),0 14px 30px -12px rgba(15,30,18,.45);
  transition:transform 340ms var(--ease-out),box-shadow 340ms var(--ease-out)}
.wafab svg{inline-size:1.6rem;block-size:1.6rem;flex:none;display:block}

/* The label is laid out but clipped to nothing, so opening it is a width
   animation rather than a reflow of the page. */
/* THE LABEL OPENS TO ITS OWN WIDTH.

   It was max-inline-size:0 -> 11rem. 11rem is 165px and the Arabic label
   is 147px, so the pill reached the text's real width partway through and
   the rest of the duration moved nothing: the ease-out never landed,
   which is most of why it read as a snap whatever the number said.

   A 0fr -> 1fr grid track would size itself exactly, but inside a flex
   item the track collapses to zero and the button never opens — measured,
   not assumed. So the cap is measured instead, in rem, because the label
   is set in rem and therefore scales with the rest of the design: 7.31rem
   rendered label is 8.5rem in English and 8.19rem in Arabic, including
   the .55rem that separates the word from the mark. Rounded up by about
   4% so a slightly different font rendering cannot clip the last letter:
   a few pixels of dead travel is nothing, a clipped word is a bug. */
.wafab__t{
  max-inline-size:0;overflow:hidden;white-space:nowrap;
  font-size:.92rem;font-weight:600;line-height:1;
  opacity:0;
  /* CLOSING. Quicker than opening, and the word goes first: a label that
     lingers while the pill shuts under it looks like a lag, not a fade. */
  transition:max-inline-size 380ms var(--ease-out),
             opacity 150ms var(--ease-out)}
.wafab__t > span{display:block;padding-inline-start:.55rem}

/* OPENING. Slower, and the word waits for the pill to have somewhere to
   put it. */
.wafab:hover .wafab__t,
.wafab:focus-visible .wafab__t{
  max-inline-size:8.8rem;opacity:1;
  transition:max-inline-size 560ms var(--ease-out),
             opacity 320ms var(--ease-out) 160ms}
[dir="rtl"] .wafab:hover .wafab__t,
[dir="rtl"] .wafab:focus-visible .wafab__t{max-inline-size:8.5rem}

.wafab:hover{transform:translateY(-2px);
  box-shadow:0 3px 8px rgba(15,30,18,.2),0 20px 38px -14px rgba(15,30,18,.5)}
.wafab:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* A thumb cannot hover, so on a phone it stays the circle it already is
   and the label never opens. */
@media (max-width:600px){
  .wafab{inset-block-end:calc(.9rem + env(safe-area-inset-bottom,0px));
    inset-inline-end:.9rem;block-size:2.9rem;padding-inline:.65rem}
  .wafab svg{inline-size:1.55rem;block-size:1.55rem}
  .wafab__t{display:none}
}

@media (prefers-reduced-motion: reduce){
  .wafab,.wafab__t{transition:none}
  .wafab:hover{transform:none}
}