/* choosetriton.com — umbrella design system.
   Sibling of tritonprocessing.com's triton.css: same type, same component
   grammar, inverted mood — white-primary surfaces with the family navy as
   the accent (Anthony, 2026-08-03), navy chrome top and bottom.
   Reference: mockups/home.png, mockups/managed_it_01.png. */

@font-face{font-family:"Instrument Serif";src:url('/fonts/InstrumentSerif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url('/fonts/InstrumentSerif-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url('/fonts/IBMPlexSans-var.woff2') format('woff2-variations');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('/fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#0A1628;          /* the family navy — chrome + accent */
  --ink-2:#112240;        /* hover depth on navy */
  --ink-3:#2C4A66;        /* borders on navy */
  --page:#FFFFFF;         /* primary surface */
  --paper:#F6F8FA;        /* cool-gray alternate surface */
  --text:#1A2332;
  --muted:#5A6572;
  --rule:rgba(10,22,40,.12);
  --gold:#C9A84C;         /* reserved for the mark; not a UI color here */
  --ai:#00D4AA;           /* tritonagency micro-accent; dialable to zero */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;
  color:var(--text);background:var(--page);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.08;color:var(--ink)}
p{margin:0 0 1em}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
/* navy grounds need a light ring or the indicator vanishes (WCAG 2.4.7) */
.nav :focus-visible,.nav__mobile :focus-visible,.foot :focus-visible,.cta :focus-visible{outline-color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:0 0 4px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
/* anchors land clear of the sticky bar */
[id]{scroll-margin-top:84px}

.wrap{max-width:1140px;margin:0 auto;padding-inline:clamp(20px,5vw,48px)}
.sec{padding-block:clamp(44px,6vw,72px);position:relative}
.sec--paper{background:var(--paper)}
/* Geometric line-art texture on the light content bands.
   Tiled at a fixed size rather than `cover`: cover rescales the square to each
   section's own box, so a short band would show huge triangles and a tall one
   small ones — the scale would visibly jump between stacked sections.
   Drawn on ::before, not as a background on .sec with opacity, because opacity
   on the section would fade its text and cards too.
   Paper bands only — white stays clean because that is where the dense
   content lives (tiles, product cards, step sequences, each already carrying
   its own etched motif). The tinted bands are short summary panels, so the
   pattern has room to read there and reinforces them as distinct surfaces.
   Swap the selector to .sec:not(.sec--paper) to flip which band is textured. */
.sec--paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('/media/umbrella/texture-geometric.png') repeat center;
  background-size:var(--texture-size,620px);
  /* .16, not the .12 used over pure white: the paper tint eats some contrast,
     so the same value reads noticeably quieter here. */
  opacity:var(--texture-opacity,.16);
}
.sec>.wrap{position:relative;z-index:1}
.sec__lede{max-width:34em;color:var(--muted);font-size:16.5px}

.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:500;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:14px;font-weight:600;
  text-decoration:none;padding:10px 18px;border-radius:4px;cursor:pointer;
  border:1px solid var(--ink);transition:background .18s,color .18s,box-shadow .18s,transform .18s;
  box-shadow:0 2px 6px rgba(10,22,40,.08);
}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:var(--ink-2);box-shadow:0 3px 10px rgba(10,22,40,.16)}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:rgba(10,22,40,.05)}
/* on navy grounds */
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ---------- nav (navy, sticky) ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--ink);color:#fff;box-shadow:0 2px 10px rgba(10,22,40,.25)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.brand img{height:40px;width:auto;display:block}
.brand__word{font-family:var(--serif);font-size:24px;letter-spacing:.14em}
.nav__links{display:none;gap:26px;font-size:14.5px}
.nav__links a{text-decoration:none;color:rgba(255,255,255,.82);transition:color .18s}
.nav__links a:hover{color:#fff}
.nav__links a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1.5px}
.nav__cta{
  font-family:var(--sans);font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid rgba(255,255,255,.65);color:#fff;background:transparent;
  padding:10px 18px;border-radius:4px;transition:background .18s,border-color .18s;white-space:nowrap;
}
.nav__cta:hover{background:rgba(255,255,255,.1);border-color:#fff}
@media(min-width:920px){.nav__links{display:flex}}
.nav__burger{
  display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:46px;height:46px;background:none;border:1px solid var(--ink-3);
  cursor:pointer;border-radius:4px;transition:background .18s,border-color .18s;
}
.nav__burger-bar{display:block;width:20px;height:2px;background:#fff;border-radius:1px;transition:transform .22s,opacity .18s}
.nav__burger[aria-expanded="true"]{background:#fff;border-color:#fff}
.nav__burger[aria-expanded="true"] .nav__burger-bar{background:var(--ink)}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__mobile{
  display:grid;background:var(--ink);border-top:1px solid var(--ink-2);padding:10px 0 18px;
  max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;
}
/* author display:grid would defeat the hidden attribute the burger toggles */
.nav__mobile[hidden]{display:none}
.nav__mobile a{color:rgba(255,255,255,.82);text-decoration:none;font-size:16.5px;padding:13px clamp(20px,5vw,48px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav__mobile a:hover{color:#fff}
.nav__mobile .nav__mobile-cta{margin:16px clamp(20px,5vw,48px) 0;border:1px solid rgba(255,255,255,.65);text-align:center;border-radius:4px;padding:12px;font-weight:600}
@media(min-width:920px){.nav__burger,.nav__mobile{display:none}}
@media(max-width:919.98px){.nav__cta--desktop{display:none}}

/* ---------- hero ---------- */
/* overflow-x:clip guards the full-bleed art below: 100vw counts the scrollbar
   while the layout width does not, so the bleed can overshoot by a scrollbar's
   width. clip (not hidden) avoids making this a scroll container. */
.hero{background:linear-gradient(180deg,var(--page) 0%,var(--paper) 100%);padding-block:clamp(48px,7vw,84px);overflow-x:clip}
/* Faint page-title underlays (image requests 10-14). The art is right-weighted
   with its left third empty, so it sits beside the title rather than under it.
   Only above 860px: on narrow screens the hero is tall and the art would end
   up behind the copy. Contact overrides the opacity — its form sits on top. */
.hero--art{position:relative;overflow:hidden}
.hero--art>.wrap{position:relative;z-index:1}
@media(min-width:860px){
  /* Sized by WIDTH against a fixed 8:3 box, not by the hero's height: the
     contact hero is tall (it holds the form) and height-based sizing scaled
     the art up until it crossed the copy column. */
  .hero--art::before{
    content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:min(56%,860px);aspect-ratio:8/3;pointer-events:none;
    background:var(--hero-art) no-repeat center/contain;
    opacity:var(--hero-art-opacity,.1);
  }
}
.hero__grid{display:grid;gap:clamp(36px,6vw,56px);align-items:center}
@media(min-width:960px){.hero__grid{grid-template-columns:1.04fr .96fr}}
.hero h1{font-size:clamp(34px,4.8vw,52px);margin-bottom:16px;text-wrap:balance}
.hero__art img{width:100%;height:auto;display:block}
@media(max-width:639.98px){.hero__art{display:none}}
/* Home hero art bleeds to the viewport's right edge instead of stopping at the
   wrap. The pull is the wrap's auto margin plus its gutter — kept in sync with
   .wrap's max-width and padding-inline above. Two-column layouts only; when the
   grid stacks, the art is a full-width row and bleeding one side looks lopsided. */
@media(min-width:960px){
  .hero__art{
    margin-right:calc(-1 * (max(0px,(100vw - 1140px) / 2) + clamp(20px,5vw,48px)));
    /* and flush to the top of the hero: align-self:start takes it off the
       grid's centre line, the negative margin then cancels .hero's top
       padding so no white band sits between the nav and the art */
    align-self:start;
    margin-top:calc(-1 * clamp(48px,7vw,84px));
  }
}

/* ---------- section headings ---------- */
.sec h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:12px;max-width:22em;text-wrap:balance}

/* ---------- service tiles ---------- */
.tiles{display:grid;gap:14px;margin-top:26px}
@media(min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.tiles{grid-template-columns:1fr 1fr 1fr;grid-auto-rows:1fr}}
@media(min-width:640px) and (max-width:979.98px){.tiles a.tile:last-child:nth-child(odd){grid-column:1/-1}}
a.tile{
  position:relative;display:block;background:#fff;border:1px solid var(--rule);
  border-radius:6px;padding:20px 20px 18px;text-decoration:none;color:var(--text);
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
a.tile:hover{transform:translateY(-1px);border-color:var(--ink-3);box-shadow:0 6px 18px rgba(10,22,40,.08)}
/* Etched service motifs (image requests 15-23), anchored bottom-right so the
   icon, heading and copy — all top-left — never collide with the art.
   Height-based sizing keeps them even across motifs of differing dimensions.
   Deliberately ::before: ::after already draws the hover underline below, and
   claiming it here overrode that rule's background and box. */
a.tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:var(--tile,none) no-repeat right 6% bottom 8%/auto 56%;
  opacity:.14;transition:opacity .22s;
}
a.tile:hover::before{opacity:.2}
.tile__icon{width:34px;height:34px;color:var(--ink);margin-bottom:12px}
.tile__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:18.5px;margin-bottom:5px}
.tile p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
/* the underline that grows on hover — family hover grammar */
.tile::after{
  content:"";position:absolute;left:20px;bottom:14px;height:2px;width:30px;
  background:var(--ink);transform-origin:left;transition:width .25s;
}
a.tile:hover::after{width:64px}
a.tile--ai::after{background:linear-gradient(90deg,var(--ink),var(--ai))}
.tile--pad{padding-bottom:34px}

/* ---------- products band ---------- */
.prods{display:grid;gap:14px;margin-top:26px}
@media(min-width:900px){
  .prods{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  /* an odd card out spans the row instead of orphaning beside a gap */
  .prods .prod:last-child:nth-child(odd){grid-column:1/-1;align-items:center;text-align:center}
}
.prod{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--rule);border-radius:6px;padding:22px;transition:border-color .22s;
}
.prod:hover{border-color:var(--ink-3)}
.prod h3{font-size:20px;margin-bottom:4px}
.prod__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.prod__shot{margin:6px 0 16px;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--paper)}
/* the odd card out spans the full row, so cap its shot — left unbounded it
   renders at twice the size of every other product shot */
@media(min-width:900px){.prods .prod:last-child:nth-child(odd) .prod__shot{max-width:620px;margin-inline:auto}}
.prod__shot img{display:block;width:100%}
.prod p{color:var(--muted);font-size:14.5px;max-width:62ch}
.prod__go{margin-top:auto;font-weight:600;font-size:15px;text-decoration:none;color:var(--ink)}
.prod__go:hover{text-decoration:underline}
.prod--badged .prod__k,.prod:has(.badge) .prod__k{padding-right:90px}
.badge{
  position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;background:var(--ink);color:#fff;padding:5px 10px;border-radius:3px;
}

/* ---------- why strip / pillars ---------- */
.pillars{display:grid;gap:22px;margin-top:24px}
@media(min-width:860px){.pillars{grid-template-columns:1fr 1fr 1fr}}
.pillar h3{font-size:18.5px;margin-bottom:6px}
.pillar p{color:var(--muted);font-size:14.5px;margin:0}
.pillar .tile__icon{margin-bottom:12px}

/* ---------- split band (interior pages) ---------- */
.split{display:grid;gap:clamp(30px,5vw,54px);align-items:center}
@media(min-width:920px){.split{grid-template-columns:1fr 1.05fr}}
.split__art img{width:100%;display:block;border-radius:6px}

/* ---------- steps ---------- */
.steps{display:grid;gap:22px;margin-top:8px}
@media(min-width:860px){.steps{grid-template-columns:1fr 1fr 1fr}}
.step__n{font-family:var(--serif);font-size:36px;color:var(--ink);margin:0 0 2px}
.step h3{font-size:18px;margin-bottom:6px}
.step h3::after{content:"";display:block;width:26px;height:2px;background:var(--ink);margin-top:8px}
.step p{color:var(--muted);font-size:14px;margin:8px 0 0}

/* ---------- CTA band (the navy moment) ---------- */
.cta{background:var(--ink);color:#fff;text-align:center;padding-block:clamp(44px,6vw,64px)}
.cta h2{color:#fff;font-size:clamp(28px,4vw,42px);max-width:22em;margin-inline:auto;margin-bottom:22px}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:clamp(28px,4vw,44px)}
@media(min-width:960px){.form-grid{grid-template-columns:1fr 1.05fr}}
.box{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:clamp(22px,3.5vw,32px);box-shadow:0 1px 4px rgba(10,22,40,.05)}
.field{margin-bottom:13px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field input,.field textarea{
  width:100%;font:inherit;font-size:15.5px;color:var(--text);
  padding:10px 11px;border:1px solid var(--rule);border-radius:4px;background:#fff;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.notice{font-size:13px;color:var(--muted);margin:12px 0 0}
.field-error{color:#a33;font-size:13px;margin:5px 0 0}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#a33}
.form-status{margin-top:14px;font-size:14.5px}
.form-status[data-state="ok"]{color:#1a6b3c}
.form-status[data-state="err"]{color:#a33}
.contact-pts{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:4px;color:var(--muted);font-size:14.5px}
.contact-pts a{display:inline-block;padding-block:5px}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.78);font-size:14px;padding-block:clamp(38px,5vw,56px) 22px}
.foot a{color:rgba(255,255,255,.78);text-decoration:none}
.foot a:hover{color:#fff}
.foot__grid{display:grid;gap:26px}
@media(min-width:760px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.foot__grid{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.brand--foot{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}
.brand--foot img{height:72px}
.foot__h{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 13px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot ul a{display:inline-block;padding-block:7px}
.foot__legal a{display:inline-block;padding-block:7px}
.foot__legal{margin-top:14px;font-size:13px;color:rgba(255,255,255,.55);display:flex;flex-wrap:wrap;gap:8px 26px}
/* The divider lives on the wrapper so it spans the footer, while the
   disclosure keeps a readable measure. The disclosure also sits outside the
   legal flex row: inside it, it packs beside the copyright, and
   flex-basis:100% cannot force a break while max-width constrains the item. */
.foot__bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:18px}
.foot__disclosure{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.42);max-width:88ch}

/* ---------- 404 ---------- */
.lost{min-height:52vh;display:grid;place-items:center;text-align:center;padding-block:60px}
.lost h1{font-size:clamp(36px,6vw,56px);margin-bottom:12px}

/* ---------- worksheet lead-magnet band ---------- */
/* Rides the dark .cta band. On white or on the textured paper it read as more
   page, and a form that looks like page is a form nobody fills in. Where this
   band appears it IS the page's closing call to action, so it replaces the
   .cta rather than stacking above one — hence `class="cta wband"`, which
   inherits the dark ground and then overrides .cta's centring for the split.
   One field: the email is the whole ask, the note under it the whole promise. */
.wband{text-align:left}
.wband__grid{display:grid;gap:26px}
@media(min-width:900px){.wband__grid{grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}}
/* Same specificity as `.cta h2`, declared later, so these win. */
.wband h2{font-size:clamp(26px,3.4vw,36px);max-width:16em;margin-inline:0;margin-bottom:10px}
.wband .eyebrow{color:rgba(255,255,255,.55)}
.wband .sec__lede{color:rgba(255,255,255,.72)}
.wband__alt{margin-top:16px;font-size:14px;color:rgba(255,255,255,.55)}
.wband__alt a{color:rgba(255,255,255,.85)}
.wband__label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:7px}
.wband__row{display:flex;gap:10px;flex-wrap:wrap}
.wband__row input{
  flex:1 1 230px;font-family:var(--sans);font-size:16px;color:var(--text);
  padding:12px 13px;border:1px solid transparent;border-radius:4px;background:#fff;
}
.wband__row input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.38)}
/* The dark ground inverts the button — .btn--solid is ink on ink here. */
.wband__row .btn{background:#fff;color:var(--ink);border-color:#fff}
.wband__row .btn:hover{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.86);box-shadow:none}
.wband__note{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.55)}
.wband__note[data-state="ok"]{color:#fff;font-weight:600}
.wband__note[data-state="err"]{color:#ffb4a2}