/* ===========================================================================
   Sheikhu International — Security & Defence section style
   Scoped entirely under .ops. Nothing here touches global site classes.
   Aesthetic: defence-contractor briefing document. Graphite field, hairline
   rules, tabular evidence, one gold reference accent. No stencil, no camo.

   Type: Archivo variable, single family. Contrast comes from the width axis
   (wdth 78-100) and weight axis (400-800), not from a second typeface.
   Scale: 4 steps at a ~1.24 ratio, plus fluid clamps for display sizes.
   =========================================================================== */

.ops{
  /* field */
  --field:      oklch(0.185 0.018 250);
  --field-deep: oklch(0.142 0.016 250);
  --panel:      oklch(0.975 0.004 250);
  --panel-2:    oklch(0.945 0.006 250);
  --line-dk:    oklch(0.345 0.020 250);
  --line-lt:    oklch(0.885 0.008 250);
  --ink:        oklch(0.205 0.020 250);
  --ink-soft:   oklch(0.415 0.018 250);
  --on-field:   oklch(0.965 0.004 250);
  --on-field-2: oklch(0.800 0.014 250);
  --gold:       oklch(0.795 0.125 78);
  --gold-deep:  oklch(0.545 0.105 72);

  /* type scale */
  --t-label: 0.75rem;
  --t-meta:  0.9375rem;
  --t-body:  1.125rem;
  --t-lede:  1.4rem;
  --t-rung:  clamp(1.4rem, 2.1vw, 1.75rem);
  --t-h2:    clamp(1.9rem, 4vw, 2.9rem);
  --t-h1:    clamp(2.5rem, 6.1vw, 4.85rem);
  --t-fig:   clamp(2.75rem, 6.6vw, 4.25rem);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max: 1180px;

  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.ops *,.ops *::before,.ops *::after{box-sizing:border-box}
.ops p,.ops h1,.ops h2,.ops h3,.ops h4,.ops ul,.ops ol,.ops figure,.ops dl{margin:0}
.ops ul{list-style:none;padding:0}
.ops img{display:block;max-width:100%}

.ops-wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.ops h1,.ops h2,.ops h3,.ops .ops-fig{
  font-weight:700;
  font-variation-settings:'wdth' 86;
  line-height:1.04;
  letter-spacing:-0.025em;
  text-wrap:balance;
}
.ops p{line-height:1.6;text-wrap:pretty}

.ops-label{
  font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wdth' 96;
}
.ops-meta{font-size:var(--t-meta);color:var(--ink-soft)}

/* --- hero ---------------------------------------------------------------- */
.ops-hero{
  position:relative;isolation:isolate;
  background:var(--field-deep);
  color:var(--on-field);
  padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);
  overflow:hidden;
}
.ops-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url('security-hero.jpg');
  background-size:cover;background-position:center 42%;
  opacity:.44;
}
.ops-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right, var(--field-deep) 0%, color-mix(in oklch, var(--field-deep) 82%, transparent) 46%, color-mix(in oklch, var(--field-deep) 30%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in oklch, var(--field-deep) 55%, transparent) 0%, transparent 35%, var(--field-deep) 100%);
}
.ops-hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:900px){.ops-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:end}}

.ops-hero h1{
  font-size:var(--t-h1);
  font-variation-settings:'wdth' 80;
  font-weight:800;
  line-height:1.0;
  margin-block:1.1rem 0;
  max-width:16ch;
}
.ops-hero .ops-lede{
  font-size:var(--t-body);
  color:var(--on-field-2);
  max-width:58ch;line-height:1.66;
}
.ops-hero .ops-label{color:var(--gold)}

.ops-rule{height:2px;width:88px;background:var(--gold);margin-block:1.5rem}

.ops-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.ops-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 1.55rem;border-radius:2px;
  font-size:var(--t-meta);font-weight:700;letter-spacing:.01em;text-decoration:none;
  border:1px solid transparent;
  transition:background-color .35s cubic-bezier(.22,1,.36,1),color .35s cubic-bezier(.22,1,.36,1),border-color .35s cubic-bezier(.22,1,.36,1);
}
.ops-btn-a{background:var(--gold);color:oklch(0.20 0.03 70)}
.ops-btn-a:hover,.ops-btn-a:focus-visible{background:var(--on-field);color:var(--field-deep)}
.ops-btn-b{border-color:color-mix(in oklch,var(--on-field) 45%,transparent);color:var(--on-field)}
.ops-btn-b:hover,.ops-btn-b:focus-visible{border-color:var(--gold);color:var(--gold)}

/* licence dossier block, sits opposite the headline */
.ops-dossier{
  border:1px solid var(--line-dk);
  background:color-mix(in oklch,var(--field) 74%,transparent);
  padding:1.6rem;
}
.ops-dossier dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.35rem;font-size:var(--t-meta)}
.ops-dossier dt{
  color:var(--on-field-2);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;align-self:center;
}
.ops-dossier dd{margin:0;font-weight:600;color:var(--on-field)}
.ops-dossier .ops-verify{
  display:block;margin-top:1.35rem;padding-top:1.2rem;
  border-top:1px solid var(--line-dk);
  font-size:var(--t-meta);color:var(--gold);text-decoration:none;
}
.ops-dossier .ops-verify:hover,.ops-dossier .ops-verify:focus-visible{text-decoration:underline}

/* --- sourced evidence band ---------------------------------------------- */
.ops-evidence{background:var(--field);color:var(--on-field);padding-block:clamp(2.75rem,5vw,4rem)}
.ops-figs{display:grid;border-top:1px solid var(--line-dk);border-bottom:1px solid var(--line-dk)}
@media (min-width:760px){.ops-figs{grid-template-columns:repeat(3,1fr)}}
.ops-figs > div{padding-block:clamp(1.6rem,3vw,2.4rem)}
@media (min-width:760px){
  .ops-figs > div{padding-inline:clamp(1.25rem,2.5vw,2rem)}
  .ops-figs > div:first-child{padding-inline-start:0}
  .ops-figs > div + div{border-inline-start:1px solid var(--line-dk)}
}
@media (max-width:759px){.ops-figs > div + div{border-top:1px solid var(--line-dk)}}
.ops-fig{
  display:block;font-size:var(--t-fig);font-weight:800;
  font-variation-settings:'wdth' 78;color:var(--gold);line-height:.94;
}
.ops-figs h3{font-size:var(--t-lede);margin-top:.9rem;font-variation-settings:'wdth' 90}
.ops-figs p{font-size:var(--t-meta);color:var(--on-field-2);margin-top:.55rem}
.ops-source{font-size:var(--t-meta);color:var(--on-field-2);margin-top:1.6rem;max-width:78ch}

/* --- generic light section ---------------------------------------------- */
.ops-sec{padding-block:clamp(3.25rem,6.5vw,5.5rem);background:var(--panel)}
.ops-sec-alt{background:var(--panel-2)}
.ops-sec h2{font-size:var(--t-h2);max-width:20ch}
.ops-sec .ops-sub{margin-top:1.1rem;color:var(--ink-soft);font-size:var(--t-lede);line-height:1.5;max-width:52ch}
.ops-sec .ops-body{margin-top:1.75rem;display:grid;gap:1.15rem;max-width:68ch;color:var(--ink-soft)}
.ops-sec .ops-body strong{color:var(--ink);font-weight:700}
.ops-head-rule{height:2px;width:64px;background:var(--gold-deep);margin-top:1.35rem}
.ops-note{margin-top:1.9rem;color:var(--ink-soft);max-width:68ch}

/* --- capability ladder --------------------------------------------------- */
.ops-ladder{margin-top:clamp(2rem,4vw,3rem);display:grid}
.ops-rung{
  display:grid;gap:.4rem 1.9rem;
  padding-block:clamp(1.5rem,2.8vw,2.15rem);
  border-top:1px solid var(--line-lt);
  align-items:start;
}
.ops-rung:last-child{border-bottom:1px solid var(--line-lt)}
@media (min-width:820px){
  .ops-rung{grid-template-columns:5rem minmax(0,15rem) minmax(0,1fr)}
}
.ops-rung-n{
  font-size:var(--t-rung);font-weight:800;font-variation-settings:'wdth' 78;
  color:var(--line-lt);line-height:1;padding-top:.2rem;
  transition:color .4s cubic-bezier(.22,1,.36,1);
}
.ops-rung h3{font-size:var(--t-rung)}
.ops-rung .ops-band{
  display:block;margin-top:.55rem;font-size:var(--t-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-deep);font-weight:600;
}
.ops-rung p{color:var(--ink-soft);font-size:var(--t-meta)}
.ops-roles{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.ops-roles li{
  font-size:var(--t-label);padding:.35rem .65rem;border:1px solid var(--line-lt);
  color:var(--ink-soft);background:#fff;border-radius:2px;letter-spacing:.01em;
}
.ops-rung:hover .ops-rung-n,.ops-rung:focus-within .ops-rung-n{color:var(--gold-deep)}

/* top tier carries real weight, not another identical row */
.ops-rung-top{
  background:var(--field);color:var(--on-field);border-top-color:var(--field);
  padding-inline:clamp(1.25rem,2.5vw,2rem);margin-top:.35rem;
}
.ops-rung-top .ops-rung-n{color:var(--gold)}
.ops-rung-top p{color:var(--on-field-2)}
.ops-rung-top .ops-band{color:var(--gold)}
.ops-rung-top .ops-roles li{background:transparent;border-color:var(--line-dk);color:var(--on-field-2)}

.ops-sub-h{margin-top:clamp(2rem,4vw,2.75rem);font-size:var(--t-rung)}

/* --- numbered sequence (vetting / process) ------------------------------- */
.ops-seq{margin-top:clamp(1.9rem,3.5vw,2.75rem);counter-reset:s;display:grid}
.ops-step{
  display:grid;gap:.35rem 1.6rem;padding-block:1.45rem;
  border-top:1px solid var(--line-lt);
}
.ops-step:last-child{border-bottom:1px solid var(--line-lt)}
@media (min-width:720px){.ops-step{grid-template-columns:3rem minmax(0,17rem) minmax(0,1fr);align-items:baseline}}
.ops-step-n{
  counter-increment:s;font-size:var(--t-label);font-weight:700;letter-spacing:.1em;
  color:var(--gold-deep);
}
.ops-step-n::before{content:counter(s,decimal-leading-zero)}
.ops-step h3{font-size:var(--t-body);letter-spacing:-0.015em}
.ops-step p{color:var(--ink-soft);font-size:var(--t-meta)}

/* --- regulator table ----------------------------------------------------- */
.ops-tablewrap{margin-top:clamp(1.9rem,3.5vw,2.75rem);overflow-x:auto;-webkit-overflow-scrolling:touch}
.ops-table{width:100%;border-collapse:collapse;font-size:var(--t-meta);min-width:680px}
.ops-table caption{text-align:start;color:var(--ink-soft);font-size:var(--t-meta);padding-bottom:1rem}
.ops-table th,.ops-table td{text-align:start;padding:1rem 1.15rem;vertical-align:top;border-bottom:1px solid var(--line-lt)}
.ops-table thead th{
  background:var(--field);color:var(--on-field);
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border-bottom:none;
}
.ops-table tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.ops-table td{color:var(--ink-soft)}
.ops-table tbody tr:hover{background:#fff}
.ops-yes{color:var(--gold-deep);font-weight:700}
.ops-table a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* --- split responsibility panel ------------------------------------------ */
.ops-split{margin-top:clamp(1.9rem,3.5vw,2.75rem);display:grid;border:1px solid var(--line-lt);background:#fff}
@media (min-width:820px){.ops-split{grid-template-columns:1fr 1fr}}
.ops-split > div{padding:clamp(1.6rem,3vw,2.25rem)}
@media (min-width:820px){.ops-split > div + div{border-inline-start:1px solid var(--line-lt)}}
@media (max-width:819px){.ops-split > div + div{border-top:1px solid var(--line-lt)}}
.ops-split h3{font-size:var(--t-rung)}
.ops-split p{margin-top:1rem;color:var(--ink-soft);font-size:var(--t-meta)}
.ops-split ul{margin-top:1.1rem;display:grid;gap:.65rem}
.ops-split li{font-size:var(--t-meta);color:var(--ink-soft);padding-inline-start:1.2rem;position:relative}
.ops-split li::before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:7px;height:1px;background:var(--gold-deep)}
.ops-split-note{
  border-top:1px solid var(--line-lt);padding:1.2rem clamp(1.6rem,3vw,2.25rem);
  font-size:var(--t-meta);color:var(--ink-soft);grid-column:1/-1;margin:0;
}

/* --- figure -------------------------------------------------------------- */
.ops-figure{margin-top:clamp(2rem,4vw,3rem)}
.ops-figure img{
  width:100%;height:auto;aspect-ratio:2.2;object-fit:cover;object-position:center 45%;
  border:1px solid var(--line-lt);
}
@media (max-width:640px){.ops-figure img{aspect-ratio:3/2}}
.ops-figure figcaption{margin-top:.9rem;font-size:var(--t-meta);color:var(--ink-soft);max-width:70ch}

/* --- call to action ------------------------------------------------------ */
.ops-close{background:var(--field-deep);color:var(--on-field);padding-block:clamp(3.25rem,6.5vw,5rem)}
.ops-close h2{font-size:var(--t-h2);max-width:18ch}
.ops-close p{margin-top:1.2rem;color:var(--on-field-2);max-width:58ch}

/* --- FAQ (native details, no JS dependency) ------------------------------ */
.ops-faq{margin-top:clamp(1.75rem,3.5vw,2.5rem);border-top:1px solid var(--line-lt);max-width:80ch}
.ops-q{border-bottom:1px solid var(--line-lt)}
.ops-q summary{
  cursor:pointer;list-style:none;padding:1.2rem 2.5rem 1.2rem 0;position:relative;
  font-weight:700;font-size:var(--t-body);color:var(--ink);
}
.ops-q summary::-webkit-details-marker{display:none}
.ops-q summary::after{
  content:"";position:absolute;inset-inline-end:.35rem;top:1.55rem;
  width:11px;height:11px;
  border-inline-end:2px solid var(--gold-deep);border-block-end:2px solid var(--gold-deep);
  transform:rotate(45deg);transform-origin:60% 60%;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.ops-q[open] summary::after{transform:rotate(225deg)}
.ops-q summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.ops-q p{padding-bottom:1.35rem;color:var(--ink-soft);font-size:var(--t-meta);max-width:74ch}
.ops-q a{color:var(--ink)}

/* --- onward links -------------------------------------------------------- */
.ops-onward{display:grid;margin-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--line-lt)}
.ops-onward a{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;
  padding-block:1.2rem;border-bottom:1px solid var(--line-lt);
  text-decoration:none;color:var(--ink);
  --nudge:0px;
  transform:translateX(var(--nudge));
  transition:transform .4s cubic-bezier(.22,1,.36,1),color .3s;
}
.ops-onward a:hover,.ops-onward a:focus-visible{--nudge:9px;color:var(--gold-deep)}
[dir="rtl"] .ops-onward a:hover,[dir="rtl"] .ops-onward a:focus-visible{--nudge:-9px}
.ops-onward b{font-size:var(--t-body);font-weight:700}
.ops-onward span{font-size:var(--t-meta);color:var(--ink-soft);text-align:end}

/* --- RTL ----------------------------------------------------------------- */
[dir="rtl"] .ops{font-family:'Cairo',ui-sans-serif,system-ui,sans-serif}
[dir="rtl"] .ops h1,[dir="rtl"] .ops h2,[dir="rtl"] .ops h3{
  letter-spacing:0;font-variation-settings:normal;font-weight:800;line-height:1.32;
}
[dir="rtl"] .ops .ops-fig,[dir="rtl"] .ops .ops-step-n{
  font-family:'Archivo',ui-sans-serif,sans-serif;letter-spacing:-0.02em;
}
[dir="rtl"] .ops-rung-n{font-family:'Archivo',ui-sans-serif,sans-serif}
[dir="rtl"] .ops p{line-height:1.85}
[dir="rtl"] .ops-label,[dir="rtl"] .ops-rung .ops-band,[dir="rtl"] .ops-dossier dt,[dir="rtl"] .ops-table thead th{letter-spacing:0}
[dir="rtl"] .ops-hero::before{transform:scaleX(-1)}
[dir="rtl"] .ops-hero::after{
  background:
    linear-gradient(to left, var(--field-deep) 0%, color-mix(in oklch, var(--field-deep) 82%, transparent) 46%, color-mix(in oklch, var(--field-deep) 30%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in oklch, var(--field-deep) 55%, transparent) 0%, transparent 35%, var(--field-deep) 100%);
}
[dir="rtl"] .ops-q summary{padding:1.2rem 0 1.2rem 2.5rem}
[dir="rtl"] .ops-q summary::after{transform:rotate(135deg)}
[dir="rtl"] .ops-q[open] summary::after{transform:rotate(-45deg)}

@media (prefers-reduced-motion: reduce){
  .ops *,.ops *::before,.ops *::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}