/* ============================================================
   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; will-change:transform; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }

/* ---- hero image fit ----
   "cover" (default) fills the banner and crops whatever will not fit.
   "contain" shows the WHOLE picture — 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 same picture so the
   edges read as deliberate rather than as empty bars. */
.hero--fit .hero__bg{ inset:0; overflow:hidden; }
.hero--fit .hero__bg img{ object-fit:contain; object-position:center; position:relative; z-index:1; }
.hero--fit .hero__bg::before{
  content:""; position:absolute;
  /* 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;
}
.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); }
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:900px){ .gal{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .gal{ grid-template-columns:1fr;} }
.gal figure{
  margin:0; position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3.1;
  background:var(--cream); box-shadow:0 10px 30px -18px rgba(var(--ink-rgb),.4);
}
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gal figure:hover img{ transform:scale(1.07); }
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.2rem 1.1rem .9rem;
  background:linear-gradient(transparent, rgba(var(--ink-rgb),.85)); color:#fff;
  font-family:var(--font-sub); font-size:.82rem; font-weight:700; letter-spacing:.06em;
}

/* ---------- 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; padding:0 0 3rem 3rem; }
.imgstack__main{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/4.6; }
.imgstack__main img, .imgstack__b img{ width:100%; height:100%; object-fit:cover; }
.imgstack__b{
  position:absolute; left:0; bottom:0; width:58%; aspect-ratio:5/3.4; border-radius:var(--r);
  overflow:hidden; border:6px solid var(--paper); box-shadow:var(--shadow);
}
.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; }
.step__arrow{ position:absolute; top:1.4rem; right:1.2rem; color:var(--accent-2); opacity:.5; width:22px; height:22px; }

/* ---------- 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); }
.stat__num{ font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; font-size:clamp(2.7rem,5vw,4rem); line-height:1; color:#fff; }
.stat__num i{ font-style:normal; color:var(--accent-2); }
.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--tall{ aspect-ratio:4/3; }
.xmodal__img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* plain photo lightbox: 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) --- */
.gal{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1040px){ .gal{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gal{ grid-template-columns:1fr; } }
.galcard{
  margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:grid; align-content:start; aspect-ratio:auto;
  box-shadow:none; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.galcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.galcard__img{ display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--cream); }
.galcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.galcard:hover .galcard__img img{ transform:scale(1.06); }
.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); }