/* ============================================================
   NATURE PRESERVE — design system
   Brand source: "EcoKlare Company Profile" deck. Geometric sans
   throughout (no serif, no italics), deep navy ink + forest/lime
   green, warm kraft paper. Signatures: paper grain, torn photo
   edges, two-tone headlines, short green rule, numbered markers,
   circular icon badges, dark ribbon callouts.
   All hexes below are sampled pixel-exact from the deck.
   ============================================================ */
:root{
  /* --- brand core (exact, from the EcoKlare logo) --- */
  --lime:        #8ac53e;  /* logo green — bright accent on dark      */
  --indigo:      #3d3975;  /* logo indigo — panels, ribbons           */

  /* --- ink & dark surfaces --- */
  --ink:         #0e1b3d;  /* deep navy — headlines, dark sections    */
  --ink-2:       #2b295c;  /* raised indigo surface                   */
  --forest:      #0e3b23;  /* deep forest — bars, deepest surface     */
  --olive:       #556d0e;  /* olive — bands, icon badges              */

  /* --- paper --- */
  --paper:       #f5f1e8;  /* warm kraft page background              */
  --cream:       #ede7da;  /* deeper cream section background         */
  --grey:        #f4f4f2;  /* cool off-white section background       */
  --card:        #ffffff;

  /* --- roles --- */
  --accent:      #41601a;  /* forest green — primary accent           */
  --accent-deep: #324a12;
  --accent-2:    #8ac53e;  /* lime — bright accent on dark            */
  --accent-soft: #cbe3a4;  /* light accent text on dark               */

  /* --- text (all four are editable from the CMS) --- */
  --head:        #0e1b3d;  /* headings                                */
  --text:        #1a1a1a;  /* body copy on light — black by default   */
  --muted:       #6a7065;  /* small print: labels, notes, captions     */
  --text-d:      #ffffff;  /* body copy on dark sections              */
  --muted-d:     #c2cfb2;  /* small print on dark                     */
  --line:       rgba(14,27,61,.12);
  --line-d:     rgba(255,255,255,.16);

  /* --- rgb triplets, for rgba() composition --- */
  --ink-rgb:     14,27,61;
  --accent-rgb:  65,96,26;
  --lime-rgb:    138,197,62;
  --indigo-rgb:  61,57,117;

  --font-display: "Figtree", sans-serif;
  --font-heading: "Figtree", sans-serif;
  --font-sub:     "Poppins", sans-serif;
  --font-body:    "Poppins", sans-serif;

  --wrap: 1200px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --sec: clamp(4rem, 9vw, 7.5rem);      /* section vertical rhythm  */
  --r: 18px;                            /* card radius — deck is soft */
  --shadow: 0 18px 50px -18px rgba(14,27,61,.22);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* paper grain — the deck's kraft texture, as an inline SVG */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:1.02rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
/* kraft paper grain — the deck's base texture. Painted per-section
   rather than as one blended fixed overlay: a fixed mix-blend layer
   forces the whole page onto the compositor and drops frames. */
.sec::before, .hero::after, .phero::after, .cta-band::after, .footer::after, .ticker::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); background-size:180px 180px; opacity:.05;
}
.sec > *, .hero > *, .phero > *, .cta-band > *, .footer > *, .ticker > *{ position:relative; z-index:1; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- typography ----------
   Deck headings are heavy geometric sans, tightly set. No serif,
   no italics anywhere — emphasis is carried by COLOUR instead. */
h1,h2,h3,h4{ font-family:var(--font-heading); font-weight:800; line-height:1.08; margin:0; letter-spacing:-.02em; color:var(--head); }
.display{ font-family:var(--font-display); font-size:clamp(2.5rem, 6vw, 4.6rem); }
h2.sec-title{ font-size:clamp(1.9rem, 4.4vw, 3.2rem); max-width:18em; }
h3{ font-size:1.3rem; letter-spacing:-.015em; }
p{ margin:0; }
/* <em> in CMS copy = the deck's second headline colour, never italic */
em{ font-style:normal; font-weight:inherit; color:var(--accent); }
.on-dark em{ color:var(--accent-2); }
b, strong{ font-weight:700; color:var(--head); }

/* Dark sections re-point the text tokens rather than overriding every
   rule, so anything using var(--text)/var(--head) flips automatically. */
.on-dark{ --head:var(--text-d); --text:var(--text-d); --muted:var(--muted-d); }

/* short green rule under a heading — deck signature */
.rule{ display:block; width:56px; height:4px; border-radius:3px; background:var(--accent); }
.on-dark .rule{ background:var(--accent-2); }

/* numbered section marker: 05 ———•  */
.secnum{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--font-heading); font-weight:800; font-size:1.05rem;
  letter-spacing:.02em; color:var(--accent);
}
.secnum::after{
  content:""; height:2px; width:clamp(70px,12vw,150px); background:var(--accent);
  opacity:.55; border-radius:2px;
}
.secnum i{ font-style:normal; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; margin-left:-.5rem; }
.on-dark .secnum, .on-dark .secnum::after, .on-dark .secnum i{ color:var(--accent-2); background:var(--accent-2); }
.on-dark .secnum{ background:none; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--font-sub); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{ content:""; width:26px; height:3px; background:var(--accent-2); border-radius:2px; }
.on-dark .eyebrow{ color:var(--accent-soft); }
.lede{ color:var(--text); font-size:1.06rem; max-width:44em; }
.on-dark .lede{ color:var(--text-d); }
.sec-head{ display:grid; gap:1.1rem; margin-bottom:clamp(2.2rem,5vw,3.6rem); }
.sec-head.center{ justify-items:center; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--font-sub); font-size:.8rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:1rem 1.9rem; border-radius:999px; border:1px solid transparent;
  background:var(--accent); color:#fff;
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), color .25s;
}
.btn svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.btn:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(var(--accent-rgb),.55); }
.btn:hover svg{ transform:translateX(4px); }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); box-shadow:none; border-color:#fff; }
.btn--light{ background:var(--paper); color:var(--ink); }
.btn--light:hover{ background:#fff; box-shadow:0 14px 30px -12px rgba(0,0,0,.4); }

/* ---------- header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .35s var(--ease), box-shadow .35s, transform .35s var(--ease);
}
.header__in{
  display:flex; align-items:center; gap:2rem;
  padding:1rem var(--pad); max-width:1360px; margin:0 auto;
}
.header--solid{ background:rgba(var(--ink-rgb),.92); backdrop-filter:blur(14px); box-shadow:0 10px 30px -18px rgba(0,0,0,.5); }
.header--hidden{ transform:translateY(-100%); }
.header .logo img{ height:44px; width:auto; transition:height .3s var(--ease); }
.header--solid .logo img{ height:38px; }
.nav{ display:flex; gap:1.7rem; margin-left:auto; align-items:center; }
.nav a{
  font-family:var(--font-sub); font-size:.78rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:#fff; position:relative; padding:.35rem 0; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent-2); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav .btn{ padding:.7rem 1.25rem; }
.burger{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:.4rem;
}
.burger span{ display:block; width:26px; height:2px; background:#fff; margin:6px 0; border-radius:2px; transition:.35s var(--ease); }
@media (max-width:1020px){
  .nav{ display:none; }
  .burger{ display:block; }
}
/* mobile menu */
.mmenu{
  position:fixed; inset:0; z-index:55; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; padding:6rem var(--pad) 3rem;
  clip-path:circle(0% at calc(100% - 3rem) 2.4rem); transition:clip-path .6s var(--ease);
  visibility:hidden;
}
.mmenu.open{ clip-path:circle(150% at calc(100% - 3rem) 2.4rem); visibility:visible; }
.mmenu a{
  font-family:var(--font-heading); font-size:clamp(1.7rem,6vw,2.6rem); color:#fff;
  padding:.45rem 0; opacity:0; transform:translateY(18px); transition:opacity .4s, transform .5s var(--ease), color .3s;
}
.mmenu.open a{ opacity:1; transform:none; }
.mmenu a:hover{ color:var(--accent-2); }
body.menu-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
body.menu-open{ overflow:hidden; }

/* ---------- hero (home) ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  color:#fff; overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:-12% 0; z-index:-2; overflow:hidden; will-change:transform; }
/* Picture, film and embed all fill the same frame, so the three fit the
   same way and the banner never changes shape.
     .hero__poster — the still picture. Shown on its own when there is no
                     film, and kept behind a YouTube embed so the banner
                     is never blank while the clip loads or if it is
                     blocked. A video FILE needs no such twin: its own
                     poster="" attribute does the same job.
     .hero__vid    — the film, over the picture.
     .hero__yt     — a YouTube clip, over the picture. */
.hero__poster, .hero__vid, .hero__yt{
  position:absolute; inset:0; z-index:1; border:0;
  width:100%; height:100%; object-fit:cover;
  /* which part survives the crop; set on .hero__bg from the content */
  object-position:var(--hero-pos, center);
}
.hero__vid{ z-index:2; }
.hero__yt{
  /* An iframe cannot crop its own contents, so it is grown past the banner
     on whichever side is short and re-centred: 16:9 kept, the overspill out
     of sight. The extra 18% is not decoration — YouTube draws the clip's
     title along the top of its player and its own logo across the bottom
     corner, and no embed parameter takes them away. Pushed outside the
     frame, they are simply not on the page. It also means a YouTube
     backdrop always FILLS the banner: the fit setting cannot letterbox
     one without those two badges coming back into view. */
  z-index:2; pointer-events:none;
  top:50%; left:50%; bottom:auto; right:auto; transform:translate(-50%,-50%);
  width:max(118%, 209.8vh); height:max(118%, 66.4vw);
}

/* ---- how the banner picture or film fits ----
   "cover" fills the banner and crops whatever will not fit.
   "contain" shows the WHOLE frame — right for a designed image such as a
   title slide, where cropping would cut off the logo or a caption. The
   leftover space is filled with a blurred copy of the picture so the
   edges read as deliberate rather than as empty bars.
   "auto" is contain on a computer and cover on phones and tablets (see
   the media query below), because a wide designed image shrinks to a thin
   strip in the middle of a tall phone screen if it may never crop. */
.hero--fit .hero__bg, .hero--auto .hero__bg{ inset:0; overflow:hidden; }
.hero--fit .hero__poster, .hero--fit .hero__vid,
.hero--auto .hero__poster, .hero--auto .hero__vid{ object-fit:contain; }
.hero--fit .hero__bg::before, .hero--auto .hero__bg::before{
  content:""; position:absolute; z-index:0;
  /* A blurred layer fades out at its own edges, so it must overhang the
     banner by MORE than the blur radius or a pale band shows down the
     side. A fixed inset keeps that true at every width — a percentage
     shrinks with the viewport and fails on narrow screens. */
  inset:-80px;
  background-image:var(--hero-img); background-size:cover; background-position:center;
  filter:blur(34px) saturate(.85); opacity:.85;
}
/* phones and tablets: "auto" fills the banner instead */
@media (max-width:900px){
  .hero--auto .hero__bg::before{ display:none; }
  .hero--auto .hero__poster, .hero--auto .hero__vid{ object-fit:cover; }
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(200deg, rgba(var(--ink-rgb),.40) 0%, rgba(var(--ink-rgb),.80) 62%, var(--ink) 100%);
}
.hero__in{ width:100%; padding-top:6rem; padding-bottom:7rem; text-align:center; display:grid; justify-items:center; gap:1.6rem; }
.hero .eyebrow{ color:var(--accent-soft); }
.hero h1{ max-width:15em; }
.hero p{ max-width:38em; color:var(--text-d); font-size:1.12rem; }
.hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; margin-top:.6rem; }
.hero [data-hi]{ opacity:0; transform:translateY(28px); animation:heroIn 1s var(--ease) forwards; }
.hero [data-hi="1"]{ animation-delay:.15s } .hero [data-hi="2"]{ animation-delay:.3s }
.hero [data-hi="3"]{ animation-delay:.45s } .hero [data-hi="4"]{ animation-delay:.6s }
@keyframes heroIn{ to{ opacity:1; transform:none; } }
.scroll-hint{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.5); border-radius:14px;
  opacity:0; animation:heroIn 1s .9s var(--ease) forwards;
}
.scroll-hint::after{
  content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px;
  background:var(--accent-2); border-radius:2px; animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%,100%{ transform:translateY(0); opacity:1 } 55%{ transform:translateY(12px); opacity:.2 } }

/* ---------- marquee ticker ---------- */
.ticker{ background:var(--ink); color:#fff; overflow:hidden; padding:1.35rem 0; border-top:1px solid var(--line-d); position:relative; }
.ticker__track{ display:flex; width:max-content; animation:marquee 36s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  display:flex; align-items:center; gap:2.2rem; padding-right:2.2rem;
  font-family:var(--font-heading); font-weight:700; font-size:clamp(1.1rem,2.3vw,1.5rem);
  letter-spacing:-.015em; white-space:nowrap; color:#eef3e7;
}
.ticker__item svg{ width:14px; height:14px; color:var(--accent-2); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- fan showcase (scroll-driven spread) ---------- */
.fan-sec{ overflow:hidden; }
.sec.fan-sec{ padding-bottom:calc(var(--sec) * .4); }
.fan{ position:relative; height:clamp(300px, 40vw, 480px); margin-top:clamp(1rem,3vw,2.5rem); }
/* torn-paper photo cards, as on the deck's title slide: a white
   deckled frame around each shot. drop-shadow (not box-shadow)
   so the shadow follows the torn silhouette rather than a rectangle. */
.fan__card{
  position:absolute; left:50%; top:0; margin-left:calc(clamp(150px, 22vw, 290px) / -2);
  width:clamp(150px, 22vw, 290px); aspect-ratio:3/4.1;
  background:#fff; padding:11px; border-radius:5px; overflow:hidden;
  -webkit-mask-image:var(--deckle); mask-image:var(--deckle);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  filter:drop-shadow(0 20px 26px rgba(var(--ink-rgb),.34));
  transform-origin:50% 130%; will-change:transform;
}
.fan__card img{ width:100%; height:100%; object-fit:cover; }

/* ---------- EcoKlare page ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:99px;
  background:var(--card); border:1px solid var(--line); font-family:var(--font-sub);
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.chip svg{ width:15px; height:15px; color:var(--accent); }
.chip:hover{ transform:translateY(-3px); border-color:var(--accent); background:#fff; }
.big-question{
  font-family:var(--font-heading); font-weight:700; font-size:clamp(1.3rem,2.9vw,1.9rem);
  letter-spacing:-.02em; line-height:1.35; color:#fff;
  border-left:4px solid var(--accent-2); padding-left:1.4rem; max-width:34em;
}
.track-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:920px){ .track-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }
.trcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:grid; align-content:start; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.trcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.trcard__img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.trcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.trcard:hover .trcard__img img{ transform:scale(1.06); }
.trcard__badge{
  position:absolute; left:1rem; top:1rem; background:var(--accent); color:#fff; border-radius:99px;
  font-family:var(--font-sub); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:.45rem .9rem; box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
.trcard__body{ padding:1.4rem 1.4rem 1.5rem; display:grid; gap:.8rem; }
.trcard ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.trcard li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--text); font-size:.93rem; }
.trcard li svg{ width:16px; height:16px; flex:none; margin-top:.2rem; color:var(--accent); }
.spec-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.1rem; }
.spec{
  background:rgba(255,255,255,.05); border:1px solid var(--line-d); border-radius:var(--r);
  padding:1.7rem 1.4rem; display:grid; gap:.45rem; align-content:start;
  transition:background .35s, transform .35s var(--ease);
}
.spec:hover{ background:rgba(255,255,255,.09); transform:translateY(-6px); }
.spec__val{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:1.9rem; color:#fff; line-height:1.1; }
.spec__unit{ font-size:.82rem; color:var(--accent-2); font-weight:600; }
.spec__label{ font-family:var(--font-sub); font-size:.74rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-soft); }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }
.duo__card{ border-radius:var(--r); padding:1.8rem 1.6rem; display:grid; gap:.9rem; align-content:start; }
.duo__card--no{ background:var(--card); border:1px solid var(--line); }
.duo__card--yes{ background:var(--ink); color:#fff; }
.duo__card h3{ font-size:1.15rem; }
.duo__card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.duo__card li{ display:flex; gap:.6rem; align-items:center; font-size:.95rem; }
.duo__card--no li{ color:var(--text); }
.duo__card--yes li{ color:#dbe7cc; }
.duo__card li svg{ width:16px; height:16px; flex:none; }
.duo__card--no li svg{ color:#a8574a; }
.duo__card--yes li svg{ color:var(--accent-2); }
/* NOTE: the gallery's own rules live with the application cards further
   down, under ".gal" / ".galcard". An earlier overlay-caption design used
   to sit here too and, being the more specific selector, quietly won:
   it forced every card to one 4:3 crop and clipped the caption out of
   sight. It is gone — there is one set of gallery rules now. */

/* ---------- generic section ---------- */
.sec{ padding:var(--sec) 0; position:relative; }
.sec--cream{ background:var(--cream); }
.sec--grey{ background:var(--grey); }           /* deck's cool-white slides */
.sec--dark{ background:var(--ink); color:#fff; }
.sec--dark2{ background:var(--ink-2); color:#fff; }
.sec--forest{ background:var(--forest); color:#fff; }
.sec--olive{ background:var(--olive); color:#fff; }


/* ---------- home about ---------- */
.split{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; grid-template-columns:1.05fr .95fr; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }
.split__txt{ display:grid; gap:1.3rem; justify-items:start; }
.split__txt .lead{ font-family:var(--font-heading); font-size:1.25rem; font-weight:700; letter-spacing:-.02em; line-height:1.35; color:var(--ink); }
.split__txt p.body{ color:var(--text); }
.imgstack{ position:relative; }
.imgstack__main{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/4.6; }
.imgstack__main img{ width:100%; height:100%; object-fit:cover; }
.imgstack__badge{
  position:absolute; top:-1.4rem; right:-.6rem; background:var(--accent); color:#fff;
  border-radius:50%; width:118px; height:118px; display:grid; place-items:center; text-align:center;
  font-family:var(--font-sub); font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:1rem; line-height:1.5; box-shadow:var(--shadow); animation:spinSlow 26s linear infinite;
  z-index:4;                     /* always above the photo's own hover cue */
}
/* The round sticker covers the top-right corner, so the "enlarge" cue on
   this photo moves to the bottom-right instead of showing through it. */
.imgstack__main.zoomable::after{ top:auto; bottom:.7rem; right:.7rem; }
@keyframes spinSlow{ to{ transform:rotate(360deg);} }
/* The sticker as the owner's own picture: it fills the disc edge to edge
   and IS the sticker, so the green background is dropped. Supply a square
   image — the circle crops it to a round badge. */
.imgstack__badge--img{ padding:0; overflow:hidden; background:transparent; box-shadow:none; }
.imgstack__badge--img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* stop it turning — useful when the picture has words in it */
.imgstack__badge--still{ animation:none; }

/* ---------- value cards ---------- */
.cards4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:1000px){ .cards4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cards4{ grid-template-columns:1fr;} }
.vcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:2rem 1.6rem 1.9rem; display:grid; gap:.85rem; align-content:start;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.vcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
/* circular icon badge — the deck uses these everywhere, filled olive
   with a white glyph, or an outlined green ring on pale cards */
.icon-badge{
  width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--olive); color:#fff;
  transition:background .35s, color .35s, transform .35s var(--ease), box-shadow .35s;
}
.icon-badge svg, .icon-badge .icon-file{ width:26px; height:26px; }

/* --- an icon file from assets/icons/ ---------------------------------
   Two modes. As-is: shown with its own colours, so the badge switches to
   a pale disc to keep a coloured graphic legible. Tinted: the file is
   used only for its shape and painted in the current colour, so it
   matches the built-in icons exactly. */
.icon-file{ display:block; object-fit:contain; flex:none; }
/* Recolour: flatten the picture to black, then invert to white, keeping
   its transparency. Whatever colours the file had, the result is a clean
   white silhouette that sits on the filled badge exactly like a built-in
   icon — and unlike a CSS mask it works from any origin, including a
   file opened straight from disk. */
.icon-file--tint{ filter:brightness(0) invert(1); }
.icon-badge:has(.icon-file:not(.icon-file--tint)){ background:var(--cream); }
.on-dark .icon-badge:has(.icon-file:not(.icon-file--tint)){ background:#fff; }
.vcard:hover .icon-badge:has(.icon-file:not(.icon-file--tint)),
.scard:hover .icon-badge:has(.icon-file:not(.icon-file--tint)){ background:var(--cream); }
.icon-badge--ring{ background:transparent; color:var(--accent); box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.42); }
.icon-badge--navy{ background:var(--ink); color:#fff; }
.icon-badge--lime{ background:var(--lime); color:var(--forest); }
.on-dark .icon-badge--ring{ color:var(--accent-2); box-shadow:inset 0 0 0 2px rgba(var(--lime-rgb),.5); }
.vcard:hover .icon-badge{ background:var(--accent); color:#fff; transform:scale(1.08); }
.vcard:hover .icon-badge--ring{ box-shadow:inset 0 0 0 2px transparent; }
.vcard p{ color:var(--text); font-size:.95rem; }

/* ---------- service cards ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:980px){ .svc-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .svc-grid{ grid-template-columns:1fr;} }
.scard{
  position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:2.1rem 1.7rem; display:grid; gap:.9rem; align-content:start;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.scard::before{
  content:""; position:absolute; inset:auto -30% -60% auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--lime-rgb),.18), transparent 70%);
  transform:scale(0); transition:transform .6s var(--ease);
}
.scard:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.scard:hover::before{ transform:scale(2.2); }
.scard p{ color:var(--text); font-size:.95rem; }
.scard .go{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.3rem;
  font-family:var(--font-sub); font-size:.74rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
}
.scard .go svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.scard li svg{ width:15px; height:15px; flex:none; color:var(--accent); }
.scard:hover .go svg{ transform:translateX(5px); }

/* ---------- process steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; counter-reset:step; position:relative; }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .steps{ grid-template-columns:1fr;} }
.step{ position:relative; padding:2.2rem 1.5rem 1.8rem; border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid var(--line-d); display:grid; gap:.7rem; align-content:start; overflow:hidden; transition:background .35s, transform .35s var(--ease); }
.step:hover{ background:rgba(255,255,255,.09); transform:translateY(-6px); }
.step__num{
  font-family:var(--font-heading); font-weight:800; font-size:3.2rem; line-height:1;
  letter-spacing:-.03em; color:var(--accent-2); opacity:.95;
}
.step h3{ color:#fff; font-size:1.2rem; }
.step p{ color:var(--text-d); font-size:.93rem; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.4rem 1.4rem; }
@media (max-width:980px){ .stats{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .stats{ grid-template-columns:1fr;} }
.stat{ display:grid; gap:.5rem; align-content:start; padding-top:1.3rem; border-top:2px solid rgba(255,255,255,.16); }
/* the figure carries the accent; its unit (%, K, kg) stays white, so the
   number is what the eye lands on and the unit reads as a quiet suffix */
.stat__num{ font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; font-size:clamp(2.7rem,5vw,4rem); line-height:1; color:var(--accent-2); }
.stat__num i{ font-style:normal; color:var(--text-d); }
.stat__label{ font-family:var(--font-sub); font-weight:800; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); }
.stat p{ color:var(--muted-d); font-size:.92rem; }

/* ---------- rates (progress bars) ---------- */
.rates{ display:grid; gap:1.5rem; max-width:720px; }
.rate{ display:grid; gap:.5rem; }
.rate__top{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-sub); font-weight:700; }
.rate__pct{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:1.5rem; color:var(--accent); }
.rate__bar{ height:10px; border-radius:6px; background:rgba(var(--ink-rgb),.09); overflow:hidden; }
.rate__fill{
  height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width 1.4s var(--ease);
}

/* ---------- video ---------- */
.video-shell{ position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; background:var(--ink); cursor:pointer; }
.video-shell img{ width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .4s, transform .8s var(--ease); }
.video-shell:hover img{ opacity:.85; transform:scale(1.03); }
.video-shell iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.playbtn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:86px; height:86px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; transition:transform .35s var(--ease), background .3s;
}
.playbtn::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:2px solid rgba(var(--lime-rgb),.5); animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(.8); opacity:1 } 100%{ transform:scale(1.35); opacity:0 } }
.video-shell:hover .playbtn{ transform:translate(-50%,-50%) scale(1.12); background:var(--accent-deep); }
.playbtn svg{ width:30px; height:30px; margin-left:4px; }

/* ---------- quote ---------- */
.quote-sec{ text-align:center; max-width:880px; margin:0 auto; display:grid; gap:1.6rem; justify-items:center; }
.quote-mark{ width:64px; height:64px; color:var(--accent-2); }
.quote-txt{ font-family:var(--font-heading); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.35rem,3vw,2rem); line-height:1.4; color:#fff; }
.quote-author{ display:flex; align-items:center; gap:1rem; }
.avatar{
  width:58px; height:58px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-family:var(--font-sub); font-weight:800; letter-spacing:.06em; overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.quote-author b{ display:block; font-family:var(--font-sub); letter-spacing:.02em; color:#fff; }
.quote-author span{ font-size:.85rem; color:var(--muted-d); }
.q-dots{ display:flex; gap:.5rem; }
.q-dots button{ width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.28); cursor:pointer; transition:.3s; padding:0; }
.q-dots button.on{ background:var(--accent-2); transform:scale(1.3); }

/* ---------- FAQ accordion ---------- */
.acc{ display:grid; gap:.8rem; max-width:820px; margin:0 auto; width:100%; }
.acc-item{ background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:box-shadow .35s, border-color .3s; }
.acc-item.open{ box-shadow:var(--shadow); border-color:transparent; }
.acc-q{
  width:100%; display:flex; align-items:center; gap:1rem; justify-content:space-between; text-align:left;
  background:none; border:0; cursor:pointer; padding:1.25rem 1.4rem;
  font-family:var(--font-heading); font-size:1.1rem; font-weight:700; letter-spacing:-.015em; color:var(--ink);
}
.acc-q .pm{ flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:.35s var(--ease); position:relative; }
.acc-q .pm::before, .acc-q .pm::after{ content:""; position:absolute; background:var(--ink); transition:.35s var(--ease); }
.acc-q .pm::before{ width:12px; height:1.6px; }
.acc-q .pm::after{ width:1.6px; height:12px; }
.acc-item.open .pm{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }
.acc-item.open .pm::before{ background:#fff; }
.acc-item.open .pm::after{ opacity:0; }
.acc-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.acc-item.open .acc-a{ grid-template-rows:1fr; }
.acc-a > div{ overflow:hidden; }
.acc-a p{ padding:0 1.4rem 1.35rem; color:var(--text); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(120deg, var(--forest), var(--accent) 58%, var(--olive)); color:#fff; }
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 300px at 85% 20%, rgba(var(--lime-rgb),.35), transparent 65%);
}
.cta-band .wrap{ position:relative; display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between; padding-top:clamp(3rem,7vw,5rem); padding-bottom:clamp(3rem,7vw,5rem); }
.cta-band h2{ font-size:clamp(1.9rem,4.2vw,3rem); max-width:14em; }
.cta-band h2 em{ color:var(--lime); }
.cta-band p{ color:#dfe9d2; margin-top:.5rem; }
.leaf-float{ position:absolute; color:rgba(255,255,255,.14); animation:floaty 7s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0deg)} 50%{ transform:translateY(-16px) rotate(8deg)} }

/* ---------- page hero (subpages) ---------- */
.phero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding:clamp(9rem,16vw,12rem) 0 clamp(3.6rem,7vw,5.5rem);
}
.phero::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(700px 340px at 12% 115%, rgba(var(--accent-rgb),.4), transparent 70%),
    radial-gradient(600px 300px at 88% -10%, rgba(var(--lime-rgb),.22), transparent 70%);
}
.phero .wrap{ position:relative; display:grid; gap:1.2rem; justify-items:start; }
.phero h1{ font-size:clamp(2.3rem,5.4vw,4rem); max-width:16em; }
.phero .lede{ color:var(--text-d); }
.phero__leaf{ position:absolute; right:-40px; bottom:-60px; width:280px; height:280px; color:rgba(255,255,255,.05); transform:rotate(-15deg); }

/* ---------- about page ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; } }
.tcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:2.4rem 1.8rem; text-align:center; display:grid; gap:.9rem; justify-items:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.tcard .avatar{ width:96px; height:96px; font-size:1.6rem; background:linear-gradient(135deg, var(--accent), var(--accent-2)); }
.tcard .role{ font-family:var(--font-sub); font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.tcard p{ color:var(--text); font-size:.95rem; }
.tcard a.mail{ font-size:.85rem; color:var(--muted); border-bottom:1px solid var(--line); transition:color .3s, border-color .3s; }
.tcard a.mail:hover{ color:var(--accent); border-color:var(--accent); }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 320px)); gap:1.2rem; justify-content:center; }

/* ---------- forms ---------- */
.form-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.6rem,4vw,2.6rem); box-shadow:var(--shadow); display:grid; gap:1rem; width:100%;
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ .f-row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--font-sub); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.field input, .field textarea, .field select{
  width:100%; font:inherit; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:9px; padding:.85rem 1rem; resize:vertical;
  transition:border-color .25s, box-shadow .25s; -webkit-appearance:none; appearance:none;
}
.field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23565c54' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; }
.field textarea{ min-height:120px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12); }
.form-note{ font-size:.83rem; color:var(--muted); }

/* contact info cards */
.info-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:900px){ .info-cards{ grid-template-columns:1fr; } }
.icard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem 1.5rem; display:grid; gap:.6rem; justify-items:start; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.icard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.icard b{ font-family:var(--font-heading); font-size:1.12rem; font-weight:800; letter-spacing:-.015em; color:var(--ink); }
.icard p, .icard a{ color:var(--text); font-size:.95rem; }
.icard a:hover{ color:var(--accent); }

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.footer__map{ position:absolute; inset:0; opacity:.05; background:url("assets/images/world-map.png") center/cover no-repeat; pointer-events:none; }
.footer .wrap{ position:relative; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding:clamp(3.4rem,7vw,5.5rem) 0 3rem; }
@media (max-width:980px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer__top{ grid-template-columns:1fr; } }
.footer__brand img{ height:52px; width:auto; margin-bottom:1.1rem; }
.footer__brand p{ color:var(--text-d); font-size:.95rem; max-width:30em; }
.footer h4{ font-family:var(--font-sub); font-size:.78rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:1.2rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.footer ul a, .footer ul li{ color:#d2dcc8; font-size:.95rem; }
.footer ul a{ position:relative; transition:color .3s; }
.footer ul a:hover{ color:var(--accent-2); }
.footer__contact li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--muted-d); }
.footer__contact svg{ width:17px; height:17px; flex:none; margin-top:.2rem; color:var(--accent-2); }
.footer__bottom{
  border-top:1px solid var(--line-d); padding:1.5rem 0 1.7rem; display:flex; flex-wrap:wrap; gap:.8rem;
  align-items:center; justify-content:space-between; font-size:.83rem; color:var(--muted-d);
}
.totop{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:50; width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:#fff; border:0; cursor:pointer; display:grid; place-items:center;
  box-shadow:var(--shadow); opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .35s, transform .35s var(--ease), background .3s;
}
.totop.show{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--accent-deep); }
.totop svg{ width:18px; height:18px; }

/* ---------- reveals & transitions ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .9s var(--ease); transition-delay:var(--d, 0s); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal--left{ transform:translateX(-40px); }
.reveal--right{ transform:translateX(40px); }
.reveal--zoom{ transform:scale(.92); }
#app{ transition:opacity .28s ease, transform .28s ease; }
#app.leaving{ opacity:0; transform:translateY(14px); }

/* toast */
.toast{
  position:fixed; left:50%; bottom:1.6rem; transform:translateX(-50%) translateY(24px); z-index:80;
  background:var(--ink); color:#fff; padding:.85rem 1.4rem; border-radius:10px; font-size:.92rem;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .35s var(--ease); box-shadow:var(--shadow);
  max-width:min(92vw, 480px); text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* loading splash */
.splash{ position:fixed; inset:0; z-index:100; background:var(--paper); display:grid; place-items:center; transition:opacity .5s ease, visibility .5s; }
.splash.done{ opacity:0; visibility:hidden; }
.splash svg{ width:54px; height:54px; color:var(--accent); animation:spinSlow 2.4s linear infinite; }

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

/* ---------- expandable cards → modal ---------- */
[data-expand]{ cursor:pointer; position:relative; }
[data-expand]::after{
  content:"+"; position:absolute; top:.7rem; right:.85rem; z-index:2;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; font:700 1rem/1 var(--font-sub);
  opacity:0; transform:scale(.6); transition:opacity .3s, transform .3s var(--ease);
  pointer-events:none;
}
[data-expand]:hover::after{ opacity:1; transform:scale(1); }
figure[data-expand]::after{ content:"⤢"; font-size:.85rem; }
body.modal-open{ overflow:hidden; }
.xmodal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1.2rem; }
.xmodal__bg{
  position:absolute; inset:0; background:rgba(var(--ink-rgb),.62);
  backdrop-filter:blur(5px); opacity:0; transition:opacity .4s;
}
.xmodal.show .xmodal__bg{ opacity:1; }
.xmodal__card{
  position:relative; background:var(--paper); border-radius:18px; width:min(620px, 94vw);
  max-height:88vh; overflow:auto; box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  transition:transform .5s var(--ease), opacity .35s;
}
.xmodal__close{
  position:absolute; top:.9rem; right:.9rem; z-index:3; width:38px; height:38px;
  border-radius:50%; border:0; background:rgba(255,255,255,.94); color:var(--ink);
  cursor:pointer; display:grid; place-items:center;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.45); transition:transform .35s var(--ease);
}
.xmodal__close:hover{ transform:rotate(90deg); }
.xmodal__close svg{ width:16px; height:16px; }
.xmodal__img{ position:relative; aspect-ratio:16/9.5; }
.xmodal__img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* opened photos: show the whole picture, never crop it */
.xmodal__img--free{ aspect-ratio:auto; background:var(--ink); }
.xmodal__img--free img{ width:100%; height:auto; max-height:78vh; object-fit:contain; }

/* --- any photo that opens full-size --- */
.zoomable{ position:relative; cursor:zoom-in; }
.zoomable::after{
  content:"⤢"; position:absolute; top:.6rem; right:.6rem; z-index:3;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(var(--ink-rgb),.74); color:#fff; font-size:.82rem; line-height:1;
  opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .3s, transform .3s var(--ease);
}
.zoomable:hover::after, .zoomable:focus-visible::after{ opacity:1; transform:scale(1); }
.zoomable:focus-visible{ outline:3px solid var(--accent-2); outline-offset:3px; }
/* the torn-paper frame would clip a corner badge, so it just gets the cursor */
.mat__ph.zoomable::after{ display:none; }
.xmodal__img .trcard__badge{ position:absolute; left:1rem; top:1rem; }
.xmodal__body{ padding:1.9rem 2.1rem 2.3rem; display:grid; gap:1rem; justify-items:start; }
.icon-badge--lg{ width:66px; height:66px; }
.icon-badge--lg svg, .icon-badge--lg .icon-file{ width:32px; height:32px; }
.xmodal__title{ font-size:1.6rem; }
.xmodal__lead{ font-family:var(--font-heading); font-weight:700; letter-spacing:-.015em; font-size:1.08rem; color:var(--accent); }
.xmodal__txt{ color:var(--text); }
.xmodal__points{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.xmodal__points li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--text); }
.xmodal__points li svg{ width:16px; height:16px; flex:none; margin-top:.2rem; color:var(--accent); }

/* ============================================================
   DECK MOTIFS — lifted from the EcoKlare Company Profile
   ============================================================ */

/* --- torn-paper edge: a soft deckled rectangle, irregular enough to
   read as hand-torn paper. Applied to .fan__card (home photo fan). --- */
:root{
  --deckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' preserveAspectRatio='none'%3E%3Cpath d='M6 9c40-6 78 4 118 1s70-8 108-4 74 9 112 2c34-6 50 3 50 3v274c-38 7-76-3-114 0s-72 8-110 5-76-8-114-2c-30 5-50-4-50-4z' fill='%23000'/%3E%3C/svg%3E");
}

/* --- ribbon callout: dark pill with a mark and a two-tone line --- */
.ribbon{
  display:flex; align-items:center; gap:1.2rem;
  background:var(--ink); color:#fff; border-radius:var(--r);
  padding:1.3rem 1.7rem; box-shadow:var(--shadow);
}
.ribbon--forest{ background:var(--forest); }
.ribbon--olive{ background:var(--olive); }
.ribbon__txt{ display:grid; gap:.1rem; font-size:1.02rem; line-height:1.45; }
.ribbon__txt b{ color:#fff; font-weight:600; }
.ribbon__txt .hi{ color:var(--accent-2); font-weight:700; }
.ribbon .icon-badge{ background:transparent; box-shadow:inset 0 0 0 2px rgba(var(--lime-rgb),.55); color:var(--accent-2); }

/* --- feature strip: the icon+label row along the foot of a slide --- */
.fstrip{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:.4rem; background:var(--forest); color:#fff; border-radius:999px;
  padding:1.15rem 1.6rem;
}
.fstrip--olive{ background:var(--olive); }
.fstrip--square{ border-radius:var(--r); }
.fstrip__i{
  display:flex; align-items:center; gap:.8rem; padding:.25rem 1.1rem;
  border-left:1px solid rgba(255,255,255,.22); line-height:1.35; font-size:.9rem;
}
.fstrip__i:first-child{ border-left:0; }
.fstrip__i svg{ width:30px; height:30px; flex:none; color:var(--accent-2); }
.fstrip__i b{ display:block; color:#fff; font-weight:700; }
@media (max-width:780px){
  .fstrip{ border-radius:var(--r); }
  .fstrip__i{ border-left:0; }
}

/* --- dot grid decoration --- */
.dotgrid{
  position:absolute; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(var(--accent-rgb),.5) 1.8px, transparent 1.9px);
  background-size:19px 19px;
}
.on-dark .dotgrid{ background-image:radial-gradient(rgba(var(--lime-rgb),.4) 1.8px, transparent 1.9px); }

/* --- tag: the deck's "Key Characteristics" notched label --- */
.tag{
  display:inline-flex; align-items:center; gap:.55rem; align-self:start;
  background:var(--ink); color:#fff; padding:.6rem 2.2rem .6rem 1.2rem;
  font-family:var(--font-sub); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}
.tag--olive{ background:var(--olive); }
.tag--green{ background:var(--accent); }

/* --- soft pale card, the deck's list-row container --- */
.prow{
  display:flex; align-items:center; gap:1.1rem;
  background:rgba(var(--accent-rgb),.07); border-radius:999px;
  padding:1rem 1.5rem 1rem 1rem;
}
.prow__b{ display:grid; gap:.15rem; }
.prow__b b{ font-family:var(--font-heading); font-weight:800; font-size:1.02rem; letter-spacing:-.015em; color:var(--ink); }
.prow__b span{ color:var(--text); font-size:.93rem; }
.prow__n{
  margin-left:auto; flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--olive); color:#fff; display:grid; place-items:center;
  font-family:var(--font-heading); font-weight:800; font-size:.85rem;
}
@media (max-width:560px){ .prow{ border-radius:var(--r); } }
.prows{ display:grid; gap:.7rem; max-width:760px; }

/* --- philosophy: "every material has its purpose" (slide 4) --- */
.matgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:900px){ .matgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .matgrid{ grid-template-columns:1fr; } }
.mat{
  padding:0 1.3rem; border-left:1px solid var(--line);
  display:grid; gap:.25rem; justify-items:center; text-align:center; align-content:start;
  transition:transform .35s var(--ease);
}
.mat:first-child{ border-left:0; }
@media (max-width:900px){ .mat:nth-child(odd){ border-left:0; } }
@media (max-width:480px){ .mat{ border-left:0; } }
.mat:hover{ transform:translateY(-6px); }
/* torn-paper framed material photo, exactly as on the deck's
   philosophy slide — white deckled border, shadow follows the tear */
.mat__ph{
  display:block; width:100%; aspect-ratio:1/1; background:#fff; padding:10px;
  border-radius:4px; overflow:hidden; margin-bottom:.6rem;
  -webkit-mask-image:var(--deckle); mask-image:var(--deckle);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  filter:drop-shadow(0 14px 20px rgba(var(--ink-rgb),.26));
}
.mat__ph img{ width:100%; height:100%; object-fit:cover; }
.mat b{ font-family:var(--font-heading); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; color:var(--ink); }
.mat span{ color:var(--text); font-size:.94rem; }
.mat--own b{ color:var(--accent); }

/* --- sustainability cards (slide 12) --- */
.sugrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:860px){ .sugrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sugrid{ grid-template-columns:1fr; } }
.sucard{
  background:rgba(var(--accent-rgb),.06); border-radius:var(--r);
  padding:1.5rem 1.3rem; display:flex; align-items:center; gap:1rem;
  transition:background .35s, transform .35s var(--ease);
}
.sucard:hover{ background:rgba(var(--accent-rgb),.12); transform:translateY(-4px); }
.sucard p{ font-size:.97rem; line-height:1.45; color:var(--text); }
.sucard b{ color:var(--accent); font-weight:700; }

/* --- four-photo collage, staggered as on the deck's industry slide --- */
.collage{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.collage__i{
  display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:1/1;
  background:rgba(255,255,255,.06);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.6);
}
.collage__i img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.collage__i:hover img{ transform:scale(1.06); }
.collage__i:nth-child(1){ transform:translateY(-14px); }
.collage__i:nth-child(4){ transform:translateY(14px); }
@media (max-width:880px){ .collage__i{ transform:none !important; } }

/* the six "modern projects demand" points, on the dark challenge panel */
.dlist{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.2rem; }
.dlist li{ display:flex; gap:.6rem; align-items:flex-start; color:#fff; font-size:.95rem; }
.dlist li svg{ width:16px; height:16px; flex:none; margin-top:.3rem; color:var(--accent-2); }
@media (max-width:560px){ .dlist{ grid-template-columns:1fr; } }

/* --- sustainability: cards beside a hero shot + photo strip --- */
.suwrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,4vw,3rem); align-items:start; }
@media (max-width:960px){ .suwrap{ grid-template-columns:1fr; } }
.sushot{ position:relative; display:grid; gap:.7rem; }
.sushot__main{
  display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:16/11;
  box-shadow:var(--shadow);
}
.sushot__main img{ width:100%; height:100%; object-fit:cover; }
.sushot__badge{
  position:absolute; left:-.6rem; top:-.9rem; z-index:2;
  width:150px; height:150px; border-radius:50%; background:var(--accent);
  color:#fff; display:grid; place-items:center; align-content:center; gap:.3rem;
  text-align:center; padding:1rem; line-height:1.35; font-size:.86rem; font-weight:600;
  box-shadow:0 16px 34px -14px rgba(var(--ink-rgb),.5);
}
.sushot__badge svg{ width:26px; height:26px; }
.sushot__badge em{ color:var(--lime); font-style:normal; display:block; }
@media (max-width:620px){ .sushot__badge{ width:112px; height:112px; font-size:.72rem; left:-.2rem; top:-.5rem; } }
.sushot__strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.sushot__strip span{ display:block; border-radius:12px; overflow:hidden; aspect-ratio:4/3; }
.sushot__strip img{ width:100%; height:100%; object-fit:cover; }

/* --- application photo tiles (deck slide 6): a photo with a navy
   pill label and an olive icon badge sitting over its lower-left --- */
.tilegrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:1000px){ .tilegrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tilegrid{ grid-template-columns:1fr; } }
.ptile{
  position:relative; margin:0; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/3; background:var(--cream);
  box-shadow:0 12px 30px -18px rgba(var(--ink-rgb),.45);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ptile:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.ptile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.ptile:hover img{ transform:scale(1.06); }
.ptile figcaption{
  position:absolute; left:.85rem; right:.85rem; bottom:.85rem;
  display:flex; align-items:center; gap:.7rem;
  background:var(--ink); color:#fff; border-radius:999px;
  padding:.42rem 1rem .42rem .42rem;
  font-family:var(--font-sub); font-size:.86rem; font-weight:600; line-height:1.25;
}
.ptile__ic{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--olive); display:grid; place-items:center;
}
.ptile__ic svg{ width:19px; height:19px; color:#fff; }
@media (max-width:1200px){ .ptile figcaption{ font-size:.8rem; } }

/* --- application cards, image over caption (slides 14–15) ---
   These photos run from tall portraits to letterbox-wide panoramas. Any
   grid of equal cells would have to crop most of them, so the gallery is
   laid out in COLUMNS instead: each card is as tall as its own picture,
   and the columns pack together with no gaps. Nothing is cropped and no
   picture sits marooned in a mat of empty background.
   Note this fills each column top to bottom before starting the next, so
   the cards read down-then-across rather than left-to-right. */
.gal{ display:block; columns:4; column-gap:1.1rem; }
@media (max-width:1040px){ .gal{ columns:2; } }
@media (max-width:560px){ .gal{ columns:1; } }
.galcard{
  margin:0 0 1.1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:block; aspect-ratio:auto; break-inside:avoid;
  box-shadow:none; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.galcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
/* height:auto — the picture keeps its own proportions and is shown whole.
   The card lifts on hover but the photo no longer zooms, which would crop
   back the very edges this is here to show. */
.galcard__img{ display:block; position:relative; background:var(--cream); }
.galcard__img img{ display:block; width:100%; height:auto; }
.galcard figcaption{
  position:static; inset:auto; padding:1.3rem 1.3rem 1.5rem; background:none;
  display:grid; gap:.45rem; text-align:center; letter-spacing:normal;
}
.galcard figcaption b{
  font-family:var(--font-heading); font-weight:800; font-size:1.05rem;
  letter-spacing:-.015em; color:var(--accent);
}
.galcard figcaption span{ color:var(--text); font-size:.92rem; font-weight:400; line-height:1.5; }

/* --- vision list (deck slide 2) --- */
.vlist{ display:grid; gap:0; max-width:920px; }
.vrow{ display:flex; align-items:flex-start; gap:1.3rem; padding:1.6rem 0; border-top:1px solid var(--line); }
.vrow:first-child{ border-top:0; padding-top:.4rem; }
.vrow p{ color:var(--text); font-size:1.04rem; line-height:1.6; }
.vrow p b{ color:var(--ink); font-weight:700; }

/* --- mission bullet list --- */
.mlist{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.65rem; }
.mlist li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--text); font-size:.98rem; }
.mlist li svg{ width:17px; height:17px; flex:none; margin-top:.35rem; color:var(--accent); }