/* ---------------------------------------------------------------------------
   Self-hosted fonts. Previously loaded from fonts.googleapis.com, which sent
   every visitor's IP to a third party and was not disclosed in the privacy
   statement - a problem German courts have taken seriously, and Germany is an
   active target market. Everything below is served from our own domain.

   Jost: Fontsource build of the Google font, latin subset, four weights (42 KB
   in total). Material Icons: the full font. Not subset, deliberately - the icon
   names come from i18n/*.json, so a subset would silently lose an icon the day
   somebody adds a module. Subset it only behind a build step that derives the
   glyph list from the content.
   --------------------------------------------------------------------------- */
@font-face{font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/jost-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/jost-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/jost-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/jost-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Material Icons'; font-style:normal; font-weight:400; font-display:block;
  src:url('/assets/fonts/material-icons.woff2') format('woff2');}

.material-icons{font-family:'Material Icons'; font-weight:normal; font-style:normal;
  font-size:24px; line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:'liga';}

/* ══════════════════════════════════════════════════════════════════════════
   SHIPM8 — site.css
   Extends the CO-MADE brand stylesheet with the SHIPM8 marketing sections.
   Tokens are the CO-MADE brand system; see docs/co-made-brand-guidelines.md.
   Balance: navy 60 · neutral 30 · amber 10. Amber is a highlight, never a wash.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#0C365A; --deep:#072136; --amber:#F59300; --burnt:#D68305;
  --ink:#0B1622; --slate:#5B6B7A; --mist:#EEF2F5; --paper:#FFFFFF;
  --mist-soft:#F5F8FA; --line:#e7edf1; --body:#33424f;
  --on-navy:#cfdae4; --on-navy-eyebrow:#8fa6ba; --on-hero-eyebrow:#9fc0dc;
  --footer-text:#93a6b6;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}
body{font-family:'Jost',Arial,Helvetica,sans-serif; color:var(--ink);
  background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased;}

.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.narrow{max-width:820px;}
section{padding:96px 0;}
.section-sm{padding:72px 0;}
.mist-sec{background:var(--mist-soft);}
.mist-solid{background:var(--mist);}

h1,h2,h3{font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1.1;}
h2{font-size:38px; margin-bottom:20px;}
h3{font-size:22px; font-weight:600; letter-spacing:-.01em;}
p{font-size:18px; color:var(--body);}
.lead{max-width:62ch;}
/* Stacked body paragraphs need air between them; the global reset removes it. */
.stack p + p{margin-top:18px;}
a{color:inherit; text-decoration:none; transition:color .2s ease;}
a:hover{color:var(--amber);}

.eyebrow{font-size:13px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--slate); display:block;}

/* Focus ring — the design doesn't define one, so define it here. */
:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:4px;}
.navy-sec :focus-visible,.hero :focus-visible,.page-hero :focus-visible,
footer :focus-visible{outline-color:var(--amber);}

.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--navy);
  color:#fff; padding:12px 20px; border-radius:0 0 8px 0; font-weight:600;}
.skip-link:focus{left:0; color:#fff;}

/* amber accent bars */
.amber-bar{width:54px; height:6px; background:var(--amber); border-radius:999px; margin-bottom:26px;}
.amber-bar.sm{width:40px;}
.amber-bar.xs{width:34px; height:5px; margin-bottom:20px;}

/* ── notice banner ───────────────────────────────────────────────────────────
   Deliberately navy, not amber. The brand keeps amber to roughly a tenth of the
   palette as a highlight, and a full-bleed amber strip across every page is a
   wash — it would also read as a warning about our own site rather than a
   notice about invoicing. Navy ground, amber icon and amber link: prominent
   without shouting.

   Not sticky. It sits above the nav and scrolls away; the nav keeps the top of
   the viewport. Someone who arrives from an invoice sees it immediately, and
   someone reading the site is not followed down the page by it.
   ------------------------------------------------------------------------- */
.notice{background:var(--deep); color:#fff; font-size:15px; line-height:1.55;}
.notice .wrap{display:flex; align-items:flex-start; gap:14px;
  padding-top:14px; padding-bottom:14px;}
.notice .ic{color:var(--amber); flex-shrink:0;}
.notice .ic .material-icons{font-size:22px; display:block;}
.notice p{color:#fff; font-size:15px; margin:0;}
.notice strong{font-weight:600; color:#fff;}
/* The phone number is the point of the banner, so it stays white and bold
   rather than becoming a third link colour competing with "What changed". */
.notice a.tel{color:#fff; font-weight:600; white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45);}
.notice a.tel:hover{text-decoration-color:#fff; color:#fff;}
.notice a.more{color:var(--amber); font-weight:600; white-space:nowrap;}
.notice a.more:hover{color:#fff;}
.notice a.more .arw{display:inline-block; transition:transform .2s ease;}
.notice a.more:hover .arw{transform:translateX(3px);}
.notice .close{margin-left:auto; background:none; border:0; cursor:pointer;
  color:var(--on-navy-eyebrow); padding:0 0 0 6px; flex-shrink:0;
  font-family:inherit; line-height:1;}
.notice .close:hover{color:#fff;}
.notice .close .material-icons{font-size:20px; display:block;}
.notice :focus-visible{outline-color:var(--amber);}

@media(max-width:620px){
  .notice .wrap{gap:10px; padding-top:12px; padding-bottom:12px;}
  .notice p{font-size:14px;}
  /* The icon earns its space on one line of text, not on five. */
  .notice .ic{display:none;}
}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; gap:26px; min-height:76px;
  flex-wrap:wrap; padding-top:10px; padding-bottom:10px;}
.nav .logo img{height:30px; display:block;}
/* On desktop the panel is transparent to layout: its children are the flex items.
   Below the breakpoint it becomes the real navy dropdown panel. */
.nav-panel{display:contents;}
.nav .links{display:flex; gap:24px; margin-left:auto; font-size:15px;
  font-weight:500; color:var(--navy); flex-wrap:wrap;}
.nav .links a{opacity:.82;}
.nav .links a:hover{opacity:1; color:var(--amber);}
.nav .login{font-size:15px; font-weight:500; color:var(--navy);}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  padding:8px; color:var(--navy);}
.nav-toggle span{display:block; width:22px; height:2px; background:currentColor;
  border-radius:2px; margin:4px 0;}

.lang-switch{position:relative;}
.lang{font-size:14px; font-weight:500; color:var(--slate); cursor:pointer;
  background:none; border:0; font-family:inherit; display:inline-flex; align-items:center; gap:4px;}
.lang-menu{position:absolute; right:0; top:calc(100% + 10px); background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:6px; min-width:150px;
  box-shadow:0 18px 40px -22px rgba(12,54,90,.4); display:none; z-index:60;}
/* The menu sits 10px below the button. Without this bridge the pointer crosses
   dead space on the way down, :hover stops matching and the menu closes before
   it can be reached. The bridge belongs to the menu, so hovering it keeps the
   switch hovered too. */
.lang-menu::before{content:''; position:absolute; left:0; right:0;
  top:-10px; height:10px;}
.lang-switch:hover .lang-menu,.lang-switch:focus-within .lang-menu{display:block;}
.lang-menu a{display:block; padding:8px 12px; border-radius:8px; font-size:14px;
  font-weight:500; color:var(--navy);}
.lang-menu a:hover{background:var(--mist); color:var(--navy);}
.lang-menu .current{display:block; padding:8px 12px; font-size:14px; color:var(--slate); cursor:default;}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:999px; cursor:pointer; transition:.2s ease;
  border:1.6px solid transparent; font-family:inherit;}
.btn-amber{background:var(--amber); color:var(--deep);}
.btn-amber:hover{background:var(--burnt); color:var(--deep);}
.btn-navy-o{border-color:var(--navy); color:var(--navy);}
.btn-navy-o:hover{background:var(--navy); color:#fff;}
.btn-white-o{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-white-o:hover{background:rgba(255,255,255,.1); color:#fff;}
.btn .arw{display:inline-block; transition:transform .2s ease;}
.btn:hover .arw{transform:translateX(3px);}

.arrow-link{display:inline-flex; align-items:center; gap:7px; font-weight:600;
  color:var(--navy); font-size:15px;}
.arrow-link .arw{display:inline-block; transition:transform .2s ease;}
.arrow-link:hover{color:var(--amber);}
.arrow-link:hover .arw{transform:translateX(4px);}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; color:#fff;
  background-image:linear-gradient(95deg, rgba(6,29,49,.94), rgba(7,33,54,.74) 46%, rgba(7,33,54,.42)),
    url("/assets/hero.png");
  background-size:cover; background-position:center; background-repeat:no-repeat;}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:48px;
  padding-top:112px; padding-bottom:124px;}
.hero .eyebrow{color:var(--on-hero-eyebrow);}
.hero h1{font-size:clamp(40px,5.2vw,74px); color:#fff; margin:18px 0 22px; line-height:1.06;}
.hero p{font-size:21px; color:#dbe7f0; max-width:36ch;}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-art{position:relative; display:flex; justify-content:center; align-items:center; min-height:420px;}
.hero-art .ring{position:absolute; border-radius:50%; pointer-events:none;}
.hero-art .ring1{width:400px; height:400px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);}
.hero-art .ring2{width:290px; height:290px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);}
.hero-art img{position:relative; width:220px; height:auto;}

/* ── page hero (inner pages) ─────────────────────────────────────────────── */
.page-hero{background:var(--navy); color:#fff; position:relative; overflow:hidden;
  padding:60px 0 70px;}
.page-hero h1{color:#fff; font-size:52px; max-width:20ch; line-height:1.08;}
.page-hero p{color:var(--on-navy); font-size:20px; max-width:58ch; margin-top:18px;}
.page-hero .eyebrow{color:var(--on-navy-eyebrow); margin-bottom:16px;}
.breadcrumb{font-size:14px; color:var(--on-hero-eyebrow); margin-bottom:20px;}
.breadcrumb a{opacity:.85;}
.breadcrumb a:hover{opacity:1; color:#fff;}
.breadcrumb .sep{margin:0 8px; opacity:.5;}

/* decorative blob — must sit behind content, not tint cards drawn over it */
.blob{position:absolute; right:-120px; top:-90px; width:420px; height:420px;
  border-radius:46% 54% 50% 50%/54% 46% 54% 46%; background:rgba(245,147,0,.14);
  pointer-events:none; z-index:0;}
/* content sits above the blob, so cards are never tinted by it */
.navy-sec > .wrap,.page-hero > .wrap,.newsletter > *:not(.blob){position:relative; z-index:1;}

/* ── navy section ────────────────────────────────────────────────────────── */
.navy-sec{background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.navy-sec h2{color:#fff;}
.navy-sec p{color:var(--on-navy);}
.navy-sec .eyebrow{color:var(--on-navy-eyebrow);}
.navy-sec .grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.pull{font-size:32px; font-weight:600; color:#fff; letter-spacing:-.01em; line-height:1.28;}
.pull b{color:var(--amber); font-weight:600;}

/* translucent chips on navy */
.chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.chip{font-size:15px; font-weight:500; color:var(--navy); background:var(--mist);
  padding:11px 20px; border-radius:999px;}
.navy-sec .chip{color:#fff; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);}

/* ── spine cards (Registreren · Communiceren · Factureren) ───────────────── */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px; margin-top:44px;}
.card{background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:30px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:block; color:inherit;}
.card:hover{transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(12,54,90,.4);
  border-color:#d8e2e9; color:inherit;}
.card h3{font-size:20px; margin-bottom:10px; color:var(--navy);}
.card p{font-size:16px;}
.card .arrow-link{margin-top:18px;}


/* ── stat strip ──────────────────────────────────────────────────────────── */
.statstrip{background:var(--mist-soft); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:56px 0;}
.statstrip .row{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:32px;}
.stat .n{font-size:46px; font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1.1;}
.stat .l{font-size:14px; color:var(--slate); letter-spacing:.04em;
  text-transform:uppercase; margin-top:6px;}

/* ── feature splits ──────────────────────────────────────────────────────── */
.feature{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:56px; align-items:center; margin-bottom:40px;}
.feature:last-child{margin-bottom:0;}
.feature.rev .fig{order:-1;}
/* These are product illustrations, not photography — show them whole.
   Cropping to a fixed height cuts the UI they are meant to demonstrate. */
.feature .fig{border-radius:22px; overflow:hidden; background:var(--mist);
  display:flex; align-items:center; justify-content:center;}
.feature .fig img{width:100%; height:auto; display:block;}
.feature h2{margin-top:14px;}
.feature p{margin-bottom:18px;}

/* ── module tiles ────────────────────────────────────────────────────────── */
.modgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:16px; margin-top:44px;}
.modtile{background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:24px 22px; display:flex; align-items:center; gap:14px;
  transition:transform .2s ease, box-shadow .2s ease;}
.modtile:hover{transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(12,54,90,.4);}
.modtile .material-icons{color:var(--amber); font-size:26px;}
.modtile span.label{font-size:16px; font-weight:600; color:var(--navy); letter-spacing:-.01em;}

/* ── integration logo slider ─────────────────────────────────────────────── */
.logoslider{margin-top:40px; overflow:hidden;
  /* fade the logos out at both edges instead of clipping them hard */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.logotrack{display:flex; width:max-content;
  animation:logomarquee var(--marquee,38s) linear infinite;}
.logoslider:hover .logotrack,
.logoslider:focus-within .logotrack{animation-play-state:paused;}
.logorow{display:flex; list-style:none; margin:0; padding:0;}
.logorow li{width:224px; height:104px; display:flex; align-items:center;
  justify-content:center; padding:0 24px; flex-shrink:0;}
/* Constrain on both axes so wide and tall marks land at equal optical weight. */
.logorow img{max-width:100%; max-height:var(--logo-h,46px); width:auto; height:auto;
  object-fit:contain; display:block;}
/* Customer wall: the handoff calls for greyscale-navy marks at equal optical
   weight, so fifteen brand palettes don't fight the navy/amber system.
   Colour returns on hover, which also pauses the marquee. */
.logoslider.muted .logorow img{filter:grayscale(1) contrast(1.1) opacity(.8);
  transition:filter .25s ease;}
.logoslider.muted:hover .logorow img{filter:grayscale(0) opacity(1);}

@keyframes logomarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
  .logoslider{overflow-x:auto;}
  .logotrack{animation:none;}
  .logotrack .logorow[aria-hidden="true"]{display:none;}
}

/* ── review cards ────────────────────────────────────────────────────────── */
.reviewgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px; margin-top:44px;}
.review{background:#fff; border-radius:22px; padding:30px;}
.review p{font-size:16px; color:var(--body);}
.review .who{margin-top:20px; font-size:15px; font-weight:600; color:var(--navy);}
.review .role{font-size:14px; color:var(--slate);}
.review .co{font-size:13px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--burnt); margin-top:4px;}

/* ── pricing ─────────────────────────────────────────────────────────────── */
.tiergrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:24px; margin-top:44px;}
.tier{background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:30px 28px; position:relative; transition:transform .2s ease, box-shadow .2s ease;}
.tier:hover{transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(12,54,90,.4);}
.tier .label{font-size:16px; font-weight:600; color:var(--navy);}
.tier .price{font-size:30px; font-weight:700; color:var(--navy);
  letter-spacing:-.02em; margin:14px 0 8px;}
.tier .note{font-size:15px; color:var(--slate);}
.tier .pop{position:absolute; top:-13px; left:28px; background:var(--amber);
  color:var(--deep); font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 14px; border-radius:999px;}
.tier .arrow-link{margin-top:20px;}
.widecard{background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:34px 36px; margin-top:24px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:32px; align-items:center;}
.widecard h3{margin-bottom:10px;}
.widecard p{font-size:16px;}

/* ── demo / contact ──────────────────────────────────────────────────────── */
.demo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:56px; align-items:start;}
.lines a.line{display:flex; align-items:center; gap:14px; font-size:19px; color:#fff;
  font-weight:500; margin:16px 0;}
.lines a.line:hover{color:#fff;}
.lines a.line:hover .ic{background:rgba(245,147,0,.28);}
.lines .ic{width:44px; height:44px; border-radius:50%; background:rgba(245,147,0,.16);
  display:flex; align-items:center; justify-content:center; color:var(--amber);
  flex-shrink:0; transition:background .2s ease;}
.hours{margin-top:22px; font-size:15px; color:var(--on-navy-eyebrow);}

.form{background:#fff; border-radius:22px; padding:32px 34px;}
.form h3{margin-bottom:6px;}
.form .sub{font-size:15px; color:var(--slate); margin-bottom:8px;}
.form label{display:block; font-size:14px; font-weight:500; color:var(--navy); margin:16px 0 6px;}
.form input,.form textarea,.form select{width:100%; border:1.5px solid var(--line);
  border-radius:12px; padding:12px 14px; font-family:inherit; font-size:16px;
  color:var(--ink); background:#fff;}
.form input:focus,.form textarea:focus,.form select:focus{outline:none; border-color:var(--amber);}
/* Confirmation shown in place of the form once the lead endpoint accepts it. */
.form-note{margin:0; padding:22px 0; font-size:17px; line-height:1.5; color:var(--body);}

/* Honeypot. Off-screen rather than display:none, which some bots skip. Never
   shown to a person, never focusable, and empty when a human submits. */
.form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form .check{display:flex; align-items:flex-start; gap:10px; margin-top:18px;
  font-size:15px; color:var(--body);}
.form .check input{width:auto; margin-top:5px; flex-shrink:0;}
.form .req{color:var(--burnt);}
.form .actions{margin-top:22px;}

/* ── blog ────────────────────────────────────────────────────────────────── */
.featured{background:var(--mist); border-radius:26px; overflow:hidden;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  min-height:320px; align-items:center;}
.featured.no-fig{grid-template-columns:1fr; min-height:0;}
.featured.no-fig .fig{display:none;}
.featured .txt{padding:44px 46px;}
.featured .fig{min-height:320px; height:100%; background:var(--mist-soft);}
.featured .fig img{width:100%; height:100%; min-height:320px; object-fit:cover; display:block;}
.featured h2{font-size:32px; margin:12px 0 14px;}
.featured p{font-size:17px;}

.cat-tag{font-size:13px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--burnt); display:block;}
.post-meta{font-size:14px; color:var(--slate); margin-top:14px;}

.catchips{display:flex; flex-wrap:wrap; gap:10px; margin:44px 0 8px;}
.catchip{font-size:14px; font-weight:500; color:var(--navy); background:var(--mist);
  padding:9px 18px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; font-family:inherit; transition:.2s ease;}
.catchip:hover{border-color:#d8e2e9;}
.catchip.on{background:var(--navy); color:#fff;}

.postgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px; margin-top:24px;}
.postcard{background:#fff; border:1px solid var(--line); border-radius:22px;
  overflow:hidden; display:flex; flex-direction:column; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;}
.postcard:hover{transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(12,54,90,.4); color:inherit;}
/* The newest post is shown in the featured panel, so its grid card stays hidden
   until a category filter is chosen. Hidden here too, so it never flashes in
   before the filter script runs, and stays hidden without JavaScript. */
.postcard.is-featured{display:none;}
.postcard .txt{padding:28px 28px 30px; display:flex; flex-direction:column; flex:1;}
.postcard h3{font-size:20px; margin:10px 0 10px;}
.postcard p{font-size:16px;}
.postcard .post-meta{margin-top:auto; padding-top:16px;}

/* ── blog pagination ─────────────────────────────────────────────────────── */
.pager{display:flex; align-items:center; justify-content:center; gap:8px;
  flex-wrap:wrap; margin-top:48px;}
.pager[hidden]{display:none;}
.pagebtn{min-width:42px; height:42px; padding:0 14px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff; color:var(--navy);
  font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition:.2s ease;}
.pagebtn:hover:not(:disabled):not(.on){border-color:var(--navy);}
.pagebtn.on{background:var(--navy); border-color:var(--navy); color:#fff; cursor:default;}
.pagebtn:disabled{opacity:.4; cursor:default;}
.pagegap{color:var(--slate); padding:0 2px;}

.newsletter{background:var(--navy); border-radius:26px; padding:48px 52px;
  position:relative; overflow:hidden; margin-top:72px;}
.newsletter h2{color:#fff;}
.newsletter p{color:var(--on-navy); max-width:56ch;}
.newsletter .btn{margin-top:26px;}

.empty-note{background:var(--mist-soft); border:1px dashed var(--line);
  border-radius:22px; padding:44px; text-align:center; color:var(--slate); margin-top:32px;}

/* ── article ─────────────────────────────────────────────────────────────── */
.article-hero h1{font-size:46px; line-height:1.12;}
.article-hero .cat-tag{color:var(--amber); margin-bottom:12px;}
.article-hero .meta{font-size:15px; color:var(--on-hero-eyebrow); margin-top:18px;}
.article-fig{max-width:820px; margin:-40px auto 0; border-radius:22px; overflow:hidden;
  position:relative; z-index:2; box-shadow:0 34px 64px -38px rgba(12,54,90,.5);}
.article-fig img{width:100%; height:380px; object-fit:cover; display:block;}

.prose{max-width:820px; margin:0 auto;}
.prose .article-lead{font-size:21px; font-weight:500; color:var(--navy); line-height:1.5;
  margin-bottom:26px;}
.prose p{font-size:18px; color:var(--body); margin-bottom:22px; max-width:62ch;}
.prose h2{font-size:28px; line-height:1.2; margin:44px 0 16px;}
.prose h3{font-size:21px; margin:32px 0 12px;}
.prose ul,.prose ol{list-style:none; margin:0 0 22px;}
.prose ol{counter-reset:li;}
.prose li{padding-left:32px; position:relative; margin:14px 0; font-size:17px;
  color:var(--body); max-width:62ch;}
.prose ul>li:before{content:'✓'; position:absolute; left:0; top:0; color:var(--amber);
  font-weight:700; font-size:18px;}
.prose ol>li{counter-increment:li;}
.prose ol>li:before{content:counter(li) '.'; position:absolute; left:0; top:0;
  color:var(--amber); font-weight:700;}
/* Nested sub-lists sit tighter and use a lighter marker than their parent. */
.prose li>ul,.prose li>ol{margin:10px 0 0;}
.prose li>ul>li{margin:8px 0; font-size:16px;}
.prose li>ul>li:before{content:'–'; color:var(--slate); font-weight:600;}
/* Markdown tables — the invoicing page's company details. Two columns, no
   header row, so the first cell of each row acts as the label. Scrolls inside
   itself on narrow screens rather than widening the page; an IBAN does not
   wrap. */
.prose .table-scroll{overflow-x:auto; margin:0 0 26px;}
.prose table{border-collapse:collapse; width:100%; font-size:17px;}
.prose th{padding:12px 16px; text-align:left; color:var(--navy);
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--line);}
.prose td{padding:12px 16px; border-bottom:1px solid var(--line);
  color:var(--body); vertical-align:top;}
.prose tr td:first-child{color:var(--navy); font-weight:500; white-space:nowrap;
  width:1%; padding-left:0;}
.prose tr:last-child td{border-bottom:0;}
.prose blockquote{background:var(--mist-soft); border-left:4px solid var(--amber);
  border-radius:0 16px 16px 0; padding:26px 30px; margin:32px 0;}
.prose blockquote p{font-size:20px; font-weight:600; color:var(--navy);
  line-height:1.4; margin-bottom:8px;}
.prose blockquote cite{font-size:15px; color:var(--slate); font-style:normal;}
.prose img{max-width:100%; height:auto; border-radius:18px; margin:26px 0; display:block;}
.prose a{color:var(--navy); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(245,147,0,.5);}
.prose a:hover{color:var(--amber);}
.prose strong{font-weight:600; color:var(--navy);}
.prose hr{border:0; border-top:1px solid var(--line); margin:40px 0;}

.article-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:48px;
  padding-top:40px; border-top:1px solid var(--line);}

/* ── legal / plain prose pages ───────────────────────────────────────────── */
.legal .prose h2{font-size:26px;}
.legal .prose ul>li:before{content:'·'; font-size:22px; line-height:1;}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer{background:var(--deep); color:var(--footer-text); padding:56px 0 40px; font-size:15px;}
footer .top{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:40px 56px; align-items:start;}
footer .brandcol img{height:30px; display:block; margin-bottom:16px;}
footer .brandcol p{color:var(--footer-text); font-size:15px; max-width:34ch;}
footer .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:40px; grid-column:2 / -1;}
footer h4{color:#fff; font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:14px;}
footer a{display:block; margin:8px 0; color:var(--footer-text);}
footer a:hover{color:var(--amber);}
/* The CO-MADE lockup ships in navy; the footer needs the knocked-out-white
   colourway, which the brand guidelines allow on dark grounds. */
footer .attrib img{height:34px; width:auto; display:block; margin-bottom:12px;
  filter:brightness(0) invert(1);}
footer .attrib a{display:inline-block;}
footer .attrib a:hover img{opacity:.8;}
footer .attrib .sub{display:block; font-size:14px; margin-top:4px;}
footer .made{margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center;}
footer .made .legal-links{display:flex; gap:20px; flex-wrap:wrap;}
footer .made a{display:inline; margin:0;}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media(max-width:860px){
  section{padding:72px 0;}
  .hero .wrap{grid-template-columns:1fr; padding-top:80px; padding-bottom:84px;}
  .hero-art{display:none;}
  .navy-sec .grid{grid-template-columns:1fr; gap:40px;}
  h2{font-size:30px;}
  .page-hero h1{font-size:38px;}
  .article-hero h1{font-size:34px;}
  .pull{font-size:26px;}
  .featured .txt{padding:32px 30px;}
  .newsletter{padding:36px 30px;}
  footer .cols{grid-column:auto;}
}

@media(max-width:1010px){
  /* Hamburger opens a navy panel, per the handoff's mobile-nav note. */
  .nav-toggle{display:block; order:2; margin-left:auto;}
  .nav .btn{order:3; margin-left:0;}
  .nav-panel{display:none; order:4; width:100%;}
  .nav.open .nav-panel{display:block; background:var(--navy);
    width:calc(100% + 44px); flex-shrink:0; margin:12px -22px -10px; padding:26px 22px 32px;}
  .nav.open .links{flex-direction:column; gap:2px; margin-left:0;}
  .nav.open .links a{padding:10px 0; font-size:18px; color:#fff; opacity:1;}
  .nav.open .login{display:block; padding:10px 0; font-size:18px; color:#fff;
    margin-top:8px; border-top:1px solid rgba(255,255,255,.12);}
  .nav.open .lang-switch{margin-top:16px; padding-top:16px;
    border-top:1px solid rgba(255,255,255,.12);}
  .nav.open .lang{display:none;}
  .nav.open .lang-menu::before{display:none;}   /* no gap to bridge when stacked */
  .nav.open .lang-menu{position:static; display:flex; flex-wrap:wrap; gap:8px 20px;
    background:none; border:0; box-shadow:none; padding:0; min-width:0;}
  .nav.open .lang-menu a,.nav.open .lang-menu .current{padding:4px 0; font-size:16px; color:#fff;}
  .nav.open .lang-menu a:hover{background:none; color:var(--amber);}
  .nav.open .lang-menu .current{color:var(--on-navy-eyebrow);}
  .wrap{padding:0 22px;}
  .prose p,.prose li{max-width:none;}
  .article-fig img{height:240px;}
}

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