/* ==========================================================================
   LIVE 120 GMBH — site stylesheet
   Palette sampled directly from the company logo.
   No frameworks, no external requests (GDPR-friendly, nothing leaves the server).
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* brand */
  --ink:        #0A131E;   /* logo mark, dark */
  --ink-2:      #101E2E;   /* raised dark surface */
  --ink-3:      #17293C;   /* hairlines on dark */
  --blue:       #004AAD;   /* logo deep blue */
  --blue-lit:   #0059CE;
  --sky:        #36B6FF;   /* logo sky blue */
  --sky-soft:   #C0E5FF;
  --navy:       #28326E;   /* letterhead wordmark navy */

  /* neutrals */
  --paper:      #FFFFFF;
  --mist:       #EEF4FA;
  --mist-2:     #E3ECF5;
  --line:       #D6E1EC;
  --steel:      #55687C;
  --steel-dark: #35485C;

  /* type */
  --f-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  /* rhythm */
  --pad: clamp(1.25rem, 4vw, 3rem);
  --gap: clamp(1.5rem, 3vw, 2.5rem);
  --sec: clamp(4rem, 9vw, 7.5rem);
  --wrap: 1240px;

  --shadow-sm: 0 1px 2px rgba(10,19,30,.06), 0 4px 12px rgba(10,19,30,.05);
  --shadow-md: 0 2px 4px rgba(10,19,30,.06), 0 16px 40px rgba(10,19,30,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;
  color:var(--steel-dark);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-lit)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.08;font-weight:800;letter-spacing:-.02em}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
button{font:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:2px}
::selection{background:var(--sky-soft);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.75rem 1.25rem}
.skip:focus{left:0}

/* --- 3. Layout primitives ----------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.section--mist{background:var(--mist)}
.section--ink{background:var(--ink);color:#AFC2D4}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--tight{padding-block:clamp(2.5rem,6vw,4rem)}

.grid{display:grid;gap:var(--gap)}
@media(min-width:720px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1020px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

/* --- 4. Type helpers ---------------------------------------------------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 1.15rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{
  content:"";width:1.6rem;height:0;
  border-top:2px solid var(--sky);flex:none;
}
.section--ink .eyebrow{color:var(--sky)}
.section--ink .eyebrow::before{border-color:var(--blue)}

.h-xl{font-size:clamp(2.05rem,1.35rem + 3vw,3.35rem);text-transform:uppercase;letter-spacing:-.025em}
.h-lg{font-size:clamp(1.7rem,1.15rem + 2.1vw,2.7rem);text-transform:uppercase;letter-spacing:-.02em}
.h-md{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem)}
.h-sm{font-size:1.02rem;letter-spacing:-.005em}
.lead{font-size:clamp(1.06rem,1rem + .35vw,1.24rem);color:var(--steel);max-width:62ch}
.section--ink .lead{color:#9FB4C8}
.measure{max-width:68ch}
.mono{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.04em}

.rule{border:0;border-top:1px solid var(--line);margin:0}
.section--ink .rule{border-color:var(--ink-3)}

/* section seam — the solid rule from the company letterhead */
.seam{height:4px;background:linear-gradient(90deg,var(--blue) 0 62%,var(--sky) 62% 100%)}

/* --- 5. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.92rem 1.6rem;
  font-family:var(--f-mono);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-lit);color:#fff}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--onink{border-color:rgba(175,194,212,.35);color:#fff}
.btn--onink:hover{border-color:var(--sky);color:var(--sky)}
.btn--sky{background:var(--sky);color:var(--ink)}
.btn--sky:hover{background:#5AC4FF;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.textlink{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;display:inline-flex;align-items:center;gap:.5rem;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.textlink:hover{border-bottom-color:currentColor}

/* --- 6. Spec plate (the machine rating-plate motif) --------------------- */
.plate{
  border:1px solid var(--line);background:var(--paper);
  display:grid;position:relative;
}
.plate::before,.plate::after{
  content:"";position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--line);top:6px;
}
.plate::before{left:6px}
.plate::after{right:6px}
.plate__cell{padding:.85rem 1.15rem;border-top:1px solid var(--line)}
.plate__cell:first-child{border-top:0}
.plate__k{
  display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.3rem;
}
.plate__v{display:block;font-family:var(--f-mono);font-size:.84rem;color:var(--ink);font-weight:600;line-height:1.4}
@media(min-width:640px){
  .plate--row{grid-auto-flow:column;grid-auto-columns:1fr}
  .plate--row .plate__cell{border-top:0;border-left:1px solid var(--line)}
  .plate--row .plate__cell:first-child{border-left:0}
}
.plate--dark{background:rgba(255,255,255,.03);border-color:var(--ink-3)}
.plate--dark::before,.plate--dark::after{background:var(--ink-3)}
.plate--dark .plate__cell{border-color:var(--ink-3)}
.plate--dark .plate__k{color:#7D93A8}
.plate--dark .plate__v{color:#fff}

/* --- 7. Header ---------------------------------------------------------- */
.head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.head__bar{display:flex;align-items:center;gap:1rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.75rem;margin-right:auto}
.brand img{width:34px;flex:none}
.brand__name{white-space:nowrap;
  font-family:var(--f-sans);font-weight:800;font-size:1.02rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--navy);line-height:1;
}
.brand__sub{
  display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.19em;
  color:var(--steel);text-transform:uppercase;margin-top:.28rem;font-weight:400;white-space:nowrap;
}

.nav{display:none}
@media(min-width:1020px){
  .nav{display:flex;align-items:center;gap:.35rem}
  .nav a{
    font-size:.87rem;font-weight:600;color:var(--ink);
    padding:.55rem .7rem;position:relative;letter-spacing:.005em;white-space:nowrap;
  }
  .nav a::after{
    content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;
    height:2px;background:var(--sky);transform:scaleX(0);transform-origin:left;
    transition:transform .25s var(--ease);
  }
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
  .nav a[aria-current="page"]{color:var(--blue)}
}

/* language switcher */
.lang{display:flex;border:1px solid var(--line);flex:none}
.lang button{
  background:transparent;border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  padding:.48rem .58rem;color:var(--steel);border-left:1px solid var(--line);
  transition:background .18s,color .18s;
}
.lang button:first-child{border-left:0}
.lang button:hover{background:var(--mist);color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

.head__cta{display:none}
@media(min-width:1280px){.head__cta{display:inline-flex;padding:.72rem 1.1rem}}

.burger{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);cursor:pointer;
}
.burger span{display:block;width:19px;height:1.8px;background:var(--ink);position:relative;transition:transform .25s var(--ease),opacity .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.8px;background:var(--ink);transition:transform .25s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.burger[aria-expanded="true"] span::after{opacity:0}
@media(min-width:1020px){.burger{display:none}}

.drawer{display:none;border-top:1px solid var(--line);background:var(--paper)}
.drawer.is-open{display:block}
.drawer a{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.05rem var(--pad);border-bottom:1px solid var(--line);
  color:var(--ink);font-weight:600;
}
.drawer a[aria-current="page"]{color:var(--blue)}
.drawer a::after{content:"→";font-family:var(--f-mono);color:var(--sky)}
@media(min-width:1020px){.drawer{display:none!important}}

/* --- 8. Hero ------------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);color:#AFC2D4;
  padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem);
}
.hero::before{ /* letterhead diagonal band, top-right */
  content:"";position:absolute;top:-14%;right:-8%;width:46%;height:70%;
  background:linear-gradient(114deg,transparent 0 46%,rgba(54,182,255,.07) 46% 58%,transparent 58% 74%,rgba(0,74,173,.16) 74% 88%,transparent 88%);
  pointer-events:none;
}
.hero__inner{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:1020px){.hero__inner{grid-template-columns:1.15fr .85fr}}

.hero h1{color:#fff;margin-bottom:1.5rem}
.hero h1 .amp{
  color:var(--sky);font-weight:400;
  display:inline-block;padding-inline:.12em;
}
.hero__lead{color:#9FB4C8;max-width:54ch}
.hero .plate{margin-top:clamp(2.25rem,5vw,3.25rem)}

/* animated chevron construct */
.chev{width:100%;max-width:460px;margin-inline:auto}
.chev path{
  fill:none;stroke-linecap:butt;stroke-linejoin:miter;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  animation:draw 1.5s var(--ease) forwards;
}
.chev .c1{stroke:#fff;stroke-width:11;animation-delay:.1s}
.chev .c2{stroke:var(--sky);stroke-width:13;animation-delay:.34s}
.chev .c3{stroke:var(--blue);stroke-width:15;animation-delay:.58s}
@keyframes draw{to{stroke-dashoffset:0}}

/* --- 9. Division panels ------------------------------------------------- */
.divisions{display:grid;gap:0;border:1px solid var(--line)}
@media(min-width:900px){.divisions{grid-template-columns:1fr 1fr}}
.division{
  padding:clamp(2rem,4vw,3.25rem);position:relative;overflow:hidden;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;
}
.division:first-child{border-top:0}
@media(min-width:900px){
  .division{border-top:0;border-left:1px solid var(--line)}
  .division:first-child{border-left:0}
}
.division--a{background:var(--ink);color:#9FB4C8}
.division--a h3{color:#fff}
.division--b{background:var(--mist)}
.division__tag{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sky);margin-bottom:1.1rem;display:block;
}
.division--b .division__tag{color:var(--blue)}
.division h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);text-transform:uppercase;margin-bottom:1rem}
.division ul{margin:1.6rem 0 0;display:grid;gap:.55rem}
.division li{
  font-family:var(--f-mono);font-size:.79rem;letter-spacing:.02em;
  padding-left:1.35rem;position:relative;
}
.division li::before{
  content:"";position:absolute;left:.05rem;top:.6em;width:.42rem;height:.42rem;
  border-top:2px solid var(--sky);border-left:2px solid var(--sky);
  transform:rotate(45deg);
}
.division--b li::before{border-color:var(--blue)}
.division .btn-row{margin-top:auto;padding-top:2.25rem}

/* --- 10. Cards --------------------------------------------------------- */
.card{
  background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
}
.card:hover{border-color:var(--sky);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.card__fig{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist);
  border-bottom:1px solid var(--line);
}
.card__fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__fig img{transform:scale(1.045)}
/* branded placeholder shown when a photo has not been added yet */
.card__fig::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .2s;
  background:
    linear-gradient(135deg,rgba(0,74,173,.10),rgba(54,182,255,.06)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%23004AAD' stroke-opacity='.13' stroke-width='7' stroke-linejoin='miter'><path d='M62 158 V104 L34 76'/><path d='M110 158 V84 L78 52'/><path d='M158 158 V64 L124 30'/></g></svg>") repeat center/220px,
    var(--mist);
}
.card__fig.is-empty::after{opacity:1}
.card__fig.is-empty img{opacity:0}
.card__num{
  position:absolute;left:0;top:0;z-index:2;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;font-weight:600;
  background:var(--ink);color:#fff;padding:.4rem .7rem;
}
.card__body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.card__body h3{margin-bottom:.7rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:-.005em}
.card__body p{color:var(--steel);font-size:.95rem}
.card__spec{
  margin-top:auto;padding-top:1.15rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.card__spec span{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel);background:var(--mist);padding:.3rem .55rem;
}

/* detail rows on the division pages */
.detail{
  display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start;
  padding-block:clamp(2.25rem,5vw,3.5rem);border-top:1px solid var(--line);
}
.detail:first-of-type{border-top:0;padding-top:0}
@media(min-width:900px){.detail{grid-template-columns:.9fr 1.1fr}}
.detail__idx{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;color:var(--sky);
  display:block;margin-bottom:.9rem;
}
.detail h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);text-transform:uppercase;margin-bottom:1rem}
.detail__list{columns:2;column-gap:1.75rem;margin-top:1.35rem}
@media(max-width:560px){.detail__list{columns:1}}
.detail__list li{
  break-inside:avoid;padding-left:1.1rem;position:relative;
  font-size:.93rem;margin-bottom:.42rem;color:var(--steel-dark);
}
.detail__list li::before{
  content:"";position:absolute;left:.05rem;top:.68em;width:.36rem;height:.36rem;
  border-top:2px solid var(--blue);border-left:2px solid var(--blue);transform:rotate(45deg);
}

/* --- 11. Process steps ------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--ink-3)}
.step{
  counter-increment:s;padding:clamp(1.5rem,3.5vw,2.25rem) 0;
  border-bottom:1px solid var(--ink-3);
  display:grid;gap:.5rem 1.75rem;align-items:baseline;
}
@media(min-width:800px){.step{grid-template-columns:5rem 15rem 1fr}}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--f-mono);font-size:.95rem;font-weight:700;color:var(--sky);letter-spacing:.08em;
}
.step h3{font-size:1.06rem;text-transform:uppercase;letter-spacing:.01em}
.step p{color:#9FB4C8;font-size:.96rem;max-width:62ch}

/* --- 12. Value list ---------------------------------------------------- */
.values{display:grid;gap:1px;background:var(--line)}
@media(min-width:700px){.values{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.values{grid-template-columns:repeat(4,1fr)}}
.value{background:var(--paper);padding:clamp(1.5rem,3vw,2rem)}
.value__ico{width:30px;height:30px;margin-bottom:1.1rem;stroke:var(--blue);fill:none;stroke-width:1.7}
.value h3{font-size:1rem;text-transform:uppercase;margin-bottom:.55rem;letter-spacing:0}
.value p{font-size:.92rem;color:var(--steel)}

/* --- 13. CTA band ------------------------------------------------------ */
.cta{
  background:var(--blue);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(3rem,6vw,4.5rem);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(107deg,transparent 0 62%,rgba(255,255,255,.09) 62% 71%,transparent 71% 80%,rgba(10,19,30,.22) 80% 92%,transparent 92%);
}
.cta__inner{position:relative;display:grid;gap:1.75rem;align-items:center}
@media(min-width:900px){.cta__inner{grid-template-columns:1fr auto}}
.cta h2{color:#fff;font-size:clamp(1.5rem,1.15rem + 1.6vw,2.25rem);text-transform:uppercase}
.cta p{color:rgba(255,255,255,.86);margin-top:.85rem;max-width:56ch}
.cta .btn-row{margin-top:0}

/* --- 14. Contact / form ------------------------------------------------ */
.contact-grid{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr .8fr}}

.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
@media(min-width:640px){.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}}
.field label{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--steel);font-weight:600;
}
.field .req{color:var(--blue)}
.field input,.field select,.field textarea{
  font-family:var(--f-sans);font-size:1rem;color:var(--ink);
  padding:.82rem .95rem;border:1px solid var(--line);background:var(--paper);
  width:100%;border-radius:0;transition:border-color .18s,box-shadow .18s;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,74,173,.14);
}
/* only flag a field once the visitor has actually interacted with it,
   so a fresh form does not open covered in red boxes */
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{
  border-color:#C4443A;box-shadow:0 0 0 3px rgba(196,68,58,.12);
}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;margin-top:.35rem}
.consent input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--blue);flex:none}
.consent label{font-family:var(--f-sans);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--steel);line-height:1.55}

.form__note{font-size:.8rem;color:var(--steel);font-family:var(--f-mono);letter-spacing:.02em}
.form__status{padding:.95rem 1.15rem;border-left:3px solid var(--blue);background:var(--mist);font-size:.93rem;display:none}
.form__status.is-shown{display:block}
.form__status.is-ok{border-color:#1B7A4B;background:#EBF7F0;color:#125634}
.form__status.is-bad{border-color:#C4443A;background:#FCEEEC;color:#8A2F27}

.info-card{border:1px solid var(--line);background:var(--paper)}
.info-card__head{background:var(--ink);color:#fff;padding:1.15rem 1.5rem}
.info-card__head h2{color:#fff;font-size:1.02rem;text-transform:uppercase;letter-spacing:.03em}
.info-row{padding:1.15rem 1.5rem;border-top:1px solid var(--line)}
.info-row:first-of-type{border-top:0}
.info-row dt{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--steel);margin-bottom:.35rem;
}
.info-row dd{margin:0;color:var(--ink);font-weight:600;line-height:1.55}
.info-row dd a{font-weight:600}

/* --- 15. Legal / prose ------------------------------------------------- */
.prose{max-width:78ch}
.prose h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);text-transform:uppercase;margin:2.75rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.06rem;margin:1.85rem 0 .65rem}
.prose p,.prose li{color:var(--steel-dark)}
.prose ul{margin:.75rem 0 1.25rem;display:grid;gap:.45rem}
.prose ul li{padding-left:1.15rem;position:relative}
.prose ul li::before{
  content:"";position:absolute;left:.05rem;top:.68em;width:.36rem;height:.36rem;
  border-top:2px solid var(--blue);border-left:2px solid var(--blue);transform:rotate(45deg);
}
.prose dl{margin:0 0 1.5rem;display:grid;gap:.3rem}
.prose dt{font-weight:700;color:var(--ink)}
.prose dd{margin:0 0 .6rem}
.prose a{border-bottom:1px solid rgba(0,74,173,.3)}
.prose .updated{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid var(--line);
}
.lang-block{display:none}
.lang-block.is-active{display:block}

.pagehead{background:var(--mist);border-bottom:1px solid var(--line);padding-block:clamp(2.5rem,6vw,4.25rem)}
.pagehead h1{margin-bottom:1rem}
.crumbs{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-bottom:1.5rem;
}
.crumbs a{color:var(--steel)}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:var(--line);padding-inline:.5rem}

/* --- 16. Footer -------------------------------------------------------- */
.foot{background:var(--ink);color:#8FA6BB;position:relative;overflow:hidden}
.foot::before{
  content:"";position:absolute;bottom:-40%;left:-6%;width:38%;height:110%;pointer-events:none;
  background:linear-gradient(107deg,transparent 0 55%,rgba(54,182,255,.11) 55% 66%,transparent 66% 78%,rgba(0,74,173,.26) 78% 90%,transparent 90%);
}
.foot__main{position:relative;display:grid;gap:2.5rem;padding-block:clamp(3rem,6vw,4.5rem)}
@media(min-width:760px){.foot__main{grid-template-columns:1.3fr 1fr 1fr}}
@media(min-width:1080px){.foot__main{grid-template-columns:1.5fr 1fr 1fr 1.1fr}}
.foot img.foot__logo{width:150px;margin-bottom:1.35rem}
.foot h2{
  font-size:.7rem;font-family:var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--sky);margin-bottom:1.15rem;font-weight:600;
}
.foot p{font-size:.9rem;color:#8FA6BB}
.foot ul{display:grid;gap:.6rem}
.foot a{color:#C3D3E1;font-size:.9rem}
.foot a:hover{color:var(--sky)}
.foot__bottom{
  position:relative;border-top:1px solid var(--ink-3);
  padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;
  align-items:center;justify-content:space-between;
}
.foot__bottom p,.foot__legalcode{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;color:#6E869C;margin:0;
}
.foot__links{display:flex;flex-wrap:wrap;gap:.5rem 1.35rem}
.foot__links a{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#8FA6BB;
}

/* --- 17. Cookie notice ------------------------------------------------- */
.notice{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--ink);color:#C3D3E1;border-top:2px solid var(--sky);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.notice.is-up{transform:translateY(0)}
.notice__inner{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding-block:1.1rem;
}
.notice p{font-size:.86rem;margin:0;max-width:74ch}
.notice a{color:var(--sky);border-bottom:1px solid rgba(54,182,255,.4)}

/* --- 18. Reveal on scroll ---------------------------------------------- */
.js-reveal .reveal{opacity:0;transform:translateY(18px)}
.js-reveal .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  .js-reveal .reveal{opacity:1;transform:none}
  .chev path{stroke-dashoffset:0}
}

/* --- 19. Print --------------------------------------------------------- */
@media print{
  .head,.foot__main,.notice,.cta,.btn-row{display:none!important}
  body{color:#000}
  .hero{background:#fff;color:#000}
  .hero h1{color:#000}
}

/* --- 20. Small-screen corrections --------------------------------------- */
@media(max-width:620px){
  /* the strapline does not fit next to the language switcher on a phone */
  .brand__sub{display:none}
  .brand__name{font-size:.94rem}
  .brand img{width:30px}
  .lang button{padding:.44rem .46rem;font-size:.66rem}
  .head__bar{gap:.6rem;min-height:66px}
  /* keep the diagonal band from dominating a narrow hero */
  .hero::before{top:-6%;right:-34%;width:88%;height:64%;opacity:.55}
  .btn{padding:.85rem 1.25rem;font-size:.74rem}
  .plate--row .plate__cell,.plate__cell{padding:.8rem 1rem}
}
@media(max-width:400px){
  .btn-row{gap:.7rem}
  .btn{width:100%;justify-content:space-between}
}

/* --- 21. Layout utilities ------------------------------------------------
   These replace inline style attributes so the Content-Security-Policy in
   .htaccess can forbid inline styles outright. Never inline a style in the
   HTML: add a class here instead, or the browser will silently drop it.
   ------------------------------------------------------------------------ */
.section-intro{max-width:68ch;margin-bottom:var(--gap)}
.section-intro--roomy{max-width:66ch;margin-bottom:calc(var(--gap) * 1.15)}
.lead--spaced{margin-top:1.15rem}
.card__fig--framed{border:1px solid var(--line);margin-top:1.25rem}
.plate--spaced{margin-top:1.75rem}
.plate--stacked{margin-top:1.5rem}
.btn-row--tight{margin-top:.75rem}
.note--spaced{margin-top:1.25rem}
.scope-note{margin-top:calc(var(--gap) * 1.1)}
.foot__contact{margin-top:1rem}
.foot__fax{color:#6E869C}
.info-row__muted{font-weight:400;color:var(--steel)}

/* hero chevron stroke lengths, previously set inline */
.chev .c1{--len:250}
.chev .c2{--len:300}
.chev .c3{--len:350}

/* --- 22. Touch target sizes ---------------------------------------------
   WCAG 2.2 (2.5.8) asks for at least 24x24 px on anything you tap. The
   footer and breadcrumb links sit at 16 px because they are set in small
   type, so they get vertical padding on touch devices and narrow screens.
   ------------------------------------------------------------------------ */
.consent input{width:24px;height:24px}

@media (max-width:900px), (pointer:coarse){
  .foot ul{gap:.15rem}
  .foot ul a{display:inline-block;padding-block:.45rem}
  .foot__contact a{display:inline-block;padding-block:.3rem}
  .foot__links a{display:inline-block;padding-block:.35rem}
  .crumbs a{display:inline-block;padding-block:.35rem}
  .info-row dd a{display:inline-block;padding-block:.3rem}
  .notice a{display:inline-block;padding-block:.25rem}
  .prose a{padding-block:.15rem}
  .plate__v a{display:inline-block;padding-block:.3rem}
}