@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --brand-orange:#F06511;
  --brand-orange-hover:#D45509;
  --brand-orange-active:#B84805;
  --brand-orange-tint:#FEF0E7;
  --brand-orange-border:#F9C4A1;

  --graphite-900:#1A1C20;
  --graphite-800:#2B2E33;
  --graphite-700:#3D4148;
  --graphite-600:#565B63;
  --graphite-500:#6E747E;
  --graphite-400:#9AA1AB;
  --graphite-300:#C7CCD3;
  --graphite-200:#E3E6EA;
  --graphite-100:#F4F5F7;
  --white:#FFFFFF;

  --status-success:#1E7A44; --status-success-tint:#EAF4EE;
  --status-error:#B3261E; --status-error-tint:#FBECEB;
  --status-warning:#8A5A00; --status-warning-tint:#FBF3E3;
  --status-info:#1F4E79; --status-info-tint:#ECF1F6;

  --text-primary:var(--graphite-900);
  --text-body:var(--graphite-700);
  --text-muted:var(--graphite-500);
  --text-inverse:var(--white);
  --text-inverse-muted:var(--graphite-300);
  --text-accent:var(--brand-orange);
  --text-link:var(--brand-orange);
  --text-link-hover:var(--brand-orange-hover);

  --surface-page:var(--white);
  --surface-subtle:var(--graphite-100);
  --surface-card:var(--white);
  --surface-dark:var(--graphite-800);
  --surface-darker:var(--graphite-900);

  --border-default:var(--graphite-200);
  --border-strong:var(--graphite-300);
  --border-dark:var(--graphite-700);
  --border-focus:var(--brand-orange);

  --overlay-photo:linear-gradient(90deg,rgba(26,28,32,.86) 0%,rgba(26,28,32,.62) 45%,rgba(26,28,32,.15) 100%);
  --overlay-scrim:rgba(26,28,32,.55);

  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-display:48px; --fs-h1:44px; --fs-h2:30px; --fs-h3:21px; --fs-h4:18px;
  --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px; --fs-caption:13px; --fs-label:12px;
  --lh-tight:1.1; --lh-heading:1.2; --lh-snug:1.35; --lh-body:1.5; --lh-loose:1.6;
  --ls-heading:-0.01em; --ls-body:0; --ls-label:0.08em;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:120px;
  --container-max:1280px; --container-text:760px; --grid-gutter:24px;
  --page-gutter:32px; --page-gutter-mobile:20px;
  --section-y:96px; --section-y-tight:64px; --section-y-mobile:48px;
  --card-pad:28px; --card-pad-sm:20px; --field-height:44px; --control-height:48px;

  --radius-none:0; --radius-sm:2px; --radius-md:4px;
  --border-width:1px; --border-width-thick:2px;
  --focus-ring:0 0 0 2px var(--white),0 0 0 4px var(--brand-orange);

  --shadow-card:0 1px 2px rgba(26,28,32,.06);
  --shadow-raised:0 2px 8px rgba(26,28,32,.08);
  --shadow-overlay:0 8px 24px rgba(26,28,32,.14);

  --ease-standard:cubic-bezier(.2,0,.2,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;
}
@media (max-width:768px){:root{--fs-display:34px;--fs-h1:30px;--fs-h2:24px;--fs-h3:19px;--section-y:48px;--section-y-tight:40px;--page-gutter:20px;--card-pad:20px}}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}html{scroll-behavior:auto !important}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--white);overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--font-sans);font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);color:var(--text-primary)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:var(--space-4) 0 0;color:var(--text-body);text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid transparent}
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--page-gutter)}
.icon{display:inline-block;vertical-align:middle}
.icon img{display:block}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:1px solid var(--border-default)}
.util-bar{background:var(--graphite-900);color:var(--graphite-300)}
.util-bar-inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--page-gutter);height:40px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);font-size:var(--fs-caption)}
.util-bar-inner span{display:flex;align-items:center;gap:8px}
.nav-row{max-width:var(--container-max);margin:0 auto;padding:0 var(--page-gutter);height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.logo-link{display:flex;align-items:center;gap:10px;border-bottom:none}
.logo-link img.symbol{height:36px;width:auto}
.logo-link img.wordmark{width:170px;filter:brightness(0)}
.nav-links{display:flex;align-items:center;gap:var(--space-7)}
.nav-links a{display:flex;align-items:center;gap:6px;border-bottom:none;font-size:var(--fs-body-sm);font-weight:var(--fw-regular);color:var(--graphite-700)}
.nav-links a.active{color:var(--brand-orange);font-weight:var(--fw-semibold)}
.menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;color:var(--graphite-900)}
.mobile-nav{display:none;flex-direction:column;padding:var(--space-5) var(--page-gutter) var(--space-6);gap:var(--space-5);border-top:1px solid var(--border-default)}
.mobile-nav.open{display:flex}
.mobile-nav a{border-bottom:none;font-size:var(--fs-body);color:var(--graphite-700)}
.mobile-nav a.active{color:var(--brand-orange);font-weight:var(--fw-semibold)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:var(--fs-body-sm);border:1px solid transparent;cursor:pointer;padding:0 var(--space-6);height:40px;transition:var(--dur-fast) var(--ease-standard);white-space:nowrap}
.btn-lg{height:52px;padding:0 var(--space-7);font-size:var(--fs-body)}
.btn-sm{height:36px;padding:0 var(--space-5)}
.btn-primary{background:var(--brand-orange);color:var(--white)}
.btn-primary:hover{background:var(--brand-orange-hover);color:var(--white);border-bottom:1px solid transparent}
.btn-primary:active{background:var(--brand-orange-active)}
.btn-secondary{background:var(--white);color:var(--graphite-900);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--graphite-100);color:var(--graphite-900);border-bottom:1px solid var(--border-strong)}
.btn-ghost{background:transparent;color:var(--graphite-900);border-color:transparent}
.btn-ghost:hover{background:var(--graphite-100);color:var(--graphite-900);border-bottom:1px solid transparent}
.btn-ondark{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)}
.btn-ondark:hover{background:rgba(255,255,255,.1);color:var(--white);border-bottom:1px solid rgba(255,255,255,.45)}

/* Badge / Eyebrow */
.badge{display:inline-flex;align-items:center;height:24px;padding:0 var(--space-3);border-radius:var(--radius-sm);font-size:var(--fs-label);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase}
.badge-accent{background:var(--brand-orange-tint);color:var(--brand-orange-active);border:1px solid var(--brand-orange-border)}
.badge-neutral{background:var(--graphite-100);color:var(--graphite-700);border:1px solid var(--border-default)}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--graphite-600);margin-bottom:var(--space-3)}
.eyebrow::before{content:"";width:var(--accent-bar-width,3px);height:14px;background:var(--brand-orange)}
.eyebrow-accent{color:var(--white)}

/* Section heading */
.section-heading{max-width:var(--container-text);margin-bottom:var(--space-8)}
.section-heading p{color:var(--text-muted)}

/* Cards */
.card{background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--card-pad)}
.card-subtle{background:var(--surface-subtle);border-color:var(--border-default)}
.card-dark{background:var(--graphite-900);border-color:var(--graphite-700)}

/* Category tile */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.cat-tile{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--graphite-900);transition:var(--dur-base) var(--ease-standard);width:100%}
.cat-tile:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card)}
.cat-tile .icon{color:var(--graphite-600);flex-shrink:0}

/* Spec table */
.spec-table{width:100%;border-collapse:collapse}
.spec-table caption{text-align:left;font-size:var(--fs-label);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--graphite-600);margin-bottom:var(--space-4)}
.spec-table tr{border-bottom:1px solid var(--border-default)}
.spec-table tr:last-child{border-bottom:none}
.spec-table td{padding:var(--space-3) 0;font-size:var(--fs-body-sm)}
.spec-table td:first-child{color:var(--text-muted)}
.spec-table td:last-child{text-align:right;font-family:var(--font-mono);color:var(--graphite-900)}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--graphite-900)}
.field label .req{color:var(--brand-orange)}
.field .hint{font-size:var(--fs-caption);color:var(--text-muted)}
.input,.select,.textarea{height:var(--field-height);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0 var(--space-4);font-family:var(--font-sans);font-size:var(--fs-body);color:var(--graphite-900);background:var(--white);width:100%}
.textarea{height:auto;padding:var(--space-3) var(--space-4)}
.input:focus,.select:focus,.textarea:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--brand-orange)}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body-sm);color:var(--text-body)}
.checkbox-row input{margin-top:3px}
.alert{display:flex;flex-direction:column;gap:2px;padding:var(--space-4);border-radius:var(--radius-sm);border-left:3px solid;font-size:var(--fs-body-sm)}
.alert-error{background:var(--status-error-tint);border-color:var(--status-error);color:var(--status-error)}
.alert-success{background:var(--status-success-tint);border-color:var(--status-success);color:var(--status-success)}
.alert strong{display:block;font-size:var(--fs-body-sm);margin-bottom:2px}
.alert.hidden{display:none}

/* Layout helpers */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-9)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}

/* Hero */
.hero{position:relative;background:var(--graphite-900);overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;background:var(--overlay-photo)}
.hero-inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:112px var(--page-gutter) 96px}

/* Page header (breadcrumb intro) */
.page-header{background:var(--surface-subtle);border-bottom:1px solid var(--border-default)}
.page-header.dark{background:var(--surface-dark)}
.page-header-inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-7) var(--page-gutter) var(--space-9)}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-caption);color:var(--text-muted)}
.breadcrumb a{color:var(--text-muted);border-bottom:none}
.page-header.dark .breadcrumb,.page-header.dark .breadcrumb a{color:var(--graphite-400)}
.page-header.dark h1,.page-header.dark p{color:var(--white)}
.page-header.dark p{color:var(--graphite-400)}

/* Modal */
.modal-backdrop{display:none;position:fixed;inset:0;z-index:50;background:rgba(26,28,32,.72);align-items:center;justify-content:center;padding:var(--space-8)}
.modal-backdrop.open{display:flex}
.modal-box{background:var(--white);border-radius:var(--radius-md);max-width:920px;width:100%;max-height:88vh;overflow:auto;padding:var(--space-8);position:relative}
.modal-close{position:absolute;top:var(--space-6);right:var(--space-6);width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--surface-subtle);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;color:var(--graphite-700)}
.modal-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-9);align-items:start;margin-top:var(--space-7)}
.modal-photo{aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-default)}
.modal-photo img{width:100%;height:100%;object-fit:cover}
.modal-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-3)}
.modal-thumbs .modal-photo{aspect-ratio:4/3;border-radius:var(--radius-sm)}

/* Footer */
.site-footer{background:var(--graphite-900);color:var(--graphite-300);padding-top:var(--section-y-tight);margin-top:auto}
.site-footer h4{font-size:var(--fs-label);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--graphite-400);margin-bottom:var(--space-5)}
.site-footer a{color:var(--graphite-300);font-size:var(--fs-body-sm);border-bottom:none}
.footer-bottom{border-top:1px solid var(--graphite-700);padding:var(--space-6) 0;display:flex;justify-content:space-between;font-size:var(--fs-caption);color:var(--graphite-500)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-standard),transform 700ms var(--ease-standard)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

@media (max-width:900px){
  .util-bar,.cta-desktop,.nav-links{display:none !important}
  .menu-btn{display:flex !important}
  .nav-row{height:auto;padding:var(--space-4) var(--page-gutter)}
  .hero-inner{padding:64px var(--page-gutter) 48px !important}
  .hero-h1{font-size:var(--fs-h1) !important}
  .cat-grid,.stat-grid,.process-grid{grid-template-columns:repeat(2,1fr) !important}
  .two-col,.modal-grid,.footer-grid,.form-grid{grid-template-columns:1fr !important}
  .footer-grid{gap:var(--space-7) !important}
  .modal-box{padding:var(--space-6) !important;max-height:92vh !important}
}
@media (max-width:540px){
  .cat-grid,.stat-grid,.process-grid{grid-template-columns:1fr 1fr !important}
  .cta-row{flex-direction:column;align-items:flex-start !important;gap:var(--space-5) !important}
}