/* OP Security — one stylesheet, cascade layers, no framework, no JavaScript.
   Editorial layout: 12-column grid, hairline rules, section labels in the margin. Colours are measured (docs/design.md). */
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/assets/fonts/plexmono-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

@layer reset, tokens, base, layout, components;

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  svg{display:block;max-inline-size:100%}
  ol,ul{padding:0;list-style:none}
}

@layer tokens{
  :root{
    color-scheme:light dark;
    --bg:#FAFAF7; --ink:#14161A; --muted:#5E6472; --line:#DAD8CF; --rule:#14161A; --accent:#0B7A3F;
    --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --wrap:80rem; --gutter:clamp(1.25rem,4vw,2.5rem); --col-gap:clamp(1rem,2.4vw,2rem);
  }
  @media (prefers-color-scheme:dark){
    :root{--bg:#14161A;--ink:#FAFAF7;--muted:#A3AAB8;--line:#2C313A;--rule:#FAFAF7;--accent:#35D07F}
  }
}

@layer base{
  html{background:var(--bg)}
  body{font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--bg);min-block-size:100dvh;display:flex;flex-direction:column;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
  main{flex:1}
  h1,h2,h3{overflow-wrap:break-word;font-weight:600;letter-spacing:-.03em;line-height:1;text-wrap:balance}
  p{max-inline-size:60ch;text-wrap:pretty}
  a{color:inherit;text-decoration-thickness:.07em;text-underline-offset:.22em}
  a:hover{text-decoration-color:var(--accent)}
  :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
  ::selection{background:var(--ink);color:var(--bg)}
}

@layer layout{
  .wrap{inline-size:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
  .row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .section{border-block-start:1px solid var(--line);padding-block:clamp(2rem,1rem + 5vw,5rem)}
  .section > .row{row-gap:1.5rem}
  .label{grid-column:1 / span 3}
  .content{grid-column:4 / -1;min-inline-size:0}
  @media (max-width:56rem){.label,.content{grid-column:1 / -1}}
  .skip{position:absolute;inset-inline-start:var(--gutter);inset-block-start:-4rem;background:var(--ink);color:var(--bg);padding:.75rem 1rem;font-weight:700;z-index:10}
  .skip:focus{inset-block-start:.75rem}
}

@layer components{
  /* header */
  .site-header{border-block-end:1px solid var(--line)}
  .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1.5rem;min-block-size:4.5rem}
  .brand{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;font-weight:800;font-size:1.0625rem;letter-spacing:-.015em;min-block-size:2.75rem}
  .mark{inline-size:2.5rem;block-size:auto}
  .mark .m{fill:currentColor} .mark .k{fill:var(--accent)}
  .site-header nav ul{display:flex;flex-wrap:wrap;gap:0 .5rem}
  .site-header nav a{display:inline-flex;align-items:center;min-block-size:2.75rem;padding-inline:.5rem;font-size:.9375rem;font-weight:500;color:var(--muted);text-decoration:none}
  .site-header nav a:hover{color:var(--ink)}
  .site-header nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.12em;text-underline-offset:.5em}

  /* mono metadata */
  .meta,.label,.mono{font-family:var(--mono);font-weight:500;font-size:.78125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5}
  .label{font-size:.78125rem;padding-block-start:.35rem}
  .label .n{color:var(--ink);margin-inline-end:.75rem}
  .meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1.5rem;max-inline-size:none}

  /* hero */
  .hero{padding-block:clamp(1.5rem,1rem + 3vw,3rem) clamp(3rem,2rem + 6vw,6.5rem)}
  .hero h1{font-size:clamp(2.25rem,.4rem + 10.4vw,6rem);line-height:.92;letter-spacing:-.045em;margin-block:clamp(2.5rem,2rem + 5vw,6rem) clamp(2rem,1.5rem + 3vw,4rem);font-weight:600}
  .hero h1 span{display:block}
  .hero-foot{row-gap:1.75rem;align-items:end}
  .lead{grid-column:1 / span 7;font-size:clamp(1.0625rem,.95rem + .5vw,1.25rem);line-height:1.45;letter-spacing:-.01em;max-inline-size:34em}
  .actions{grid-column:9 / -1;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:flex-end}
  @media (max-width:56rem){.lead,.actions{grid-column:1 / -1;justify-content:flex-start}}
  .btn{display:inline-flex;align-items:center;gap:.75rem;min-block-size:3.25rem;padding:.75rem 1.5rem;background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none;border-radius:.25rem}
  .btn::after{content:"→";font-weight:500}
  .btn:hover{background:var(--accent);color:var(--bg)}
  .actions-inline{margin-block-start:2rem}
  .link{display:inline-flex;align-items:center;min-block-size:2.75rem;font-weight:600}

  /* services: ruled list, not cards */
  .svc li{display:grid;grid-template-columns:3.5rem minmax(0,1fr);column-gap:var(--col-gap);row-gap:.5rem;padding-block:1.75rem;border-block-start:1px solid var(--line)}
  .svc li:last-child{border-block-end:1px solid var(--line)}
  .svc .n{font-family:var(--mono);font-weight:500;font-size:.78125rem;letter-spacing:.06em;color:var(--muted);padding-block-start:.55rem}
  .svc h3{font-size:clamp(1.375rem,1rem + 1.1vw,1.875rem);letter-spacing:-.035em;font-weight:600}
  .svc p{grid-column:2;color:var(--muted)}
  @media (min-width:56rem){
    .svc li{grid-template-columns:3.5rem minmax(0,5fr) minmax(0,7fr);align-items:baseline}
    .svc p{grid-column:3}
  }

  .statement{font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);line-height:1.12;letter-spacing:-.035em;font-weight:600;max-inline-size:22em;text-wrap:balance}
  .content > p + p{margin-block-start:1.25rem}
  .content .statement + p{margin-block-start:1.75rem;color:var(--muted)}

  /* facts: document-style table */
  .facts div{display:grid;grid-template-columns:minmax(7rem,12rem) minmax(0,1fr);column-gap:var(--col-gap);padding-block:1rem;border-block-start:1px solid var(--line)}
  .facts div:last-child{border-block-end:1px solid var(--line)}
  .facts dt{font-family:var(--mono);font-weight:500;font-size:.78125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-block-start:.3rem}
  .facts dd{font-size:1.0625rem;letter-spacing:-.01em}
  @media (max-width:36rem){.facts div{grid-template-columns:1fr;row-gap:.25rem}}

  .mail{font-size:clamp(1.25rem,.9rem + 1.8vw,2rem);font-weight:600;letter-spacing:-.035em;line-height:1.05;overflow-wrap:anywhere;margin-block-start:1.5rem}
  .list li{padding-block:.75rem;border-block-start:1px solid var(--line);max-inline-size:36rem}
  .list li:last-child{border-block-end:1px solid var(--line)}
  .mark-lg{inline-size:min(100%,18rem);margin-block-start:2rem}
  .page-title{padding-block:clamp(1.5rem,1rem + 3vw,3rem) clamp(2.5rem,2rem + 4vw,5rem)}
  .page-title h1{font-size:clamp(2.25rem,1rem + 4.4vw,4.5rem);line-height:.95;letter-spacing:-.045em;margin-block:clamp(2rem,1.5rem + 3vw,4.5rem) 1.5rem}

  /* footer */
  .site-footer{border-block-start:1px solid var(--rule);padding-block:clamp(2rem,1.5rem + 3vw,4rem) 1.5rem;font-size:.9375rem}
  .site-footer .row{row-gap:2rem}
  .foot-brand{grid-column:1 / span 5;color:var(--muted)} .foot-brand strong{display:block;color:var(--ink);font-size:1.0625rem;letter-spacing:-.01em;margin-block-end:.25rem}
  .foot-nav{grid-column:7 / span 3} .foot-contact{grid-column:10 / -1}
  @media (max-width:56rem){.foot-brand,.foot-nav,.foot-contact{grid-column:1 / -1}}
  .site-footer h2{font-family:var(--mono);font-weight:500;font-size:.78125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-block-end:.5rem;line-height:1.5}
  .site-footer li a{display:inline-block;padding-block:.3rem}
  .legal{max-inline-size:none;margin-block-start:clamp(2rem,1rem + 4vw,4rem);padding-block-start:1rem;border-block-start:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1.5rem}

  @media (prefers-reduced-motion:no-preference){.btn,.site-header nav a{transition:background-color .15s,color .15s}}
}
@media print{.skip,.site-header nav{display:none!important}body{background:#fff;color:#000}}