/* Signimark colour system
   ------------------------------------------------------------------
   Brand core:    Navy (anchor), Orange (action accent), Blue (primary).
   Surfaces:      white + a single cool off-white. Hairline borders.
   The palette is cool-neutral with a warm orange spark — industrial,
   trustworthy, never playful. Accents are used sparingly. */
:root{
  /* --- Brand --- */
  --navy-deep:   #0A1320;   /* deepest: top utility bar, footer base */
  --navy:        #0F1B2A;   /* anchor: dark bands, headings on light */
  --navy-2:      #16263A;   /* raised band — logos strip, gradient stop */
  --navy-3:      #213447;   /* raised surface / cards on dark */
  --navy-line:   #2A3F58;   /* hairline / card border inside navy bands */

  --orange:      #E77136;   /* action accent: primary CTA, highlights, the dot */
  --orange-d:    #CF5F29;   /* orange hover / pressed */

  --blue:        #1E6CA8;   /* primary: buttons, links, step rules, eyebrows */
  --blue-d:      #185888;   /* blue hover / pressed */
  --blue-light:  #6BA9D8;   /* blue for text/eyebrows/links ON navy */
  --blue-tint:   #EAF1F7;   /* blue wash: quote panels, icon chips */

  /* --- Surfaces --- */
  --bg:          #FFFFFF;   /* page */
  --bg-2:        #F4F6F8;   /* alternating sections, hero, footer */
  --line:        #E2E6EB;   /* hairline borders, dividers */

  /* --- Ink --- */
  --ink:         #0F1B2A;   /* primary text (= navy) */
  --muted:       #5C6776;   /* secondary text, captions */
  --on-dark:     #DBE3EC;   /* body text on navy */
  --on-dark-mut: #9FB0C4;   /* muted text on navy */

  /* --- Semantic aliases --- */
  --text-heading:   var(--navy);
  --text-body:      var(--ink);
  --text-muted:     var(--muted);
  --surface-page:   var(--bg);
  --surface-alt:    var(--bg-2);
  --surface-card:   var(--bg);
  --surface-dark:   var(--navy);
  --border-hair:    var(--line);
  --action-primary: var(--blue);
  --action-accent:  var(--orange);
  --link:           var(--blue);
}

/* Signimark typography
   ------------------------------------------------------------------
   Three families, clear jobs:
   - Space Grotesk  → display & headings (tight tracking, confident)
   - IBM Plex Sans  → body, UI, buttons (humanist, legible at small size)
   - IBM Plex Mono  → eyebrows, labels, spec captions, statutory notes
   Headings run -0.02em tracking, line-height 1.1. Body line-height 1.6.
   Eyebrows are uppercase mono, 0.14em tracking. */
:root{
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale (px) */
  --fs-display:  54px;  /* hero h1 */
  --fs-h2:       40px;  /* section headings */
  --fs-h3:       20px;  /* card / item titles */
  --fs-lede:     18px;  /* hero & intro paragraphs */
  --fs-body:     16px;  /* default body */
  --fs-sm:       14px;  /* secondary / captions */
  --fs-eyebrow:  12px;  /* mono eyebrows & labels */

  /* Weights */
  --fw-reg:    400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.32;
  --lh-body:   1.6;

  /* Tracking */
  --tr-head:    -0.02em;
  --tr-eyebrow:  0.14em;

  /* Semantic */
  --text-display-font: var(--font-display);
  --text-body-font:    var(--font-body);
  --text-mono-font:    var(--font-mono);
}

/* Signimark spacing, radii, shadows, layout
   ------------------------------------------------------------------
   8px base rhythm. Generous section padding (≈92px desktop).
   Soft, low radii (6–16px). Shadows are cool-navy tinted and subtle. */
:root{
  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  92px;   /* vertical section rhythm */

  /* Layout */
  --container: 1200px;
  --gutter:    48px;

  /* Radii */
  --r-sm:   6px;   /* buttons, chips */
  --r-md:   10px;  /* cards, items */
  --r-lg:   14px;  /* quote panel */
  --r-xl:   16px;  /* CTA card */

  /* Borders */
  --bw:   1px;

  /* Shadows (cool navy tint) */
  --shadow-card:  0 14px 36px rgba(15,27,42,.10);
  --shadow-float: 0 12px 30px rgba(15,27,42,.10);

  /* Motion */
  --ease:      cubic-bezier(.2,.6,.2,1);
  --dur-fast:  .15s;
  --dur:       .16s;
}

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;overflow-x:clip;}
  body{font-family:var(--font-body);background:var(--bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;line-height:var(--lh-body);}
  h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--tr-head);line-height:var(--lh-tight);}
  .mono{font-family:var(--font-mono);}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
  .eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--tr-eyebrow);
    text-transform:uppercase;color:var(--blue);font-weight:500;}
  .ph{position:relative;background:repeating-linear-gradient(45deg,#E7EBF0 0 10px,#EFF2F5 10px 20px);
    border:1px solid var(--line);display:flex;align-items:flex-end;}
  .ph span{font-family:var(--font-mono);font-size:11px;color:var(--muted);
    background:#fff;border:1px solid var(--line);padding:5px 9px;margin:12px;}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
    padding:13px 24px;border-radius:var(--r-sm);transition:all var(--dur-fast) var(--ease);cursor:pointer;
    border:0;font-family:inherit;line-height:1.2;-webkit-appearance:none;appearance:none;}
  .btn-primary{background:var(--blue);color:#fff;}
  .btn-primary:hover{background:var(--blue-d);}
  .btn-accent{background:var(--orange);color:#fff;}
  .btn-accent:hover{background:var(--orange-d);}
  .btn-ghost{border:1px solid var(--line);color:var(--ink);background:#fff;}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue);}

  .topbar{background:var(--navy-deep);color:#cdd6e0;font-size:13px;}
  .topbar .wrap{display:flex;justify-content:space-between;height:40px;align-items:center;}
  .topbar .mono{font-size:12px;letter-spacing:.04em;}
  .topbar a{color:#cdd6e0;}.topbar a:hover{color:#fff;}
  .topbar .r{display:flex;gap:24px;align-items:center;}
  .topbar .r .o{color:var(--orange);}

  header{position:sticky;top:0;z-index:50;background:rgba(10,19,32,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--navy-line);}
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px;}
  .nav img{height:60px;}
  .nav .links{display:flex;gap:34px;align-items:center;}
  .nav .links a{font-size:15px;color:var(--on-dark);font-weight:500;transition:color var(--dur-fast) var(--ease);}
  .nav .links a:hover{color:var(--blue-light);}
  .nav .links a.btn-accent{color:#fff;}

  .hero{background:linear-gradient(165deg,var(--navy-deep) 0%,var(--navy) 48%,var(--navy-2) 100%);border-bottom:1px solid var(--navy-line);padding:76px 0 80px;position:relative;overflow:hidden;}
  .hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--orange);opacity:.10;right:-160px;top:-160px;filter:blur(20px);pointer-events:none;}
  .hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;position:relative;z-index:1;}
  .hero .eyebrow{color:var(--blue-light);}
  .hero h1{font-size:var(--fs-display);font-weight:600;margin:18px 0 20px;color:#fff;}
  .hero h1 .o{color:var(--orange);}
  .hero p.lede{font-size:var(--fs-lede);color:var(--on-dark-mut);max-width:500px;margin-bottom:30px;}
  .hero .cta{display:flex;gap:13px;align-items:center;margin-bottom:30px;}
  .hero .btn-ghost{background:transparent;color:#fff;border-color:var(--navy-line);}
  .hero .btn-ghost:hover{border-color:var(--blue-light);color:var(--blue-light);}
  .hero .check{display:flex;gap:24px;flex-wrap:wrap;}
  .hero .check span{font-size:14px;color:var(--on-dark);display:flex;align-items:center;gap:8px;font-weight:500;}
  .hero .check span::before{content:"✓";color:var(--blue-light);font-weight:700;}
  .hero-fig .ph{aspect-ratio:5/4;border-radius:var(--r-md);}
  .hero-fig{position:relative;}
  .hero-fig .float{position:absolute;bottom:-22px;left:-22px;background:#fff;border:1px solid var(--line);
    border-radius:8px;padding:16px 20px;box-shadow:var(--shadow-float);display:flex;gap:14px;align-items:center;}
  .hero-fig .float .ic{width:42px;height:42px;border-radius:6px;background:var(--blue-tint);color:var(--blue);
    display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;}
  .hero-fig .float b{font-family:var(--font-display);font-size:15px;}
  .hero-fig .float small{display:block;color:var(--muted);font-size:12.5px;}

  .logos{padding:30px 0;background:var(--navy-2);border-bottom:1px solid var(--navy-line);}
  .logos .wrap{display:flex;align-items:center;gap:40px;justify-content:space-between;}
  .logos .lbl{font-family:var(--font-mono);font-size:12px;color:var(--on-dark-mut);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
  .logos .set{display:flex;gap:40px;flex-wrap:wrap;color:#fff;font-weight:600;font-size:16px;opacity:.62;}

  section.blk{padding-top:var(--sp-9);padding-bottom:var(--sp-9);}
  .center{text-align:center;max-width:680px;margin:0 auto 58px;}
  .center h2{font-size:var(--fs-h2);font-weight:600;margin:14px 0 16px;}
  .center p{color:var(--muted);font-size:16.5px;}

  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .cat{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);}
  .cat:hover{box-shadow:var(--shadow-card);transform:translateY(-4px);}
  .cat .ph{aspect-ratio:16/10;border:none;border-bottom:1px solid var(--line);}
  .cat .body{padding:22px 24px 26px;}
  .cat .body h3{font-size:19px;font-weight:600;}
  .cat .body p{font-size:14px;color:var(--muted);margin:7px 0 16px;}
  .cat .body a{color:var(--blue);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;}

  .why{background:var(--navy);color:#dbe3ec;}
  .why .center h2{color:#fff;}.why .center p{color:#9fb0c4;}
  .why .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
  .why .item{padding:30px;border:1px solid var(--navy-line);border-radius:var(--r-md);background:rgba(255,255,255,.02);}
  .why .item .ic{width:46px;height:46px;border-radius:8px;background:var(--orange);color:#fff;display:flex;
    align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;margin-bottom:18px;}
  .why .item h3{color:#fff;font-size:20px;font-weight:600;margin-bottom:9px;}
  .why .item p{font-size:14.5px;color:#9fb0c4;}

  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .stp{position:relative;padding-top:18px;border-top:3px solid var(--blue);}
  .stp .n{font-family:var(--font-mono);font-size:13px;color:var(--blue);font-weight:500;}
  .stp h3{font-size:19px;font-weight:600;margin:10px 0 8px;}
  .stp p{font-size:14.5px;color:var(--muted);}

  .quote{background:var(--blue-tint);border-radius:var(--r-lg);padding:56px;display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center;}
  .quote blockquote{font-family:var(--font-display);font-size:26px;font-weight:500;line-height:var(--lh-snug);color:var(--navy);}
  .quote blockquote .o{color:var(--orange);}
  .quote .by{margin-top:22px;font-size:14.5px;color:var(--muted);}
  .quote .by b{color:var(--ink);}
  .quote .stat{text-align:center;border-left:1px solid #c8d8e6;padding-left:50px;}
  .quote .stat .k{font-family:var(--font-display);font-size:58px;font-weight:700;color:var(--blue);line-height:1;}
  .quote .stat .l{font-size:13.5px;color:var(--muted);margin-top:8px;max-width:150px;}

  .ctacard{background:var(--navy);border-radius:var(--r-xl);padding:64px;text-align:center;position:relative;overflow:hidden;}
  .ctacard::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--orange);
    opacity:.16;right:-90px;top:-90px;filter:blur(10px);}
  .ctacard h2{color:#fff;font-size:42px;font-weight:600;position:relative;}
  .ctacard p{color:#9fb0c4;font-size:17px;margin:16px auto 32px;max-width:480px;position:relative;}
  .ctacard .cta{display:flex;gap:13px;justify-content:center;position:relative;}

  footer{background:var(--navy-deep);border-top:1px solid var(--navy-line);padding:60px 0 34px;color:var(--on-dark-mut);}
  footer img{height:56px;margin-bottom:18px;}
  .fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:42px;border-bottom:1px solid var(--navy-line);}
  footer h4{color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px;}
  footer a:hover{color:var(--blue-light);}
  .fp{font-size:14px;max-width:280px;}
  .fbot{display:flex;justify-content:space-between;padding-top:24px;font-size:12.5px;font-family:var(--font-mono);}

/* --- Cross-brand network strip (injected by shared brand-network.js) --- */
  .brand-network{background:var(--navy-deep);border-top:1px solid var(--navy-line);color:var(--on-dark-mut);padding:20px var(--gutter);text-align:center;}
  .brand-network p{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-mut);margin-bottom:12px;}
  .brand-network ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;max-width:var(--container);margin:0 auto;font-size:13.5px;}
  .brand-network a{color:var(--blue-light);font-weight:var(--fw-med);}
  .brand-network a:hover{color:#fff;}

/* --- Brand link + mobile nav toggle --- */
.nav .brand{display:inline-flex;align-items:center;}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:transparent;border:0;cursor:pointer;padding:10px;}
.nav-toggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* --- Generic helpers reused by content pages --- */
.section-alt{background:var(--bg-2);}
.prose{max-width:720px;}
.prose p{color:var(--muted);font-size:16.5px;margin:0 0 18px;}
.prose h2,.prose h3{font-size:22px;font-weight:600;margin:30px 0 10px;}
.lead-on-dark{color:var(--on-dark-mut);}

/* --- Catalogue category section --- */
.catrow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:54px 0;border-top:1px solid var(--line);}
.catrow:first-of-type{border-top:0;}
.catrow.rev .catrow-media{order:2;}
.catrow .ph{aspect-ratio:4/3;border-radius:var(--r-md);}
.catrow h2,.catrow h3{font-size:26px;font-weight:600;margin:10px 0 12px;}
.catrow p{color:var(--muted);margin-bottom:16px;}
.catrow ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.catrow ul li{font-family:var(--font-mono);font-size:12px;color:var(--blue);background:var(--blue-tint);
  border-radius:var(--r-sm);padding:6px 10px;}

/* --- FAQ accordion --- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{cursor:pointer;list-style:none;padding:22px 0;font-family:var(--font-display);
  font-size:18px;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;gap:20px;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--blue);font-size:24px;font-weight:400;line-height:1;}
.faq-item[open] summary::after{content:"–";}
.faq-item .a{padding:0 0 22px;color:var(--muted);max-width:760px;}

/* --- Forms --- */
.formwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px;}
.field .req{color:var(--orange);}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:15px;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:border-color var(--dur) var(--ease);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,108,168,.12);}
.field textarea{min-height:130px;resize:vertical;}
.field input[type=file]{padding:9px;background:var(--bg-2);}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);}
.consent input{width:auto;margin-top:3px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{font-size:14px;margin-top:14px;border-radius:var(--r-sm);padding:0;}
.form-status.ok{color:#1d6f3b;background:#e8f5ec;padding:12px 14px;}
.form-status.err{color:#a3271f;background:#fbeae8;padding:12px 14px;}
.contact-aside{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:30px;}
.contact-aside h3{font-size:18px;font-weight:600;margin-bottom:8px;}
.contact-aside p,.contact-aside a{font-size:14.5px;color:var(--muted);}
.contact-aside .row{padding:14px 0;border-top:1px solid var(--line);}
.contact-aside .row:first-of-type{border-top:0;}
.contact-aside .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:4px;}

/* --- Page hero (compact, for inner pages) --- */
.pagehead{background:linear-gradient(165deg,var(--navy-deep),var(--navy) 70%);border-bottom:1px solid var(--navy-line);padding:56px 0;}
.pagehead h1{color:#fff;font-size:42px;font-weight:600;margin:14px 0 12px;}
.pagehead p{color:var(--on-dark-mut);font-size:18px;max-width:620px;}
.pagehead .eyebrow{color:var(--blue-light);}

/* --- Responsive --- */
@media (max-width:1024px){
  :root{--gutter:32px;--fs-display:44px;--fs-h2:34px;}
  .hero .wrap{gap:40px;}
  .why .grid,.cats{gap:18px;}
}
@media (max-width:880px){
  .nav-toggle{display:flex;position:relative;z-index:70;}
  /* header's backdrop-filter would become the containing block for the fixed drawer,
     clipping it to the header box — disable it here so the drawer fills the viewport. */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;}
  .nav .links{position:fixed;inset:0 0 0 auto;width:min(82vw,320px);flex-direction:column;align-items:flex-start;
    gap:4px;background:var(--navy-deep);padding:90px 28px 28px;transform:translateX(100%);
    transition:transform var(--dur) var(--ease);box-shadow:-12px 0 30px rgba(0,0,0,.3);z-index:60;}
  .nav .links.open{transform:translateX(0);}
  .nav .links a:not(.btn){font-size:18px;padding:10px 0;width:100%;}
  .nav .links a.btn-accent{margin-top:12px;}
  body.nav-open{overflow:hidden;}
  .hero .wrap,.cats,.why .grid,.steps,.formwrap,.catrow{grid-template-columns:1fr;}
  .catrow.rev .catrow-media{order:0;}
  .quote{grid-template-columns:1fr;padding:36px;gap:28px;}
  .quote .stat{border-left:0;border-top:1px solid #c8d8e6;padding-left:0;padding-top:24px;}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px;}
  .topbar .wrap{font-size:12px;}
  .topbar .r{gap:14px;}
}
@media (max-width:600px){
  :root{--gutter:20px;--fs-display:34px;--fs-h2:28px;--sp-9:64px;}
  .topbar .mono{display:none;}
  .topbar .wrap{justify-content:center;}
  .hero{padding:48px 0 56px;}
  .hero-fig .float{left:0;bottom:-16px;}
  .ctacard,.quote{padding:32px 22px;}
  .ctacard h2{font-size:30px;}
  .fgrid{grid-template-columns:1fr;}
  .logos .wrap{flex-direction:column;align-items:flex-start;gap:14px;}
  .fbot{flex-direction:column;gap:8px;}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}
@media (forced-colors:active){
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid ButtonText;}
}

/* Images filling .ph placeholder/photo boxes */
.ph{overflow:hidden;}
.ph img{display:block;width:100%;height:100%;object-fit:cover;}

/* Catalog-style product photos: square 1200x1200 images on a white canvas with
   the product centered and its own padding. Use `contain` on a white tile so the
   whole product stays visible (never clipped) whatever the tile aspect ratio,
   and drop the placeholder stripe/border. */
.ph.photo{background:#fff;}
.ph.photo img{object-fit:contain;}

/* Ghost button on dark CTA cards */
.ctacard .btn-ghost{background:transparent;color:#fff;border-color:#3a4d64;}
.ctacard .btn-ghost:hover{border-color:var(--blue-light);color:var(--blue-light);}

.section-end{padding-bottom:96px;}

/* Two-column prose sections (about, materials, acrylic) — single column on mobile */
.prose-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;max-width:none;}
@media (max-width:880px){.prose-cols{grid-template-columns:1fr;}}

/* Eyebrow accent on dark "why" band */
.why .eyebrow{color:var(--orange);}