/* ============================================================
   Unicorn Software - "Deep Field" theme
   Dark navy ground, Space Grotesk + IBM Plex Mono, square corners,
   accents lifted straight from the logo (orange / cyan / magenta / purple).
   ============================================================ */

:root{
  /* ground */
  --bg:#0a1526;          /* page */
  --bg-2:#0d1b30;        /* alternating section */
  --panel:#0c1a2f;       /* cards, mocks, diagrams */
  --panel-2:#0e1c33;

  /* text */
  --ink:#e8edf5;         /* headings, primary */
  --body:#9fb0c8;        /* prose */
  --dim:#8fa2bd;         /* small print */
  --faint:#6b82a3;       /* mono labels, meta */
  --nav:#b9c6da;

  /* hairlines - three weights, used consistently: section dividers, card
     borders, then interactive outlines */
  --line:rgba(232,237,245,.10);
  --line-2:rgba(232,237,245,.14);
  --line-3:rgba(232,237,245,.25);
  --line-pill:rgba(232,237,245,.18);

  /* brand accents */
  --orange:#f0901f;
  --cyan:#29b8d8;
  --magenta:#e0399a;
  --purple:#7b3fb0;
  /* Cyan/orange on the navy are the two that clear 4.5:1; magenta and purple
     are used for 11px+ mono labels and borders only, never for prose. */
  --spectrum:linear-gradient(90deg,var(--orange),var(--magenta),var(--purple),var(--cyan));

  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Horizontal rhythm. The design is drawn on a 1280px canvas with 56px
     gutters; both shrink together so the proportions survive down to a phone. */
  --gut:56px;
  --shell:1440px;
  --sec:88px;            /* vertical section padding */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--orange)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.15}
strong,b{font-weight:600;color:var(--ink)}

/* The whole site is one centred column, exactly like the design canvas: the
   section hairlines end with it instead of running off a 4K display. */
.shell{max-width:var(--shell);margin:0 auto}

/* ---------- shared primitives ---------- */
.eyebrow{
  display:block;font-family:var(--mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
}
.eyebrow.orange{color:var(--orange)}
.eyebrow.magenta{color:var(--magenta)}
.rule{height:3px;width:120px;background:var(--spectrum)}
.mono{font-family:var(--mono)}
.meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;color:var(--faint)}
.lead{font-size:1.125rem;line-height:1.7;color:var(--body)}
.sec{padding:var(--sec) var(--gut)}
.sec.alt{background:var(--bg-2)}
.sec.top{border-top:1px solid var(--line)}
.sec.bot{border-bottom:1px solid var(--line)}
.h-sec{font-size:clamp(1.55rem,2.7vw,2.125rem)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:44px}
.sec-lead{max-width:640px;font-size:1rem;line-height:1.7;color:var(--body);margin-top:12px}

/* Buttons are deliberately square: the whole identity rests on right angles,
   so a pill here would read as a different site. */
.btn{
  display:inline-block;padding:16px 30px;font-family:var(--sans);
  font-size:.9375rem;font-weight:600;line-height:1.2;cursor:pointer;
  border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;
  text-align:center;
}
.btn-primary{background:var(--orange);color:#0a1526}
.btn-primary:hover{background:#ffa63c;color:#0a1526}
.btn-ghost{border-color:var(--line-3);color:var(--ink);background:transparent;font-weight:500}
.btn-ghost:hover{border-color:var(--ink);background:rgba(232,237,245,.06);color:var(--ink)}
.btn-sm{padding:11px 20px;font-size:.8125rem}
.btn.wide{width:100%}

/* Arrow link: "Platform work →" */
.arrow{display:inline-flex;align-items:center;gap:10px;font-size:.875rem;font-weight:600;color:var(--cyan)}
.arrow .a{transition:transform .18s}
.arrow:hover{color:var(--orange)}
.arrow:hover .a{transform:translateX(4px)}

.pill{
  display:inline-block;border:1px solid var(--line-pill);padding:7px 13px;
  font-size:.75rem;color:var(--nav);
}
.pills{display:flex;flex-wrap:wrap;gap:8px}

/* Card: the workhorse. A hairline box with generous padding and no radius. */
.card{border:1px solid var(--line-2);padding:36px;display:flex;flex-direction:column}
.card h3{font-size:1.375rem;margin-bottom:12px}
.card p{font-size:.9375rem;line-height:1.7;color:var(--body)}
.card .n{font-family:var(--mono);font-size:.6875rem;color:var(--cyan);margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ============================================================
   Header
   ============================================================ */
header.site{
  position:sticky;top:0;z-index:60;background:rgba(10,21,38,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  max-width:var(--shell);margin:0 auto;padding:22px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* Brand lockup. The two type elements sit on a shared baseline (align-items:
   baseline on .lockup); the mark is centred against that pair, which is why it
   is a sibling of .lockup and not inside it - baseline-aligning an <img> would
   pin its bottom edge to the text baseline and push it visibly high. */
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand:hover{color:inherit}
.brand .mark{width:34px;height:auto;flex:none}
.lockup{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand .word{
  font-size:1.25rem;font-weight:700;letter-spacing:.04em;color:var(--orange);line-height:1;
}
.brand .tld{
  font-size:.6875rem;letter-spacing:.34em;color:#7f92b0;line-height:1;white-space:nowrap;
}
.navtools{display:flex;align-items:center;gap:28px}
.navlinks{display:flex;gap:32px;font-size:.875rem;color:var(--nav)}
.navlinks a{color:var(--nav)}
.navlinks a:hover{color:var(--ink)}
/* aria-current is the accessibility signal and the styling hook at once, so the
   two can never disagree. */
.navlinks a[aria-current=page]{color:var(--orange)}
/* The inactive language sits at --dim, not --faint: --faint is ~4.1:1 on the
   navy, and these are 12px links, so they have to clear the 4.5:1 AA floor. */
.lang{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.75rem}
.lang a{color:var(--dim)}
.lang a:hover{color:var(--ink)}
.lang a.on{color:var(--ink);font-weight:500}
.lang .sep{color:rgba(232,237,245,.2)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-3);cursor:pointer;
  width:42px;height:42px;padding:11px;flex-direction:column;justify-content:space-between;flex:none;
}
.nav-toggle span{display:block;height:1.5px;width:100%;background:var(--ink);transition:.22s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  padding:104px var(--gut) 88px;
  display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end;
}
.hero .rule{margin-bottom:32px}
/* The cap is tuned, not arbitrary. The column is bounded by --shell while vw is
   not, so past ~1500px the type would outgrow its measure: at 76px the default
   headline breaks after "Enterprise-" and leaves a dangling hyphen. 66px is the
   largest size at which "Enterprise-grade software," still fits the 1.35fr
   column, which is the three-line setting the design intends. */
.hero h1{
  font-size:clamp(2.35rem,4.4vw,4.125rem);line-height:1.04;font-weight:600;
  letter-spacing:-.03em;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p.lead{margin-top:32px;max-width:560px;font-size:1.1875rem}
.hero .cta{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}

/* ---------- hero dashboard mock (decorative) ---------- */
.mock{
  height:420px;background:var(--panel);border:1px solid var(--line-2);
  display:grid;grid-template-rows:auto 1fr;overflow:hidden;
}
.mock-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.mock-h .t{display:flex;align-items:center;gap:10px;min-width:0}
.mock-h .dot{width:8px;height:8px;background:var(--cyan);flex:none}
.mock-h .lbl{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mock-h .live{font-family:var(--mono);font-size:.625rem;color:var(--orange);white-space:nowrap}
.mock-b{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:0;min-width:0}
.mock-side{
  border-right:1px solid var(--line);padding:18px 14px;
  display:flex;flex-direction:column;gap:14px;
}
/* The mock reads as real data only because nothing in it is uniform. The design
   gave every bar its own width/height inline; here the rhythm is expressed once,
   in nth-child rules, so the markup stays plain <i> elements. */
.mock-side i{display:block;height:9px;background:rgba(232,237,245,.16)}
.mock-side i:nth-child(1){width:72%}
.mock-side i:nth-child(2){width:54%}
.mock-side i:nth-child(3){width:64%}
.mock-side i:nth-child(4){width:44%}
.mock-side i:nth-child(5){width:58%}
.mock-side i.on{background:rgba(41,184,216,.5)}
.mock-side i.last{margin-top:auto;width:40%;background:rgba(232,237,245,.1)}
.mock-main{padding:18px;display:grid;grid-template-rows:auto 1fr auto;gap:16px;min-height:0;min-width:0}
.mock-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
.mock-kpi{border:1px solid rgba(232,237,245,.12);padding:10px;min-width:0}
.mock-kpi span{
  display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mock-kpi i{display:block;height:12px;margin-top:10px;background:var(--ink)}
.mock-kpi:nth-child(1) i{width:60%}
.mock-kpi:nth-child(2) i{width:42%}
.mock-kpi:nth-child(3) i{width:28%;background:var(--orange)}
.mock-chart{
  border:1px solid rgba(232,237,245,.12);padding:14px;
  display:flex;align-items:flex-end;gap:8px;min-height:0;
}
/* Heights are the point of a bar chart, so they are declared here rather than
   left to the markup - the nine <i> children carry no data of their own. */
.mock-chart i{flex:1;background:rgba(41,184,216,.35)}
.mock-chart i:nth-child(1){height:38%}
.mock-chart i:nth-child(2){height:56%;background:rgba(41,184,216,.45)}
.mock-chart i:nth-child(3){height:44%}
.mock-chart i:nth-child(4){height:72%;background:rgba(41,184,216,.6)}
.mock-chart i:nth-child(5){height:60%;background:rgba(41,184,216,.45)}
.mock-chart i:nth-child(6){height:88%}
.mock-chart i:nth-child(7){height:66%;background:rgba(41,184,216,.45)}
.mock-chart i:nth-child(8){height:50%}
.mock-chart i:nth-child(9){height:78%;background:rgba(41,184,216,.55)}
.mock-chart i.hi{background:var(--cyan)}
.mock-rows{display:flex;flex-direction:column;gap:9px}
.mock-rows div{display:flex;gap:10px;align-items:center}
.mock-rows u{width:6px;height:6px;flex:none;background:rgba(232,237,245,.3)}
.mock-rows u.c{background:var(--cyan)}
.mock-rows u.m{background:var(--magenta)}
.mock-rows s{flex:1;height:7px;background:rgba(232,237,245,.14)}
.mock-rows q{width:52px;height:7px;background:rgba(232,237,245,.1);flex:none}

/* ============================================================
   Principles strip - four columns of hairline-separated claims
   ============================================================ */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.strip>div{padding:36px 32px;border-right:1px solid var(--line)}
.strip>div:last-child{border-right:0}
.strip b{display:block;font-size:1.25rem;font-weight:600;color:var(--cyan)}
.strip p{font-size:.8125rem;line-height:1.6;color:var(--dim);margin-top:8px}

/* ============================================================
   Practice cards (B2B / B2C)
   ============================================================ */
.practice{border:1px solid var(--line-2);padding:40px;display:flex;flex-direction:column}
.practice .tag{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:20px;color:var(--cyan);
}
.practice .tag.magenta{color:var(--magenta)}
.practice .tag.orange{color:var(--orange)}
.practice .tag.purple{color:var(--purple)}
.practice h3{font-size:1.625rem;margin-bottom:14px}
.practice p{font-size:.9375rem;line-height:1.65;color:var(--body);margin-bottom:24px}
.practice .pills{margin-bottom:28px}
.practice .arrow{margin-top:auto}

/* ============================================================
   The argument + system sketch
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split-wide{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.argument h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;margin:22px 0 24px}
.argument p{font-size:1.0625rem;line-height:1.7;color:var(--body);margin-bottom:20px}
.argument .arrow{margin-top:12px}

/* The sketch is the design's signature: an architecture diagram drawn in pure
   CSS so it stays crisp, themable and editable from the admin. */
.sketch{
  background:var(--panel);border:1px solid var(--line-2);padding:28px;
  font-family:var(--mono);display:flex;flex-direction:column;gap:14px;min-height:400px;
}
.sketch-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sketch-h span{font-size:.625rem;letter-spacing:.16em;color:var(--faint)}
.sketch-row{display:grid;gap:14px}
.sketch-row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sketch-row.c2{grid-template-columns:1.4fr 1fr}
.node{
  border:1px solid var(--line-3);padding:12px 10px;text-align:center;
  font-size:.625rem;color:#d3dceb;line-height:1.4;
}
.node small{display:block;margin-top:6px;color:var(--faint)}
.node.gate{border-color:var(--cyan);color:var(--cyan);letter-spacing:.14em;padding:14px 10px}
.node.svc{background:rgba(232,237,245,.03)}
.node.store{border-color:rgba(224,57,154,.5);color:#f2a3cd}
.node.aux{color:var(--dim)}
/* Connector runs: a single hairline per column, so the diagram reads as wiring
   rather than as a stack of unrelated boxes. */
.wires{display:grid;gap:14px;height:18px}
.wires.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wires span{display:flex;justify-content:center}
.wires span::before{content:"";width:1px;height:100%;background:rgba(41,184,216,.55)}
.wires.plain span::before{background:rgba(232,237,245,.28)}
.wires.one{grid-template-columns:1fr;height:16px}
.wires.one span::before{background:rgba(224,57,154,.6)}

/* ============================================================
   Service map (Platforms) - sources -> platform -> consumers
   ============================================================ */
.svcmap{
  background:var(--bg);border:1px solid var(--line-2);padding:26px;
  font-family:var(--mono);display:grid;grid-template-rows:auto 1fr;gap:18px;min-height:400px;min-width:0;
}
.svcmap-h{display:flex;justify-content:space-between;gap:12px;font-size:.625rem;letter-spacing:.16em;color:var(--faint)}
.svcmap-b{
  display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);
  align-items:center;font-size:.625rem;min-width:0;
}
.svccol{display:flex;flex-direction:column;gap:12px;min-width:0}
.svccol h3{font-size:.5625rem;letter-spacing:.14em;color:var(--faint);font-weight:400;letter-spacing:.14em}
.svccol div{border:1px solid var(--line-3);padding:12px 10px;color:#d3dceb;overflow-wrap:anywhere}
.svccol.mid div{border-color:var(--cyan);color:var(--cyan)}
.svccol.mid div:last-child{border-color:rgba(41,184,216,.4);color:#8fd6e8}
.svccol.out div{border-color:rgba(240,144,31,.6);color:#f7bd7a}
.svccol.out div:last-child{border-color:var(--line-3);color:var(--dim)}
.svcarrow{display:flex;justify-content:center;color:var(--cyan)}
.svcarrow.o{color:var(--orange)}

/* ============================================================
   Foundations list (Consumer) + phone mocks
   ============================================================ */
.flist{display:flex;flex-direction:column;gap:18px;font-size:.9375rem;line-height:1.7;color:var(--body)}
.flist>div{display:flex;gap:14px}
.flist .m{color:var(--orange);flex:none}
.flist strong{color:var(--ink);font-weight:600}

.phones{display:flex;align-items:center;justify-content:center;gap:28px;min-height:440px}
.phone{
  width:212px;flex:none;border:1px solid var(--line-3);border-radius:30px;
  background:var(--panel);padding:14px 12px;display:flex;flex-direction:column;gap:12px;
}
.phone.a{height:404px}
.phone.b{height:340px;background:var(--panel-2);border-color:rgba(232,237,245,.16);opacity:.85}
.phone .st{
  display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:.5rem;color:var(--faint);padding:0 6px;
}
.phone .hd{padding:0 6px}
.phone .hd b{display:block;font-size:1.0625rem;font-weight:600;color:var(--ink)}
.phone .hd span{
  display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;
  color:var(--faint);margin-top:5px;
}
.phone .hero-card{
  background:var(--orange);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:8px;
}
/* As with the dashboard mock: uneven widths are what make these read as content
   rather than as a placeholder grid. */
.phone .hero-card i{display:block;height:7px;background:rgba(10,21,38,.35)}
.phone .hero-card i:nth-child(1){width:56%;background:rgba(10,21,38,.75)}
.phone .hero-card i:nth-child(2){width:78%}
.phone .hero-card i:nth-child(3){width:40%}
.phone .rows{display:flex;flex-direction:column;gap:9px}
.phone .rows div{
  border:1px solid var(--line-2);border-radius:10px;padding:12px;
  display:flex;flex-direction:column;gap:7px;
}
.phone .rows i{display:block;height:6px;background:rgba(232,237,245,.18)}
.phone .rows i:first-child{background:rgba(232,237,245,.5)}
.phone .rows div:nth-child(1) i:nth-child(1){width:62%}
.phone .rows div:nth-child(1) i:nth-child(2){width:38%}
.phone .rows div:nth-child(2) i:nth-child(1){width:48%}
.phone .rows div:nth-child(2) i:nth-child(2){width:66%}
.phone .rows div:nth-child(3) i:nth-child(1){width:70%}
.phone .rows div:nth-child(3) i:nth-child(2){width:30%}
.phone .img{
  height:112px;border-radius:12px;display:flex;align-items:flex-end;padding:10px;
  background:repeating-linear-gradient(135deg,#16294a 0 8px,#132443 8px 16px);
}
.phone .img span{font-family:var(--mono);font-size:.5rem;color:#7f92b0}
.phone .lines{padding:0 4px;display:flex;flex-direction:column;gap:8px}
.phone .lines i{display:block;height:6px;background:rgba(232,237,245,.18)}
.phone .lines i:nth-child(1){height:8px;width:72%;background:rgba(232,237,245,.55)}
.phone .lines i:nth-child(2){width:90%}
.phone .lines i:nth-child(3){width:64%}
.phone .tabs{
  margin-top:auto;display:flex;justify-content:space-around;
  border-top:1px solid rgba(232,237,245,.12);padding-top:12px;
}
.phone .tabs i{display:block;width:16px;height:4px;background:rgba(232,237,245,.22)}
.phone .tabs i:first-child{background:var(--orange)}
.phone .go{
  margin-top:auto;border:1px solid var(--cyan);border-radius:10px;padding:11px;
  text-align:center;font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;color:var(--cyan);
}

/* ============================================================
   Approach - gates, refusals, technology columns
   ============================================================ */
.gate{border:1px solid var(--line-2);padding:40px}
.gate .tag{font-family:var(--mono);font-size:.75rem;color:var(--cyan);margin-bottom:18px;display:block}
.gate h3{font-size:1.5rem;margin-bottom:12px}
.gate p{font-size:.9375rem;line-height:1.7;color:var(--body)}
.wont b{display:block;font-size:1.125rem;font-weight:600;color:var(--orange);margin-bottom:10px}
.wont p{font-size:.875rem;line-height:1.7;color:var(--body)}
.techcol h3{
  font-family:var(--mono);font-size:.6875rem;font-weight:400;letter-spacing:.16em;
  color:var(--faint);margin-bottom:16px;text-transform:uppercase;
}
.techcol ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.techcol li{font-size:.9375rem;color:#d3dceb}
/* Boundaries-before-code steps: a left hairline instead of a bullet */
.steps{display:flex;flex-direction:column;gap:22px}
.steps>div{border-left:1px solid var(--line-3);padding-left:20px}
.steps b{display:block;font-size:1rem;font-weight:600;margin-bottom:6px}
.steps p{font-size:.875rem;line-height:1.7;color:var(--body)}

/* ============================================================
   Page hero (interior pages) + closing CTA band
   ============================================================ */
.phero{padding:var(--sec) var(--gut) 72px;border-bottom:1px solid var(--line)}
.phero .eyebrow{margin-bottom:26px}
.phero h1{
  font-size:clamp(2.05rem,4.4vw,3.875rem);line-height:1.06;font-weight:600;
  letter-spacing:-.03em;max-width:900px;text-wrap:balance;
}
.phero p{margin-top:30px;max-width:640px;font-size:1.125rem;line-height:1.7;color:var(--body)}

.band{
  padding:80px var(--gut);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:48px;
}
.band h2{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.15;font-weight:600;max-width:640px;text-wrap:balance}
.band .btn{white-space:nowrap}

/* ============================================================
   Insights: listing + article
   ============================================================ */
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.artcard{
  border:1px solid var(--line-2);padding:32px 30px;display:flex;flex-direction:column;
  color:inherit;transition:border-color .18s,background .18s;
}
.artcard:hover{border-color:var(--line-3);background:rgba(232,237,245,.02);color:inherit}
.artcard .date{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;color:var(--faint)}
.artcard .t{font-size:1.3125rem;font-weight:600;line-height:1.25;margin:14px 0 12px;color:var(--ink)}
.artcard p{font-size:.9375rem;line-height:1.65;color:var(--body);flex:1}
.artcard .more{margin-top:20px;font-size:.8125rem;font-weight:600;color:var(--cyan)}
.artcard:hover .more{color:var(--orange)}

.ahero{padding:var(--sec) var(--gut) 56px;border-bottom:1px solid var(--line)}
.ahero .date{
  display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;
  color:var(--cyan);margin-bottom:22px;
}
.ahero h1{
  font-size:clamp(1.9rem,3.8vw,3.25rem);line-height:1.08;font-weight:600;
  letter-spacing:-.03em;max-width:24ch;text-wrap:balance;
}
.prose{padding:64px var(--gut) 96px}
.prose .inner{max-width:760px;font-size:1.0625rem;line-height:1.8;color:#c3d0e2;overflow-wrap:anywhere}
.prose .inner p{margin-bottom:22px}
.prose .inner h2{font-size:1.625rem;margin:40px 0 14px;color:var(--ink)}
.prose .inner h3{font-size:1.25rem;margin:30px 0 10px;color:var(--ink)}
.prose .inner ul,.prose .inner ol{margin:0 0 22px 1.3em}
.prose .inner li{margin-bottom:10px}
.prose .inner blockquote{
  border-left:2px solid var(--cyan);padding:2px 0 2px 20px;margin:26px 0;
  color:var(--ink);font-size:1.125rem;
}
.prose .inner a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.prose .inner a:hover{color:var(--orange)}
.prose .inner img{margin:26px 0;height:auto;border:1px solid var(--line-2)}
.prose .inner strong{color:var(--ink)}
.back{
  display:inline-block;margin-bottom:28px;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.back:hover{color:var(--orange)}
.tight{padding-top:64px}
.page-h1{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1;margin-bottom:18px}

/* ============================================================
   Contact page + forms
   ============================================================ */
.contact-grid{padding:var(--sec) var(--gut) 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact-h1{font-size:clamp(1.9rem,3.6vw,3.5rem);line-height:1.07;font-weight:600;letter-spacing:-.03em}
.contact-mail{display:inline-block;font-size:1.5rem;font-weight:600;color:var(--cyan);word-break:break-word}
.contact-mail:hover{color:var(--orange)}
.cinfo{margin-top:40px;border-top:1px solid var(--line-2);padding-top:8px}
.cinfo .r{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}
/* The last row's rule would sit a few pixels above the next block's border-top
   and read as a double hairline. */
.cinfo .r:last-child{border-bottom:0}
.cinfo .lb{
  width:104px;flex:none;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
.cinfo .r span{overflow-wrap:anywhere;color:var(--body)}
.cinfo .r a{color:var(--ink);border-bottom:1px solid rgba(232,237,245,.28)}
.cinfo .r a:hover{color:var(--orange);border-bottom-color:currentColor}
/* 44x44 is the smallest reliable touch target, so the padded box is much larger
   than the 24px glyph; negative margins keep it from stretching the row. */
.cinfo .r a.wa{border-bottom:0;color:#25d366;display:inline-flex;align-items:center;
  justify-content:center;vertical-align:middle;width:44px;height:44px;margin:-10px 0 -10px 6px}
.cinfo .r a.wa:hover{color:#5df08b}
.include{margin-top:52px;border-top:1px solid var(--line-2);padding-top:30px}
.include .eyebrow{color:var(--faint);margin-bottom:20px}
.include ol{list-style:none;display:flex;flex-direction:column;gap:14px;counter-reset:inc}
.include li{
  display:flex;gap:14px;font-size:.9375rem;line-height:1.6;color:var(--body);counter-increment:inc;
}
.include li::before{
  content:counter(inc,decimal-leading-zero);font-family:var(--mono);color:var(--cyan);flex:none;
}

form.uform{border:1px solid var(--line-2);padding:40px;align-self:start}
form.uform .f{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
form.uform label{
  font-size:.8125rem;color:var(--dim);font-family:var(--sans);
}
form.uform input[type=text],form.uform input[type=email],form.uform textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-3);
  color:var(--ink);font-family:inherit;font-size:.9375rem;padding:8px 2px;
}
form.uform textarea{border:1px solid var(--line-3);padding:12px;min-height:120px;resize:vertical}
form.uform input:focus,form.uform textarea:focus{outline:none;border-color:var(--cyan)}
form.uform input::placeholder,form.uform textarea::placeholder{color:var(--faint)}
/* Radio group rendered as the design's three bordered chips. The real inputs stay
   in the DOM (keyboard + screen reader), the label is what gets painted. */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{
  display:block;border:1px solid var(--line-3);padding:9px 18px;font-size:.8125rem;
  color:var(--nav);transition:.18s;
}
.chip input:checked+span{border-color:var(--orange);color:var(--orange)}
.chip input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
.chip:hover span{border-color:var(--ink);color:var(--ink)}
.form-err{
  border:1px solid rgba(224,57,154,.5);background:rgba(224,57,154,.08);
  color:#f7b6da;padding:12px 16px;margin-bottom:22px;font-size:.875rem;
}
.captcha-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.captcha-img{border:1px solid var(--line-3);background:var(--panel);max-width:100%;height:auto;min-width:0}
.captcha-reload{
  width:40px;height:40px;flex:none;border:1px solid var(--line-3);background:transparent;
  color:var(--ink);cursor:pointer;font-size:1.1rem;line-height:1;
}
.captcha-reload:hover{border-color:var(--cyan);color:var(--cyan)}
.hp{position:absolute;left:-9999px}
.w-cap{max-width:220px}
.w-alt{max-width:160px}
.note{font-size:.8125rem;color:var(--faint);line-height:1.6}
.note a{color:var(--dim);text-decoration:underline}
.note a:hover{color:var(--orange)}
.status{padding:140px var(--gut);text-align:center}
.status h1{font-size:clamp(1.9rem,4vw,3rem);margin:18px 0 14px}
.status p{max-width:46ch;margin:0 auto 30px;color:var(--body)}
.center{text-align:center}
.more-row{margin-top:36px}

/* ============================================================
   Legal pages: cookie table
   ============================================================ */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctable{width:100%;border-collapse:collapse;margin-top:28px;font-size:.9375rem;min-width:420px}
.ctable th,.ctable td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);
  color:var(--body);overflow-wrap:anywhere;
}
.ctable th{
  font-family:var(--mono);color:var(--faint);font-size:.6875rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;
}
.ctable td:first-child{font-family:var(--mono);color:var(--cyan)}

/* ============================================================
   Footer
   ============================================================ */
footer.site{
  border-top:1px solid var(--line);padding:44px var(--gut);
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
  line-height:1.5;
}
footer.site .fcol{display:flex;flex-direction:column;gap:10px}
footer.site .ftag{font-size:.8125rem;color:var(--dim);max-width:44ch}
footer.site .fb{display:flex;align-items:center;gap:10px}
footer.site .fb .mark{width:26px;height:auto;flex:none}
footer.site .fb .lockup{gap:8px}
footer.site .fb .word{font-size:1rem;font-weight:700;letter-spacing:.04em;color:var(--orange);line-height:1}
footer.site .fb .tld{font-size:.625rem;letter-spacing:.32em;color:#7f92b0;line-height:1;white-space:nowrap}
footer.site .fnav{display:flex;gap:26px;font-size:.8125rem;flex-wrap:wrap}
footer.site .fnav a{color:var(--dim)}
footer.site .fnav a:hover{color:var(--orange)}
footer.site .fmeta{font-size:.8125rem;color:var(--faint);text-align:right}
footer.site .fmeta a{color:var(--dim)}
footer.site .fmeta a:hover{color:var(--orange)}
.foot-links{margin-top:8px;font-size:.8125rem}
.linklike{
  background:none;border:0;padding:0;font:inherit;color:var(--dim);
  cursor:pointer;text-decoration:underline;
}
.linklike:hover{color:var(--orange)}
.sep{opacity:.35}

/* ============================================================
   Cookie consent banner
   ============================================================ */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  background:var(--bg-2);border:1px solid var(--line-3);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.cookie-banner .cw{
  max-width:1180px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cookie-banner p{font-size:.875rem;max-width:72ch;color:var(--body);margin:0}
.cookie-banner a{text-decoration:underline}
.cookie-banner .cb-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner .btn{padding:11px 22px;font-size:.875rem}

/* ============================================================
   Utility classes - these exist so the templates carry no style="" attributes
   ============================================================ */
.mt-22{margin-top:22px}
.mt-26{margin-top:26px}
.mt-28{margin-top:28px}
.mt-40{margin-top:40px}
.mb-28{margin-bottom:28px}
.mb-36{margin-bottom:36px}
.mb-40{margin-bottom:40px}
.mw-520{max-width:520px}
.cyan{color:var(--cyan)}
.card h3.cyan{font-size:1.25rem}

/* A <fieldset> must not inherit the browser's border/padding here, and its
   <legend> has to read like the sibling <label>s around it. */
form.uform fieldset{border:0;padding:0;min-width:0}
form.uform legend{font-size:.8125rem;color:var(--dim);padding:0;margin-bottom:10px}

/* ============================================================
   Accessibility
   ============================================================ */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;background:var(--orange);
  color:#0a1526;padding:12px 18px;font-weight:600;
}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn-primary:focus-visible{outline-color:var(--ink)}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1180px){
  :root{--gut:40px;--sec:72px}
  .hero{grid-template-columns:1fr .85fr;gap:44px}
  .hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
  .split,.split-wide{gap:48px}
  .navlinks{gap:24px}
  .navtools{gap:20px}
}
@media(max-width:1000px){
  .strip{grid-template-columns:1fr 1fr}
  /* With two columns the right-hand hairline of the odd cells is the seam, so
     only every second cell keeps one, and rows need their own divider. */
  .strip>div:nth-child(2n){border-right:0}
  .strip>div:nth-child(n+3){border-top:1px solid var(--line)}
  .grid-4{grid-template-columns:1fr 1fr}
  .artgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  /* Nav collapses into an off-canvas panel under the sticky bar. */
  .nav-toggle{display:flex}
  header.site .bar{position:relative}
  .navtools{
    position:absolute;top:100%;left:0;right:0;background:var(--bg-2);
    border-bottom:1px solid var(--line-2);flex-direction:column;align-items:stretch;
    gap:20px;padding:24px var(--gut) 28px;display:none;
    box-shadow:0 24px 40px -20px rgba(0,0,0,.7);
  }
  .navtools.open{display:flex}
  .navlinks{flex-direction:column;gap:2px}
  .navlinks a{display:block;font-size:1.0625rem;color:var(--ink);padding:10px 0}
  .lang{gap:10px}
  .hero{grid-template-columns:1fr;padding-top:72px;gap:48px}
  .mock{height:360px}
  .split,.split-wide,.contact-grid{grid-template-columns:1fr;gap:40px}
  /* The sketch and service map are decorative restatements of the prose beside
     them, so on a phone they follow it instead of pushing it down. */
  .split .art,.split-wide .art{order:2}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .band{flex-direction:column;align-items:flex-start;gap:28px}
  .band .btn{width:100%}
  .sec-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:32px}
  .phones{min-height:0;gap:18px}
  .phone.b{display:none}          /* the second device adds nothing at this size */
  footer.site{flex-direction:column;align-items:flex-start;gap:18px}
  footer.site .fmeta{text-align:left}
}
@media(max-width:700px){
  :root{--gut:24px;--sec:56px}
  .strip{grid-template-columns:1fr}
  .strip>div{border-right:0;border-top:1px solid var(--line)}
  .strip>div:first-child{border-top:0}
  .grid-4,.artgrid{grid-template-columns:1fr}
  .practice,.gate,form.uform,.card{padding:28px 24px}
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btn{width:100%}
  /* balance is for short headings; over four lines it evens the rag by breaking
     "Enterprise-grade" at its hyphen. Plain greedy wrapping keeps the compound
     whole here, which matters more than an even rag. */
  .hero h1,.phero h1,.ahero h1,.band h2{text-wrap:normal}
  .prose{padding:44px var(--gut) 64px}
  .prose .inner{font-size:1rem}
  .svcmap-b{grid-template-columns:1fr;gap:14px}
  /* Rotate the flow arrows so the three columns read top-to-bottom. */
  .svcarrow{transform:rotate(90deg);padding:2px 0}
  .cinfo .lb{width:100%}
  .status{padding:96px var(--gut)}
}
@media(max-width:420px){
  :root{--gut:18px}
  .phones{gap:0}
  .brand .tld{display:none}       /* keeps the lockup from wrapping */
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .arrow:hover .a{transform:none}
}

/* ============================================================
   Print - drop the dark ground, the chrome and the decoration
   ============================================================ */
@media print{
  header.site,footer.site .fnav,.cookie-banner,.nav-toggle,.navtools,.skip-link,
  .mock,.sketch,.svcmap,.phones,.back,.band .btn{display:none !important}
  body{background:#fff;color:#111}
  .hero,.phero,.ahero,.sec,.prose,.band{padding:0 0 18px;border:0}
  h1,h2,h3,.ahero h1,.artcard .t{color:#000}
  .prose .inner,.lead,.card p,p{color:#222}
  .prose .inner{max-width:100%;font-size:11pt}
  .prose .inner a{color:#000}
  .prose .inner a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  .rule{background:#000}
  footer.site{border-top:1px solid #ccc;color:#444}
}