/* ========================================================================== 
   Portfolio layout and visual refresh
   Keeps the AuditFlow OS palette while improving hierarchy, spacing and flow.
   ========================================================================== */

:root {
  --max-width: 1180px;
  --content-width: 780px;
  --radius-card: 18px;
  --radius-small: 11px;
  --shadow-card: 0 10px 30px rgba(31, 36, 33, 0.07);
  --shadow-card-hover: 0 18px 44px rgba(31, 36, 33, 0.13);
  --shadow-window: 0 28px 70px rgba(31, 36, 33, 0.18);
  --section-border: rgba(49, 92, 77, 0.10);
}

html { font-size: 17px; }

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(184, 155, 94, 0.07), transparent 26rem),
    var(--warm-stone);
  color: #252a27;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}

h1 { font-size: clamp(2.6rem, 5.2vw, 4.45rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.72rem); letter-spacing: -0.015em; }
h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

p, li { max-width: 76ch; }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.42rem; }

.container { padding-left: 32px; padding-right: 32px; }

/* Header */
.topbar {
  padding: 13px 0;
  border-bottom: 1px solid rgba(250, 248, 243, 0.08);
}

.wordmark {
  font-weight: 700;
  letter-spacing: 0.22em;
}

.wordmark img { height: 24px; }
.topbar-tagline { letter-spacing: 0.025em; }

nav.mainnav {
  box-shadow: 0 8px 24px rgba(31, 36, 33, 0.10);
}

nav.mainnav .container { padding-top: 10px; padding-bottom: 10px; }
nav.mainnav ul { gap: 7px; }
/* The dropdown chevron button runs a hair taller than a plain nav link
   (larger font-size for tap-target size), which stretches li.has-submenu
   taller than plain <li> items in the flex row. Centring every <li>'s own
   content -- not just has-submenu's -- keeps every link's text on the same
   baseline regardless of which sibling ends up tallest. */
nav.mainnav li {
  display: flex;
  align-items: center;
}
nav.mainnav a {
  padding: 9px 13px;
  font-size: 0.89rem;
  font-weight: 600;
}

nav.mainnav .dropdown-panel {
  top: calc(100% + 8px);
  padding: 8px;
  border-radius: 12px;
  min-width: 238px;
  box-shadow: 0 18px 45px rgba(31, 36, 33, 0.17);
}

/* The panel floats 8px below its trigger for the arrow/tooltip look. That gap
   is dead space for :hover purposes, so bridge it with an out-of-flow
   pseudo-element rather than real padding -- padding would grow the li's
   own box height and, combined with flex stretch, push its (vertically
   centred) content down relative to plain nav items that don't get the
   same padding. An absolutely positioned bridge covers the same gap for
   :hover purposes without affecting layout at all. */
nav.mainnav li.has-submenu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
}

nav.mainnav .dropdown-panel::before {
  content: "";
  position: absolute;
  left: 20px;
  top: -6px;
  width: 12px;
  height: 12px;
  background: var(--off-white);
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  transform: rotate(45deg);
}

nav.mainnav .dropdown-panel a {
  position: relative;
  z-index: 1;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 500;
}

/* The chevron toggle button already opens/closes the panel on click (built
   for keyboard and touch users), but that only took visual effect below the
   720px breakpoint. Make .open effective at every width so a click always
   works, independent of :hover. */
nav.mainnav .dropdown-panel.open { display: block; }

/* Match the toggle chevron's proportions to the bolder refreshed nav links
   so it doesn't read as an undersized, misaligned afterthought next to them. */
.submenu-toggle {
  padding: 9px 10px 9px 2px;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
}

/* Page sections */
section {
  padding: 84px 0;
  border-top: 1px solid var(--section-border);
}

section:first-child { border-top: 0; }
.bg-cream { background-color: rgba(244, 241, 234, 0.90); }
.bg-cream-2 { background-color: rgba(250, 248, 243, 0.96); }

.hero.page-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 86px;
  background:
    radial-gradient(circle at 87% 10%, rgba(184, 155, 94, 0.17), transparent 23rem),
    radial-gradient(circle at 12% 85%, rgba(49, 92, 77, 0.10), transparent 28rem),
    var(--warm-stone);
}

.hero.page-hero::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -150px;
  bottom: -190px;
  border: 1px solid rgba(49, 92, 77, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(49, 92, 77, 0.025), 0 0 0 96px rgba(49, 92, 77, 0.018);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 940px; margin-bottom: 0.38em; }
.hero p { color: #3e4641; }
.hero .eyebrow { color: var(--audit-green); font-weight: 700; }

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: clamp(38px, 6vw, 78px);
  align-items: center;
}

.hero-copy { min-width: 0; }
.hero-aside {
  min-width: 0;
  background: rgba(250, 248, 243, 0.82);
  border: 1px solid rgba(49, 92, 77, 0.18);
  box-shadow: var(--shadow-card);
  padding: 30px;
  border-radius: 22px;
  backdrop-filter: blur(10px);
}

.hero-aside h3 { color: var(--audit-green); }
.hero-aside p:last-child { margin-bottom: 0; }

.section-head {
  max-width: var(--content-width);
  margin-bottom: 40px;
}

.section-head h2 { margin-bottom: 0.42em; }
.section-head p { color: #49514c; }
.eyebrow { font-weight: 700; color: var(--audit-green); }

/* Buttons */
.btn {
  min-height: 46px;
  padding: 12px 20px;
  border-radius: var(--radius-small);
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 16px rgba(31, 36, 33, 0.06);
}

.btn-primary { box-shadow: 0 10px 24px rgba(49, 92, 77, 0.23); }
.btn-secondary { background: rgba(250, 248, 243, 0.86); }
.cta-row { gap: 12px; }

/* Cards and grids */
.grid { gap: 26px; }
.card {
  position: relative;
  padding: 30px;
  border-color: rgba(49, 92, 77, 0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(250,248,243,0.96));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--audit-green), var(--muted-gold));
  opacity: 0;
  transform: scaleX(0.45);
  transform-origin: left;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.card.interactive { min-height: 100%; }
.card.interactive:hover::after,
.card.feature-card:hover::after,
.card.cv-card:hover::after { opacity: 1; transform: scaleX(1); }

.card h3, .card h4 { margin-bottom: 0.55em; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card a:not(.btn) { font-weight: 700; }

.split-cards .card { padding: 34px; }
.split-cards .card h3 { font-size: 1.75rem; }

.feature-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.feature-card p { flex: 1; }
.feature-card > a { margin-top: auto; }

.badge {
  font-weight: 600;
  padding: 6px 11px;
  border: 1px solid rgba(49, 92, 77, 0.08);
}

/* Home hero product frame and metrics */
.page-home .home-hero-grid {
  /* Give the product screenshot more of the row than the copy column, and
     raise its floor from 420px so it reads as the prominent element here
     rather than a same-size companion to the text. */
  grid-template-columns: minmax(0, 0.85fr) minmax(460px, 1.15fr);
  gap: clamp(44px, 6vw, 84px) !important;
  /* The inline align-items:center in the HTML vertically centres the image
     card against the taller copy column, which is what pushes it down
     below the headline's top. Top-align instead so it starts level with
     "I deliver..." rather than floating mid-row. */
  align-items: start !important;
}

.product-window {
  background: #202622;
  border: 1px solid rgba(31, 36, 33, 0.18);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-window);
  transform: perspective(1200px) rotateY(-1.5deg) rotateX(0.5deg);
}

.product-window-bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 15px;
  color: var(--soft-sand);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.window-dots { display: inline-flex; gap: 6px; }
.window-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(250, 248, 243, 0.30);
}
.window-dots span:nth-child(2) { background: rgba(184, 155, 94, 0.75); }
.window-dots span:nth-child(3) { background: rgba(138, 154, 134, 0.75); }

.product-window img.screenshot {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  cursor: zoom-in;
}

.product-caption {
  color: var(--soft-sand) !important;
  font-size: 0.78rem !important;
  margin: 0 !important;
  padding: 12px 15px 14px;
}
.product-caption a { color: var(--off-white); }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 56px;
  border: 1px solid rgba(49, 92, 77, 0.16);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(49, 92, 77, 0.16);
  box-shadow: 0 12px 28px rgba(31, 36, 33, 0.06);
}

.metric {
  background: rgba(250, 248, 243, 0.88);
  padding: 22px 24px;
}
.metric strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.05;
  color: var(--audit-green);
}
.metric span { display: block; margin-top: 7px; color: var(--slate); font-size: 0.82rem; line-height: 1.35; }

/* Timeline */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  padding-top: 44px;
}

/* The old single spanning line used guessed 7%/93% endpoints that don't
   line up with the dots' actual pixel positions, so it fell short of the
   last dot. Disabled at desktop in favour of per-card segments below; the
   720px media query re-enables it (with its own left/top/width/height) for
   its own correctly-fitting vertical mobile line. */
.timeline::before {
  content: "";
  position: absolute;
  display: none;
}

/* Each card draws its own connecting segment from its own dot to the next
   card's dot, sized relative to its own width (100% + the grid gap) so it
   always lands exactly on the next dot regardless of viewport width --
   unlike a single line with hardcoded percentage endpoints. */
.timeline .entry:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -18.5px;
  left: 50%;
  width: calc(100% + 18px);
  height: 2px;
  background: var(--audit-green);
  z-index: 1;
}
.timeline .entry:nth-last-child(2)::after {
  background: linear-gradient(90deg, var(--audit-green), var(--muted-gold));
}

.timeline .entry {
  position: relative;
  margin: 0;
  padding: 36px 19px 20px;
  min-height: 170px;
  border-color: rgba(49, 92, 77, 0.14);
  box-shadow: 0 8px 22px rgba(31, 36, 33, 0.05);
}

.timeline .entry::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  top: -24px;
  left: 50%;
  margin-left: -6.5px;
  background: var(--audit-green);
  border: 4px solid var(--warm-stone);
  box-shadow: 0 0 0 1px rgba(49, 92, 77, 0.25);
  /* Sit above the flow line so each checkpoint dot stays visible where it
     crosses the line, instead of the line's 2px bar cutting through it. */
  z-index: 2;
}
.timeline .entry:last-child::before { background: var(--muted-gold); }
.timeline .entry .years { font-weight: 700; color: var(--audit-green); }
.timeline .entry strong { display: block; margin: 8px 0 4px; line-height: 1.35; }

/* Snapshots and workflows */
.snapshot {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(49, 92, 77, 0.10);
  border-color: rgba(49, 92, 77, 0.16);
}
.snapshot > div { background: rgba(250, 248, 243, 0.94); padding: 20px; }
.snapshot dt { color: var(--audit-green); font-weight: 700; }
.snapshot dd { line-height: 1.42; }

.hero-aside .snapshot {
  grid-template-columns: 1fr;
  margin-bottom: 0;
  box-shadow: none;
}
.hero-aside .snapshot > div + div { border-top: 1px solid rgba(49, 92, 77, 0.12); }

.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
  gap: 12px;
}
.flow .step {
  min-height: 74px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px 16px;
  border-color: rgba(49, 92, 77, 0.16);
  background: linear-gradient(145deg, var(--off-white), rgba(244, 241, 234, 0.75));
  font-weight: 650;
  box-shadow: 0 6px 18px rgba(31, 36, 33, 0.05);
}
.flow .step:not(:last-of-type)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 15px;
  height: 15px;
  border-top: 2px solid var(--muted-gold);
  border-right: 2px solid var(--muted-gold);
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}
.flow .arrow { display: none; }

/* Figures and product galleries */
figure.media-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(49, 92, 77, 0.14);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
figure.media-card img.screenshot { margin: 0; box-shadow: none; border-color: rgba(31,36,33,0.10); }
figure.media-card figcaption { padding: 11px 5px 3px; line-height: 1.5; }
figure.featured-screenshot { padding: 16px; }
.media-grid { align-items: stretch; }
.media-grid > figure { height: 100%; }

.pack-grid { align-items: stretch; }
.pack-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pack-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.pack-card figcaption { font-weight: 700; color: var(--deep-charcoal); font-size: 0.92rem; }
.pack-download {
  display: inline-flex;
  margin: auto 5px 5px;
  padding-top: 6px;
  font-size: 0.84rem;
  font-weight: 700;
}

/* Tables */
.table-wrap {
  border: 1px solid rgba(49, 92, 77, 0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.68);
  box-shadow: 0 8px 24px rgba(31,36,33,0.04);
}
.table-wrap table { min-width: 600px; }
th { background: rgba(49, 92, 77, 0.07); color: var(--audit-green); font-weight: 700; }
th, td { padding: 14px 16px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(184, 155, 94, 0.055); }

/* Case studies */
details.case-study {
  padding: 0;
  margin: 0 0 26px;
  border-color: rgba(49, 92, 77, 0.16);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

details.case-study summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  background: linear-gradient(90deg, rgba(49,92,77,0.07), rgba(184,155,94,0.06));
  font-size: 1rem;
}

details.case-study summary h3 {
  display: block !important;
  margin: 0;
  font-size: 1.42rem;
}

details.case-study summary::after {
  content: "+";
  margin-left: auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--off-white);
  border: 1px solid rgba(49, 92, 77, 0.18);
  color: var(--audit-green);
  font-family: var(--font-body);
  font-size: 1.2rem;
}

details.case-study[open] summary {
  border-bottom: 1px solid rgba(49, 92, 77, 0.12);
}
details.case-study[open] summary::after { content: "−"; }
details.case-study > :not(summary) { margin-left: 30px; margin-right: 30px; }
details.case-study > :last-child { margin-bottom: 30px; }
details.case-study > .eyebrow { margin-top: 24px; }
details.case-study h4 { margin-top: 28px; color: var(--audit-green); }
details.case-study .card { box-shadow: none; border-color: rgba(49, 92, 77, 0.13); }

.artefact-note {
  border-left-width: 4px;
  background: linear-gradient(90deg, rgba(194,137,74,0.11), rgba(250,248,243,0.75));
  padding: 18px 20px;
}

/* CV page */
.cv-grid { align-items: stretch; }
.cv-card { display: flex; flex-direction: column; min-height: 320px; padding: 38px; }
.cv-card h3 { font-size: 2rem; }
.cv-card p { flex: 1; font-size: 1.02rem; }
.cv-card .btn { align-self: flex-start; margin-top: 24px; }
.cv-tag {
  align-self: flex-start;
  margin-bottom: 22px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(49, 92, 77, 0.09);
  color: var(--audit-green);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* Footer */
footer.site-footer { padding: 64px 0 30px; }
.contact-details-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 64px;
  align-items: start;
  padding-top: 20px;
}
.contact-copy h2 { max-width: 700px; font-size: clamp(2rem, 3vw, 2.85rem); }
.contact-copy p { max-width: 650px !important; }
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin-top: 24px !important;
}
.contact-links a { font-weight: 700; }
.contact-form {
  max-width: none !important;
  margin-top: 0 !important;
  padding: 26px;
  border: 1px solid rgba(250,248,243,0.14);
  border-radius: 18px;
  background: rgba(250,248,243,0.055);
}
.contact-form p { margin-bottom: 14px !important; max-width: none; }
.contact-form label { font-weight: 700; }
.contact-form input,
.contact-form textarea {
  width: 100% !important;
  padding: 12px 13px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(250,248,243,0.22) !important;
  background: rgba(250,248,243,0.98);
  color: var(--deep-charcoal);
  font: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid rgba(184,155,94,0.45);
  outline-offset: 1px;
}
footer.site-footer .fineprint {
  padding-top: 24px;
  border-top: 1px solid rgba(250,248,243,0.11);
  margin-top: 44px;
}

/* Back-to-top only appears after scrolling */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease, background 0.15s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top.visible:hover { transform: translateY(-2px); }

/* Page-specific refinements */
.page-cyber .hero-aside { border-top: 5px solid var(--muted-gold); }
.page-auditflow .hero-aside { border-top: 5px solid var(--audit-green); }
.page-auditflow #current-state .container > figure:first-of-type { margin-bottom: 48px; }
.page-history .grid.grid-3 > details { height: 100%; }
.page-principles .grid.grid-3 .card { min-height: 100%; }

@media (max-width: 980px) {
  .page-home .home-hero-grid,
  .hero-layout { grid-template-columns: 1fr; }
  .hero-visual { max-width: 760px; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline::before { display: none; }
  .timeline .entry::before { top: 14px; }
  .timeline .entry::after { display: none; }
  .contact-details-body { grid-template-columns: 1fr; gap: 38px; }
  .contact-form { max-width: 620px !important; }
}

@media (max-width: 720px) {
  html { font-size: 16px; }
  .container { padding-left: 20px; padding-right: 20px; }
  .topbar { padding: 11px 0; }
  .topbar-tagline { display: none; }
  .wordmark { font-size: 0.78rem; }

  nav.mainnav .container { padding-top: 9px; padding-bottom: 9px; }
  .nav-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
  }
  .nav-toggle::after { content: "☰"; font-size: 1.05rem; }
  .nav-toggle[aria-expanded="true"]::after { content: "×"; }
  nav.mainnav ul { padding: 10px 0 4px; }
  nav.mainnav a { padding: 11px 12px; }
  nav.mainnav .dropdown-panel::before { display: none; }

  section { padding: 58px 0; }
  .hero.page-hero { padding: 64px 0 60px; }
  .hero h1 { font-size: clamp(2.35rem, 12vw, 3.3rem); }
  .hero-layout { gap: 30px; }
  .hero-aside { padding: 24px; }
  .page-home .home-hero-grid { gap: 36px !important; }
  .product-window { transform: none; border-radius: 14px; }
  .product-window-bar { min-height: 38px; }
  .metric-strip { grid-template-columns: 1fr 1fr; margin-top: 38px; }
  .metric { padding: 18px; }
  .metric strong { font-size: 1.5rem; }

  .split-cards { grid-template-columns: 1fr; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .card { padding: 24px; }
  .cv-card { min-height: 0; padding: 28px; }

  .timeline { grid-template-columns: 1fr; gap: 12px; padding-left: 18px; }
  .timeline .entry::after { display: none; }
  .timeline::before {
    display: block;
    left: 5px;
    right: auto;
    top: 20px;
    bottom: 20px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--soft-sand), var(--audit-green), var(--muted-gold));
  }
  .timeline .entry { min-height: 0; padding: 22px 20px 20px; }
  .timeline .entry::before { left: -20px; top: 24px; }

  .flow { grid-template-columns: 1fr; }
  .flow .step { min-height: 58px; }
  .flow .step:not(:last-of-type)::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -9px;
    transform: translateX(-50%) rotate(135deg);
  }

  details.case-study summary { align-items: flex-start; flex-wrap: wrap; padding: 20px; }
  details.case-study summary h3 { width: calc(100% - 48px); font-size: 1.2rem; }
  details.case-study summary .badge { order: -1; width: auto; }
  details.case-study summary::after { position: absolute; right: 18px; top: 46px; }
  details.case-study > :not(summary) { margin-left: 20px; margin-right: 20px; }
  details.case-study > :last-child { margin-bottom: 22px; }

  figure.media-card { padding: 8px; }
  .table-wrap { border-radius: 12px; }
  .contact-form { padding: 20px; }
  footer.site-footer { padding-top: 50px; }
  footer.site-footer .fineprint { margin-top: 34px; }
}