/* ==========================================================================
   TENCITY — site.css
   One stylesheet. Organised by component, in the order the brand doc names
   them. Values lifted from the Claude Design prototype.

   1  Tokens
   2  Fonts
   3  Reset
   4  Base type
   5  Layout primitives
   6  Components        <- next increment
   ========================================================================== */


/* 1. TOKENS ================================================================ */

:root{
  /* brand */
  --navy:            #143346;
  --navy-deep:       #0F2A3A;   /* gradient partner, sustainability band */
  --green:           #59B171;
  --green-hover:     #48A061;
  --sand:            #ECAE80;

  /* supporting blues */
  --blue:            #005482;   /* default link */
  --blue-mid:        #0571AC;
  --blue-pale:       #99C7E0;   /* stat labels on navy */

  /* neutrals */
  --ink:             #313131;
  --grey:            #747474;
  --tint:            #F1F5F8;   /* alternating section background */
  --line:            #E2E8EE;   /* hairline border */
  --white:           #FFFFFF;

  /* text on navy, three levels */
  --on-navy:         #CFE0EA;
  --on-navy-muted:   #AEC4D2;
  --on-navy-bright:  #E7EEF3;   /* hero lead paragraph */
  --on-navy-faint:   #7F9AAB;

  /* type */
  --display: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* layout */
  --wrap:            1180px;
  --gutter:          24px;
  --section:         84px;      /* standard vertical rhythm */
  --section-tight:   56px;      /* stat band, footer top */
  --gap:             28px;      /* standard grid gap */
  --radius:          6px;

  /* motion + elevation */
  --ease:            .18s ease;
  --lift:            0 12px 30px rgba(20,51,70,.10);
}

@media (max-width:560px){
  :root{ --section:56px; --section-tight:40px; --gap:20px; }
}


/* 2. FONTS ================================================================= */
/* Self-hosted variable fonts. One file per family covers 300 and 700, so the
   whole type system is four files. Split latin / latin-ext by unicode-range:
   latin (67 KB) always loads; latin-ext (93 KB) is fetched only if a page
   actually contains Czech, Polish or Slovak characters. German needs only
   latin - umlauts and eszett live in U+0000-00FF.
   Files pulled from Google's API and served from our own domain. Never link
   fonts.googleapis.com: it ships every visitor's IP to Google. */

@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/figtree-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:300 400;
  font-display:swap; src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:300 400;
  font-display:swap; src:url('../fonts/inter-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* 3. RESET ================================================================= */

*,*::before,*::after{ box-sizing:border-box; }

body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{ margin:0; }

ul[class],ol[class]{ list-style:none; padding:0; }

img,picture,svg{ max-width:100%; display:block; }

input,button,textarea,select{ font:inherit; color:inherit; }

button{ background:none; border:0; padding:0; cursor:pointer; }

/* Visible focus for keyboard users only. The prototype had no focus states
   at all — style-focus was a Claude Design attribute, not CSS. */
:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}


/* 4. BASE TYPE ============================================================= */

body{
  font-family:var(--text);
  font-weight:300;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--blue); text-decoration:none; transition:color var(--ease); }
a:hover{ color:var(--green); }

/* Paragraph rhythm. The prototype set these inline per element; as a
   default it is one rule, and :last-child stops sections ending in
   dead space. Components that need tighter spacing override below. */
p{ margin-bottom:1em; }
p:last-child{ margin-bottom:0; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.15;
  color:var(--navy);
  margin-bottom:.5em;
}

h1{ font-size:clamp(2.1rem, 4.6vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size:1.25rem; }
h4{ font-size:1rem; }

/* Small caps label above a heading. Green, wide-tracked. */
.eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:.8em;
}

/* Opening paragraph of a section. Navy, larger than body. */
.lead{
  font-size:1.22rem;
  color:var(--navy);
  max-width:62ch;
}

.muted{ color:var(--grey); }

/* Anything under 15px goes to 400 — Light gets too thin down there. */
.small{ font-size:.85rem; font-weight:400; }


/* 5. LAYOUT PRIMITIVES ===================================================== */

/* The 1180px centred column. Every section uses it. */
.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--section); }
.section--tight{ padding-block:var(--section-tight); }
.section--tint{ background:var(--tint); }
.section--navy{ background:var(--navy); color:var(--white); }

/* Grids. Collapse 4->2->1 and 3->2->1 at the brand doc's breakpoints. */
.grid{ display:grid; gap:var(--gap); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

@media (max-width:900px){
  .grid--4,.grid--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .grid--4,.grid--3,.grid--2{ grid-template-columns:1fr; }
}

/* Asymmetric split used by the intro and sustainability sections. */
.split{ display:grid; gap:48px; align-items:center; }
.split--wide{ grid-template-columns:1.4fr 1fr; }   /* intro */
.split--mid{  grid-template-columns:1.3fr 1fr; }   /* sustainability */

@media (max-width:900px){
  .split--wide,.split--mid{ grid-template-columns:1fr; gap:36px; }
}

/* Screen-reader-only, for skip links and icon button labels. */
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}


/* Anchor targets must clear the sticky header, or a jump to #solutions
   lands with the heading hidden behind it. */
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:90px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* Skip link. Off-screen until focused, then pinned top-left. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:var(--white);
  font-family:var(--display); font-weight:700; font-size:.9rem;
  padding:12px 20px; border-radius:0 0 var(--radius) 0;
}
.skip:focus{ left:0; color:var(--white); }

/* 6. COMPONENTS ============================================================ */

/* 6.1 Buttons ------------------------------------------------------------- */

.btn{
  display:inline-block;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  padding:14px 28px;
  border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:background var(--ease), border-color var(--ease), color var(--ease);
}
.btn--sm{ padding:11px 22px; }

.btn--green{ background:var(--green); color:var(--white); }
.btn--green:hover{ background:var(--green-hover); color:var(--white); }

.btn--navy{ background:var(--navy); color:var(--white); }
.btn--navy:hover{ background:#0D2635; color:var(--white); }

.btn--ghost{ background:transparent; color:var(--white);
             border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:rgba(255,255,255,.1);
                   border-color:var(--white); color:var(--white); }


/* 6.2 Top bar ------------------------------------------------------------- */

.topbar{ background:var(--navy); color:var(--on-navy); font-size:.83rem; }
.topbar .wrap{ display:flex; justify-content:flex-end; gap:22px;
               padding-block:8px; flex-wrap:wrap; }
.topbar a{ color:var(--on-navy); font-weight:700; }
.topbar a:hover{ color:var(--white); }

.lang{ display:inline-flex; gap:6px; align-items:center; }
.lang a[aria-current="true"]{ color:var(--white); }

@media (max-width:560px){
  .topbar .wrap{ justify-content:center; gap:14px; font-size:.78rem; }
}


/* 6.3 Header and nav ------------------------------------------------------ */

.header{
  position:sticky; top:0; z-index:50;
  background:var(--white); border-bottom:1px solid var(--line);
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between;
               gap:24px; padding-block:16px; }
.header__logo img{ height:42px; width:auto; }

.nav{ display:flex; gap:30px; }
.nav a{ font-family:var(--display); font-weight:700; font-size:.95rem;
        color:var(--navy); }
.nav a:hover,
.nav a[aria-current="page"]{ color:var(--green); }

.nav-toggle{ display:none; width:44px; height:44px; }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  display:block; height:2px; width:24px; background:var(--navy);
  transition:transform var(--ease), opacity var(--ease);
}
.nav-toggle span{ margin-inline:auto; position:relative; }
.nav-toggle span::before{ content:""; position:absolute; top:-7px; }
.nav-toggle span::after{  content:""; position:absolute; top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{  transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:8px 0;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:0 10px 24px rgba(20,51,70,.08);
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ display:block; padding:13px var(--gutter); }
  .header__cta{ display:none; }
}


/* 6.4 Hero ---------------------------------------------------------------- */
/* The page supplies the image inline: style="background-image:url(...)" */

.hero{
  position:relative;
  display:flex; align-items:center;
  min-height:560px;
  color:var(--white);
  background:var(--navy) center/cover no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,51,70,.72), rgba(20,51,70,.82));
}
.hero .wrap{ position:relative; z-index:1; width:100%; padding-block:70px; }
.hero h1{ color:var(--white); max-width:15ch; margin-bottom:.5em; }
.hero__lead{ font-size:1.28rem; color:var(--on-navy-bright);
             max-width:60ch; margin-bottom:2em; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero--page{ min-height:0; }
.hero--page::before{
  background:linear-gradient(180deg, rgba(20,51,70,.76), rgba(20,51,70,.86));
}
.hero--page .wrap{ padding-block:92px; }
.hero--page .hero__lead{ font-size:1.22rem; color:var(--on-navy);
                         max-width:720px; margin-bottom:0; }

@media (max-width:560px){
  .hero{ min-height:440px; }
  .hero .wrap{ padding-block:56px; }
  .hero--page .wrap{ padding-block:64px; }
  .hero__actions .btn{ width:100%; }
}


/* 6.5 Navy panel ---------------------------------------------------------- */

.panel{
  background:var(--navy); color:var(--white);
  border-radius:var(--radius); padding:34px 32px;
}
.panel h3{ color:var(--white); margin-bottom:.5em; }
.panel p{ color:var(--on-navy); margin-bottom:0; }
.panel .btn{ margin-top:22px; }


/* 6.6 Cards --------------------------------------------------------------- */

.card{
  display:block; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:box-shadow var(--ease), transform var(--ease);
}
.card:hover{ box-shadow:var(--lift); transform:translateY(-3px); }

.card--product{ padding:28px 24px; }
.card--product h3{ margin-bottom:.3em; }

.tag{
  display:inline-block; margin-bottom:16px;
  background:var(--navy); color:var(--white);
  font-family:var(--display); font-weight:700;
  font-size:.72rem; letter-spacing:.05em;
  padding:5px 11px; border-radius:4px;
}
.card__desc{ font-size:.96rem; color:var(--grey); margin-bottom:0; }
.card__more{
  display:inline-block; margin-top:16px;
  font-family:var(--display); font-weight:700; font-size:.9rem;
  color:var(--green);
}

.card--news{ overflow:hidden; display:flex; flex-direction:column; }
.card__img{ display:block; width:100%; height:170px; object-fit:cover;
             background:var(--tint); }
.card__body{ padding:22px 20px; }
.card__date{
  font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--green);
}
.card--news h3{ font-size:1.08rem; margin:.4em 0 0; }

.card--featured{ display:grid; grid-template-columns:1.2fr 1fr; overflow:hidden; }
.card--featured:hover{ transform:none; }
.card--featured .card__img{ height:100%; min-height:320px; }
.card--featured .card__body{
  padding:44px 40px; display:flex; flex-direction:column; justify-content:center;
}
.card--featured h2{ font-size:1.7rem; margin:.35em 0 .4em; line-height:1.2; }

@media (max-width:900px){
  .card--featured{ grid-template-columns:1fr; }
  .card--featured .card__img{ min-height:220px; }
  .card--featured .card__body{ padding:28px 24px; }
}


/* 6.7 Stat band ----------------------------------------------------------- */

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
        text-align:center; }
.stat__num{
  font-family:var(--display); font-weight:700; font-size:2.6rem;
  color:var(--white); line-height:1;
}
.stat__num small{ font-size:1.1rem; color:var(--green); }
.stat__label{ color:var(--blue-pale); font-size:.95rem; margin-top:8px; }

/* Stays two-up on phones. Four stacked stats makes an absurdly tall band. */
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stat__num{ font-size:2.1rem; } }


/* 6.8 Icon feature card --------------------------------------------------- */

.feature__icon{
  width:48px; height:48px; border-radius:10px;
  background:rgba(89,177,113,.14);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.feature__icon svg{
  width:26px; height:26px;
  stroke:var(--green); fill:none; stroke-width:1.8;
}
.feature h3{ font-size:1.1rem; margin-bottom:.5em; }
.feature p{ font-size:.98rem; color:var(--grey); }


/* 6.9 Sustainability band ------------------------------------------------- */

.band-sustain, .band-domicile{
  background:linear-gradient(120deg, var(--navy-deep), var(--navy));
  color:var(--white);
}
.band-sustain h2{ color:var(--white); }
.band-sustain p:not(.eyebrow), .band-domicile p:not(.eyebrow){ color:var(--on-navy); }

.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.pill{
  border:1px solid rgba(255,255,255,.35); color:var(--white);
  border-radius:40px; padding:6px 15px; font-size:.85rem;
}

.badge-card{
  background:var(--white); border-radius:var(--radius);
  padding:26px; text-align:center;
}
.badge-card img{ max-width:200px; margin-inline:auto; }
.badge-card span{
  display:block; margin-top:12px; color:var(--navy);
  font-family:var(--display); font-weight:700; font-size:.92rem;
}


/* 6.10 Quote block -------------------------------------------------------- */

.quote{ display:grid; grid-template-columns:210px 1fr; gap:36px;
        align-items:center; }
.quote__portrait{
  width:210px; height:210px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:4px solid var(--tint);
}
.quote blockquote{
  font-family:var(--display); font-weight:300; font-size:1.5rem;
  line-height:1.4; color:var(--navy);
}
.quote cite{
  display:block; margin-top:16px; font-style:normal;
  font-size:.98rem; color:var(--grey);
}
.quote cite b{ color:var(--navy); font-family:var(--display); font-weight:700; }

@media (max-width:560px){
  .quote{ grid-template-columns:1fr; justify-items:center; text-align:center;
          gap:24px; }
  .quote blockquote{ font-size:1.25rem; }
}


/* 6.11 Section header with trailing action -------------------------------- */

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:36px;
}
@media (max-width:560px){
  .section-head{ flex-direction:column; align-items:flex-start; gap:18px; }
}


/* 6.12 Footer ------------------------------------------------------------- */

.footer{
  background:var(--navy); color:var(--on-navy-muted);
  font-size:.94rem; padding:64px 0 28px;
}
.footer__cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr;
               gap:36px; }
.footer h4{
  color:var(--white); font-size:1rem; margin-bottom:14px;
  font-family:var(--display); font-weight:700;
}
.footer a{ color:var(--on-navy-muted); }
.footer a:hover{ color:var(--white); }
/* The reset only strips markers from a ul that carries a class, and these
   footer lists have none — so they had bullets and an indent from the day
   the footer was written. */
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:8px; }
.footer__logo{ height:44px; width:auto; margin-bottom:18px; }
.footer__badge{
  background:var(--white); border-radius:var(--radius);
  padding:14px; display:inline-block;
}
.footer__badge img{ max-width:120px; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.85rem; font-weight:400; color:var(--on-navy-faint);
}

@media (max-width:900px){
  .footer__cols{ grid-template-columns:repeat(2,1fr); gap:32px; }
}
@media (max-width:560px){
  .footer__cols{ grid-template-columns:1fr; }
  .footer{ padding-top:48px; }
}


/* 7. FORMS ================================================================= */

.qform__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .qform__row{ grid-template-columns:1fr; } }

.qform__field{ display:block; margin-bottom:16px; }
.qform__field > span{
  display:block; margin-bottom:6px;
  font-family:var(--display); font-weight:700; font-size:.82rem;
  color:var(--navy);
}
.qform__row .qform__field{ margin-bottom:0; }
.qform__row{ margin-bottom:16px; }

.qform input[type=text],
.qform input[type=email],
.qform select,
.qform textarea{
  width:100%; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--text); font-weight:400; font-size:.95rem;
  color:var(--ink); background:var(--white);
}
.qform textarea{ resize:vertical; min-height:90px; }
.qform input:focus, .qform select:focus, .qform textarea:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(89,177,113,.16);
}
.qform [aria-invalid="true"]{ border-color:#B3261E; }

/* Honeypot. Off-screen rather than display:none — some bots skip
   display:none fields, and this one needs to look fillable. */
.qform__hp{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.qform__error{
  background:#FDECEA; border-left:3px solid #B3261E;
  padding:12px 16px; margin-bottom:18px;
  font-size:.9rem; font-weight:400; color:#8C1D18;
}

.qform__consent{
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom:22px; font-size:.88rem; font-weight:400; color:var(--grey);
}
.qform__consent input{ margin-top:.25em; flex:none; width:16px; height:16px; }
.qform__consent a{ color:var(--blue); text-decoration:underline; }

.qform__submit{ width:100%; }
.qform__note{
  margin-top:14px; text-align:center;
  font-size:.8rem; font-weight:400; color:var(--grey);
}

/* Thank-you panel, shown in place of the form after a successful send. */
.qthanks{ text-align:center; padding:24px 0; }
.qthanks__icon{
  width:56px; height:56px; border-radius:50%;
  background:rgba(89,177,113,.14);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.qthanks__icon svg{
  width:30px; height:30px; stroke:var(--green); fill:none; stroke-width:2;
}
.qthanks h2, .qthanks h3{ margin-bottom:.4em; }
.qthanks p{ color:var(--grey); margin-bottom:1.4em; }


/* 8. QUOTE MODAL =========================================================== */
/* Native <dialog>. Esc, backdrop and focus trapping come from the element;
   only appearance is styled here. */

.qmodal{
  width:min(560px, calc(100vw - 40px));
  padding:0; border:none; border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(15,30,42,.4);
  background:var(--white); color:var(--ink);
  margin:auto;                       /* centres in the top layer */
}
.qmodal::backdrop{ background:rgba(15,30,42,.62); }

.qmodal__head{
  background:var(--navy); color:var(--white);
  padding:26px 32px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
}
.qmodal__head h2{ color:var(--white); font-size:1.5rem; margin:0; line-height:1.2; }
.qmodal__head .eyebrow{ font-size:.72rem; margin-bottom:.5em; }

.qmodal__close{
  background:none; border:none; cursor:pointer;
  color:var(--on-navy); font-size:1.6rem; line-height:1;
  padding:0 0 0 16px; transition:color var(--ease);
}
.qmodal__close:hover{ color:var(--white); }

.qmodal__body{ padding:28px 32px 32px; }

@media (max-width:560px){
  .qmodal{ width:100vw; height:100dvh; max-height:none; border-radius:0; }
  .qmodal__head{ padding:20px 20px; }
  .qmodal__body{ padding:20px; }
}


/* 9. NEWS ================================================================== */

/* 9.1 Card media ----------------------------------------------------------
   Two treatments, chosen per image by news_fit() in _inc/news.php.

   Default: crop to fill, for photographs big and wide enough to take it.

   --fit: show the picture whole and fill the leftover space with the same
   picture, blown up and blurred. These are the client's own photos at
   whatever size the old site had — several are portrait, one is a 334px
   badge. Cropping those to a wide card ruins them and upscaling makes them
   mush, so they are letterboxed instead. A blurred enlargement of the image
   itself reads far better than flat bars, and costs no extra file: the
   backdrop and the photo are the same URL. */

.card__media{
  display:block; position:relative; overflow:hidden;
  height:170px; background:var(--tint);
}
.card__media .card__img{ height:100%; position:relative; z-index:1; }

.card__media--fit{ background-size:cover; background-position:center; }
.card__media--fit::before{
  content:''; position:absolute; inset:-12%;
  background-image:inherit; background-size:cover; background-position:center;
  filter:blur(24px) saturate(1.3) brightness(.9);
}
.card__media--fit .card__img{ object-fit:contain; }

/* An article with no image still needs a card the same height as its
   neighbours, or the grid goes ragged. */
.card__media--none{
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
}

.card--featured .card__media{ height:100%; min-height:320px; }

@media (max-width:900px){
  /* Stacked, the media block is its own grid row, so height:100% would
     resolve against an auto row and let the image run to full height.
     Give it a fixed height instead. */
  .card--featured .card__media{ height:220px; min-height:0; }
}

/* 9.2 Article -------------------------------------------------------------- */

.wrap--narrow{ max-width:760px; }

.article{ padding-top:56px; }

.article__back{
  display:inline-block; margin-bottom:28px;
  font-family:var(--display); font-weight:700; font-size:.9rem;
  color:var(--green);
}
.article__back:hover{ color:var(--green-hover); }

.article__date{
  font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--green);
  margin-bottom:.4em;
}
.article__title{
  font-size:2.1rem; line-height:1.18; margin-bottom:.6em;
}

.article__figure{
  position:relative; overflow:hidden;
  border-radius:var(--radius); background:var(--tint);
  margin:0 0 36px; height:420px;
}
.article__figure img{
  display:block; width:100%; height:100%; object-fit:cover;
  position:relative; z-index:1;
}
.article__figure--fit{ background-size:cover; background-position:center; }
.article__figure--fit::before{
  content:''; position:absolute; inset:-12%;
  background-image:inherit; background-size:cover; background-position:center;
  filter:blur(28px) saturate(1.3) brightness(.9);
}
.article__figure--fit img{ object-fit:contain; }

.article__body{ font-size:1.06rem; line-height:1.75; }
.article__body p{ margin-bottom:1.15em; }
.article__body ul{ margin:0 0 1.15em 1.2em; }
.article__body li{ margin-bottom:.4em; }
.article__body a{ color:var(--blue-mid); text-decoration:underline; }
.article__body a:hover{ color:var(--blue); }

.article__nav{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin-top:52px; padding-top:32px; border-top:1px solid var(--line);
}
.article__nav-link{
  font-family:var(--display); font-weight:700; font-size:.98rem;
  line-height:1.35; color:var(--navy);
}
.article__nav-link span{
  display:block; margin-bottom:6px;
  font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--grey); font-weight:700;
}
.article__nav-link:hover{ color:var(--blue-mid); }
.article__nav-link--next{ text-align:right; grid-column:2; }

.notice{
  background:var(--tint); border:1px solid var(--line);
  border-left:3px solid var(--green);
  border-radius:var(--radius); padding:14px 18px; margin-bottom:28px;
  color:var(--grey); font-size:.96rem;
}

@media (max-width:640px){
  .article__title{ font-size:1.6rem; }
  .article__figure{ height:260px; }
  .article__nav{ grid-template-columns:1fr; }
  .article__nav-link--next{ text-align:left; grid-column:1; }
}

/* 9.3 Delivery terms ------------------------------------------------------- */

.delivery__head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.delivery__head h3{ margin:0; font-size:1.2rem; }
.delivery__cap{
  font-family:var(--display); font-weight:700; font-size:.95rem;
  color:var(--navy); margin-bottom:.6em;
}
/* The reset strips markers from any ul that carries a class, so put
   them back explicitly here. */
.delivery__terms{ margin:0; padding-left:20px; color:var(--grey); list-style:disc; }
.delivery__terms li{ margin-bottom:6px; }
.delivery__terms li:last-child{ margin-bottom:0; }

/* 9.4 Certification cards -------------------------------------------------- */

/* The prototype puts the number in the same rounded tile the feature icons
   use, not loose on the card. */
.cred__n{
  width:48px; height:48px; border-radius:10px;
  background:rgba(89,177,113,.14);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  font-family:var(--display); font-weight:700; font-size:1.1rem;
  color:var(--green); line-height:1;
}

/* 9.6 Legal document ------------------------------------------------------- */

.legal__h{
  font-size:1.15rem; margin-top:1.8em; margin-bottom:.4em;
}
.legal__h:first-child{ margin-top:0; }

/* 9.7 About =============================================================== */

/* 9.7.1 At a glance — six facts as cards, not a table. */
.glance-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px;
}
.glance-card__k{
  display:block; margin-bottom:8px;
  font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--green);
}
.glance-card__v{
  display:block; color:var(--navy);
  font-family:var(--display); font-weight:700; font-size:1.05rem;
}

/* 9.7.2 Timeline — a ruled spine with a dot per milestone. The rule is the
   left border of the text column, so it joins up between rows on its own,
   and the dot is pulled back over it. */
.timeline{ list-style:none; margin:0; padding:0; max-width:760px; }
.timeline__row{
  display:grid; grid-template-columns:110px 1fr; gap:24px; align-items:start;
}
.timeline__date{
  font-family:var(--display); font-weight:700; font-size:1rem;
  color:var(--blue-mid); text-align:right; padding:2px 0 24px;
}
.timeline__body{
  position:relative; border-left:2px solid var(--line); padding:0 0 26px 26px;
}
.timeline__body::before{
  content:''; position:absolute; left:-7px; top:4px;
  width:12px; height:12px; border-radius:50%;
  background:var(--blue-mid); border:2px solid var(--white);
  box-shadow:0 0 0 1px var(--line);
}
.timeline__body p{ margin:0; color:var(--navy); font-size:1.02rem; line-height:1.5; }
/* The last row's rule would otherwise run past the final dot. */
.timeline__row:last-child .timeline__body{ border-left-color:transparent; }

/* 9.7.3 Team — square portraits, cropped from the top so faces stay in frame. */
.team{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.person{ display:grid; grid-template-columns:150px 1fr; gap:28px; align-items:start; }
.person__photo{
  width:150px; height:150px; display:block;
  object-fit:cover; object-position:center top;
  border-radius:var(--radius); border:1px solid var(--line);
  background:var(--tint);
}
.person__name{ font-size:1.25rem; line-height:1.2; margin:0 0 .1em; }
.person__role{
  font-family:var(--display); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green);
  margin:0 0 .9em;
}

/* 9.7.4 Compliance intro */
.comp__intro{ font-size:1.1rem; color:var(--grey); max-width:760px; margin-bottom:2.4em; }

/* 9.7.5 Domicile band — same navy gradient as the sustainability band,
   so the two share one rule up in section 6.9 rather than drifting. */
.band-domicile h2{ color:var(--white); }
.split--dom{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center; }
.dom-card{
  background:var(--white); border-radius:var(--radius);
  padding:28px 30px; color:var(--ink);
}
.dom-card__name{
  display:block; margin-bottom:10px;
  font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--navy);
}
/* The band rule in section 6.9 paints every paragraph in the band pale
   blue, for text sitting on navy. This card is white, so its paragraphs
   need the grey back. The band selector is more specific than .dom-card p,
   so the band name has to appear here to outrank it — without this line
   the address renders #CFE0EA on white. */
.band-domicile .dom-card p{ color:var(--grey); }
.dom-card p{ color:var(--grey); margin-bottom:.8em; }

/* 9.7.6 Imprint list */
.glance{ margin:0; display:grid; grid-template-columns:260px 1fr; }
.glance dt{
  font-family:var(--display); font-weight:700; color:var(--navy);
  padding:14px 0; border-top:1px solid var(--line);
}
.glance dd{ margin:0; padding:14px 0; color:var(--grey); border-top:1px solid var(--line); }
.glance dt:first-of-type, .glance dt:first-of-type + dd{ border-top:0; }

@media (max-width:900px){
  .team{ grid-template-columns:1fr; gap:32px; }
  .split--dom{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:640px){
  .glance{ grid-template-columns:1fr; }
  .glance dd{ border-top:0; padding-top:0; }
  .person{ grid-template-columns:110px 1fr; gap:20px; }
  .person__photo{ width:110px; height:110px; }
  .timeline__row{ grid-template-columns:78px 1fr; gap:16px; }
  .timeline__body{ padding-left:20px; }
}

/* 9.8 Framed ISCC badge ---------------------------------------------------- */
/* The sustainability page frames the mark — tinted box, white plate inside —
   where the homepage uses the plain white .badge-card. Two treatments in the
   prototype, so two classes here rather than one bent to cover both. */

.badge-frame{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--tint); padding:32px; text-align:center;
}
.badge-frame__box{
  display:inline-block; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
}
.badge-frame__box img{ max-width:190px; height:auto; display:block; }
.badge-frame__label{
  display:block; margin-top:16px; color:var(--navy);
  font-family:var(--display); font-weight:700; font-size:.95rem;
}