/* ════════════════════════════════════════════════════════════
   PAPER VIEW: the "typed field report" look, switchable site-wide.
   Every page loads this file; it only takes effect when <html> has
   the class "paper". The class is set by the small inline script in
   each page's <head> (so there is no flash of the dark site) and by
   the toggle button that assets/paper.js adds to the menu bar.

   Look: engineering-grid paper, neat pencil lines, typewriter text
   (Courier Prime), typed headings (Special Elite) and handwritten
   auditor's notes (Caveat). Palette: graphite + brand green only.
   ════════════════════════════════════════════════════════════ */

/* ── The switch button (shown in both views) ───────────────── */
.view-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: none; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(242,234,211,0.35); border-radius: 9999px;
  color: var(--text-2); padding: 0.42rem 0.95rem;
  font: 500 0.78rem/1 'Inter', sans-serif; letter-spacing: 0.02em;
  transition: border-color 0.2s, background 0.2s;
}
.view-toggle:hover { border-color: rgba(242,234,211,0.75); background: rgba(255,255,255,0.05); }
.view-toggle:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }
.view-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 800px) { .view-toggle { margin-left: auto; margin-right: 0.8rem; } }
@media (max-width: 1180px) and (min-width: 801px) { .view-toggle { padding: 0.4rem 0.7rem; } .view-toggle span { display: none; } }

/* Annotations exist only in paper view */
.sk-note { display: none; }

/* ════════════════════════════════════════════════════════════
   Everything below applies to paper view only
   ════════════════════════════════════════════════════════════ */
html.paper {
  --paper: #fbfaf5;
  --graphite: #26262b;
  --graphite-2: #3d3d43;
  --graphite-soft: rgba(38,38,43,0.35);
  --green: #148a5c;
  --grid: rgba(20,138,92,0.075);
  --grid-major: rgba(20,138,92,0.15);
  --highlight: rgba(16,185,129,0.30);
  --tape: rgba(232,222,182,0.85);
  --wobble: 14px 6px 12px 7px / 6px 12px 7px 14px;

  /* the dark site's variables, remapped to paper and pencil */
  --black: transparent;
  --dark: transparent;
  --surface: transparent;
  --surface2: transparent;
  --glass: transparent;
  --glass-hover: rgba(255,255,255,0.6);
  --border: var(--graphite-soft);
  --amber: var(--graphite);
  --amber-dim: var(--graphite);
  --secondary: var(--graphite);
  --tertiary: var(--green);
  --text: var(--graphite);
  --text-2: var(--graphite);
  --muted: var(--graphite-2);
  --light: var(--graphite-2);
}

html.paper body {
  position: relative;
  min-height: 100vh;
  color: var(--graphite);
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .3  0 0 0 0 .25  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 260px 260px, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  text-shadow: 0 0 0.5px rgba(38,38,43,0.35);
}
/* soft aged edges (no crease: pages vary in length, a fixed fold would land randomly) */
html.paper body::after {
  content: ""; position: absolute; inset: 0; z-index: 90; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 65%, rgba(120,100,60,0.06) 100%);
}
html.paper section, html.paper #audit-counter-strip, html.paper .cred-strip { background: transparent !important; border-color: var(--graphite-soft) !important; }

/* ── Type ─────────────────────────────── */
html.paper body,
html.paper body * { font-family: 'Courier Prime', 'Courier New', monospace !important; }

html.paper h1, html.paper h2, html.paper h3, html.paper h4,
html.paper .cred-card-title, html.paper .resource-title, html.paper .hero-c-title,
html.paper .irca-modal-title, html.paper .qp-modal-title,
html.paper .why-item-title, html.paper .testimonial-name, html.paper .stat-num, html.paper .counter-number,
html.paper .step-num, html.paper .service-num, html.paper summary,
html.paper .nav-logo, html.paper .footer-logo,
html.paper h1 *, html.paper h2 *, html.paper h3 *, html.paper summary * {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--graphite) !important;
  font-style: normal !important;
}
html.paper h1 { line-height: 1.08 !important; }
html.paper h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.12; }
/* main section headings get a green pencil underline */
html.paper section > h2, html.paper .about-text > h2, html.paper .why-inner h2, html.paper .home-seo h2,
html.paper #credentials h2, html.paper .insight-header h1, html.paper .insights-index h1 {
  width: fit-content; padding-bottom: 0.6rem;
  background: no-repeat left bottom / 100% 12px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M3 8 C 70 4, 140 11, 210 6 S 280 5, 297 7' fill='none' stroke='%23148a5c' stroke-width='2.2' stroke-linecap='round' opacity='.85'/></svg>");
}
html.paper h1 .accent, html.paper h1 a.accent { font-style: normal !important; }
html.paper .section-tag, html.paper .hero-kicker { color: var(--green) !important; letter-spacing: 0.18em !important; font-weight: 700; }
html.paper p, html.paper li { font-weight: 400 !important; }
html.paper strong, html.paper b { color: var(--graphite) !important; font-weight: 700 !important; }

/* handwriting: the auditor's notes only */
html.paper .sk-note {
  display: block;
  font-family: 'Caveat', cursive !important;
  font-size: 1.3rem; font-weight: 500; line-height: 1.1; color: var(--green);
  text-shadow: none; pointer-events: none;
}
html.paper .sk-note-intro { margin-top: 0.6rem; transform: rotate(-1.5deg); width: fit-content; }
html.paper .cred-card .sk-note, html.paper .step-card .sk-note {
  position: absolute; top: -0.95rem; right: 0.8rem;
  background: var(--paper); padding: 0 0.4rem; transform: rotate(3deg);
}
html.paper .sk-circle { position: relative; white-space: nowrap; color: var(--graphite); font-weight: 700; }
html.paper .sk-circle::after {
  content: ""; position: absolute; inset: -5px -6px -4px -7px;
  border: 1.6px solid var(--green); border-radius: 50% 46% 52% 48% / 55% 50% 48% 52%;
  transform: rotate(-3deg); filter: url(#pencil-line); opacity: 0.85;
}
html.paper .sk-note-verify { margin-top: 1.4rem; text-align: center; }
html.paper .sk-note-verify svg { display: block; margin: 0.15rem auto -0.6rem; width: 46px; height: 34px; }

/* ── Links ─────────────────────────────── */
html.paper a { color: var(--graphite); }
html.paper .cred-card-link, html.paper .qp-download, html.paper .insight-card-link,
html.paper .home-seo p a, html.paper .hero-cred-link, html.paper .pillar-sublink,
html.paper .insight-body a, html.paper .testimonial-note a, html.paper #insights-grid a,
html.paper #pillars a span, html.paper #pillars .stretch-link {
  color: var(--graphite) !important; opacity: 1; font-weight: 700 !important;
  text-decoration: none !important;
  background-image: linear-gradient(transparent 58%, var(--highlight) 58%, var(--highlight) 92%, transparent 92%);
  background-repeat: no-repeat;
}
html.paper .cred-card-link { display: block !important; width: fit-content; max-width: 100%; font-size: 0.85rem; letter-spacing: 0 !important; padding: 0 0.15rem; }
html.paper .cred-card-link[href^="mailto"] { font-size: 0.76rem; letter-spacing: -0.03em !important; white-space: nowrap; }

/* ── Cards and panels: one neat pencil line ─────────────── */
html.paper .stat-card, html.paper .testimonial-card, html.paper .service-card,
html.paper .cred-card, html.paper .principle-card, html.paper .why-cta-box,
html.paper .step-card, html.paper .irca-modal, html.paper .insight-card,
html.paper .at-settings-panel, html.paper #insights-grid > div,
html.paper #pillars > div > a, html.paper #pillars .pillar-card-stretch {
  background: rgba(251,250,245,0.82) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1.6px solid rgba(38,38,43,0.8) !important;
  border-radius: var(--wobble) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html.paper .stat-card::before, html.paper .testimonial-card::before, html.paper .service-card::before,
html.paper .cred-card::before, html.paper .principle-card::before, html.paper .why-cta-box::before,
html.paper .step-card::before, html.paper .cred-card::after, html.paper .service-card::after { display: none !important; }
html.paper .stat-card:hover, html.paper .testimonial-card:hover, html.paper .service-card:hover,
html.paper .cred-card:hover, html.paper .principle-card:hover, html.paper .step-card:hover,
html.paper .insight-card:hover, html.paper #insights-grid > div:hover, html.paper #pillars > div > a:hover,
html.paper #pillars .pillar-card-stretch:hover {
  background: rgba(255,255,255,0.95) !important; transform: none !important;
}
html.paper .step-card.featured { background: rgba(16,185,129,0.07) !important; }
html.paper .why-cta-box { position: relative !important; }

/* hairline grids become spaced cards */
html.paper .credentials-grid, html.paper .principles-grid, html.paper .services-grid,
html.paper .insights-grid, html.paper #insights-grid, html.paper #pillars > div,
html.paper .how-grid, html.paper .about-stats {
  background: transparent !important; border: none !important; gap: 24px !important;
}
html.paper .credentials-grid { margin-top: 3rem; }

/* icon tiles and ticks */
html.paper .principle-icon, html.paper .service-icon, html.paper .why-check, html.paper .contact-icon {
  background: transparent !important; border: 1.5px solid var(--graphite) !important; border-radius: 6px !important;
}
html.paper .principle-icon svg, html.paper .service-icon svg, html.paper .why-check svg, html.paper .contact-icon svg { stroke: var(--green) !important; }
html.paper .cred-card-title::before { color: var(--green) !important; }

/* logos: our own mark redrawn in graphite; third-party logos untouched, taped on */
html.paper img[src*="logo.png"] { filter: invert(0.86); }
html.paper .cred-card > div:has(> img[alt*="Chartered Institute"]) { position: relative; }
html.paper .cred-card img[alt*="Chartered Institute"] { transform: rotate(-1.5deg); box-shadow: 0 2px 6px rgba(40,30,10,0.22); }
html.paper .cred-card > div:has(> img[alt*="Chartered Institute"])::after {
  content: ""; position: absolute; top: -7px; left: 34px; width: 46px; height: 15px;
  background: var(--tape); transform: rotate(-4deg); box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
html.paper .cred-card span[style*="Playfair"] { font-size: 1.5rem !important; font-weight: 700 !important; }
html.paper .cred-card > div[style*="245,166,35"] { background: transparent !important; border: 1.5px solid var(--graphite) !important; border-radius: 4px !important; }
html.paper .cred-card > div[style*="245,166,35"] span { color: var(--graphite) !important; letter-spacing: 0.1em !important; font-weight: 700 !important; }
html.paper .cred-card-desc { font-size: 0.9rem; line-height: 1.6; color: var(--graphite-2); }
html.paper .cred-card-title { font-size: 1.3rem; line-height: 1.25; }

/* ── Buttons: pencil outline, highlighter fill ── */
html.paper .btn-primary, html.paper .nav-cta, html.paper .irca-verify-btn, html.paper .btn-dark,
html.paper #resource a[href*="linkedin"] {
  background: linear-gradient(100deg, rgba(16,185,129,0) 2%, rgba(16,185,129,0.34) 5%, rgba(16,185,129,0.28) 95%, rgba(16,185,129,0) 98%) !important;
  color: var(--graphite) !important;
  border: 1.6px solid var(--graphite) !important;
  border-radius: var(--wobble) !important;
  box-shadow: none !important;
  font-weight: 700 !important; letter-spacing: 0.04em !important;
  text-decoration: none !important;
}
html.paper .btn-primary:hover, html.paper .nav-cta:hover, html.paper .irca-verify-btn:hover, html.paper .btn-dark:hover,
html.paper #resource a[href*="linkedin"]:hover {
  background: linear-gradient(100deg, rgba(16,185,129,0) 2%, rgba(16,185,129,0.55) 5%, rgba(16,185,129,0.48) 95%, rgba(16,185,129,0) 98%) !important;
  color: var(--graphite) !important; box-shadow: none !important; transform: translateY(-1px) !important;
}
html.paper .btn-secondary, html.paper .nav-phone {
  background: transparent !important; color: var(--graphite) !important;
  border: 1.5px solid var(--graphite-soft) !important; border-radius: var(--wobble) !important; box-shadow: none !important;
}
html.paper .btn-secondary:hover, html.paper .nav-phone:hover { border-color: var(--graphite) !important; }

/* ── Nav ─────────────────────────────── */
html.paper nav { background: rgba(251,250,245,0.95) !important; backdrop-filter: none !important; border-bottom: 1.5px solid rgba(38,38,43,0.5) !important; }
html.paper .nav-links a { color: var(--graphite-2) !important; letter-spacing: 0.06em !important; }
html.paper .nav-links a:hover { color: var(--green) !important; }
html.paper .hamburger span { background: var(--graphite) !important; }
html.paper .nav-links.open { background: var(--paper) !important; border-bottom: 1.5px solid var(--graphite-soft) !important; }
html.paper .view-toggle { color: var(--graphite); border: 1.5px solid var(--graphite); border-radius: var(--wobble); background: var(--paper); }
html.paper .view-toggle:hover { background: rgba(16,185,129,0.15); }

/* ── Tape labels ─────────────────────────────── */
html.paper .stripe, html.paper .cred-badge {
  background: var(--tape) !important; color: #4f4630 !important;
  border: none !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  clip-path: polygon(1.5% 0, 98.5% 3%, 100% 50%, 98% 100%, 2% 97%, 0 52%);
  font-weight: 700; letter-spacing: 0.1em;
}
html.paper .stripe { padding: 0.35rem 1.3rem !important; transform: rotate(-2deg) translateY(-0.4rem); }

/* ── Home page ─────────────────────────────── */
html.paper #hero { min-height: 0 !important; padding-top: 8rem !important; padding-bottom: 4rem !important; }
html.paper .home-hero-shade, html.paper .hero-grid { display: none !important; }
/* the photo: a black-and-white print taped to the page */
html.paper .home-hero-img {
  inset: auto !important; top: 7.5rem !important; right: 6% !important;
  width: min(34vw, 430px) !important; height: auto !important; aspect-ratio: 4 / 5;
  object-position: 60% 25% !important;
  filter: grayscale(1) contrast(1.05) brightness(1.05);
  border: 10px solid #fff; box-shadow: 0 4px 14px rgba(40,30,10,0.25);
  transform: rotate(2deg); z-index: 1 !important;
}
html.paper #hero:has(.home-hero-img)::after {
  content: ""; position: absolute; z-index: 3; top: 6.6rem; right: calc(6% + min(17vw, 215px) - 45px);
  width: 90px; height: 26px; background: var(--tape); transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
html.paper .sk-photo-caption {
  position: absolute; z-index: 3; right: 7%; top: calc(7.5rem + min(34vw, 430px) * 1.25 + 1.2rem);
  transform: rotate(-2deg);
}
html.paper .home-h1 { margin-top: 0 !important; font-size: clamp(2.4rem, 5.6vw, 80px) !important; }
html.paper .home-h1 .accent { text-decoration: none; }
/* coloured headline words keep their brand colour as a highlighter stroke */
html.paper h1 .accent[style*="E5484D"] { box-shadow: inset 0 -0.18em 0 rgba(229,72,77,0.35); }
html.paper h1 .accent[style*="F68B1F"] { box-shadow: inset 0 -0.18em 0 rgba(246,139,31,0.35); }
html.paper h1 .accent[style*="10B981"] { box-shadow: inset 0 -0.18em 0 rgba(16,185,129,0.35); }
html.paper .home-lead { color: var(--graphite) !important; font-family: 'Special Elite', monospace !important; font-weight: 400 !important; }
html.paper .hero-sub { color: var(--graphite-2) !important; }
html.paper .home-stats, html.paper .ol-stats { color: var(--graphite-2) !important; }
html.paper #pillars .pillar-card-stretch, html.paper #pillars > div > a { padding: 2.2rem 1.9rem !important; }
html.paper .home-pillar-h { font-size: 1.45rem !important; line-height: 1.25 !important; }
html.paper #pillars .stretch-link, html.paper #pillars .pillar-sublink, html.paper #pillars > div > a > span { display: inline-block !important; width: fit-content; }
html.paper .home-seo-list li { color: var(--graphite-2) !important; }
html.paper .home-seo-list li::before { background: var(--green) !important; }

/* ── O Licence Audit page ─────────────────────────────── */
html.paper .counter-number { color: var(--graphite) !important; }
html.paper .counter-label { color: var(--green) !important; font-weight: 700; letter-spacing: 0.12em; }
html.paper .about-name img { filter: grayscale(1); border: 8px solid #fff !important; border-radius: 4px !important; box-shadow: 0 3px 10px rgba(40,30,10,0.22); transform: rotate(-2deg); }
html.paper .svc-quote { border-left: 3px solid var(--green) !important; color: var(--graphite) !important; background: transparent !important; }
html.paper .svc-list li::before, html.paper .svc-steps li::before { color: var(--green) !important; border-color: var(--green) !important; }
html.paper .svc-list li::before { background: var(--green) !important; }
html.paper .svc-cycle span:not(.svc-cycle-arrow) { background: transparent !important; border: 1.5px solid var(--graphite) !important; border-radius: var(--wobble) !important; color: var(--graphite) !important; }
html.paper .svc-cycle-arrow { color: var(--green) !important; }
html.paper .svc-scope { background: transparent !important; border: 1.5px dashed var(--graphite-soft) !important; }
html.paper .star { background: var(--green) !important; }
html.paper .testimonial-avatar, html.paper .about-avatar { background: transparent !important; color: var(--graphite) !important; border: 1.5px solid var(--graphite) !important; }
html.paper .testimonial-text { color: var(--graphite-2) !important; font-style: normal !important; }
/* the yellow banner becomes a highlighted strip of paper */
html.paper #resource { background: rgba(16,185,129,0.08) !important; border-top: 1.5px solid var(--graphite-soft) !important; border-bottom: 1.5px solid var(--graphite-soft) !important; }
html.paper .resource-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem) !important; line-height: 1.2 !important; }
html.paper .resource-sub { color: var(--graphite-2) !important; }
html.paper #insights-grid > div > div:first-child { color: var(--green) !important; }
html.paper details { border-top: 1.5px solid var(--graphite-soft) !important; }
html.paper summary { font-size: 1.1rem !important; }
html.paper details p { color: var(--graphite-2) !important; }
html.paper .why-item-desc, html.paper .stat-label, html.paper .step-card p { color: var(--graphite-2) !important; }

/* form: typed onto a form, still clear to fill in */
html.paper .form-group label { color: var(--graphite) !important; font-weight: 700; letter-spacing: 0.06em; }
html.paper .form-group input, html.paper .form-group textarea, html.paper .form-group select {
  background: rgba(255,255,255,0.85) !important; color: var(--graphite) !important;
  border: 1.5px solid var(--graphite-soft) !important; border-radius: 4px !important;
}
html.paper .form-group input:focus, html.paper .form-group textarea:focus, html.paper .form-group select:focus {
  border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(16,185,129,0.18) !important; outline: none;
}
html.paper .form-group input::placeholder, html.paper .form-group textarea::placeholder { color: rgba(38,38,43,0.45) !important; }
html.paper .contact-detail-label { color: var(--green) !important; }
html.paper .contact-detail-value, html.paper .contact-detail-value a { color: var(--graphite) !important; }
html.paper .form-success { background: rgba(16,185,129,0.08) !important; border: 1.5px solid var(--green) !important; }

/* ── Services page ─────────────────────────────── */
html.paper .svc-detail, html.paper .svc-row { border-color: var(--graphite-soft) !important; }

/* ── Modals: a fresh sheet on the desk ─────────────── */
html.paper .irca-modal-overlay, html.paper .qp-modal-overlay { background: rgba(38,38,43,0.55) !important; }
html.paper .irca-modal, html.paper .qp-modal { background: var(--paper) !important; }
html.paper .qp-modal { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px) !important; background-size: 24px 24px !important; }
html.paper .irca-modal-title, html.paper .qp-modal-title { font-size: 1.45rem !important; }
html.paper .irca-modal-desc { color: var(--graphite-2) !important; }
html.paper .irca-modal-close, html.paper .qp-modal-close { color: var(--graphite) !important; border: 1.5px solid var(--graphite-soft) !important; background: transparent !important; }
html.paper .qp-modal-header { background: rgba(251,250,245,0.95) !important; border-bottom: 1.5px solid var(--graphite-soft) !important; }
html.paper .qp-doc { color: var(--graphite-2); font-size: 0.95rem; line-height: 1.7; }
html.paper .qp-doc-meta { border-bottom: 1px solid var(--graphite-soft) !important; }
html.paper .qp-doc li::marker { color: var(--green); }

/* ── Footer ─────────────────────────────── */
html.paper footer { background: transparent !important; border-top: 1.5px solid rgba(38,38,43,0.5) !important; }
html.paper .footer-tagline, html.paper .footer-copy, html.paper .footer-links a { color: var(--graphite-2) !important; }
html.paper .footer-links a:hover { color: var(--green) !important; }
html.paper .footer-copy { border-top: 1px solid var(--graphite-soft) !important; }

/* ── Phones ─────────────────────────────── */
@media (max-width: 800px) {
  html.paper #hero { padding-top: 6.5rem !important; }
  html.paper .home-hero-img {
    position: relative !important; display: block; top: auto !important; right: auto !important;
    width: 70% !important; max-width: 300px; margin: 0 auto 2.2rem; transform: rotate(-1.5deg);
  }
  html.paper #hero:has(.home-hero-img)::after { top: 5.9rem; right: calc(50% - 45px); }
  html.paper .sk-photo-caption { position: static; text-align: center; margin: -1.6rem 0 1.6rem; }
}

@media print {
  .view-toggle { display: none !important; }
}
html.paper .step-card { position: relative; }