/* ==========================================================================
   CRI Design System
   Comprehensive Resources Inc. — crincit.com
   Plain CSS. No build step. No framework.

   Signature motif: the horizon. CRI's brand promise is "Expand Your Horizon",
   so a gradient horizon rule recurs as the site's structural device.
   ========================================================================== */

:root{
  /* --- Navy ramp -------------------------------------------------------
     Built outward from the logo's measured ink colour (#042659), which now
     sits at the centre of the ramp rather than beside it. Navy carries the
     brand; blue is used only for interaction and emphasis. */
  --navy-950:#020D1A;
  --navy-900:#041426;
  --navy-850:#05203F;
  --brand-ink:#042659;   /* the logo */
  --navy-800:#042659;
  --navy-700:#07366F;
  --navy-600:#0B4C8C;
  --navy-500:#0E5AA8;

  /* --- Blue ramp: interaction and accent only -------------------------- */
  --blue-600:#0D55B0;
  --blue-500:#1268D5;
  --blue-400:#3D85DF;
  --blue-300:#6FA6E9;
  --blue-200:#A9CBF3;
  --blue-100:#D6E6FA;

  /* Accent alias. Previously electric cyan; now a steel blue that stays in
     the navy family and still clears WCAG AA on dark navy (7.33:1). */
  --accent:#3D85DF;
  --accent-soft:#6FA6E9;
  --cyan-500:#3D85DF;    /* kept as an alias so older rules resolve */
  --cyan-200:#D6E6FA;

  --ice:#EAF2FB;
  --ice-deep:#CFE0F5;

  /* --- Semantic --------------------------------------------------------- */
  --ink:#102133;
  --ink-muted:#4A5A6D;
  --line:#DCE7F5;
  --white:#fff;
  --on-dark:#ffffff;
  --on-dark-muted:#A9CBF3;
  --on-dark-dim:#7C93B5;
  --success:#18895B; --warning:#E9A23B; --error:#D64545;

  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --section:clamp(3.5rem,2rem + 7vw,7rem);
  --gutter:clamp(1.25rem,.5rem + 3vw,3rem);
  --radius:.875rem;

  /* --- Logo sizing -----------------------------------------------------
     ONE place to change how big the CRI logo renders.
     The lockup is 4.35:1, so every extra pixel of height costs 4.35px of
     width. On a 360px phone the header has roughly 110px left after the
     CTA button and hamburger, so the clamp keeps it small there and lets
     it grow on wider screens. Raise the middle and max values to go
     bigger; leave the minimum alone unless you also shrink the header CTA. */
  --logo-h:clamp(26px,1.4rem + 2.6vw,64px);
  --logo-h-footer:clamp(40px,2.2rem + 2vw,72px);
  --logo-h-drawer:48px;

  /* Shadows tinted with the logo ink rather than neutral grey. */
  --shadow:0 1px 2px rgb(4 38 89/.06),0 8px 24px -8px rgb(4 38 89/.16);
  --shadow-hover:0 2px 4px rgb(4 38 89/.08),0 20px 40px -12px rgb(4 38 89/.26);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{background:var(--white);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:600;letter-spacing:-.022em;
  line-height:1.15;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:.25rem}
.on-dark :focus-visible{outline-color:var(--cyan-500)}
::selection{background:var(--cyan-200);color:var(--navy-900)}
button,[type=button],[type=submit]{min-height:44px;font-family:inherit;cursor:pointer}

.wrap{width:100%;max-width:80rem;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:52rem}
.measure{max-width:68ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:1rem;top:-100%;z-index:200;background:var(--navy-700);color:#fff;
  padding:.75rem 1.25rem;border-radius:0 0 var(--radius) var(--radius);transition:top .15s var(--ease)}
.skip:focus{top:0}

/* --- signature horizon rule --- */
.horizon{height:1px;border:0;background:linear-gradient(90deg,var(--navy-700) 0%,
  var(--blue-500) 20%,var(--line) 58%,transparent 100%)}
.horizon-dark{height:1px;border:0;background:linear-gradient(90deg,var(--cyan-500) 0%,
  rgb(61 133 223/.35) 30%,rgb(255 255 255/.12) 60%,transparent 100%)}

/* --- type helpers --- */
.eyebrow{font-family:var(--display);font-size:.75rem;line-height:1.4;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-500)}
.on-dark .eyebrow{color:var(--cyan-500)}
.lead{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);color:var(--ink-muted)}
.on-dark .lead{color:var(--on-dark-muted)}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;
  padding:.75rem 1.5rem;border-radius:999px;font-weight:600;font-size:.9375rem;
  border:1px solid transparent;transition:all .25s var(--ease);white-space:nowrap;text-align:center}
.btn-primary{background:linear-gradient(135deg,var(--blue-500) 0%,var(--cyan-500) 100%);color:#fff;
  box-shadow:0 4px 14px -4px rgb(18 104 213/.5)}
.btn-primary:hover{transform:translateY(-2px);
  background:linear-gradient(135deg,var(--navy-700) 0%,var(--blue-600) 100%);
  box-shadow:0 10px 26px -6px rgb(7 54 111/.7)}
.btn-ghost{border-color:var(--line);color:var(--navy-700);background:#fff}
.btn-ghost:hover{border-color:var(--blue-400);background:var(--ice)}
.on-dark .btn-ghost{border-color:rgb(255 255 255/.28);color:#fff;background:transparent}
.on-dark .btn-ghost:hover{border-color:var(--cyan-500);background:rgb(61 133 223/.08)}
.btn-sm{padding:.5rem 1.1rem;font-size:.875rem}
.arrow-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue-500);
  font-weight:600;font-size:.9375rem;min-height:44px}
.arrow-link:hover{gap:.65rem;text-decoration:underline;text-underline-offset:4px}
.on-dark .arrow-link{color:var(--cyan-500)}

/* --- announcement --- */
.announce{background:var(--navy-900);color:var(--on-dark-muted);font-size:.8125rem;position:relative;z-index:60}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding-block:.6rem;text-align:center;flex-wrap:wrap}
.announce a{color:var(--cyan-500);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.announce button{background:none;border:0;color:var(--on-dark-muted);font-size:1.15rem;
  line-height:1;padding:.25rem .5rem;min-height:auto}

/* --- header --- */
.hdr{position:sticky;top:0;z-index:50;background:rgb(255 255 255/.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.hdr.scrolled{box-shadow:0 4px 20px -8px rgb(7 54 111/.18)}
.hdr .wrap{display:flex;align-items:center;gap:1.5rem;padding-block:.75rem;min-width:0}
/* Logo may shrink before the CTA and menu button do, so a larger
   --logo-h can never push controls off a narrow screen. */
.logo{flex:0 1 auto;min-width:0}
.logo img{max-width:100%;object-fit:contain;object-position:left center}
.hdr-cta{flex:0 0 auto}
.logo img{height:var(--logo-h);width:auto}
.nav{display:flex;gap:.1rem;margin-left:auto}
.nav>li{position:relative}
.nav>li>a{display:flex;align-items:center;gap:.28rem;padding:.6rem .55rem;font-size:.875rem;
  font-weight:500;border-radius:.5rem;transition:color .2s;min-height:44px;white-space:nowrap}
.nav>li>a:hover,.nav>li>a[aria-current=page]{color:var(--blue-500)}
.nav>li>a::after{content:"";position:absolute;left:.55rem;right:.55rem;bottom:.2rem;height:1px;
  background:linear-gradient(90deg,var(--cyan-500),var(--blue-500),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav>li:hover>a::after,.nav>li>a[aria-current=page]::after{transform:scaleX(1)}
.caret{width:9px;height:9px;opacity:.5;flex:none}
.mega{position:absolute;top:calc(100% + .4rem);left:50%;transform:translateX(-50%) translateY(-8px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-hover);padding:1.5rem;display:grid;gap:1.5rem;
  opacity:0;visibility:hidden;transition:all .25s var(--ease)}
.nav>li:hover .mega,.nav>li:focus-within .mega{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
.mega-4{grid-template-columns:repeat(4,minmax(185px,1fr));width:max-content;max-width:min(90vw,64rem)}
.mega-2{grid-template-columns:repeat(2,minmax(210px,1fr));width:max-content}
.mega-1{grid-template-columns:minmax(230px,1fr);width:max-content}
.mega .mega-label{font-family:var(--display);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500);
  margin-bottom:.6rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.mega a{display:block;padding:.42rem 0;font-size:.875rem;color:var(--ink-muted);transition:color .2s}
.mega a:hover{color:var(--blue-500)}
.hdr-cta{display:flex;gap:.55rem;align-items:center}
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:.5rem;
  width:44px;height:44px;align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:18px;height:2px;background:var(--navy-700);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;
  height:2px;background:var(--navy-700);transition:transform .25s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* --- mobile drawer --- */
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}
.drawer[data-open=true]{visibility:visible;pointer-events:auto}
.drawer-scrim{position:absolute;inset:0;background:rgb(4 20 38/.55);opacity:0;transition:opacity .3s}
.drawer[data-open=true] .drawer-scrim{opacity:1}
.drawer-panel{position:absolute;inset-block:0;right:0;width:min(92vw,26rem);background:#fff;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s var(--ease);
  box-shadow:-8px 0 40px rgb(4 20 38/.25)}
.drawer[data-open=true] .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--gutter);border-bottom:1px solid var(--line)}
.drawer-head img{height:var(--logo-h-drawer)}
.drawer-close{background:none;border:1px solid var(--line);border-radius:.5rem;width:44px;height:44px;
  font-size:1.4rem;line-height:1;color:var(--navy-700)}
.drawer-body{flex:1;overflow-y:auto;padding:.5rem var(--gutter) 1.5rem;-webkit-overflow-scrolling:touch}
.drawer-body>ul>li{border-bottom:1px solid var(--line)}
.drawer-body a{display:block;padding:.85rem 0;font-weight:500;min-height:44px}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;padding:.85rem 0;font-size:1rem;font-weight:500;font-family:inherit;
  color:var(--ink);text-align:left}
.acc-btn .caret{transition:transform .25s var(--ease);width:12px;height:12px;opacity:.6}
.acc-btn[aria-expanded=true] .caret{transform:rotate(180deg)}
.acc-panel{display:none;padding-bottom:.6rem}
.acc-panel[data-open=true]{display:block}
.acc-panel a{padding:.6rem 0 .6rem 1rem;font-weight:400;font-size:.9375rem;color:var(--ink-muted);
  border-left:2px solid var(--line)}
.acc-panel a:hover{color:var(--blue-500);border-left-color:var(--blue-500)}
.acc-panel .acc-label{font-family:var(--display);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-500);margin:.75rem 0 .25rem 1rem}
.drawer-foot{padding:1rem var(--gutter);border-top:1px solid var(--line);display:grid;gap:.6rem}
.drawer-foot .btn{width:100%}

/* --- hero --- */
.hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(155deg,#020D1A 0%,#042659 45%,#07366F 78%,#0B4C8C 100%)}
.hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgb(255 255 255/.035) 1px,transparent 1px),
    linear-gradient(90deg,rgb(255 255 255/.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 40%,#000,transparent);
  mask-image:radial-gradient(ellipse 90% 70% at 70% 40%,#000,transparent)}
.hero .wrap{position:relative}
.hero-home{padding-block:clamp(3rem,2rem + 6vw,5.5rem) clamp(3.5rem,2rem + 7vw,6rem)}
.hero-home .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero-home h1{font-size:clamp(2.5rem,1.8rem + 4vw,4.75rem);font-weight:700;margin-block:1.1rem}
.grad{background:linear-gradient(135deg,#EAF2FB 0%,#6FA6E9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:2rem}
.hero-page{padding-block:clamp(2.5rem,2rem + 4vw,4rem) clamp(3rem,2rem + 5vw,4.5rem)}
.hero-page h1{font-size:clamp(2rem,1.5rem + 3vw,3.5rem);margin-block:.85rem 1rem}
.hero-page .lead{max-width:60ch}

/* --- breadcrumbs --- */
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.8125rem;color:var(--on-dark-muted)}
.crumbs li{display:flex;align-items:center;gap:.4rem}
.crumbs li+li::before{content:"/";opacity:.45}
.crumbs a:hover{color:var(--cyan-500);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current=page]{color:#fff}

/* --- ecosystem svg --- */
.eco{width:100%;height:auto}
.eco .link{stroke:rgb(105 160 230/.3);stroke-width:1.25;fill:none}
.eco .pulse{stroke:var(--blue-300);stroke-width:1.75;fill:none;stroke-linecap:round;
  stroke-dasharray:26 300;opacity:.9;animation:flow 4s linear infinite}
@keyframes flow{from{stroke-dashoffset:326}to{stroke-dashoffset:0}}
.eco .node-ring{fill:none;stroke:rgb(105 160 230/.48);stroke-width:1;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.eco .node-body{fill:#042659;stroke:rgb(169 203 243/.45);stroke-width:1}
.eco .node-label{font-family:Inter,sans-serif;font-size:11px;font-weight:600;fill:#D6E6FA}
.eco .orbit{animation:spin 46s linear infinite;transform-origin:260px 210px}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- credibility strip --- */
.cred{background:var(--navy-900);color:#fff;border-top:1px solid rgb(255 255 255/.08)}
.cred .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgb(255 255 255/.08);padding:0}
.cred>div>div{background:var(--navy-900);padding:1.75rem var(--gutter);text-align:center}
.cred .stat{font-family:var(--display);font-size:2.5rem;font-weight:700;line-height:1;
  background:linear-gradient(135deg,#A9CBF3,#3D85DF);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.cred .lbl{font-size:.875rem;color:var(--on-dark-muted);margin-top:.4rem}
.cred .ico{width:32px;height:32px;margin:0 auto;stroke:var(--cyan-500);fill:none;stroke-width:1.5}

/* --- sections --- */
section{padding-block:var(--section)}
.tint{background:linear-gradient(180deg,var(--ice) 0%,#fff 100%)}
.tint-flat{background:var(--ice)}
.dark{background:linear-gradient(155deg,#020D1A 0%,#042659 45%,#07366F 78%,#0B4C8C 100%);color:#fff;
  position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 15% 20%,rgb(61 133 223/.14),transparent 45%),
    radial-gradient(circle at 85% 75%,rgb(18 104 213/.22),transparent 50%)}
.dark .wrap{position:relative}
.sec-head{max-width:62ch;margin-bottom:2.75rem}
.sec-head h2{font-size:clamp(2rem,1.6rem + 2.4vw,3.25rem);margin-block:.7rem .9rem}
.sec-head .lead{font-size:1.0625rem}

/* --- grids --- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}

/* --- cards --- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;
  transition:all .3s var(--ease);display:block}
.card:hover{border-color:var(--blue-200);box-shadow:var(--shadow);transform:translateY(-3px)}
.card h3{font-size:1.125rem;margin-bottom:.55rem}
.card p{font-size:.9375rem;color:var(--ink-muted)}
.card .ico{width:34px;height:34px;stroke:var(--blue-500);fill:none;stroke-width:1.5;margin-bottom:.9rem}

.pillar{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.5rem 1.4rem;box-shadow:var(--shadow);transition:all .35s var(--ease);overflow:hidden;display:block}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-500));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--blue-200)}
.pillar:hover::before{transform:scaleX(1)}
.pillar .ico{width:38px;height:38px;stroke:var(--blue-500);fill:none;stroke-width:1.5;margin-bottom:1rem}
.pillar h3{font-size:1.3rem;letter-spacing:.02em;margin-bottom:.45rem;color:var(--navy-700)}
.pillar p{font-size:.9375rem;color:var(--ink-muted);line-height:1.55}
.pillar .arrow-link{margin-top:.9rem;font-size:.875rem}

.dark .card{background:rgb(255 255 255/.05);border-color:rgb(255 255 255/.11);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dark .card:hover{background:rgb(255 255 255/.09);border-color:rgb(61 133 223/.45);
  transform:translateY(-4px);box-shadow:none}
.dark .card h3{color:#fff}
.dark .card p{color:#DCE9F9}
.dark .card .ico{stroke:var(--cyan-500)}

/* --- capability list --- */
.cap-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 2.5rem}
.cap-list li{padding-left:1.5rem;position:relative}
.cap-list li::before{content:"";position:absolute;left:0;top:.55rem;width:8px;height:8px;
  border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--cyan-500))}
.cap-list h3{font-size:1.0625rem;margin-bottom:.3rem}
.cap-list p{font-size:.9375rem;color:var(--ink-muted)}
.check-list{display:grid;gap:.85rem}
.check-list li{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem}
.check-list svg{width:20px;height:20px;flex:none;margin-top:.15rem;stroke:var(--blue-500);
  fill:none;stroke-width:2}
.dark .check-list svg{stroke:var(--cyan-500)}
.dark .check-list li{color:#DCE9F9}

/* --- process --- */
.proc{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.proc::before{content:"";position:absolute;top:26px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,var(--cyan-500),var(--blue-500) 40%,var(--line))}
.step{position:relative;text-align:center}
.step .dot{width:54px;height:54px;margin:0 auto .85rem;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;font-family:var(--display);
  font-weight:700;color:var(--blue-500);position:relative;z-index:1;box-shadow:var(--shadow);
  transition:all .3s var(--ease)}
.step:hover .dot{background:linear-gradient(135deg,var(--blue-500),var(--cyan-500));
  color:#fff;border-color:transparent;transform:scale(1.08)}
.step h3{font-size:1rem;margin-bottom:.3rem}
.step p{font-size:.8125rem;color:var(--ink-muted);line-height:1.5}

/* --- lifecycle chips --- */
.lifecycle{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.lifecycle li{display:flex;align-items:center;gap:.6rem}
.lifecycle span{display:inline-block;padding:.55rem 1.1rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-weight:600;font-size:.875rem;
  color:var(--navy-700);box-shadow:var(--shadow)}
.lifecycle li:not(:last-child)::after{content:"";width:18px;height:1px;
  background:linear-gradient(90deg,var(--cyan-500),var(--blue-500))}

/* --- stack chips --- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{padding:.42rem .9rem;border-radius:999px;background:var(--ice);
  border:1px solid var(--ice-deep);font-size:.8125rem;font-weight:500;color:var(--navy-700)}

/* --- FAQ --- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 0;font-family:var(--display);font-weight:600;font-size:1.0625rem;
  cursor:pointer;list-style:none;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--blue-500);
  line-height:1;flex:none;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--blue-500)}
.faq .ans{padding-bottom:1.25rem;color:var(--ink-muted);font-size:.9375rem;max-width:72ch}

/* --- placeholder --- */
.ph{border:1px dashed var(--blue-400);border-radius:var(--radius);padding:2.25rem 1.75rem;
  text-align:center;background:repeating-linear-gradient(45deg,var(--ice),var(--ice) 10px,#fff 10px,#fff 20px)}
.ph .tag{display:inline-block;background:var(--navy-700);color:#fff;font-size:.6875rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .75rem;
  border-radius:999px;margin-bottom:.8rem}
.ph p{color:var(--ink-muted);font-size:.9375rem;max-width:54ch;margin-inline:auto}

/* --- forms --- */
.form{display:grid;gap:1.15rem}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem}
.field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.4rem}
.req{color:var(--error)}
.field input,.field select,.field textarea{width:100%;padding:.75rem .9rem;border-radius:.6rem;
  border:1px solid var(--line);font-family:inherit;font-size:.9375rem;background:#fff;
  color:var(--ink);min-height:44px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--blue-500);box-shadow:0 0 0 3px rgb(18 104 213/.15)}
.field .hint{font-size:.8125rem;color:var(--ink-muted);margin-top:.35rem}
.field .err{font-size:.8125rem;color:var(--error);margin-top:.35rem;font-weight:500}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--error)}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.875rem;color:var(--ink-muted)}
.consent input{width:20px;height:20px;flex:none;margin-top:.15rem;min-height:0;accent-color:var(--blue-500)}
.consent a{color:var(--blue-500);text-decoration:underline;text-underline-offset:3px}
.alert{padding:1rem 1.15rem;border-radius:.6rem;font-size:.9375rem;border:1px solid}
.alert-ok{background:#EAF7F1;border-color:#B6E0CD;color:#0F6B46}
.alert-err{background:#FCEDED;border-color:#F2C4C4;color:#A32F2F}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- job list --- */
.job{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;transition:all .25s var(--ease)}
.job:hover{border-color:var(--blue-200);box-shadow:var(--shadow);transform:translateY(-2px)}
.job h3{font-size:1.125rem;margin-bottom:.4rem;color:var(--navy-700)}
.job-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.8125rem;color:var(--ink-muted)}
.job-meta span{display:flex;align-items:center;gap:.35rem}
.badge{display:inline-block;padding:.25rem .65rem;border-radius:999px;font-size:.6875rem;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.badge-featured{background:linear-gradient(135deg,var(--blue-500),var(--cyan-500));color:#fff}
.badge-type{background:var(--ice);color:var(--navy-700);border:1px solid var(--ice-deep)}
.empty{text-align:center;padding:3rem 1.5rem;border:1px dashed var(--line);border-radius:var(--radius)}
.empty h3{margin-bottom:.5rem}
.empty p{color:var(--ink-muted);max-width:44ch;margin:0 auto 1.5rem}

/* --- footer --- */
footer{background:var(--navy-900);color:var(--on-dark-muted);font-size:.875rem;
  border-top:1px solid rgb(255 255 255/.08);padding-top:3.5rem}
.f-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2.25rem;padding-bottom:2.5rem}
.f-brand .f-logo{height:var(--logo-h-footer);width:auto;margin-bottom:1.1rem}
.f-brand p{max-width:34ch;line-height:1.6}
.f-col h2{font-family:var(--display);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin-bottom:.9rem}
.f-col a{display:block;padding:.28rem 0;transition:color .2s}
.f-col a:hover{color:var(--cyan-500)}
.f-contact{margin-top:1.1rem;line-height:1.85}
.f-contact .lbl{color:var(--on-dark-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.f-contact a:hover{color:var(--cyan-500)}
.newsletter{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.newsletter input{flex:1;min-width:11rem;background:rgb(255 255 255/.07);
  border:1px solid rgb(255 255 255/.15);border-radius:999px;padding:.65rem 1rem;color:#fff;
  font-family:inherit;font-size:.875rem;min-height:44px}
.newsletter input::placeholder{color:var(--on-dark-dim)}
.newsletter input:focus{outline:2px solid var(--cyan-500);outline-offset:1px}
.f-bot{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;
  padding-block:1.4rem;border-top:1px solid rgb(255 255 255/.08);font-size:.8125rem}
.f-legal{display:flex;flex-wrap:wrap;gap:1.15rem}
.f-legal a:hover{color:var(--cyan-500)}
.eeo{padding-bottom:2rem;font-size:.75rem;color:var(--on-dark-dim);max-width:82ch}

/* --- prose (legal pages) --- */
.prose{max-width:70ch}
.prose h2{font-size:1.5rem;margin:2.25rem 0 .75rem}
.prose h3{font-size:1.15rem;margin:1.75rem 0 .5rem}
.prose p,.prose li{color:var(--ink-muted);margin-bottom:.85rem}
.prose ul{list-style:disc;padding-left:1.35rem}
.prose ul li{margin-bottom:.4rem}
.prose a{color:var(--blue-500);text-decoration:underline;text-underline-offset:3px}
.legal-note{background:#FFF8E6;border-left:3px solid var(--warning);padding:1rem 1.15rem;
  border-radius:.4rem;margin-bottom:2rem;font-size:.875rem;color:#6B4E10}
.legal-note strong{color:#4A3608}

/* --- responsive --- */
/* Secondary CTA returns only at 1500px, the same point the container
   widens to 88rem. Gating it earlier overflowed the header by ~74px. */
@media(max-width:1499px){
  .hdr-cta .btn-ghost{display:none}
}
/* Extra breathing room on large screens so the logo can reach full size. */
@media(min-width:1500px){
  .hdr .wrap{max-width:88rem}
}
/* On very narrow phones the header CTA is dropped so the logo keeps its
   full size. Nothing is lost: "Start a Project" is pinned in the mobile
   drawer, and every page section ends with the same call to action. */
@media(max-width:400px){
  .hdr-cta .btn-primary{display:none}
}
@media(max-width:1240px){
  .nav,.hdr-cta .btn-ghost{display:none}
  .burger{display:flex}
  .hero-home .wrap{grid-template-columns:1fr}
  .hero-visual{order:-1;max-width:460px;margin-inline:auto;width:100%}
  .grid-4,.cred .wrap{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:repeat(3,1fr);gap:2rem 1rem}
  .proc::before{display:none}
  .f-top{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:820px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .cap-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4,.cred .wrap{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .proc{grid-template-columns:repeat(2,1fr)}
  .f-top{grid-template-columns:1fr 1fr}
  .hero-actions .btn{width:100%}
  .f-bot{flex-direction:column;align-items:flex-start}
  .lifecycle li:not(:last-child)::after{display:none}
}
@media(max-width:420px){
  .proc{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

@media print{
  .announce,.hdr,.drawer,footer,.hero-actions,.no-print{display:none!important}
  body{color:#000;background:#fff}
  .hero{background:#fff!important;color:#000!important}
  .hero h1,.hero .lead{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}