/*
Theme Name: Embex
Theme URI: https://embex.ae
Author: Embex — Emirates Business Experts
Description: Bespoke theme for Embex Trading L.L.C — S.P.C, transcribed from the Claude Design canvas "Embex Website.dc.html". Editorial trade-house layout in cream, ink and gold.
Version: 0.9.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: embex
*/

:root{
  /* ---- FINAL BRAND PALETTE (2026-09-10) ----------------------------------
     petrol #153E3B / ivory #FAF7F0 / copper #B47955, from the vector kit.
     Ratios are measured, not estimated -- palette-study/verify-palette.py
     prints the whole matrix and fails if any pairing regresses.

     Copper is NEVER small text. It is 3.38:1 on ivory and 3.25:1 on petrol:
     large text and fills only. That is why --copper-deep and --copper-pale
     exist, exactly as --bronze existed for --gold. USAGE.txt says the same
     thing in brand language: "Copper #B47955 is an accent background." */
  --ivory:#FAF7F0;         /* page ground */
  --ivory-sunk:#F1EEE6;    /* recessed panels */
  --card:#FFFDF9;          /* lifted card; warm, so it does not read cold on ivory */
  --petrol:#153E3B;        /* headings, dark surfaces        11.00:1 on ivory, AAA */
  --copper:#B47955;        /* fills, rules, LARGE text only */
  --copper-deep:#9B6545;   /* small accent text on ivory      4.52:1, AA */
  --copper-pale:#C5977B;   /* small accent text on petrol     4.53:1, AA */
  --copper-darker:#704932; /* link + button hover             7.30:1, AAA */
  /* Dark gradient ramp, re-derived at petrol's hue and saturation holding
     each original stop's HLS lightness, so the gradient's shape is unchanged. */
  --surface-1:#123432;
  --surface-2:#0B201F;
  --surface-3:#081615;
  --body:#394544;          /* 9.31:1 -- deliberately matches the old 9.22:1, so
                              body copy changes hue without changing weight */
  --line:rgba(21,62,59,0.13);
  --line-strong:rgba(21,62,59,0.24);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Albert Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --shell:1200px;
  --gutter:52px;
  /* Spacious scale, 8px base */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
}

*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--ivory);color:var(--petrol);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;}
a{color:var(--copper-deep);text-decoration:none;}
a:hover{color:var(--copper-darker);}
img{max-width:100%;display:block;}
::selection{background:var(--copper-deep);color:var(--ivory);}
:focus-visible{outline:2px solid var(--copper-deep);outline-offset:3px;}
.embex-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--copper-deep);color:var(--ivory);padding:14px 22px;font-weight:600;}
.embex-skip:focus{left:0;color:var(--ivory);}
.embex-header :focus-visible,.embex-footer :focus-visible,.embex-phero :focus-visible{outline-color:var(--copper);}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* ---------- shared atoms ---------- */
.embex-shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.embex-eyebrow{font-size:13px;font-weight:600;letter-spacing:0.02em;color:var(--copper-deep);}
.embex-eyebrow--light{font-weight:600;color:var(--copper-pale);}
.embex-rule{display:block;width:44px;height:1px;background:var(--copper);}
.embex-rule-row{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.embex-btn{display:inline-block;font-size:15px;font-weight:600;letter-spacing:0.01em;padding:15px 30px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.embex-btn--primary{background:var(--copper-deep);color:var(--ivory);}
.embex-btn--primary:hover{background:var(--copper-darker);color:var(--ivory);}
.embex-btn--ghost{border:1px solid rgba(250,247,240,0.55);color:var(--ivory);padding:15px 32px;backdrop-filter:blur(6px);background:rgba(250,247,240,0.08);}
.embex-btn--ghost:hover{border-color:var(--copper-pale);color:var(--copper-pale);}
.embex-sect-head{border-top:1px solid var(--line-strong);padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:52px;}
.embex-sect-head__link{font-size:14px;font-weight:600;color:var(--copper-deep);border-bottom:1px solid var(--copper-deep);padding-bottom:2px;}

/* ---------- image slots ---------- */
.embex-hero__bg,.embex-band__bg,.embex-phero__bg,.embex-line__media,.embex-pdetail__media{background-color:var(--petrol);}
.embex-slot-pic{display:block;width:100%;height:100%;}
.embex-slot-img{width:100%;height:100%;object-fit:cover;display:block;}
.embex-slot-empty{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 50% 0%,var(--surface-1) 0%,var(--surface-2) 62%,var(--surface-3) 100%);}
.embex-slot-empty__mark{font-family:var(--display);font-size:clamp(38px,5vw,64px);line-height:1;color:rgba(180,121,85,0.28);letter-spacing:0.08em;}

/* ---------- header ---------- */
/* 8px vertical, not 18: above 1024px this carries the FULL logo, which is
   77px tall at its 280px floor. At 18px the header came to 113px, which
   read as heavy for a fixed bar. 8px brings it to 93px -- the descriptor
   costs 11px over the old compact header. Below 1024px the compact cut
   is only 46px tall and needs the original 18px back; see the 1024 block. */
.embex-header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:8px var(--gutter);
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease;
  background:linear-gradient(180deg,rgba(11,20,19,0.8) 0%,rgba(11,20,19,0.35) 70%,rgba(11,20,19,0) 100%);}
.embex-header.is-scrolled{background:var(--petrol);box-shadow:0 1px 0 rgba(180,121,85,0.28);}
.embex-brand{flex-shrink:0;margin-right:24px;display:flex;align-items:center;}
/* Final brand artwork. USAGE.txt: full logo only at >=280px; the header lockup
   measures ~208px, so this is the compact cut. Reverse (ivory) because the
   header ground is the hero image or --ink, never light. */
/* aspect-ratio is set per cut and must override the img width/height
   attributes -- the two cuts have different ratios (1212x334 vs 1212x280),
   so inheriting the attribute ratio through the <picture> swap would squash
   the compact cut on tablet. */
.embex-brand__logo{height:auto;display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.55));}
/* The full lockup stays put at every scroll position above 1024px. Swapping to
   the compact cut on scroll was tried and reverted: dropping the descriptor
   mid-scroll reads as the logo breaking, not as a design that responds.
   aspect-ratio is per cut -- they are 1212x334 and 1212x280, and the
   width/height attributes would otherwise squash whichever one is showing. */
.embex-brand__logo--full{width:280px;aspect-ratio:1212/334;}
.embex-brand__logo--compact{width:200px;aspect-ratio:1212/280;display:none;}
.embex-nav{display:flex;gap:32px;align-items:center;}
.embex-nav__link{font-size:14.5px;font-weight:500;letter-spacing:0.01em;color:var(--ivory);text-shadow:0 1px 10px rgba(0,0,0,0.55);}
.embex-nav__link:hover{color:var(--copper-pale);}
.embex-nav__link.is-current{color:var(--copper-pale);}
.embex-nav__cta{font-size:14px;font-weight:600;letter-spacing:0.01em;background:var(--copper-deep);color:var(--ivory);padding:11px 24px;}
.embex-nav__cta:hover{background:var(--copper-darker);color:var(--ivory);}
.embex-nav__toggle{display:none;background:none;border:1px solid rgba(250,247,240,0.42);color:var(--ivory);padding:10px 15px;font-size:14px;font-family:var(--sans);cursor:pointer;}

/* ---------- home hero ---------- */
.embex-hero{position:relative;height:86vh;min-height:560px;max-height:900px;}
.embex-hero__bg{position:absolute;inset:0;}
.embex-hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(11,20,19,0.80) 0%,rgba(11,20,19,0.45) 34%,rgba(11,20,19,0) 62%),
    linear-gradient(180deg,rgba(11,20,19,0.46) 0%,rgba(11,20,19,0.10) 34%,rgba(11,20,19,0.55) 100%);}
.embex-hero__inner{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--s5);z-index:4;pointer-events:none;}
.embex-hero__body{max-width:min(760px,72%);animation:fadeUp .9s cubic-bezier(.2,.7,.3,1) both;}
.embex-hero__title{font-family:var(--serif);font-weight:500;font-size:clamp(38px,4.9vw,68px);line-height:1.08;letter-spacing:-0.015em;color:var(--ivory);margin:0 0 var(--s4);text-wrap:balance;}
.embex-hero__title em{font-style:normal;color:inherit;}
/* The one orchestrated moment on the page: a hairline draws in under the headline. */
.embex-hero__stroke{display:block;width:0;height:1px;background:var(--copper);margin-bottom:var(--s3);animation:drawIn 1.1s .25s cubic-bezier(.2,.7,.3,1) both;}
@keyframes drawIn{to{width:96px}}
.embex-hero__actions{display:flex;gap:var(--s2);pointer-events:auto;flex-wrap:wrap;}

/* ---------- home: the house ---------- */
/* The three facts read as a credentials strip under the hero: one hairline per
   column, a bronze key, and the value set in ink so it carries at a glance.
   Single source of truth — do NOT append a second .embex-intro__* generation at
   the end of this file; a later rule at equal specificity beats the media
   queries below it. Edit here. */
.embex-intro{padding-top:var(--s5);padding-bottom:0;}
.embex-intro__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s4);}
.embex-intro__row{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line-strong);padding-top:16px;}
.embex-intro__k{font-size:12.5px;font-weight:600;letter-spacing:0.01em;color:var(--copper-deep);}
.embex-intro__v{font-size:16.5px;line-height:1.55;color:var(--petrol);text-wrap:pretty;}

/* Title column sized to the type, not to half the page. At 1fr/1fr the 14ch
   headline left ~200px of dead gutter before the body copy began. */
.embex-house{padding-top:var(--s6);}
.embex-sect{padding-top:var(--s6);}
.embex-house__grid{display:grid;grid-template-columns:minmax(240px,31%) minmax(0,1fr);gap:var(--s5);align-items:start;}
.embex-house__title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.2vw,44px);line-height:1.14;letter-spacing:-0.015em;margin:0;text-wrap:balance;}
.embex-house__body{padding-top:10px;}
.embex-house__body p{font-size:17px;line-height:1.75;color:var(--body);margin:0 0 var(--s3);max-width:62ch;}
.embex-house__body p:last-child{margin-bottom:0;}
.embex-house__body em{font-style:italic;color:var(--petrol);}

/* ---------- services rows ---------- */
.embex-srow{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--s4);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--line);transition:background .2s ease;color:inherit;}
.embex-srow:hover{background:rgba(155,101,69,0.05);color:inherit;}
.embex-srow__name{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:-0.01em;}
.embex-srow__desc{font-size:15.5px;line-height:1.7;color:var(--body);}
.embex-sdetail{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--s4);align-items:baseline;padding:var(--s4) 0;border-top:1px solid var(--line);}

.embex-sdetail__desc{font-size:15.5px;line-height:1.75;color:var(--body);margin:0;}

/* ---------- quote band ---------- */
.embex-band{position:relative;margin-top:var(--s6);min-height:440px;display:flex;align-items:center;justify-content:center;}
.embex-band__bg{position:absolute;inset:0;}
.embex-band__scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,rgba(11,20,19,0.52) 0%,rgba(11,20,19,0.78) 100%);}
.embex-band__inner{position:relative;z-index:2;max-width:860px;text-align:center;padding:var(--s6) var(--gutter);pointer-events:none;}

.embex-band__quote{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.9vw,38px);line-height:1.35;color:var(--ivory);margin:0;text-wrap:balance;max-width:22ch;margin-inline:auto;text-shadow:0 1px 24px rgba(0,0,0,0.5);}
.embex-band__quote em{font-style:normal;color:inherit;}

/* ---------- process ---------- */
.embex-process{background:var(--petrol);color:var(--ivory);padding:72px 64px;}
.embex-process--tight{padding:64px 60px;margin-top:90px;}
.embex-process__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:56px;}
.embex-process__heading{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.4vw,32px);color:var(--ivory);margin:0;letter-spacing:-0.01em;}
.embex-process__flow{font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(250,247,240,0.6);}
.embex-process__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;}
.embex-process__num{font-family:var(--serif);font-weight:500;font-size:15px;line-height:1;color:var(--copper-pale);margin-bottom:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid rgba(180,121,85,0.3);font-variant-numeric:tabular-nums;}
.embex-process__name{font-family:var(--serif);font-weight:500;font-size:20px;margin-bottom:10px;}
.embex-process__desc{font-size:14.5px;line-height:1.7;color:rgba(250,247,240,0.82);}

/* ---------- page hero ---------- */
.embex-phero{position:relative;background:var(--petrol);padding:180px var(--gutter) var(--s6);}
.embex-phero__bg{position:absolute;inset:0;filter:saturate(1.1) contrast(1.05);}
.embex-phero__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(11,20,19,0.72) 0%,rgba(11,20,19,0.38) 46%,rgba(11,20,19,0.04) 76%),
    linear-gradient(180deg,rgba(11,20,19,0.42) 0%,rgba(11,20,19,0.16) 55%,rgba(11,20,19,0.52) 100%);}
.embex-phero__inner{position:relative;z-index:2;max-width:var(--shell);margin:0 auto;}
.embex-phero__inner--narrow{max-width:900px;}
.embex-phero__title{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.4vw,58px);line-height:1.1;letter-spacing:-0.015em;color:var(--ivory);margin:0 0 var(--s3);max-width:20ch;}
.embex-phero__title em{font-style:normal;color:inherit;}
.embex-phero__lede{font-size:17.5px;line-height:1.7;color:rgba(250,247,240,0.86);max-width:60ch;margin:0;}

/* ---------- products detail ---------- */
.embex-pdetail-list{display:flex;flex-direction:column;gap:56px;}
.embex-pdetail{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center;}
.embex-pdetail__media{height:340px;overflow:hidden;filter:saturate(1.12) contrast(1.06);}
.embex-pdetail__name{font-family:var(--serif);font-size:38px;margin-bottom:14px;}
.embex-pdetail__desc{font-size:15px;line-height:1.8;color:var(--body);margin:0 0 24px;}
.embex-tags{display:flex;flex-wrap:wrap;gap:10px;}
.embex-tag{font-size:13px;font-weight:500;color:var(--copper-deep);border:1px solid rgba(155,101,69,0.4);padding:7px 14px;}
.embex-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px;border-top:1px solid rgba(21,62,59,0.14);padding-top:20px;}
.embex-specs__k{font-size:12.5px;font-weight:600;color:var(--copper-deep);margin-bottom:6px;}
.embex-specs__v{display:block;font-size:15px;font-weight:400;color:var(--petrol);font-variant-numeric:tabular-nums;}

/* ---------- about ---------- */
.embex-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3) var(--s4);}
.embex-fact{border-top:1px solid rgba(21,62,59,0.2);padding-top:18px;}
.embex-fact__v{font-family:var(--serif);font-weight:500;font-size:38px;color:var(--petrol);font-variant-numeric:tabular-nums;}
.embex-fact__k{font-size:14px;font-weight:400;color:var(--body);margin-top:8px;line-height:1.5;}
.embex-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;margin-top:72px;}
.embex-value{background:var(--card);border:1px solid rgba(21,62,59,0.12);padding:36px 34px;}
.embex-value__name{font-family:var(--serif);font-weight:600;font-size:24px;margin-bottom:10px;color:var(--petrol);}
.embex-value__desc{font-size:15px;line-height:1.75;color:var(--body);margin:0;}
.embex-licence{margin-top:72px;}
.embex-licence__head{border-top:1px solid rgba(21,62,59,0.18);padding-top:18px;margin-bottom:28px;}
.embex-licence__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 34px;}
.embex-licence__item{display:flex;align-items:baseline;gap:12px;}
.embex-licence__dot{width:6px;height:6px;background:var(--copper);flex-shrink:0;}
.embex-licence__text{font-size:15px;line-height:1.6;color:var(--body);}

/* ---------- contact ---------- */
.embex-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:stretch;}
.embex-contact__col{display:flex;flex-direction:column;gap:30px;justify-content:center;}
.embex-contact__item{border-top:1px solid rgba(21,62,59,0.2);padding-top:18px;}
.embex-contact__k{font-size:13px;font-weight:600;color:var(--copper-deep);margin-bottom:10px;}
.embex-contact__v{font-family:var(--serif);font-size:26px;color:var(--petrol);}
.embex-contact__v--addr{font-size:21px;line-height:1.5;}
.embex-contact__panel{background:var(--petrol);color:var(--ivory);padding:52px 50px;}
.embex-hints{display:flex;flex-direction:column;gap:16px;margin:26px 0 36px;}
.embex-hint{display:flex;align-items:baseline;gap:14px;}
.embex-hint__dot{width:6px;height:6px;background:var(--copper);flex-shrink:0;}
.embex-hint__text{font-size:15.5px;line-height:1.6;color:rgba(250,247,240,0.92);}

/* ---------- cta band ---------- */
.embex-cta{background:var(--petrol);color:var(--ivory);margin-top:var(--s5);padding:var(--s5) 60px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;}
.embex-cta__title{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);}
.embex-cta__sub{font-size:15px;color:rgba(250,247,240,0.85);margin-top:8px;}

/* ---------- footer ---------- */
.embex-footer{background:var(--petrol);color:var(--ivory);margin-top:var(--s6);padding:80px var(--gutter) 40px;}
.embex-footer__inner{max-width:var(--shell);margin:0 auto;}
.embex-footer__brand{text-align:center;padding-bottom:56px;}
.embex-footer__logo{width:min(420px,72vw);height:auto;margin:0 auto;display:block;}
.embex-footer__nav{display:flex;justify-content:center;gap:38px;flex-wrap:wrap;padding-bottom:44px;}
.embex-footer__link{font-size:15px;font-weight:500;color:rgba(250,247,240,0.9);}
.embex-footer__link:hover{color:var(--copper-pale);}
.embex-footer__legal{border-top:1px solid rgba(250,247,240,0.14);padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:12px;color:rgba(250,247,240,0.7);}
.embex-footer__legal a{color:rgba(250,247,240,0.75);}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  /* Compact only below 1024px: the full logo's floor is 280px and there is no
     room for it once the nav needs the space. The scroll swap is therefore a
     desktop-only behaviour -- there is nothing to swap to down here. */
  .embex-brand__logo--full{display:none;}
  .embex-brand__logo--compact{display:block;}
  /* The compact cut is 46px tall, not 77 -- restore the roomier padding so the
     header does not collapse to 62px on tablet. */
  .embex-header,.embex-header.is-scrolled{padding:18px var(--gutter);}
  :root{--gutter:32px;}
  .embex-srow{grid-template-columns:60px 1fr;gap:16px 22px;}
  .embex-srow__desc{grid-column:1 / -1;}
  .embex-sdetail{grid-template-columns:60px 1fr;gap:14px 22px;}
  .embex-sdetail__desc{grid-column:1 / -1;}
  .embex-process,.embex-process--tight{padding:52px 34px;}
  .embex-contact__panel{padding:42px 32px;}
  .embex-cta{padding:42px 34px;}
}
@media (max-width:1024px){
  .embex-house__grid{grid-template-columns:1fr;gap:var(--s3);}
  .embex-house__title{max-width:20ch;}
  .embex-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:820px){
  .embex-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--petrol);padding:8px 0 16px;display:none;}
  .embex-nav.is-open{display:flex;}
  .embex-nav__link{padding:15px var(--gutter);text-shadow:none;}
  .embex-nav__cta{margin:10px var(--gutter) 0;text-align:center;}
  .embex-nav__toggle{display:block;}
  /* Sticky, not fixed, on mobile — so the hero needs no top padding to clear it.
     The 120px pad left a dead white band above the photo. */
  /* .is-scrolled must be named here too: the 1024 block sets padding on
     .embex-header.is-scrolled, which outranks a bare .embex-header and
     would leave the scrolled bar TALLER than the resting one on mobile. */
  .embex-header,.embex-header.is-scrolled{position:sticky;background:var(--petrol);padding:12px 20px;}
  .embex-hero{height:auto;min-height:0;padding:0;}
  .embex-hero__bg{position:relative;height:48vh;min-height:280px;}
  .embex-hero__scrim{display:none;}
  .embex-hero__inner{position:static;padding:var(--s4) var(--gutter) 0;}
  .embex-hero__body{max-width:none;}
  .embex-hero__title{font-size:clamp(30px,8.2vw,40px);}
  .embex-hero__title{color:var(--petrol);}
  .embex-hero__lede{color:var(--body);}
  .embex-btn--ghost{border-color:rgba(21,62,59,0.4);color:var(--petrol);background:none;}
  .embex-phero{padding:120px var(--gutter) 60px;}
  .embex-specs{grid-template-columns:1fr;}
  .embex-house{padding-top:72px;}
  .embex-band{margin-top:72px;min-height:360px;}
}
@media (max-width:640px){
  .embex-brand{margin-right:12px;}
  .embex-brand__logo--compact{width:158px;}
  :root{--gutter:22px;}
  .embex-process,.embex-process--tight{padding:var(--s4) 22px;}
  .embex-contact__panel{padding:var(--s4) 22px;}
  .embex-cta{padding:var(--s4) 22px;}
  .embex-band__inner{padding:var(--s5) 22px;}
}
/* Nothing may exceed the viewport width. */
body{overflow-x:clip;}
.embex-header{max-width:100vw;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms!important;transition-duration:0.001ms!important;}
}

/* ---------- section headings ---------- */
.embex-sect-head__title{font-family:var(--serif);font-size:clamp(23px,2.5vw,31px);font-weight:400;line-height:1.22;
  letter-spacing:-0.012em;color:var(--petrol);margin:0;text-wrap:balance;}

/* ---------- questions ---------- */
.embex-faq{margin-top:var(--s6);border-top:1px solid var(--line-strong);padding-top:var(--s4);}
.embex-faq__heading{font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:400;line-height:1.2;
  letter-spacing:-0.015em;color:var(--petrol);margin:0 0 var(--s4);max-width:22ch;}
.embex-faq__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5);}
.embex-faq__item{border-top:1px solid var(--line);padding-top:var(--s3);}
.embex-faq__q{font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.4;color:var(--petrol);margin:0 0 10px;}
.embex-faq__a{font-size:15.5px;line-height:1.68;color:var(--body);margin:0;max-width:62ch;}
@media (max-width:860px){.embex-faq__grid{grid-template-columns:1fr;gap:var(--s3);}}

/* ---------- heading semantics ----------
   These names were divs and are headings now, so the browser's default heading
   margins would reintroduce vertical space the layout never allowed for. Reset
   them and keep the spacing the design specified. */
.embex-line__name,.embex-process__name,
.embex-pdetail__name,.embex-value__name{margin-top:0;font-weight:inherit;}
.embex-srow__name{margin-top:0;margin-bottom:0;font-weight:500;}
.embex-value__name{font-weight:600;}
.embex-pdetail__name{font-weight:400;}

.embex-sect-lead{font-family:var(--serif);font-size:clamp(19px,2vw,23px);font-weight:400;line-height:1.3;
  letter-spacing:-0.01em;color:var(--copper-darker);margin:0 0 var(--s4);max-width:30ch;}

.embex-licence__head{font-family:var(--serif);font-size:clamp(20px,2.1vw,25px);font-weight:400;line-height:1.25;
  letter-spacing:-0.01em;color:var(--petrol);margin:0 0 28px;}
.embex-contact__panel-head{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0.02em;
  color:var(--copper-pale);margin:0 0 22px;}

/* ---------- brand lockup ----------
   Was a CSS type lockup: a gold "E" tile plus the word EMBEX set in Albert Sans
   with the descriptor stacked beneath. Replaced with the final vector artwork
   (v1.0 kit, 2026-09-10), which supersedes it. The uppercase EMBEX also broke
   the kit's own rule -- USAGE.txt: "Use lowercase embex ... Avoid uppercase
   wordmarks." Header uses the compact cut (no descriptor) because the lockup
   renders under 280px; the footer has room for the full logo. */

/* ---------- hero ----------
   The lede was the opening line of the section below; a visitor had to scroll
   past the fold to learn what the company does. Moved up, kept small, so the
   hero still reads as one quiet block rather than a stack of copy. */
.embex-hero__title{margin:0 0 var(--s3);}
.embex-hero__lede{font-size:clamp(15px,1.15vw,17px);line-height:1.62;color:rgba(250,247,240,0.9);
  max-width:46ch;margin:0 0 var(--s4);text-wrap:pretty;
  text-shadow:0 1px 12px rgba(0,0,0,0.45);}


@media (max-width:820px){
  .embex-intro__meta{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .embex-intro__meta{grid-template-columns:1fr;}
}

@media (max-width:900px){
  /* The mobile hero drops the photo behind the text and sits copy on cream, so
     the light hero lede colour set above has to be re-inverted here -- this rule
     must stay after it in the cascade. */
  .embex-hero__lede{color:var(--body);text-shadow:none;max-width:none;}
}

/* ---------- enquiry form ----------
   Fields are underlined rather than boxed: the site's whole structural language
   is hairlines, and a stack of rounded input boxes would read as a different
   product bolted on. All class names here are new — nothing above defines them,
   so appending is safe. */
:root{ --alert:#8E2318; }   /* 8.17:1 on --ivory; the only red in the palette.
                               Was #9B3B2A, which shared a lightness with
                               --copper-deep and sat 13 degrees from it in hue --
                               an error would have read as an accent label. */

.embex-enquiry-sect{padding-top:var(--s6);padding-bottom:var(--s6);}
.embex-form{max-width:760px;}
.embex-form__head{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1.16;
  letter-spacing:-0.015em;color:var(--petrol);margin:0 0 12px;border-top:1px solid var(--line-strong);padding-top:var(--s3);}
.embex-form__lede{font-size:16px;line-height:1.65;color:var(--body);margin:0 0 var(--s4);max-width:52ch;}

.embex-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4);}
.embex-field{display:flex;flex-direction:column;grid-column:1 / -1;}
.embex-field--half{grid-column:auto;}
.embex-field__label{font-size:13px;font-weight:600;color:var(--petrol);margin-bottom:6px;}
.embex-field__opt{font-weight:400;color:var(--body);opacity:0.7;margin-left:6px;}
.embex-field__help{font-size:13.5px;line-height:1.5;color:var(--body);margin:0 0 8px;}
.embex-field__input{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--petrol);
  background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  padding:12px 2px;min-height:48px;width:100%;transition:border-color .2s ease;}
.embex-field__input:hover{border-bottom-color:var(--copper-deep);}
.embex-field__input:focus{outline:none;border-bottom-color:var(--copper-deep);box-shadow:0 1px 0 0 var(--copper-deep);}
.embex-field__input:focus-visible{outline:2px solid var(--copper-deep);outline-offset:3px;}
textarea.embex-field__input{resize:vertical;min-height:104px;}
.embex-field.is-error .embex-field__input{border-bottom-color:var(--alert);}
.embex-field__err{font-size:13.5px;line-height:1.5;color:var(--alert);margin:8px 0 0;}

.embex-form__alert{border-left:2px solid var(--alert);background:var(--ivory-sunk);
  padding:18px 22px;margin:0 0 var(--s4);font-size:15px;line-height:1.6;color:var(--petrol);}
.embex-form__alert p{margin:0;}
.embex-form__alert ul{margin:8px 0 0;padding-left:18px;}
.embex-form__alert a{color:var(--alert);border-bottom:1px solid currentColor;}

.embex-form__foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4);}
.embex-form__note{font-size:13.5px;line-height:1.55;color:var(--body);margin:0;max-width:36ch;}
.embex-form button.embex-btn{border:0;font-family:var(--sans);}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and screen readers are kept out by aria-hidden + tabindex. */
.embex-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- enquiry sent ---------- */
.embex-sent{max-width:680px;border-top:1px solid var(--line-strong);padding-top:var(--s3);}
.embex-sent__head{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1.16;
  letter-spacing:-0.015em;color:var(--petrol);margin:0 0 12px;}
.embex-sent__lede{font-size:16.5px;line-height:1.6;color:var(--body);margin:0 0 var(--s4);}
.embex-sent__recap{background:var(--ivory-sunk);padding:26px 28px;margin:0 0 var(--s4);}
.embex-sent__recap-head{font-size:12.5px;font-weight:600;color:var(--copper-deep);margin-bottom:16px;}
.embex-sent__row{display:grid;grid-template-columns:minmax(140px,32%) 1fr;gap:8px var(--s3);
  padding:10px 0;border-top:1px solid var(--line);}
.embex-sent__row:first-of-type{border-top:0;padding-top:0;}
.embex-sent__k{font-size:13.5px;color:var(--body);}
.embex-sent__v{font-size:15px;line-height:1.5;color:var(--petrol);overflow-wrap:anywhere;}

@media (max-width:640px){
  .embex-form__grid{grid-template-columns:1fr;}
  .embex-field--half{grid-column:1 / -1;}
  .embex-sent__row{grid-template-columns:1fr;gap:2px;}
  .embex-form__foot{align-items:stretch;}
  .embex-form__foot .embex-btn{width:100%;text-align:center;}
}

/* The header is fixed (sticky on mobile), so an anchor jump — the #enquiry link
   or a field link in the error summary — lands the target underneath it. */
.embex-form,.embex-sent,.embex-field{scroll-margin-top:104px;}

/* ---------- prose pages (privacy policy and any future text page) ----------
   page.php renders these; .embex-house__body styles paragraphs only, which left
   headings and lists unstyled. */
.embex-prose-sect{max-width:820px;padding-top:var(--s5);padding-bottom:var(--s6);}
.embex-prose{color:var(--body);}
.embex-prose p{font-size:16.5px;line-height:1.75;margin:0 0 var(--s3);}
.embex-prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.1vw,28px);line-height:1.2;
  letter-spacing:-0.01em;color:var(--petrol);margin:var(--s5) 0 var(--s2);
  border-top:1px solid var(--line-strong);padding-top:var(--s3);}
.embex-prose h2:first-child{margin-top:0;border-top:0;padding-top:0;}
.embex-prose h3{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--petrol);margin:var(--s4) 0 8px;}
.embex-prose ul{margin:0 0 var(--s3);padding-left:20px;}
.embex-prose li{font-size:16.5px;line-height:1.7;margin-bottom:8px;}
.embex-prose a{border-bottom:1px solid currentColor;}
.embex-prose strong{color:var(--petrol);font-weight:600;}
.embex-prose__meta{font-size:14px;color:var(--body);opacity:0.85;margin-bottom:var(--s4);}


/* ---------- home: what travels with the goods ----------
   The band above claims every document is right the first time; this names the
   documents, which is the only credibility this house can honestly offer while
   it has no tonnage or office count to publish. A left gold rule rather than a
   top one, so it does not read as a third copy of the .embex-intro strip, and
   no card border -- these are enclosures in a file, not products. */
.embex-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);}
.embex-doc{border-left:2px solid var(--copper);padding-left:18px;}
.embex-doc__name{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;margin:0 0 8px;color:var(--petrol);}
.embex-doc__desc{font-size:16px;line-height:1.65;color:var(--body);margin:0;max-width:48ch;text-wrap:pretty;}

@media (max-width:820px){
  .embex-docs{grid-template-columns:1fr;gap:var(--s4);}
}


/* ---------- home: the line-up ----------
   This section is where the page is allowed to be loud, and it is the only one.
   Before, the four commodities were four identical 240px cards in an auto-fit
   grid with a hairline under each name -- the same rhythm as the four sections
   around it, so nothing on the home page was ever the thing you remembered.

   A trading house sells goods you can see. These photographs are the only
   sensory asset the business owns, so they run edge to edge at full viewport
   width with no gutter, no border, no radius and no shadow between them: four
   tall panels reading as one continuous shelf of stock. The type sits inside
   the image rather than under it, which is what removes the card.

   Full-bleed inside a centred layout: 100vw pulled back to the viewport edge.
   overflow-x:clip on body (above) contains the scrollbar-width overshoot. */
.embex-lineup-sect{padding-top:var(--s6);}
.embex-lineup__intro{margin-bottom:var(--s4);}
.embex-lineup__intro .embex-sect-head{margin-bottom:20px;}
.embex-lineup__lead{font-size:17px;line-height:1.7;color:var(--body);margin:0;max-width:56ch;text-wrap:pretty;}

.embex-lineup{margin-top:var(--s5);width:100vw;margin-left:calc(50% - 50vw);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:var(--petrol);}

.embex-line{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;color:inherit;isolation:isolate;}
.embex-line__media{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.embex-line:hover .embex-line__media,
.embex-line:focus-visible .embex-line__media{transform:scale(1.045);}
/* A hairline of ink between panels, drawn by the grid background showing
   through -- cheaper and more even than a border on three of four sides. */
.embex-line + .embex-line{box-shadow:-1px 0 0 rgba(11,20,19,0.55);}
.embex-line__media .embex-slot-img{filter:saturate(1.1) contrast(1.05);}

/* Two overlays doing two jobs.

   .embex-line__veil is tonal only -- it sits the photograph down into the band
   so four differently-lit frames read as one shelf.

   The contrast guarantee is on .embex-line__body itself, and it is measured in
   PIXELS from the top of the type, not as a percentage of the panel. That is
   the whole point. The first version put a single percentage-based gradient on
   the panel, which held at 1440px and 1024px and then failed at 640px: in that
   range the panel is narrow enough that the origin wraps to two lines and the
   grades to two rows, the type block grows upward past the fade, and the name
   ends up on bright linen at 3.53:1. A gradient anchored to the text block
   cannot drift away from the text no matter how the text wraps or how the
   panel is proportioned. 72px of fade reaching 0.78 puts the worst pixel behind
   any glyph at better than 6:1 at every width. */
.embex-line__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,20,19,0) 42%,rgba(11,20,19,0.34) 100%);}

.embex-line__body{position:absolute;left:0;right:0;bottom:0;padding:72px 26px 28px;z-index:2;
  background:linear-gradient(180deg,rgba(11,20,19,0) 0,rgba(11,20,19,0.78) 72px,rgba(11,20,19,0.94) 100%);}
.embex-line__name{font-family:var(--serif);font-weight:500;font-size:clamp(22px,1.9vw,28px);line-height:1.15;
  letter-spacing:-0.01em;color:var(--ivory);margin:0 0 8px;}
.embex-line__origin{font-size:14px;line-height:1.5;color:rgba(250,247,240,0.88);margin:0 0 14px;text-wrap:pretty;}

/* ---------- terms ----------
   Grades used to be printed as "Super Negin · whole · ground" -- a dot-joined
   meta string, which is a house tic rather than a structure. They are a list of
   discrete grades, so they are a list: no separators to orphan at a line break,
   and a screen reader announces three items instead of one run-on line.

   Two variants, because the same list does two jobs. In the /products/ spec
   block it is data sitting on paper, so it is set as plain stacked lines -- the
   first draft gave it a pill border, which put it a few pixels from the
   .embex-tag row directly above it and made one block of the page look like it
   had two different chip systems arguing. On the home band it sits over a
   photograph, where each term does need its own container to hold the edge. */
.embex-terms{list-style:none;margin:0;padding:0;}
.embex-terms li{font-size:15px;line-height:1.5;color:var(--petrol);}

.embex-terms--onphoto{display:flex;flex-wrap:wrap;gap:6px 8px;}
.embex-terms--onphoto li{font-size:12.5px;line-height:1;letter-spacing:0.005em;
  color:rgba(250,247,240,0.94);border:1px solid rgba(250,247,240,0.46);
  background:rgba(11,20,19,0.30);backdrop-filter:blur(2px);padding:6px 9px;}

/* /products/ spec block is a <dl> now; reset the browser's dd indent. */
.embex-specs dt,.embex-specs dd{margin:0;}

@media (max-width:1024px){
  .embex-lineup{grid-template-columns:repeat(2,minmax(0,1fr));}
  .embex-line:nth-child(odd) + .embex-line{box-shadow:-1px 0 0 rgba(11,20,19,0.55);}
  .embex-line:nth-child(2n+1){box-shadow:none;}
  .embex-line:nth-child(n+3){box-shadow:0 -1px 0 rgba(11,20,19,0.55);}
  .embex-line:nth-child(4){box-shadow:-1px 0 0 rgba(11,20,19,0.55),0 -1px 0 rgba(11,20,19,0.55);}
}
/* Two 195px portrait panels on a phone put the name, a wrapped origin and two
   rows of grades into 244px of height -- more type than photograph. One
   landscape panel per row gives the same block a frame wide enough to set each
   line once. The body gradient needs no breakpoint of its own: it is anchored
   to the type, so it follows it here as everywhere else. */
@media (max-width:620px){
  .embex-lineup{grid-template-columns:1fr;}
  .embex-line{aspect-ratio:4/3;}
  .embex-line + .embex-line{box-shadow:0 -1px 0 rgba(11,20,19,0.55);}
  .embex-line__body{padding:64px 22px 22px;}
  .embex-line__origin{margin-bottom:12px;}
}