/* ============================================================
   Orionesque — shared.css
   Variables · Reset · Nav · Footer · Buttons · CTA · Utils
   Fonts: IBM Plex Serif + IBM Plex Mono via Google Fonts
============================================================ */
:root {
  --paper:  #f4f2ed;
  --paper2: #eceae3;
  --ink:    #1B2A3B;
  --ink2:   #2D3748;
  --blue:   #2E6BC4;
  --blue2:  #1B3A6B;
  --blue3:  #5B9FE8;
  --muted:  #7a8499;
  --grid:   rgba(46,107,196,0.055);
  --rule:   rgba(46,107,196,0.15);
  --nav-h:  60px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:'IBM Plex Serif',serif;font-weight:300;line-height:1.7;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(rgba(46,107,196,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(46,107,196,0.025) 1px,transparent 1px);background-size:200px 200px,200px 200px,40px 40px,40px 40px;pointer-events:none;z-index:0;}

/* NAV */
nav.main-nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:rgba(244,242,237,0.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);}
.nav-logo{display:flex;align-items:center;text-decoration:none;cursor:pointer;}
#navLogoCanvas{display:block;width:190px;height:48px;}
.nav-links{display:flex;gap:0;list-style:none;}
.nav-links a{display:block;padding:0.5rem 1.1rem;font-family:'IBM Plex Mono',monospace;font-size:0.7rem;font-weight:300;letter-spacing:0.06em;color:var(--muted);text-decoration:none;border-left:1px solid var(--rule);transition:color 0.2s,background 0.2s;}
.nav-links li:last-child a{border-right:1px solid var(--rule);}
.nav-links a:hover{color:var(--blue);background:rgba(46,107,196,0.04);}
.nav-links .nav-cta a{color:var(--blue);}
.nav-links .nav-cta a:hover{background:var(--blue);color:#fff;}
.nav-links .nav-active a{color:var(--blue);}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:1px solid var(--rule);cursor:pointer;padding:6px;}
.nav-burger span{display:block;width:100%;height:1px;background:var(--ink);transition:transform 0.25s,opacity 0.25s;}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav-drawer{display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:190;background:rgba(244,242,237,0.98);border-bottom:1px solid var(--rule);backdrop-filter:blur(10px);flex-direction:column;}
.nav-drawer.open{display:flex;}
.nav-drawer a{display:block;padding:1rem 2rem;font-family:'IBM Plex Mono',monospace;font-size:0.85rem;letter-spacing:0.06em;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule);transition:color 0.2s,background 0.2s;}
.nav-drawer a:hover{color:var(--blue);background:rgba(46,107,196,0.04);}
.nav-drawer a.drawer-cta{color:var(--blue);font-weight:400;}

/* FOOTER */
.site-footer{padding:2rem 3rem;display:flex;align-items:center;justify-content:space-between;background:var(--ink);position:relative;z-index:1;border-top:1px solid rgba(91,159,232,0.12);gap:2rem;flex-wrap:wrap;}
.footer-links{display:flex;gap:0;list-style:none;flex-wrap:wrap;}
.footer-links a{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.06em;color:rgba(255,255,255,0.25);text-decoration:none;padding:0 1rem;border-right:1px solid rgba(255,255,255,0.08);transition:color 0.2s;}
.footer-links li:first-child a{padding-left:0;}
.footer-links a:hover{color:rgba(255,255,255,0.6);}
.site-footer p{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.06em;color:rgba(255,255,255,0.2);}

/* LOGO SVG COLOURS (footer static SVG) */
.logo-svg .ea{stroke:#2E6BC4;stroke-width:1;fill:none;opacity:0.55;}
.logo-svg .eb{stroke:#5B9FE8;stroke-width:0.8;fill:none;opacity:0.35;}
.logo-svg .na{fill:#1B3A6B;} .logo-svg .nb{fill:#2E6BC4;} .logo-svg .nc{fill:#5B9FE8;}
.logo-svg .wm{font-family:Georgia,serif;fill:#1B2A3B;font-size:42px;font-weight:400;letter-spacing:-0.5px;}
.logo-svg-inv .wm{fill:#e8edf5;} .logo-svg-inv .na{fill:#93C5FD;} .logo-svg-inv .nb{fill:#60A5FA;} .logo-svg-inv .nc{fill:#BFDBFE;}
.logo-svg-inv .ea{stroke:#60A5FA;opacity:0.5;} .logo-svg-inv .eb{stroke:#93C5FD;opacity:0.3;}

/* BUTTONS */
.btn-primary{display:inline-block;padding:0.8rem 1.8rem;background:var(--blue);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.08em;text-decoration:none;border:1px solid var(--blue);transition:background 0.2s,transform 0.15s;white-space:nowrap;}
.btn-primary:hover{background:var(--blue2);border-color:var(--blue2);transform:translateY(-1px);}
.btn-ghost{display:inline-block;padding:0.8rem 1.8rem;background:transparent;color:var(--blue);font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.08em;text-decoration:none;border:1px solid var(--rule);transition:border-color 0.2s,color 0.2s;white-space:nowrap;}
.btn-ghost:hover{border-color:var(--blue);}

/* CTA SECTION */
.cta{border-top:1px solid var(--rule);background:var(--blue2);position:relative;overflow:hidden;z-index:1;}
.cta::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(91,159,232,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(91,159,232,0.07) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;}
.cta-inner{position:relative;z-index:1;max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:4rem;align-items:center;padding:5rem 3rem;}
.cta-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue3);margin-bottom:1rem;}
.cta h2{color:#e8edf5;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;line-height:1.2;margin-bottom:1rem;letter-spacing:-0.02em;}
.cta h2 em{font-style:italic;color:var(--blue3);}
.cta-left p{font-size:1rem;color:rgba(232,237,245,0.6);line-height:1.8;}
.cta-actions{display:flex;flex-direction:column;gap:0.75rem;align-items:flex-start;flex-shrink:0;}
.btn-cta-primary{display:inline-block;padding:0.9rem 2rem;background:var(--blue3);color:var(--blue2);font-family:'IBM Plex Mono',monospace;font-size:0.72rem;font-weight:400;letter-spacing:0.08em;text-decoration:none;border:1px solid var(--blue3);white-space:nowrap;transition:background 0.2s,color 0.2s;}
.btn-cta-primary:hover{background:#fff;color:var(--blue2);border-color:#fff;}
.btn-cta-ghost{display:inline-block;padding:0.9rem 2rem;background:transparent;color:rgba(232,237,245,0.7);font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.08em;text-decoration:none;border:1px solid rgba(91,159,232,0.3);white-space:nowrap;transition:border-color 0.2s,color 0.2s;}
.btn-cta-ghost:hover{border-color:var(--blue3);color:var(--blue3);}

/* SHARED ATOMS */
.article-tag{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);background:rgba(46,107,196,0.08);padding:0.2rem 0.55rem;border:1px solid rgba(46,107,196,0.2);}
.article-date{font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.08em;color:var(--muted);}
.section-num{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;color:var(--blue3);letter-spacing:0.1em;flex-shrink:0;}
.section-inner{max-width:1140px;margin:0 auto;padding:5rem 3rem;}
.section-header{display:flex;align-items:baseline;gap:1.5rem;margin-bottom:3rem;padding-bottom:1rem;border-bottom:1px solid var(--rule);}
.section-header h2{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:300;letter-spacing:-0.01em;}
.breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.08em;color:var(--muted);margin-bottom:1.75rem;}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb span{margin:0 0.5rem;opacity:0.5;}
.page-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue3);margin-bottom:0.75rem;opacity:0.8;}

/* ANIMATIONS */
@keyframes fade-up{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}

/* RESPONSIVE SHARED */
@media(max-width:900px){
  nav.main-nav{padding:0 1.5rem;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .cta-inner{grid-template-columns:1fr;gap:2.5rem;}
  .cta-actions{flex-direction:row;flex-wrap:wrap;}
  .section-inner{padding:3.5rem 2rem;}
}
@media(max-width:600px){
  nav.main-nav{padding:0 1.25rem;}
  #navLogoCanvas{width:150px;height:38px;}
  .cta-inner{padding:3rem 1.25rem;}
  .cta-actions{flex-direction:column;width:100%;}
  .btn-cta-primary,.btn-cta-ghost{width:100%;text-align:center;}
  .site-footer{flex-direction:column;align-items:flex-start;padding:2rem 1.25rem;gap:1.25rem;}
  .footer-links a{padding:0.4rem 0.8rem 0.4rem 0;border-right:none;}
  .section-inner{padding:3rem 1.25rem;}
}
@media(max-width:380px){#navLogoCanvas{width:130px;height:33px;}}

/* ============================================================
   ACCESSIBILITY ADDITIONS
   - Colour contrast fixes
   - Focus-visible rings
   - Skip link
   - Reduced motion
============================================================ */

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  padding: 0.6rem 1.2rem;
  background: var(--blue);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 2px solid #fff;
  transition: top 0.1s;
}
.skip-link:focus { top: 1rem; }

/* Focus-visible rings — consistent across all interactive elements */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
/* Remove default outline only when focus-visible is supported */
:focus:not(:focus-visible) { outline: none; }

/* Nav links need contrast-safe colour — darken --muted for small text */
/* #5e6a7a on #f4f2ed = 4.6:1 — passes AA for normal text */
.nav-links a       { color: #5e6a7a; }
.nav-drawer a      { color: #5e6a7a; }
.footer-links a    { color: rgba(255,255,255,0.45); } /* was 0.25 — too low on dark */
.breadcrumb        { color: #5e6a7a; }
.breadcrumb a      { color: #5e6a7a; }
.article-date      { color: #5e6a7a; }

/* Section numbers / eyebrows — use --blue (not blue3) on light backgrounds */
/* #2E6BC4 on #f4f2ed = 4.8:1 passes AA */
.section-num       { color: var(--blue); }
.page-eyebrow      { color: var(--blue); opacity: 1; }
.service-tag       { color: var(--blue); }
.t-mark            { color: var(--blue); }
.work-tag          { color: var(--blue); }
.article-tag       { color: var(--blue); }
.sidebar-label     { color: var(--blue); }
.form-eyebrow      { color: var(--blue); }

/* Form labels — sufficient contrast on light bg */
/* Override the blue3 + opacity pattern used in contact.html inline styles */
.form-field label  { color: var(--blue); opacity: 1; }

/* Stat labels — small uppercase text needs stronger colour */
.stat-label        { color: #5e6a7a; }

/* Breadcrumb separator */
.breadcrumb span   { opacity: 1; color: #9ca3af; }

/* Button focus rings */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-cta-primary:focus-visible,
.btn-cta-ghost:focus-visible,
.btn-submit:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Form field focus — blue underline already exists; add outline too */
.form-field:focus-within { outline: none; } /* handled by ::after underline */
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }

/* Nav burger */
.nav-burger:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Form error state — icon + colour (not colour alone) */
.form-field.error label::after {
  content: ' *';
  color: #b91c1c;
  font-weight: 400;
}
.form-field.error input,
.form-field.error textarea { background: rgba(185,28,28,0.04); }
.form-field.error::after   { background: #b91c1c; transform: scaleX(1); }
.form-check.error          { background: rgba(185,28,28,0.04); }
.form-check.error::before  {
  content: '⚠ Please tick to consent';
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: #b91c1c;
  margin-bottom: 0.4rem;
  width: 100%;
}

/* Reduced motion — pause all canvas-related CSS animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}