@charset "UTF-8";
/* ==========================================================================
   vatra-2026, the one front-end stylesheet.

    1. Tokens, layer 1: brand      immutable, never flips
    2. Tokens, layer 2: semantic   flips with the theme
    3. Fonts
    4. Base
    5. Header, nav, mobile panel
    6. Hero
    7. Figures and partners
    8. Coloured bands
    9. Apeluri
   10. Teritoriu
   11. Proiecte
   12. Noutati
   13. Footer
   14. Interaction: hover and focus, one system
   15. Responsive

   Components reference SEMANTIC tokens only. A component that reaches past
   them to a brand token, or to a literal, is the bug that makes dark mode
   render one theme's text on the other theme's ground.
   ========================================================================== */

/* ============================ 1. BRAND TOKENS ============================ */
/* These describe the brand, not a role. They do not change with the theme.   */
:root{
  /* one colour per numbered section, from the "be" reference board */
  --brand-green:#1F7A45;   --brand-green-dk:#1A6B3C;
  --brand-teal:#12808F;    --brand-teal-dk:#0F6F7C;
  --brand-orange:#B8440F;  --brand-orange-dk:#A03B0C;
  --brand-blue:#2B4E9B;    --brand-blue-dk:#26438A;

  --brand-forest:#0C2116;      /* hero and footer ground, both themes */
  --brand-mint:#8FD39C;        /* the only legible accent ON forest */
  --brand-gold:#C9971C;        /* LOGO ONLY. never appears in the interface. */

  --neutral-ink:#141819;   --neutral-slate:#5C6567;  --neutral-line:#E3E7E7;
  --neutral-paper:#FFFFFF; --neutral-sand:#F5F7F6;
  --neutral-ink-d:#EAEEED; --neutral-slate-d:#9BA5A6; --neutral-line-d:#272D2E;
  --neutral-bg-d:#0E1112;  --neutral-surface-d:#171B1C;

  /* text and rules that sit on the forest ground, in BOTH themes, because the
     forest ground does not flip */
  --on-forest:#DCE8DA;
  --on-forest-dim:#93AC9B;
  --forest-rule:#234032;
  --forest-rule-2:#2E4C3C;

  /* type */
  --f:"Golos Text","Helvetica Neue",Arial,sans-serif;

  /* spacing, always a RANGE, never a number per breakpoint */
  --s:clamp(10px,1.1vw,14px);
  --m:clamp(18px,2vw,28px);
  /* the floor is the house's 40px between page sections; at 34 every section
     on a phone sat 6px short of it */
  --l:clamp(40px,4vw,56px);
  --xl:clamp(64px,8vw,132px);
  --gut:clamp(18px,4vw,64px);

  /* left edge of the 1280 content column, so a full-bleed block can align to
     the page grid instead of to the viewport */
  --edge:max(var(--gut), calc((100vw - 1280px) / 2 + var(--gut)));

  /* radius. BUTTONS ONLY get --r-btn; cards get --r; nothing else gets any.
     There is deliberately no chip token: a filled, padded, rounded box on a
     non-clickable element reads as a button whatever its corner radius. */
  --r:14px;
  --r-btn:8px;
}

/* =========================== 2. SEMANTIC TOKENS ========================== */
/* These describe a ROLE. Every component uses these and nothing else.        */
:root{
  --bg:var(--neutral-paper);
  --surface:var(--neutral-sand);
  --text:var(--neutral-ink);
  --muted:var(--neutral-slate);
  --rule:var(--neutral-line);

  --c1:var(--brand-green);
  --c2:var(--brand-teal);
  --c3:var(--brand-orange);
  --c4:var(--brand-blue);

  --open:var(--brand-green);
  --closed:#5A6264;

  /* A band colour has TWO roles and they need different values. --cN is the
     FILL, chosen so WHITE text reads on it. --cN-txt is that colour used AS
     text or as a hairline rule on the page ground, which has to clear 4.5:1
     against --bg and --surface in its own right. Using the fill as text is
     how the Noutati "Citește" link landed at 2.03:1 on the dark ground. */
  --c1-txt:#1F7A45;
  --c2-txt:#0F6F7C;   /* darker than the fill: the fill measured 4.33 on --surface */
  --c3-txt:#B8440F;
  --c4-txt:#2B4E9B;
  --c4-hover:#17306B;

  /* a form field's border is what shows where the control is, so it clears 3:1
     against the field (--bg) and the card around it (--surface); --rule does not */
  --field:#7B8587;
  /* a field's error, as text and border: 6.08 on --surface */
  --error:#B3261E;

  --hdr-bg:rgba(255,255,255,.88);
  --hdr-bg-scrolled:rgba(255,255,255,.95);
  --btn-light:#FFFFFF;
  --btn-light-hover:#DDF0E1;
}

/* The dark palette is declared twice on purpose. The media query covers the
   default "follow the system" state, guarded so an explicit light choice still
   wins; the attribute rule covers an explicit dark choice on a light system. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:var(--neutral-bg-d);
  --surface:var(--neutral-surface-d);
  --text:var(--neutral-ink-d);
  --muted:var(--neutral-slate-d);
  --rule:var(--neutral-line-d);
  --c1:var(--brand-green-dk);
  --c2:var(--brand-teal-dk);
  --c3:var(--brand-orange-dk);
  --c4:var(--brand-blue-dk);
  /* a status drawn as coloured TEXT has to clear 4.5:1 on the dark surface,
     which the light-mode values do not */
  --open:#6FCB8C;
  --closed:var(--neutral-slate-d);
  /* the fills are DARKENED for dark mode so white still reads on them, which
     makes them useless as text: they measure 2.03 to 3.24 on the dark ground */
  --c1-txt:#6FCB8C;
  --c2-txt:#5FCEDB;
  --c3-txt:#FF9A6B;
  --c4-txt:#8FB6F5;
  --c4-hover:#B9D2FF;
  --field:#646E70;
  --error:#FF8F87;
  --hdr-bg:rgba(14,17,18,.86);
  --hdr-bg-scrolled:rgba(14,17,18,.95);
}}
:root[data-theme="dark"]{
  --bg:var(--neutral-bg-d);
  --surface:var(--neutral-surface-d);
  --text:var(--neutral-ink-d);
  --muted:var(--neutral-slate-d);
  --rule:var(--neutral-line-d);
  --c1:var(--brand-green-dk);
  --c2:var(--brand-teal-dk);
  --c3:var(--brand-orange-dk);
  --c4:var(--brand-blue-dk);
  --open:#6FCB8C;
  --closed:var(--neutral-slate-d);
  /* the fills are DARKENED for dark mode so white still reads on them, which
     makes them useless as text: they measure 2.03 to 3.24 on the dark ground */
  --c1-txt:#6FCB8C;
  --c2-txt:#5FCEDB;
  --c3-txt:#FF9A6B;
  --c4-txt:#8FB6F5;
  --c4-hover:#B9D2FF;
  --field:#646E70;
  --error:#FF8F87;
  --hdr-bg:rgba(14,17,18,.86);
  --hdr-bg-scrolled:rgba(14,17,18,.95);
}

/* ================================ 3. FONTS =============================== */
/* The @font-face rules are NOT here. They are generated into assets/css/fonts.css
   by the house fetch-fonts.py and INLINED into the head by inc/enqueues.php, so
   the faces are declared without a second stylesheet request.

   Golos Text, weights 400 / 600 / 800, split into latin, latin-ext and cyrillic
   with real unicode-ranges, so a Romanian page never downloads the Cyrillic cut.
   Romanian's comma-below letters live in latin-ext specifically: dropping that
   subset breaks every heading mid-word. Verified 10/10 Romanian and 10/10
   Cyrillic glyphs at all three weights. Regenerate, never hand-edit:

     python3 ~/.claude/skills/nld-website-build/scripts/fetch-fonts.py . \
       "Golos Text:400,600,800:latin,latin-ext,cyrillic"
*/

/* ================================ 4. BASE ================================ */
*{box-sizing:border-box}
/* This, not snapping the header height, is what stops the compact-menu
   flicker loop. Keep it. */
html{overflow-anchor:none}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
/* A Russian heading holds words like "сельскохозяйственной", wider than a 320
   phone at display size: the page scrolled sideways. Hyphenate on phones (by the
   page's lang), and break a word only as the last resort. */
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.028em;text-wrap:balance;overflow-wrap:break-word}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.w{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
.lab{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin:0}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ==================== 5. HEADER, NAV, MOBILE PANEL ======================= */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--c1);color:#fff;
  padding:12px 18px;border-radius:var(--r-btn);font-weight:600;text-decoration:none}
.skip-link:focus{left:12px;top:12px}

.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;isolation:isolate;
  background:var(--hdr-bg);-webkit-backdrop-filter:saturate(180%) blur(11px);
  backdrop-filter:saturate(180%) blur(11px);border-bottom:1px solid var(--rule);
  transition:background-color .26s ease,box-shadow .26s ease,border-color .26s ease}
.hdr.is-scrolled{background:var(--hdr-bg-scrolled);box-shadow:0 1px 16px rgba(10,20,14,.11)}

/* The height animates, so it needs a real px value: calibrate() measures the
   row once and publishes --strip-h / --strip-c. height:auto will not
   transition, and a guessed number re-triggers itself at the threshold. */
.hrow{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,1.6vw,26px);
  height:var(--strip-h,84px);transition:height .34s cubic-bezier(.4,0,.2,1)}
.hdr.is-scrolled .hrow{height:var(--strip-c,62px)}
.brand img{height:var(--logo-h,52px);width:auto;display:block;
  transition:height .34s cubic-bezier(.4,0,.2,1)}
.hdr.is-scrolled .brand img{height:var(--logo-c,38px)}
@media (prefers-reduced-motion:reduce){.hrow,.brand img,.hdr{transition:none}}

.brand-group{display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .lg-light{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .lg-dark{display:none}
  :root:not([data-theme="light"]) .brand .lg-light{display:block}}
:root[data-theme="dark"] .brand .lg-dark{display:none}
:root[data-theme="dark"] .brand .lg-light{display:block}

/* The client's logo has a wordmark that is illegible at header size, so this
   text IS the wordmark. That makes it a NAME: proper capitals at reading size
   in the full text colour, never a small uppercase label in grey. */
.brandname{font-size:clamp(13px,1.05vw,15.5px);font-weight:700;letter-spacing:-.005em;
  color:var(--text);white-space:nowrap;padding-left:14px;
  border-left:2px solid var(--c1-txt);line-height:1.2}

nav{display:flex;gap:clamp(12px,1.4vw,22px)}
nav a{font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;padding-block:4px}
nav a.active{color:var(--c1-txt);box-shadow:inset 0 -2px 0 var(--c1-txt)}

.cluster{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);flex:0 0 auto}
.lang{display:flex;gap:5px;font-size:12px;font-weight:600}
.lang b{color:var(--c1-txt)}
.lang i{font-style:normal;color:var(--muted)}
.lang a{color:var(--muted);text-decoration:none}
.hcta{display:inline-block;background:var(--c1);color:#fff;text-decoration:none;
  font-weight:600;font-size:14px;padding:11px 18px;border-radius:var(--r-btn);white-space:nowrap}

.burger{display:none;appearance:none;background:transparent;border:1px solid var(--rule);
  border-radius:var(--r-btn);width:46px;height:46px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto}
.burger span{position:relative;display:block;width:20px;height:2px;background:var(--text);
  transition:background-color .15s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;
  height:2px;background:var(--text);transition:transform .2s ease}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* The panel is a direct child of body, NEVER inside .hdr: backdrop-filter on
   the header makes it the containing block for fixed descendants, so inset:0
   resolves to the header box and the "full screen" panel renders 375x120. */
.mnav{position:fixed;inset:0;z-index:39;background:var(--bg);overflow-y:auto;
  padding:calc(var(--strip-h,84px) + 18px) var(--gut)
          calc(var(--gut) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:clamp(18px,4.6vw,24px)}
/* .mnav sets display:flex, which outranks the UA [hidden] rule, so without
   this the closed panel stays a live fixed layer and eats every scroll event. */
.mnav[hidden]{display:none}
.mlinks{display:flex;flex-direction:column}
.mnav a.ml{font-size:20px;font-weight:600;text-decoration:none;padding:13px 2px;
  min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--rule)}
.mnav a.ml.active{color:var(--c1-txt)}
.mnav .mcta{background:var(--c1);color:#fff;text-decoration:none;font-weight:600;
  font-size:16px;padding:16px 22px;border-radius:var(--r-btn);text-align:center;
  min-height:52px;display:flex;align-items:center;justify-content:center}
.mnav .mlang{display:flex;gap:clamp(10px,2.6vw,14px)}
.mnav .mlang a{flex:1;border:1px solid var(--rule);border-radius:var(--r-btn);padding:13px;
  font-size:15px;font-weight:600;min-height:48px;display:flex;align-items:center;
  justify-content:center;text-decoration:none}
.mnav .mlang a[aria-current="true"]{background:var(--c1);color:#fff;border-color:var(--c1)}
/* documentElement ONLY. Locking body too zeroes scrollY, which reads as "top
   of page" and un-compacts the header behind the open panel. */
html.menu-open{overflow:hidden}

/* NAV BREAKPOINT, 1100. It lives in THREE places that must always agree: this
   rule, the one below it, and the matchMedia in assets/js/nav.js. */
@media (max-width:1100px){ nav{display:none} .burger{display:flex} }
@media (min-width:1101px){ .mnav{display:none!important} }

/* WordPress admin bar */
body.admin-bar .hdr{top:calc(32px + env(safe-area-inset-top,0px))}
@media (max-width:782px){body.admin-bar .hdr{top:calc(46px + env(safe-area-inset-top,0px))}}
@media (max-width:600px){body.admin-bar .hdr{top:env(safe-area-inset-top,0px)}}

/* ================================ 6. HERO ================================ */
.hero{position:relative;min-height:clamp(430px,58vw,620px);display:flex;
  align-items:flex-end;overflow:hidden;background:var(--brand-forest)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,11,.42) 0%,rgba(8,14,11,.68) 26%,
    rgba(8,14,11,.80) 62%,rgba(8,14,11,.92) 100%)}
/* .w carries margin:0 auto, so putting it on an element that also sets its own
   max-width centres that block and throws the text off the page grid. Wrap. */
.hero-wrap{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;
  padding-inline:var(--gut);padding-block:clamp(38px,5vw,72px)}
.hero-in{display:flex;flex-direction:column;gap:var(--m);max-width:50rem}
.hero .lab{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;letter-spacing:.16em}
.hero .lab::before{content:"";width:26px;height:3px;background:var(--brand-mint);flex:0 0 auto}
.hero h1{font-size:clamp(33px,6vw,70px);line-height:1.02;color:#fff}
.hero p{font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:#EEF3F0;max-width:48ch;font-weight:400}

.cta{display:flex;flex-wrap:wrap;gap:clamp(16px,1.6vw,22px);margin-top:6px}
.btn{display:inline-block;padding:15px 28px;border-radius:var(--r-btn);font-weight:600;
  font-size:15.5px;text-decoration:none;border:1.5px solid transparent}
.btn.p{background:var(--btn-light);color:var(--brand-forest)}
.btn.s{border-color:rgba(255,255,255,.45);color:#fff}

/* ====================== 7. FIGURES AND PARTNERS ========================== */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:var(--m);padding-block:var(--l)}
.fig{display:flex;flex-direction:column;gap:8px}
.fig b{font-size:clamp(26px,3.2vw,42px);font-weight:800;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fig i{width:34px;height:4px;border-radius:2px;display:block}
.fig span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:var(--m);
  padding-bottom:var(--l);border-bottom:1px solid var(--rule)}
.plogo{height:44px;flex:1 1 130px;min-width:112px;max-width:196px;
  border:1px dashed var(--rule);border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ========================== 8. COLOURED BANDS ============================ */
.band{display:grid;grid-template-columns:1.08fr .92fr;min-height:clamp(300px,34vw,430px)}
.band .ph{position:relative;overflow:hidden;background:var(--brand-forest)}
.band .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The slot runs from about 1.5 to 3.75 wide across real viewports, so a 3:2
   photo loses its top and bottom to cover. Where the subject sits low in the
   frame, pin the focal point rather than trusting the centre. */
.band .ph img.low{object-position:50% 80%}
.band .blk{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;gap:14px;padding:clamp(34px,4vw,62px);color:#fff}
.band .blk>*:not(.ord){position:relative;z-index:1}
.band.flip .blk{padding-left:var(--edge)}
.band:not(.flip) .blk{padding-right:var(--edge)}
/* A decorative numeral behind white text must be DARKER than the ground. The
   reference uses a pale one, and copying that drops white headings to 3.6. */
.band .ord{position:absolute;z-index:0;right:clamp(22px,3vw,52px);top:50%;
  transform:translateY(-52%);font-size:clamp(104px,12vw,200px);font-weight:800;
  line-height:.78;letter-spacing:-.05em;color:rgba(0,0,0,.14);
  font-variant-numeric:tabular-nums;pointer-events:none;user-select:none}
.band h2{font-size:clamp(28px,3.6vw,48px);line-height:1.03;color:#fff}
.band h2::after{content:"";display:block;width:46px;height:4px;background:#fff;
  margin-top:16px;opacity:.9;border-radius:1px}
.band p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.88);max-width:42ch}
.band a.go{align-self:flex-start;margin-top:6px;padding:12px 22px;border-radius:var(--r-btn);
  background:var(--btn-light);font-weight:600;font-size:14.5px;text-decoration:none}
.b1 .blk{background:var(--c1)} .b1 a.go{color:#14532B}
.b2 .blk{background:var(--c2)} .b2 a.go{color:#0A4E56}
.b3 .blk{background:var(--c3)} .b3 a.go{color:#6B2708}
.b4 .blk{background:var(--c4)} .b4 a.go{color:#17306B}
.band.flip .ph{order:2}

.body-sec{padding-block:var(--l)}

/* ============================== 9. APELURI =============================== */
.apeluri{display:flex;flex-direction:column;gap:var(--m)}
.apel{background:var(--surface);border-radius:var(--r);padding:clamp(22px,2.6vw,36px);
  display:grid;grid-template-columns:1fr auto;gap:var(--m);align-items:start}
.apel .meta{display:flex;flex-direction:column;gap:14px;min-width:0}
/* STATUS IS A LABEL, NOT A CONTROL. No fill, no padded box, no radius: a
   filled rounded block reads as a button however square its corners are, and
   nothing here is clickable. A colour rule beside the word instead. */
.st{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;line-height:1}
.st::before{content:"";width:26px;height:3px;background:currentColor;flex:0 0 auto}
.st.o{color:var(--open)}
.st.c{color:var(--closed)}
.apel h3{font-size:clamp(19px,2.1vw,26px);line-height:1.2}
/* a section with no records yet says so in one plain line, never a filler card */
.empty{color:var(--muted);font-size:17px;line-height:1.62;max-width:60ch}
.apel .d{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:56ch}
.specs{display:flex;flex-wrap:wrap;gap:var(--m)}
.spec{display:flex;flex-direction:column;gap:2px}
.spec span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.spec b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.amt{text-align:right}
.amt b{display:block;font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.amt span{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}
.act{display:inline-block;margin-top:18px;padding:12px 22px;border-radius:var(--r-btn);
  font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.act.go{background:var(--c1);color:#fff}
.act.res{border:1.5px solid var(--rule);color:var(--text)}

/* ============================= 10. TERITORIU ============================= */
.about{display:grid;grid-template-columns:1.04fr .96fr;gap:var(--xl);align-items:center}
.about .txt{display:flex;flex-direction:column;gap:var(--m)}
.about p{color:var(--muted);font-size:17px;line-height:1.72;max-width:52ch}
.about p b{color:var(--text);font-weight:600}
.terr{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0}
.terr figcaption{font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}
.terr img{width:100%;max-width:330px;height:auto}

/* ============================= 11. PROIECTE ============================== */
.proj{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--m)}
.pc{border-radius:var(--r);overflow:hidden;background:var(--surface);display:flex;
  flex-direction:column;text-decoration:none;color:inherit}
.pc .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--brand-forest)}
.pc .thumb img{width:100%;height:100%;object-fit:cover}
.pc .in{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.pc h3{font-size:18.5px;line-height:1.3}
.pc .who{font-size:13.5px;color:var(--muted)}
.pc .sum{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
.pc .sum b{display:block;font-size:26px;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.pc .sum span{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}

/* ============================== 12. NOUTATI ============================== */
.news{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:var(--m);align-items:stretch}
/* A card shows an EXCERPT, not a bare headline, so every card is the same
   height and the section does not read as a list of links over dead space. */
.n{display:flex;flex-direction:column;gap:10px;padding-top:18px;
  border-top:3px solid var(--c4-txt);text-decoration:none;color:inherit;height:100%}
.n time{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.n h3{font-size:17.5px;line-height:1.35;font-weight:700}
.n .ex{font-size:15px;line-height:1.6;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.n .rd{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:600;color:var(--c4-txt);
  display:inline-flex;align-items:center;gap:7px}
.n .rd::after{content:"";width:14px;height:2px;background:currentColor;transition:width .16s ease}

/* ============================ 12b. INNER PAGES ============================ */
/* An inner page opens on its section's band, the title on the colour and the
   photograph beside it, so every page visibly belongs to the homepage. */
.pgband{min-height:clamp(250px,26vw,360px)}
.pgband h1{font-size:clamp(30px,4.2vw,54px);line-height:1.04;color:#fff;max-width:18ch}
.pgband h1::after{content:"";display:block;width:46px;height:4px;background:#fff;
  margin-top:16px;opacity:.9;border-radius:1px}
/* The eyebrow is the site's one emphasis device, a 26x3 bar and a label. It
   marks; it never links. */
.eb{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin:0;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.eb::before{content:"";width:26px;height:3px;background:currentColor;flex:0 0 auto}
.band .eb{color:rgba(255,255,255,.92)}

/* the light head of a single record or a plain page */
.pghead{padding-top:var(--l)}
.pghead .w{display:flex;flex-direction:column;gap:18px}
.pghead .eb{color:var(--sc,var(--c1-txt))}
.pghead h1{font-size:clamp(30px,4.4vw,54px);line-height:1.06;max-width:26ch}
.pghead .sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--m);
  color:var(--muted);font-size:15px}
.finlogo{height:56px;width:auto;max-width:200px;object-fit:contain}

/* Long text: news, pages, descriptions. The block library CSS is not loaded, so
   the blocks an editor actually uses are styled here. */
.prose{max-width:70ch;display:flex;flex-direction:column;gap:1.05em;font-size:17px;line-height:1.72}
.prose>*,.prose div>*{margin:0}
.prose h2{font-size:clamp(22px,2.4vw,30px);line-height:1.2;margin-top:.5em}
.prose h3{font-size:clamp(18px,2vw,22px);line-height:1.3;margin-top:.3em}
.prose ul,.prose ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.35em}
.prose a{color:var(--c1-txt)}
.prose blockquote{padding-left:1em;border-left:3px solid var(--c1-txt);color:var(--muted)}
.prose figure{margin:0}
.prose img{height:auto;border-radius:var(--r)}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:10px 8px;text-align:left;vertical-align:top}
.prose hr,.prose .wp-block-separator{border:0;border-top:1px solid var(--rule);width:100%}
.prose .wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.prose .wp-block-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.prose .wp-block-columns{display:flex;flex-wrap:wrap;gap:var(--m)}
.prose .wp-block-column{flex:1 1 240px;min-width:0}
.prose .wp-block-button__link{display:inline-block;background:var(--c1);color:#fff;
  padding:12px 22px;border-radius:var(--r-btn);text-decoration:none;font-weight:600}
.prose iframe{max-width:100%;border:0}
.lead-img img{width:100%}

/* a record: its text and documents beside a card of facts */
.rec{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:var(--xl);
  align-items:start;padding-block:var(--l)}
.rec-main{display:flex;flex-direction:column;gap:var(--l);min-width:0}
.rec-img{margin:0}
.rec-img img{width:100%;height:auto;border-radius:var(--r)}
.facts{background:var(--surface);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;gap:18px}
.facts .spec b{font-size:17px}
.facts .spec b a{color:var(--c1-txt)}
.facts .big b{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.035em}
.rec-sec{display:flex;flex-direction:column;gap:var(--m)}
.sec-t{font-size:clamp(20px,2.2vw,26px);line-height:1.2}
.stack{display:flex;flex-direction:column;gap:var(--l)}
.body-sec>.sec-t{margin-bottom:var(--m)}

/* downloadable files: every row is one link, a card like the others */
.docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(16px,1.4vw,18px)}
.doc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:16px clamp(16px,1.8vw,22px);border:1px solid var(--rule);border-radius:var(--r);
  text-decoration:none;color:inherit;background:var(--bg)}
.dicon{display:flex;color:var(--c1-txt)}
.dicon .icon{width:24px;height:24px}
.dtxt b{display:block;font-weight:600;font-size:15.5px;line-height:1.4;overflow-wrap:anywhere}
.dtxt small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.get{font-size:13.5px;font-weight:600;color:var(--c1-txt);white-space:nowrap}

/* the library: the category filter, the rows, the pages, spaced by the container */
.lib{display:flex;flex-direction:column;gap:var(--m)}
.filters{display:flex;flex-wrap:wrap;gap:10px 24px;padding-bottom:var(--s);
  border-bottom:1px solid var(--rule)}
.filters a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--muted);padding-block:6px}
.filters a span{font-size:12px;margin-left:6px;font-variant-numeric:tabular-nums}
.filters a[aria-current]{color:var(--text);box-shadow:inset 0 -2px 0 var(--c1-txt)}

/* pagination: the links are controls and look like it; the current page is a label */
.pager{display:flex;flex-wrap:wrap;gap:10px}
.pager .page-numbers{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 14px;border:1px solid var(--rule);border-radius:var(--r-btn);
  text-decoration:none;font-weight:600;font-size:14.5px;color:var(--text)}
.pager .current{border-color:transparent;box-shadow:inset 0 -2px 0 var(--c1-txt)}
.pager .dots{border-color:transparent}

.back{margin:0;padding-top:var(--m)}
.back a,.out a{font-size:14.5px;font-weight:600;color:var(--c1-txt)}
.stack>.back{padding-top:0}
.out{margin:0;color:var(--muted);font-size:15px}

.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.gal a{display:block;border-radius:var(--r);overflow:hidden}
.gal img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}

.adj{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--m);max-width:70ch}
.adj .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* contact */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:var(--xl);align-items:start}
.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.clist a.ico{display:inline-flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.55;
  color:var(--text)}
.clist .icon{width:1.15em;height:1.15em;margin-top:.22em;color:var(--c1-txt)}
/* a grid item defaults to its content's width, so one long email address widened
   the whole contact grid past a 320 screen; let it wrap instead */
.cgrid>*{min-width:0}
.clist a.ico{max-width:100%}
.clist a.ico span{min-width:0;overflow-wrap:anywhere}
.ccard{background:var(--surface);border-radius:var(--r);padding:clamp(18px,2.6vw,34px);
  display:flex;flex-direction:column;gap:16px}
.ccard h2{font-size:clamp(20px,2.2vw,26px);line-height:1.2}
/* the card's own lines only: a form inside carries its own label and field type */
.ccard>p{color:var(--muted);font-size:15.5px}
.ccard>.act,.map .act{align-self:center;margin-top:0}
.ccard>.act{align-self:flex-start}
/* with the form in it the card takes more of the row: 600px fits the 300px
   challenge and the button on one line, as the house rule wants */
.cgrid.wide{grid-template-columns:minmax(0,.8fr) minmax(300px,600px)}

/* the contact form: the few pieces CF7 prints, styled here because its own
   stylesheet is not loaded */
.cf form{display:flex;flex-direction:column;gap:18px}
.cf .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}
.cf .hidden-fields-container{display:none}
.cf .wpcf7-form-control-wrap{display:block}
.cf .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:14px;font-weight:600;color:var(--error)}
.fld .wpcf7-not-valid{border-color:var(--error)}
.cf .wpcf7-spinner{display:none}
.cf .wpcf7-response-output{margin:0;padding:14px 16px;border:1.5px solid var(--rule);
  border-radius:var(--r);font-size:15px;line-height:1.55}
.cf form.init .wpcf7-response-output,.cf form.resetting .wpcf7-response-output,
.cf form.submitting .wpcf7-response-output{display:none}
.cf form.invalid .wpcf7-response-output,.cf form.unaccepted .wpcf7-response-output,
.cf form.spam .wpcf7-response-output,.cf form.failed .wpcf7-response-output,
.cf form.aborted .wpcf7-response-output{border-color:var(--error)}
.cf form.sent .wpcf7-response-output{border-color:var(--c1-txt)}
.cf form.submitting .act{opacity:.6;pointer-events:none}
input.act{border:0;cursor:pointer;font-family:inherit;line-height:inherit;-webkit-appearance:none;appearance:none}
button.act{border:0;cursor:pointer;font-family:inherit}
.map{border-radius:var(--r);background:var(--surface);min-height:clamp(260px,34vw,420px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:var(--m);text-align:center}
.map p{color:var(--muted);font-size:15px;max-width:44ch}
.map.on{padding:0;overflow:hidden}
.map iframe{width:100%;height:clamp(260px,34vw,420px);border:0;display:block}

/* questions on a call: the answered ones, the visitor's own, the form */
.qa{max-width:780px;display:flex;flex-direction:column;gap:var(--m)}
/* anchors land clear of the sticky header */
.qa,.qa [id]{scroll-margin-top:calc(var(--strip-c,62px) + 28px)}
.qa-lead{color:var(--muted);font-size:15.5px;max-width:62ch}
.qa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(22px,2.2vw,30px)}
.q{display:flex;flex-direction:column;gap:14px;padding-top:clamp(18px,1.8vw,24px);border-top:1px solid var(--rule)}
.q-meta{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.q-txt,.a-txt,.qa-own{display:flex;flex-direction:column;gap:.8em;overflow-wrap:anywhere}
.q-txt p,.a-txt p,.qa-own p{margin:0}
.q-txt{font-size:17px;line-height:1.6;font-weight:600}
.a{background:var(--surface);border-radius:var(--r);padding:clamp(18px,2vw,24px);
  display:flex;flex-direction:column;gap:12px}
.a .eb,.qa-note .eb{color:var(--c1-txt)}
.a-txt{font-size:16px;line-height:1.65}
.a-txt a,.qa-privacy a,.facts .ask a{color:var(--c1-txt)}
.q-wait{font-size:14.5px;color:var(--muted)}
.qa-note{border:1.5px solid var(--c1-txt);border-radius:var(--r);padding:clamp(18px,2vw,24px);
  display:flex;flex-direction:column;gap:12px}
.qa-own{font-weight:600;padding-left:14px;border-left:3px solid var(--rule)}
.facts .ask{margin:0;padding-top:16px;border-top:1px solid var(--rule);font-size:15px;font-weight:600}

/* form fields, shared by every form on the site. A field is square: the radius
   scale gives corners to buttons and cards only. 16px type stops iOS zooming. */
/* 18px at the small end, not 22: on a 375 phone that leaves 303px, room for the
   300px challenge beside nothing else rather than the tall compact one */
.qa-form{background:var(--surface);border-radius:var(--r);padding:clamp(18px,2.6vw,34px);
  display:flex;flex-direction:column;gap:18px}
.qa-form h3{font-size:clamp(19px,2vw,23px);line-height:1.25}
.qa-how,.qa-privacy{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:62ch}
.fld2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.fld{display:flex;flex-direction:column;gap:8px;margin:0;min-width:0}
.fld label{font-size:14.5px;font-weight:600}
.fld label small{font-size:13px;font-weight:400;color:var(--muted)}
.fld input,.fld textarea{width:100%;margin:0;font:inherit;font-size:16px;line-height:1.5;
  color:var(--text);background:var(--bg);border:1px solid var(--field);border-radius:0;padding:12px 14px}
.fld textarea{min-height:150px;resize:vertical}
.qa-send{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.qa-send .act{margin-top:0}
/* the challenge keeps its box before Cloudflare's script fills it, so nothing jumps */
.qa-send .cf-turnstile{min-width:300px;min-height:65px}
.qa-send .cf-turnstile[data-size="compact"]{min-width:150px;min-height:140px}
/* the honeypot: off screen, out of the tab order, hidden from assistive tech */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}

/* the online dossier form (templates/depunere.php): four cards and a closing
   one, the same field system as the other forms. A field's error sits under it
   in the error colour; its border turns the same colour. */
.pghead .sub .ds-call{color:var(--c1-txt);font-weight:600}
.pghead .sub .ds-dl{font-size:14.5px;color:var(--muted)}
.ds{display:flex;flex-direction:column;gap:var(--m)}
.ds-sec{background:var(--surface);border-radius:var(--r);padding:clamp(18px,2.6vw,34px);
  display:flex;flex-direction:column;gap:18px;min-width:0}
.ds-sec .eb{color:var(--c1-txt)}
.ds-t{font-size:clamp(19px,2vw,23px);line-height:1.25;margin:-8px 0 0}
.fld3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px}
.fld select{width:100%;margin:0;font:inherit;font-size:16px;line-height:1.5;color:var(--text);
  background:var(--bg);border:1px solid var(--field);border-radius:0;padding:12px 14px}
.fld .hint,.ds-sec>.hint{font-size:13.5px;line-height:1.5;color:var(--muted)}
.fld .err,.ds-sec>.err,.ds-status{font-size:14px;line-height:1.5;font-weight:600;color:var(--error);margin:0}
.fld [aria-invalid="true"]{border-color:var(--error)}
.fld.chk label{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:15.5px;line-height:1.55}
.fld.chk input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--c1)}
/* the file input stays in the tab order, invisible; the zone it labels shows its focus */
.ds-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)}
.drop{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;
  min-height:96px;padding:clamp(18px,2.4vw,28px);border:1.5px dashed var(--field);
  border-radius:var(--r);background:var(--bg);cursor:pointer;text-align:center}
.drop-btn{display:inline-block;padding:11px 20px;border:1.5px solid var(--rule);border-radius:var(--r-btn);
  font-size:14.5px;font-weight:600;color:var(--text);background:var(--bg)}
.drop-or{font-size:14.5px;color:var(--muted)}
@media (hover:none){.drop-or{display:none}} /* nothing to drag from on a phone */
.drop.over{border-style:solid;border-color:var(--c1-txt)}
.ds-input:focus-visible+.drop{outline:3px solid var(--c1-txt);outline-offset:3px}
.files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.files:empty{display:none}
.file{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 0;
  border-bottom:1px solid var(--rule)}
.file:first-child{border-top:1px solid var(--rule)}
.f-name{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.f-meta{grid-row:2;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.file[data-state="error"] .f-meta{color:var(--error);font-weight:600}
/* once a file is in, the words say so: a full bar over the row's own rule read as two lines */
.file[data-state="done"] .f-meta{color:var(--c1-txt)}
.file[data-state="done"] .f-bar{display:none}
.f-acts{grid-column:2;grid-row:1/span 2;display:flex;gap:16px;align-items:center}
.f-btn{appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;font:inherit;
  font-size:14px;font-weight:600;color:var(--c1-txt)}
/* the progress is a bar, the site's own marker, not a box */
.f-bar{grid-column:1/-1;height:3px;background:var(--rule);margin-top:6px}
.f-bar i{display:block;height:100%;width:0;background:var(--c1-txt);transition:width .2s ease}
@media (prefers-reduced-motion:reduce){.f-bar i{transition:none}}
.files-sum{margin:0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-end .qa-send .act{margin-top:0}
.ds-out{background:var(--surface);border-radius:var(--r);padding:clamp(18px,2.4vw,28px);
  display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.6;margin:0}
.ds-out p{margin:0}
.ds-out a{color:var(--c1-txt)}
.ds-done{border:1.5px solid var(--c1-txt);border-radius:var(--r);padding:clamp(20px,2.8vw,36px)}
.ds-done:focus{outline:none}
.ds-done-in{display:flex;flex-direction:column;gap:14px}
.ds-done .eb{color:var(--c1-txt)}
.ds-done h2{font-size:clamp(19px,2vw,23px);line-height:1.25}
.ds-done .ref{font-size:clamp(32px,4.4vw,48px);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap;margin:0}
.ds-done p{margin:0;max-width:62ch;line-height:1.6}
.ds-done h3{font-size:17px;margin-top:8px}
.ds-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.ds-list small{color:var(--muted);font-size:13.5px}
.ds-acts{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px}
.ds-acts .act{margin-top:0}
.facts .apply{display:flex;flex-direction:column;gap:10px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.facts .apply .act{margin-top:0;text-align:center;white-space:normal}
.facts .apply p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
@media print{
  .vh-depunere .hdr,.vh-depunere .mnav,.vh-depunere footer,.vh-depunere .facts,.vh-depunere .back,
  .vh-depunere .skip-link,.vh-depunere .ds-acts,.vh-depunere .nld-c-root{display:none!important}
  .vh-depunere .rec{display:block;padding-block:0}
  .vh-depunere .ds-done{border:0;padding:0}
}

/* the consent dialog's "always on" note is a LABEL, not a control: the plugin
   draws it as a filled 999px pill, the button treatment this theme bans. Here it
   is uppercase type with the site's marker bar, on the dialog's own ground.
   Scoped inside the root so it can never reach the policy page's cookie table. */
.nld-c-root .nld-c-locked{display:inline-flex;align-items:center;gap:8px;background:none;
  border-radius:0;padding:0;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1}
.nld-c-root .nld-c-locked::before{content:"";width:18px;height:2px;background:currentColor;flex:0 0 auto}

/* ============================== 13. FOOTER =============================== */
/* The footer ground is forest in BOTH themes, so its text tokens do not flip. */
footer{background:var(--brand-forest);color:var(--on-forest);
  padding-block:var(--l);margin-top:var(--xl)}
.fcols{display:grid;grid-template-columns:minmax(230px,1.1fr) 1fr 1fr 1.15fr;
  gap:var(--l);align-items:start}
.fbrand{display:flex;flex-direction:column;gap:12px}
.fbrand a.lock{display:inline-block;text-decoration:none}
.fbrand a.lock img{height:62px;width:auto;display:block}
.fbrand .gal{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-mint)}
.fbrand p{margin-top:2px}
.fc{display:flex;flex-direction:column;gap:10px}
.fc h4,.fh{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-mint)}
.fc a,.fc p{font-size:14.5px;line-height:1.6;text-decoration:none;color:var(--on-forest)}
.fc a.ico,.fbrand a.ico{display:inline-flex;align-items:flex-start;gap:10px}
.icon{width:1.1em;height:1.1em;flex:none;margin-top:.25em}
.fbrand a.ico{color:var(--on-forest);text-decoration:none;line-height:1.62}

.prefs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--m);margin-top:var(--l);
  padding-top:var(--m);border-top:1px solid var(--forest-rule)}
.pg{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lang-pg{margin-left:auto}
.pl{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-mint)}
.seg{display:inline-flex;border:1px solid var(--forest-rule-2);border-radius:var(--r-btn);
  overflow:hidden}
.seg button,.seg a{appearance:none;border:0;background:transparent;color:var(--on-forest);
  font:600 13px/1 var(--f);padding:13px 17px;cursor:pointer;min-height:44px}
.seg a{display:inline-flex;align-items:center;text-decoration:none}
.seg button+button,.seg a+a{border-left:1px solid var(--forest-rule-2)}
.seg button.on,.seg a.on{background:var(--brand-mint);color:var(--brand-forest)}

.fbot{display:flex;flex-wrap:wrap;gap:var(--s);justify-content:space-between;
  margin-top:var(--l);padding-top:var(--m);border-top:1px solid var(--forest-rule);
  font-size:12.5px;color:var(--on-forest-dim)}
.fbot a{color:var(--on-forest-dim);text-decoration:none}
/* the cookie settings button reads as the footer link it sits among, from first
   paint: the plugin's own style for it arrives later, from its script */
.fbot .nld-c-link{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;
  color:var(--on-forest-dim);cursor:pointer;text-decoration-line:underline;text-decoration-thickness:1px;
  text-decoration-color:transparent;text-underline-offset:.24em}

/* ===================== 14. INTERACTION: ONE SYSTEM ======================= */
/* Every clickable element has a hover AND a focus ring, defined by ROLE, not
   per component. Styling each one ad hoc is how roles end up with neither. */
a,button{transition:background-color .16s ease,color .16s ease,border-color .16s ease,
  opacity .16s ease,text-decoration-color .16s ease}
@media (prefers-reduced-motion:reduce){a,button{transition:none}}

a:focus-visible,button:focus-visible,input.act:focus-visible{outline:3px solid var(--c1-txt);outline-offset:3px;border-radius:2px}
/* a field shows focus on click as well as on Tab: it is where the typing goes */
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:3px solid var(--c1-txt);outline-offset:1px;border-color:var(--c1-txt)}
.fld.chk input:focus{outline-offset:2px}
/* the pale green measures 2.65 on the teal band, under the 3:1 a focus
   indicator needs; white clears 4.66 or better on all four */
.hero a:focus-visible,.band a:focus-visible,footer a:focus-visible,footer button:focus-visible,
.seg button:focus-visible,.seg a:focus-visible{outline-color:#fff}

/* A. solid light button, on colour or photography */
.btn.p:hover,.band a.go:hover{background:var(--btn-light-hover)}
/* B. solid accent button, on light */
.act.go:hover{background:#186136}
/* C. outline button on dark */
.btn.s:hover{background:rgba(255,255,255,.14);border-color:#fff}
/* D. outline button on light */
.act.res:hover{border-color:var(--c1-txt);color:var(--c1-txt);background:rgba(31,122,69,.06)}
/* the dossier form's drop zone is a label for the file input, so it is a control */
.drop:hover{border-color:var(--c1-txt)}
.drop:hover .drop-btn{border-color:var(--c1-txt);color:var(--c1-txt)}
.f-btn{text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:.24em}
.f-btn:hover{text-decoration-color:currentColor}
.pghead .sub .ds-call,.ds-out a{text-decoration-line:underline;text-decoration-thickness:1px;
  text-decoration-color:transparent;text-underline-offset:.24em}
.pghead .sub .ds-call:hover,.ds-out a:hover{text-decoration-color:currentColor}
/* E. text links. The underline is declared up front and kept transparent so it
   FADES in as a hairline instead of a rule popping in at full weight. 1px, not
   2: the active nav link owns the 2px bar, and a hover that matches the active
   weight reads blunt and makes the two states indistinguishable. */
nav a,.fc a,.fbot a,.lang a,.apel h3 a,.fbrand a.ico,.prose a,.back a,.out a,.clist a.ico,.facts .spec b a,.filters a,
.a-txt a,.qa-privacy a,.facts .ask a{
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-decoration-color:transparent;
  text-underline-offset:.24em;
  text-decoration-skip-ink:auto}
nav a:hover{color:var(--c1-txt);text-decoration-color:currentColor}
.apel h3 a{color:inherit}
.apel h3 a:hover{color:var(--c1-txt);text-decoration-color:currentColor}
/* mint is the hover ON THE FOREST footer only. On the light ground it measures
   under 2:1, so a link there keeps its colour and the hairline fades in. */
.fc a:hover,.fbot a:hover,.fbrand a.ico:hover,.fbot .nld-c-link:hover{color:var(--brand-mint);text-decoration-color:currentColor}
.lang a:hover,.clist a.ico:hover{color:var(--c1-txt);text-decoration-color:currentColor}
.prose a:hover,.back a:hover,.out a:hover,.facts .spec b a:hover,.a-txt a:hover,.qa-privacy a:hover,
.facts .ask a:hover{text-decoration-color:currentColor}
/* a field darkens its border under the pointer; focus (above) is the stronger state */
.fld input:hover:not(:focus),.fld textarea:hover:not(:focus),.fld select:hover:not(:focus){border-color:var(--text)}
/* the mobile rows carry their own divider, so they take the colour shift alone */
.mnav a.ml:hover{color:var(--c1-txt)}
/* F. whole-card links */
.n:hover h3{color:var(--c4-txt)}
.n:hover{border-top-color:var(--c4-hover)}
.n:hover .rd::after{width:24px}
.pc:hover h3{color:var(--c3-txt)}
.doc:hover{border-color:var(--c1-txt)}
.filters a:hover{color:var(--text);text-decoration-color:currentColor}
.pager a.page-numbers:hover{border-color:var(--c1-txt);color:var(--c1-txt)}
.gal a:hover{opacity:.86}
/* G. logos */
.brand:hover,.fbrand a.lock:hover{opacity:.78}
/* H. segmented control */
.seg button:hover,.seg a:hover{background:#17351F}
.seg button.on:hover,.seg a.on:hover{background:#A6DDB2}

/* ============================ 15. RESPONSIVE ============================= */
@media (max-width:1100px){
  /* the header CTA shortens before it disappears */
  .hcta .cta-word{display:none}
  /* the dossier form takes the whole row: beside the facts card its submit line
     is too narrow for the 300px challenge and the button together */
  .ds-rec{grid-template-columns:1fr;gap:var(--l)}
}
@media (max-width:900px){
  .band{grid-template-columns:1fr}
  .band .ph{min-height:240px}
  .band.flip .ph{order:0}
  .band.flip .blk,.band:not(.flip) .blk{padding-left:var(--gut);padding-right:var(--gut)}
  .about{grid-template-columns:1fr;gap:var(--l)}
  /* .cgrid.wide is named too: it outranks .cgrid and would keep two columns */
  .rec,.cgrid,.cgrid.wide{grid-template-columns:1fr;gap:var(--l)}
  /* on a phone the title comes first and the photograph follows as a strip */
  .pgband.flip .ph{order:2;min-height:180px}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .lang-pg{margin-left:0}
}
@media (max-width:660px){
  .apel{grid-template-columns:1fr}
  .amt{text-align:left}
}
@media (max-width:640px){
  .hcta{display:none}
}
@media (max-width:560px){
  h1,h2,h3{-webkit-hyphens:auto;hyphens:auto}
  /* Not the consent dialog's category names: whole words let its "always on" label drop below. */
  .nld-c-root h3{-webkit-hyphens:manual;hyphens:manual}
  .fcols{grid-template-columns:1fr}
  .doc{grid-template-columns:auto minmax(0,1fr)}
  .doc .get{grid-column:2;justify-self:start}
}