/* ============================================================================
   This Waay — components.css  (v0 draft · faithful refactor)
   Each class is a production component LIFTED out of its section-contextual
   selector into a standalone, reusable class. Values are copied verbatim from
   theme.min.css; provenance is noted as a "<- .section .selector" note on each
   block. Per-variant differences are expressed as CSS custom properties so the
   same base renders every real variant with no re-invention.
   Requires tokens.css.
   ============================================================================ */

/* ---- Primitives ------------------------------------------------------------
   NO LAYOUT HERE. The chassis is Bootstrap 5.0.2 — use `container` / `row` /
   `col-lg-*`. Components below never set their own width, breakpoints, or
   gutters; they size to whatever column they're dropped into. Re-authoring the
   grid is what loses the site's whitespace and proportions.
   ---------------------------------------------------------------------------- */

/* Type — h6 eyebrow / headings / body  (<- body, h2, h6) */
.tw-eyebrow{color:var(--tw-green);font-family:var(--tw-font-bold);font-weight:normal;font-size:12px;text-transform:uppercase;letter-spacing:var(--tw-eyebrow-track);margin:0 0 10px;display:block;}
.tw-h1{color:var(--tw-navy);font-family:var(--tw-font-extrabold);font-weight:normal;font-size:40px;line-height:normal;margin:0;}      /* <- h2 base display */
.tw-h2{color:var(--tw-navy);font-family:var(--tw-font-extrabold);font-weight:normal;font-size:40px;line-height:normal;margin:0;}      /* <- h2 */
.tw-h5{color:var(--tw-navy);font-family:var(--tw-font-extrabold);font-weight:normal;font-size:20px;line-height:normal;margin:0;}
.tw-body{color:var(--tw-navy);font-family:var(--tw-font-regular);font-weight:normal;font-size:15px;line-height:normal;}
.tw-muted{color:var(--tw-text-muted);}
.tw-on-navy .tw-h2,.tw-on-navy .tw-h5{color:#fff;} .tw-on-navy .tw-body{color:var(--tw-text-on-navy);}

/* Section head — centered eyebrow + h2 + p  (<- .section-title) */
.tw-section-head{text-align:center;max-width:760px;margin:0 auto;padding-bottom:38px;}
.tw-section-head p{color:var(--tw-text-muted);margin:12px auto 0;max-width:65ch;font-family:var(--tw-font-regular);}
.tw-on-navy .tw-section-head p{color:var(--tw-text-on-navy);}

/* ---- Buttons  (<- .c-btn / .v2 / .btn-white / .d-btn) --------------------- */
.tw-btn{display:inline-block;padding:13px 30px 11px;color:#fff;font-size:16px;font-family:var(--tw-font-bold);font-weight:normal;line-height:24px;background-color:var(--tw-green);border:1px solid var(--tw-green);white-space:nowrap;border-radius:var(--tw-radius-pill);text-align:center;text-decoration:none;cursor:pointer;transition:all .3s ease;}
.tw-btn:hover{background-color:#fff;color:var(--tw-green);}
/* GHOST HOVER RULE: the fill becomes the OUTLINE colour and the label knocks out
   to the ground it was sitting on. Never a third colour, never a tint. */
.tw-btn--ghost{background-color:transparent;color:var(--tw-green);border-color:var(--tw-green);}
.tw-btn--ghost:hover,.tw-btn--ghost:focus-visible{background-color:var(--tw-green);color:#fff;}   /* fill=green, knockout=white ground */
.tw-btn--white{background-color:#fff;color:var(--tw-green);border-color:#fff;}
.tw-btn--white:hover{background-color:var(--tw-green);color:#fff;}
.tw-btn--sm{padding:8px 18px 7px;font-size:13px;line-height:18px;}
.tw-btn--tag{display:inline-block;padding:5px 10px 4px;color:var(--tw-green);font-size:12px;font-family:var(--tw-font-regular);font-weight:normal;line-height:18px;background-color:transparent;border:2px solid var(--tw-green);white-space:nowrap;border-radius:2px;text-decoration:none;transition:all .3s ease;}
.tw-btn--tag:hover{background-color:var(--tw-green);color:#fff;}
.tw-on-navy .tw-btn--ghost{color:#fff;border-color:#fff;}
.tw-on-navy .tw-btn--ghost:hover,.tw-on-navy .tw-btn--ghost:focus-visible{background-color:#fff;color:var(--tw-navy);} /* fill=white outline, knockout=navy ground */

/* ---- Section grounds + skew break  (<- .home-hero/.we-serve/.this-work) --- */
.tw-section{position:relative;z-index:1;}
.tw-section__inner{position:relative;z-index:5;}
.tw-ground-navy{background-color:var(--tw-navy);color:#fff;}
.tw-ground-navy-deep{background-color:var(--tw-navy-deep);color:#fff;}
.tw-ground-white{background-color:#fff;}
.tw-ground-soft{background:var(--tw-soft);}
.tw-ground-navy-tex{background-color:var(--tw-navy);background-image:url('/assets/img/maze_15x.webp');background-repeat:no-repeat;background-position:center top;background-size:1440px auto;color:#fff;}
/* Skewed navy band: a -2deg ::before, exactly like .this-work-section / .we-serve visual */
.tw-skew-navy{position:relative;z-index:1;}
.tw-skew-navy::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--tw-navy);transform:skew(0deg,var(--tw-skew-section));z-index:-1;}

/* ---- HERO  (<- .home-hero-section) --------------------------------------- */
.tw-hero{position:relative;padding:135px 0 60px;background-color:var(--tw-navy);z-index:1;overflow:hidden;}
.tw-hero::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--tw-navy);transform:skew(0deg,var(--tw-skew-section));z-index:2;}
.tw-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:300px;z-index:3;background-image:url('/assets/img/line-hero.svg');background-repeat:no-repeat;background-position:center top;pointer-events:none;}
.tw-hero__inner{position:relative;z-index:5;}
.tw-hero__mark{max-height:80px;width:auto;display:block;margin:0 0 24px;}         /* .section-title img */
.tw-hero__title{color:var(--tw-green);font-size:46px;font-family:var(--tw-font-semibold);font-weight:normal;line-height:60px;margin:0 0 24px;} /* .section-title h1 */
.tw-hero__body{color:var(--tw-text-on-navy);margin:0 0 10px;font-family:var(--tw-font-regular);}
.tw-hero .tw-btn{margin-top:30px;}

/* ---- Trusted-by / logo cloud  (<- .supp-comp-section) -------------------- */
.tw-trusted{padding:85px 0 50px;}
.tw-trusted__lead{border-right:1px solid rgba(12,42,72,0.16);padding-right:25px;}
.tw-trusted__lead h3{font-size:26px;font-family:var(--tw-font-extrabold);font-weight:normal;line-height:normal;margin:0 0 10px;color:var(--tw-navy);}
.tw-trusted__lead p{color:var(--tw-text-muted);margin:0;font-family:var(--tw-font-regular);}
.tw-logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;list-style:none;padding:0;margin:0;}
.tw-logos li img{max-height:46px;width:auto;opacity:.9;}
@media (max-width:991px){.tw-trusted__lead{border-right:none;border-bottom:1px solid rgba(12,42,72,0.16);padding:0 0 24px;margin-bottom:24px;}}

/* ---- FLOAT-PANEL CARD  (<- .why-us / .artifacts / .our-process .box) ------
   Transparent box + a skewed colored panel starting partway down + a large
   figure floating above it. One base; three real variants via custom props. */
.tw-float{position:relative;height:100%;text-align:center;z-index:5;
  padding:0 15px var(--f-padb,35px);}
.tw-float::before{content:'';position:absolute;top:var(--f-top,90px);right:0;bottom:0;left:0;border-radius:var(--tw-radius-card);background:var(--f-panel,var(--tw-green));transform:skew(0deg,var(--tw-skew-card));z-index:-1;}
.tw-float__fig{display:block;width:auto;max-height:var(--f-figh,190px);margin:0 auto 20px;position:relative;}
.tw-float__title{font-family:var(--tw-font-extrabold);font-weight:normal;line-height:normal;text-align:center;color:var(--f-title,#0c2a48);font-size:var(--f-titlesize,20px);margin:var(--f-titlemargin,0 0 8px);}
.tw-float__body{font-family:var(--tw-font-medium);font-weight:normal;text-align:center;color:var(--f-body,#fff);font-size:var(--f-bodysize,14px);margin:0;}
.tw-float__body strong{font-size:16px;font-family:var(--tw-font-bold);font-weight:normal;}
/* why-us: 4-stop gradient panel, small navy title, no body, tall bottom pad */
.tw-float--why{--f-panel:var(--tw-soft-4);--f-top:60px;--f-padb:130px;--f-figh:120px;--f-title:#0c2a48;--f-titlesize:18px;--f-titlemargin:0;}
/* services (OUR SERVICES): green panel, navy title (inherited), white body */
.tw-float--services{--f-panel:var(--tw-green);--f-top:90px;--f-padb:35px;--f-figh:190px;--f-title:#0c2a48;--f-titlesize:20px;--f-body:#fff;}
/* approach (OUR APPROACH): green panel, navy title, white 16px body */
.tw-float--approach{--f-panel:var(--tw-green);--f-top:80px;--f-padb:90px;--f-figh:173px;--f-title:#0c2a48;--f-titlesize:20px;--f-body:#fff;--f-bodysize:16px;}

/* ---- SEGMENT CARD  (<- .we-serve-section .box) --------------------------- */
.tw-seg{height:100%;padding:0 25px 25px;border-radius:var(--tw-radius-card);background:var(--tw-soft);text-align:center;}
.tw-seg__fig{margin-top:-40px;max-height:84px;width:auto;display:inline-block;}   /* img margin-top:-40px */
.tw-seg__title{color:var(--tw-navy);font-size:20px;font-family:var(--tw-font-extrabold);font-weight:normal;margin:55px 0 10px;}
.tw-seg__body{color:var(--tw-navy);font-size:14px;font-family:var(--tw-font-medium);font-weight:normal;opacity:.65;margin:0;}

/* ---- WORK FLIP CARD  (<- .our-work-section .box-holder) -------------------
   CORRECTED 2026-08: the title/description were being rendered BELOW the card
   as separate page copy. Production carries both INSIDE the card — the title
   sits in a gradient scrim over the front image, and the full title + a
   description + CTA are revealed on the back. Found while building a real
   page against this component; the style-guide specimen never caught it
   because its demo cell didn't include real copy. */
.tw-work{position:relative;text-align:center;z-index:5;}
.tw-work__wrap{position:relative;width:100%;height:0;overflow:hidden;padding-top:73%;transition:all .6s;transform-style:preserve-3d;border-radius:var(--tw-radius-card);}
.tw-work:hover .tw-work__wrap,.tw-work:focus-within .tw-work__wrap{transform:rotateY(180deg);}
.tw-work__img{position:absolute;inset:0;z-index:4;opacity:1;background-color:var(--tw-green);background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:var(--tw-radius-card);}
.tw-work__mask{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;inset:0;background-color:var(--tw-green);padding:26px;z-index:3;opacity:0;transform:rotateY(180deg);transition:opacity .3s ease .1s;border-radius:var(--tw-radius-card);}
.tw-work:hover .tw-work__img,.tw-work:focus-within .tw-work__img{opacity:0;z-index:3;}
.tw-work:hover .tw-work__mask,.tw-work:focus-within .tw-work__mask{opacity:1;z-index:4;}
.tw-work__mask .tw-btn{background:#fff;border-color:#fff;color:var(--tw-green);}
/* Front caption — gradient scrim pinned to the bottom of the image, title only */
.tw-work__cap{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:36px 18px 16px;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(5,32,58,.88) 75%);border-radius:0 0 var(--tw-radius-card) var(--tw-radius-card);}
/* Title — reused on the front cap (white on scrim) and the back mask (white on green) */
.tw-work__title{font-size:18px;font-family:var(--tw-font-extrabold);font-weight:normal;line-height:1.25;margin:0;color:#fff;text-wrap:balance;}
.tw-work__mask .tw-work__title{margin:0 0 10px;}
.tw-work__desc{font-size:14px;color:rgba(255,255,255,.92);margin:0 0 18px;line-height:1.6;max-width:32ch;text-wrap:pretty;}
@media (prefers-reduced-motion:reduce){.tw-work:hover .tw-work__wrap{transform:none;}}

/* ---- TESTIMONIAL CARD  (<- .testimonials-section .slide) ----------------- */
.tw-tm{position:relative;height:100%;padding:32px 24px 23px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#e8fefb 0,#f2fbfb 66%,#fdf5e8 100%);border-radius:var(--tw-radius-card);}
.tw-tm::before{content:'';position:absolute;width:50px;height:50px;top:47px;right:27px;background-image:url('/assets/img/quotes.svg');background-repeat:no-repeat;background-position:center;background-size:contain;}
.tw-tm__logo{width:200px;height:85px;max-width:100%;margin-bottom:15px;background-repeat:no-repeat;background-position:left center;background-size:contain;}
.tw-tm__quote{color:var(--tw-text-muted);font-size:16px;line-height:normal;margin:0 0 30px;font-family:var(--tw-font-regular);}
.tw-tm__name{font-size:20px;font-family:var(--tw-font-extrabold);font-weight:normal;margin:auto 0 0;color:var(--tw-navy);}
.tw-tm__role{display:block;color:var(--tw-green);font-size:15px;margin:0;}

/* ---- CONTACT  (<- .contact-us-section) ---------------------------------- */
.tw-contact{position:relative;background-color:var(--tw-navy);background-image:url('/assets/img/maze_15x.webp');background-repeat:no-repeat;background-position:center top;background-size:1440px auto;padding:60px 0;z-index:1;}
.tw-contact::after{content:'';position:absolute;inset:0;background-image:url('/assets/img/line-foot.svg');background-repeat:no-repeat;background-position:center top;z-index:3;pointer-events:none;}
.tw-contact__head{position:relative;text-align:center;padding-bottom:33px;z-index:5;}
.tw-contact__head h2{color:#fff;text-align:center;}
.tw-contact__form{position:relative;z-index:5;max-width:365px;margin:0 auto;}
.tw-contact__form label{display:block;color:#fff;font-size:14px;font-family:var(--tw-font-medium);font-weight:normal;margin:0 0 5px;}
.tw-contact__form .field{margin:0 0 12px;}
.tw-contact__form input,.tw-contact__form textarea{width:100%;min-height:48px;padding:12px 15px;border-radius:2px;background-color:#fff;border:1px solid #fff;font-size:16px;color:var(--tw-navy);font-family:var(--tw-font-regular);}
.tw-contact__form input::placeholder,.tw-contact__form textarea::placeholder{color:var(--tw-navy);opacity:.65;}
.tw-contact__submit{padding-top:20px;text-align:center;}
.tw-contact__submit button{width:160px;height:50px;padding:2px 0 0;background-color:#fff;border:1px solid #fff;color:var(--tw-green);font-size:16px;font-family:var(--tw-font-bold);font-weight:normal;border-radius:var(--tw-radius-pill);transition:all .3s ease;cursor:pointer;}
.tw-contact__submit button:hover{background-color:var(--tw-green);color:#fff;}

/* ---- FOOTER  (<- footer) ------------------------------------------------- */
.tw-footer{padding:76px 0 25px;background-color:var(--tw-navy-deep);color:#fff;}
.tw-footer__top{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;padding-bottom:30px;}
.tw-footer__logo img{max-width:224px;max-height:37px;}
.tw-footer nav{display:flex;flex-wrap:wrap;gap:20px;}
.tw-footer nav a{color:#fff;font-size:16px;font-family:var(--tw-font-regular);text-decoration:none;padding:5px 0;line-height:24px;}
.tw-footer nav a:hover{opacity:.7;}
.tw-footer__sub{margin-top:42px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.1);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;}
.tw-footer__sub p{color:rgba(255,255,255,0.6);font-size:16px;margin:0;}
.tw-footer__social{display:flex;gap:30px;}
.tw-footer__social a img{width:18px;height:18px;}

/* ---- LIST PATTERNS  (<- .text-block ul / .aip-plane) -------------------- */
.tw-list{list-style:none;margin:0 0 20px;padding:0;}
.tw-list li{position:relative;padding-left:25px;margin:0 0 10px;font-size:14px;color:var(--tw-text-muted);font-family:var(--tw-font-regular);}
.tw-list--check li{background-image:url('/assets/img/check-circle.svg');background-repeat:no-repeat;background-position:left top 2px;}
.tw-list--plane li::before{content:'';position:absolute;left:0;top:3px;width:16px;height:16px;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5L21 3L14.5 21L11 13L3 11.5Z' fill='%2354b987'/%3E%3C/svg%3E");}
.tw-list--dot li::before{content:'';position:absolute;left:6px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--tw-green);}
.tw-on-navy .tw-list li{color:var(--tw-text-on-navy);}

/* ============================================================================
   Additional canonical components (added for the AI Practice rebuild)
   Same rule as above: no widths, no breakpoints — Bootstrap columns own layout.
   ============================================================================ */

/* ---- Numbered step  (<- .aip-steps / assessment step flow) ----------------
   Works stacked (default) OR as a horizontal row of columns — same classes.
   For the row layout, add Bootstrap's `row`/`col-lg-*` alongside `.tw-steps`/
   `.tw-step`; the only override needed is zeroing the stacked bottom margin. */
.tw-steps{list-style:none;counter-reset:tw-step;margin:0;padding:0;}
.tw-steps.row>.tw-step{margin-bottom:0;}
.tw-step{counter-increment:tw-step;position:relative;padding-left:66px;margin:0 0 34px;}
.tw-step::before{content:counter(tw-step);position:absolute;left:0;top:-8px;font-family:var(--tw-font-extrabold);font-weight:normal;font-size:44px;line-height:1;color:var(--tw-green);}
.tw-step__title{font-family:var(--tw-font-extrabold);font-weight:normal;font-size:20px;line-height:normal;color:var(--tw-navy);margin:0 0 4px;}
.tw-step__q{font-family:var(--tw-font-bold);font-weight:normal;font-size:15px;color:var(--tw-green);margin:0 0 8px;}
.tw-step p{font-size:15px;color:var(--tw-text-muted);margin:0;line-height:1.6;}
.tw-on-navy .tw-step__title{color:#fff;} .tw-on-navy .tw-step p{color:var(--tw-text-on-navy);}
/* Row variant: the floated-left numeral that works in a single wide column
   reads as disconnected in a narrow one — visible gap before the text, no
   shared baseline. Stack the numeral directly above the title instead. */
.tw-steps.row>.tw-step{padding-left:0;}
.tw-steps.row>.tw-step::before{position:static;display:block;font-size:32px;margin:0 0 8px;}

/* ---- Text CTA with arrow  (<- .link-txt, "Click to learn more") ----------
   A link styled as text, not a button — for a call to action that shouldn't
   compete with the page's real buttons. Arrow nudges on hover/focus only. */
.tw-link-arrow{display:inline-flex;align-items:center;gap:7px;color:var(--tw-green);font-family:var(--tw-font-bold);font-weight:normal;font-size:14px;text-decoration:none;margin-top:14px;}
.tw-link-arrow::after{content:'→';transition:transform .2s ease;}
.tw-link-arrow:hover,.tw-link-arrow:focus-visible{text-decoration:underline;}
.tw-link-arrow:hover::after,.tw-link-arrow:focus-visible::after{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){.tw-link-arrow:hover::after,.tw-link-arrow:focus-visible::after{transform:none;}}

/* ---- Quote card  (<- .aip-quote-card) ------------------------------------ */
.tw-quote-card{display:block;height:100%;background:#fff;border-radius:var(--tw-radius-card);padding:26px 24px;text-decoration:none;box-shadow:var(--tw-shadow-card);border:1px solid rgba(12,42,72,.06);transition:transform .3s ease,box-shadow .3s ease;}
.tw-quote-card:hover,.tw-quote-card:focus-visible{transform:translateY(-4px);box-shadow:0 16px 38px rgba(12,42,72,.14);}
.tw-quote-card blockquote{font-family:var(--tw-font-extrabold);font-weight:normal;font-size:18px;line-height:1.35;color:var(--tw-navy);margin:0 0 12px;padding:0;border:0;position:relative;}
.tw-quote-card blockquote::before{content:'';display:block;width:34px;height:3px;background:var(--tw-green);margin-bottom:12px;}
.tw-quote-card p{font-size:14px;color:var(--tw-text-muted);margin:0;line-height:1.6;}
@media (prefers-reduced-motion:reduce){.tw-quote-card:hover,.tw-quote-card:focus-visible{transform:none;}}

/* ---- Banner card  (<- .aip-wia) — navy, green accent bar, CTA ------------- */
.tw-banner{position:relative;background:var(--tw-navy);border-radius:var(--tw-radius-card);padding:38px 34px;overflow:hidden;color:#fff;}
.tw-banner::before{content:'';position:absolute;top:0;left:0;bottom:0;width:5px;background:var(--tw-grad-green);}
.tw-banner__headline{font-family:var(--tw-font-extrabold);font-weight:normal;font-size:clamp(24px,3vw,32px);line-height:1.2;color:#fff;margin:0 0 10px;}
.tw-banner__name{font-family:var(--tw-font-bold);font-weight:normal;font-size:18px;color:var(--tw-green);margin:0 0 4px;}
.tw-banner__meta{font-size:14px;color:var(--tw-text-on-navy-meta);margin:0 0 18px;}
.tw-banner p{color:var(--tw-text-on-navy);font-size:15px;line-height:1.6;}
.tw-hl{color:var(--tw-green);font-family:var(--tw-font-bold);font-weight:normal;}

/* ---- Content / offer card  (<- .aip-offer-card, .aip-service) ------------- */
.tw-content-card{height:100%;display:flex;flex-direction:column;background:#fff;border-radius:var(--tw-radius-card);padding:28px 26px;box-shadow:var(--tw-shadow-card);border:1px solid rgba(12,42,72,.06);}
.tw-content-card--soft{background:var(--tw-soft);border-color:transparent;}
.tw-content-card--stroke{background:#fff;box-shadow:none;border:1.5px solid rgba(12,42,72,.14);}
.tw-content-card__title{font-family:var(--tw-font-extrabold);font-weight:normal;font-size:20px;line-height:normal;color:var(--tw-navy);margin:0 0 10px;}
.tw-content-card__title.tw-accent,
.tw-content-card.tw-content-card .tw-content-card__title.tw-accent{color:var(--tw-green);} /* must out-specify RULE 4's doubled-class selector below */
.tw-content-card h5{font-family:var(--tw-font-extrabold);font-weight:normal;font-size:15px;color:var(--tw-navy);margin:0 0 14px;}
.tw-content-card p{font-size:15px;color:var(--tw-text-muted);line-height:1.6;margin:0 0 20px;}
.tw-content-card .tw-btn{align-self:flex-start;margin-top:auto;}
.tw-content-card--wide{max-width:none;text-align:left;}   /* a content card used as a standalone CTA block, not a grid cell */

/* ---- Door card  (<- .aip-door) — the two-way close ----------------------- */
.tw-door{height:100%;display:flex;flex-direction:column;text-align:center;background:var(--tw-soft);border-radius:var(--tw-radius-card);padding:34px 28px;}
.tw-door h3{font-family:var(--tw-font-extrabold);font-weight:normal;font-size:22px;line-height:1.25;color:var(--tw-navy);margin:0 0 10px;}
.tw-door p{font-size:15px;color:var(--tw-text-muted);margin:0 0 22px;line-height:1.6;}
.tw-door .tw-btn{align-self:center;margin-top:auto;}
/* The door's ground is always light (soft gradient), independent of whatever
   section it sits in. Its ghost button must own light-ground colours rather
   than inherit `.tw-on-navy .tw-btn--ghost` from an ancestor SECTION that's
   navy — that ancestor rule doesn't know the button is sitting on a light
   card, and would render an invisible white-on-soft button. Same failure
   family as RULE 4, extended from text to controls. */
.tw-door .tw-btn--ghost{background-color:transparent;color:var(--tw-green);border-color:var(--tw-green);}
.tw-door .tw-btn--ghost:hover,.tw-door .tw-btn--ghost:focus-visible{background-color:var(--tw-green);color:#fff;}

/* ---- Hero: texture variant  (<- .aip-hero / .contact-us-section) --------- */
.tw-hero--texture{background-color:var(--tw-navy);background-image:url('/assets/img/maze_15x.webp');background-repeat:no-repeat;background-position:center top;background-size:1440px auto;}
.tw-hero--texture::after{display:none;}
.tw-hero__title--white{color:#fff;}
.tw-hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}

/* ---- Section head, left-aligned variant --------------------------------- */
.tw-section-head--left{text-align:left;margin-left:0;max-width:none;}
.tw-section-head--left p{margin-left:0;}

/* ============================================================================
   SYSTEM RULES  (adopted 2026-08 from the AI Practice build)
   These are page-agnostic and apply everywhere. Documented in STYLE.md.
   ============================================================================ */

/* ---- RULE 1 · Measure — cap the line length of running text ---------------
   Long lines are the single most common readability failure on wide screens.
   Every block of running text gets a measure. Headings get a shorter one so
   they break on meaning rather than on the container edge. */
.tw-measure       { max-width:var(--tw-measure);       }  /* 68ch — body copy   */
.tw-measure-tight { max-width:var(--tw-measure-tight); }  /* 46ch — lede/intro  */
.tw-measure-head  { max-width:var(--tw-measure-head);  }  /* 22ch — display H1  */
/* Applied by default to the components that carry running text */
.tw-section-head p,.tw-content-card p,.tw-quote-card p,.tw-door p,.tw-step p{max-width:var(--tw-measure);}
.tw-section-head p{margin-left:auto;margin-right:auto;}

/* ---- RULE 2 · Rag — no widows, no orphans, no ladders --------------------
   `balance` evens the line lengths of short blocks (headings, ledes) so the
   last line is never a single stranded word. `pretty` fixes the last-line
   widow on longer running text. Both degrade silently where unsupported. */
h1,h2,h3,h4,h5,h6,.tw-h1,.tw-h2,.tw-h5,
.tw-content-card__title,.tw-step__title,.tw-door h3,
.tw-banner__headline,.tw-work__title{text-wrap:balance;}
/* NOT balance: in a narrow column `balance` shortens every line and the rag
   goes stubby. Long text in a narrow measure wants `pretty` (widow fix only). */
.tw-quote-card blockquote{text-wrap:pretty;}
p,li,.tw-body,.tw-hero__body,.tw-float__body{text-wrap:pretty;}
/* Never let a heading hyphenate or break mid-word */
h1,h2,h3,h4,h5,h6,.tw-h1,.tw-h2,.tw-h5{hyphens:none;overflow-wrap:normal;}

/* ---- RULE 3 · Flush, full-bleed angled break -----------------------------
   The diagonal must sit FLUSH against the ground above and below — no sliver
   of a third colour — and must run edge to edge of the viewport.
   How: the skewed ground is a ::before that OVERSHOOTS its section on all
   sides. Because the pseudo-element is skewed about its own centre, the far
   corners lift out of the box; overshooting horizontally guarantees the
   diagonal reaches both edges, and overshooting vertically guarantees
   consecutive sections overlap rather than leaving a gap.
   Put `.tw-brk` on any section whose ground DIFFERS from the one above it.
   Same-ground neighbours get `.tw-flat` and no diagonal at all.

   CLEARANCE RULE: the diagonal rises above the section's own box. A -2deg skew
   over a full-bleed width lifts each corner by roughly (width/2 * tan2deg) ~ 26px
   at desktop, plus the overshoot. So a section either side of a break needs
   >= 90px of vertical padding, or its last line of copy will slide under the
   neighbouring ground. `.tw-brk-clear` enforces the minimum. */
.tw-brk{position:relative;z-index:1;isolation:isolate;}
.tw-brk::before{
  content:'';position:absolute;
  top:calc(var(--brk-overshoot, 2.2vw) * -1);
  bottom:calc(var(--brk-overshoot, 2.2vw) * -1);
  left:-8vw;right:-8vw;                 /* horizontal overshoot → true full bleed */
  background:var(--brk-ground,var(--tw-navy));
  transform:skew(0deg,var(--tw-skew-section));
  transform-origin:center;
  z-index:-1;
}
.tw-brk--navy{--brk-ground:var(--tw-navy);}
.tw-brk--navy-deep{--brk-ground:var(--tw-navy-deep);}
.tw-brk--white{--brk-ground:#fff;}
.tw-brk--soft{--brk-ground:var(--tw-soft);}
/* Minimum padding so content never enters the diagonal's rise. */
.tw-brk-clear{padding-block:max(90px,7vw);}
/* Flat (no diagonal) — for a section that shares its neighbour's ground */
.tw-flat{position:relative;z-index:1;}
.tw-flat--navy{background:var(--tw-navy);}
.tw-flat--white{background:#fff;}
.tw-flat--soft{background:var(--tw-soft);}
/* The page must clip the horizontal overshoot */
html,body{overflow-x:hidden;}

/* ---- Outline card + the signature overlap  (<- services page) ------------
   A white card with a hairline rule and a badge floating through its top
   edge. Used in a row that OVERLAPS the boundary between two sections.

   NOT margin-top. A negative top margin on the first child of a zero-padding,
   zero-border parent COLLAPSES THROUGH the parent — it doesn't move the child
   within a fixed section, it drags the section's own box (and its diagonal
   break, painted by that same section) up by the same amount. The result:
   changing --overlap moves the card and the boundary together as a rigid
   unit, so the card's position RELATIVE TO the boundary barely changes no
   matter what value you pick — this produced a card that looked "tuned" by
   the numbers but sat almost entirely on one side of the seam when rendered.
   `transform` sidesteps this: it repaints the element's pixels without
   touching layout, so the section's box — and the boundary it paints — stay
   exactly where normal flow puts them. `margin-bottom` (on the SAME element,
   between two siblings, not into the parent) then gives back the flow space
   the lift no longer needs, so the next section head doesn't inherit a gap. */
.tw-overlap{position:relative;z-index:10;display:flow-root;transform:translateY(calc(var(--overlap,110px) * -1));margin-bottom:calc(var(--overlap,110px) * -1);}
/* `display:flow-root` establishes a block-formatting context so a NESTED
   negative margin can't repeat the same collapse one level down — Bootstrap's
   own row gutter (`.g-4` sets `.row{margin-top:-gutter}`) is exactly that
   pattern, and without this it quietly re-introduces the bug this component
   exists to avoid. */
.tw-oc{position:relative;height:100%;background:#fff;border:1.5px solid rgba(12,42,72,.12);
  border-radius:var(--tw-radius-card);box-shadow:0 20px 46px rgba(12,42,72,.13);
  padding:62px 28px 30px;text-align:center;}
.tw-oc__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-52%);z-index:2;}
.tw-oc__title{font-family:var(--tw-font-extrabold);font-weight:normal;font-size:22px;line-height:1.25;color:var(--tw-navy);margin:0 0 10px;text-wrap:balance;}
.tw-oc p{font-size:15px;color:var(--tw-text-muted);margin:0 auto;max-width:42ch;line-height:1.6;}

/* ---- Shield badge (the proprietary signature), reusable at any size ------ */
.tw-shield{position:relative;display:inline-block;width:var(--sh,72px);height:calc(var(--sh,72px) * 1.1667);
  filter:drop-shadow(0 8px 14px rgba(8,25,45,.38));}
.tw-shield__frame{position:absolute;inset:0;width:100%;height:100%;}
.tw-shield__icon{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);
  width:calc(var(--sh,72px) * .42);height:calc(var(--sh,72px) * .42);color:#fff;}

/* ---- RULE 4 · A component that carries its own ground owns its own text ----
   A light card dropped into a dark section must NOT inherit the section's
   light-on-dark text colours, and vice versa. Doubled class = specificity high
   enough to beat a section-level `.on-navy h3`-style descendant selector,
   without reaching for !important. This is what makes cards portable between
   grounds — the failure mode is white text on a soft-gradient card. */
.tw-door.tw-door h3,
.tw-content-card.tw-content-card .tw-content-card__title,
.tw-quote-card.tw-quote-card blockquote,
.tw-oc.tw-oc .tw-oc__title{color:var(--tw-navy);}
.tw-door.tw-door p,
.tw-content-card.tw-content-card p,
.tw-quote-card.tw-quote-card p,
.tw-oc.tw-oc p{color:var(--tw-text-muted);}

/* ---- Step question highlight — the green subtitle under each capability --- */
/* Higher specificity than `.tw-step p` — a class selector alone loses to a
   descendant selector, which is what silently muted this green. */
.tw-step p.tw-step__q{color:var(--tw-green);font-family:var(--tw-font-bold);font-weight:normal;font-size:16px;margin:0 0 10px;max-width:none;}
.tw-on-navy .tw-step p.tw-step__q{color:var(--tw-green);}
/* .tw-step__tag (an outline chip after the heading) was replaced by
   .tw-link-arrow (a text CTA at the end of the column) — see above. */