/* =============================================================================
   X3WEB — PAGE SYSTEM
   -----------------------------------------------------------------------------
   Everything below the stage. The stage is a fixed proportional composition;
   this is a scrolling document, so it drops --k and works in rem/px with fluid
   clamps. What carries over is the vocabulary: 999px pills, generous rounded
   panels, one orange, the same two easings, and the same reveal grammar —
   surfaces wipe, content lifts.
   ============================================================================= */

/* =============================================================================
   1. THE STICKY TOP BAR
   -----------------------------------------------------------------------------
   The stage carries its own pill nav, so this only exists once the stage has
   scrolled away. It is the same row of pills at a smaller scale, sliding down
   on a glass plate.
   ============================================================================= */
.x3-topbar{
  position:fixed;z-index:900;top:0;left:0;right:0;
  display:flex;align-items:center;gap:10px;
  padding:10px clamp(14px,3vw,30px);
  background:var(--glass-dark);
  -webkit-backdrop-filter:blur(38px);backdrop-filter:blur(38px);
  box-shadow:var(--shadow-glass);
  border-bottom:1px solid rgba(255,255,255,.10);
  transform:translateY(-104%);
  transition:transform .42s var(--expo);
  will-change:transform;
}
body.is-past-stage .x3-topbar{transform:none}
.x3-topbar__logo{flex:0 0 auto;margin-right:6px}
.x3-topbar__logo img{height:34px;width:auto}
.x3-topbar__links{display:flex;align-items:center;gap:6px;margin-left:auto}
.x3-topbar__links a{
  display:inline-flex;align-items:center;height:40px;padding:0 18px;
  border-radius:999px;font-size:14px;color:rgba(255,255,255,.88);
  transition:background .18s var(--soft), color .18s var(--soft);
}
.x3-topbar__links a:hover{background:rgba(255,255,255,.12);color:#fff}
.x3-topbar__links a[aria-current="page"]{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,107,0,.72)}
.x3-topbar__cta{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 20px;
  border-radius:999px;background:var(--accent);color:#fff;
  font-size:14px;font-weight:500;white-space:nowrap;
  box-shadow:0 4px 18px rgba(255,107,0,.36);
  transition:background .18s var(--soft), transform .18s var(--soft);
}
.x3-topbar__cta:hover{background:var(--accent-deep);transform:translateY(-1px)}
.x3-topbar__burger{
  display:none;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.10);place-items:center;margin-left:auto;
}
.x3-topbar__burger svg{width:20px;height:20px;color:#fff}
@media (max-width:1060px){
  .x3-topbar__links{
    position:absolute;top:calc(100% + 8px);right:clamp(14px,3vw,30px);
    flex-direction:column;align-items:stretch;gap:6px;width:min(300px,78vw);
    padding:10px;border-radius:24px;
    background:var(--glass-dark);
    -webkit-backdrop-filter:blur(38px);backdrop-filter:blur(38px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 50px rgba(2,8,18,.5);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s var(--soft), transform .22s var(--soft), visibility .22s;
  }
  .x3-topbar.is-open .x3-topbar__links{opacity:1;visibility:visible;transform:none}
  .x3-topbar__links a{height:46px;padding:0 18px}
  .x3-topbar__burger{display:grid}
  .x3-topbar__cta{display:none}
}

/* =============================================================================
   2. SECTION RHYTHM
   ============================================================================= */
.x3-sec{position:relative;padding:clamp(72px,9vw,128px) 0;background:var(--paper)}
.x3-sec--alt{background:var(--paper-alt)}
.x3-sec--dark{background:var(--navy);color:#fff}
.x3-sec--deep{background:var(--navy-deep);color:#fff}
.x3-sec--tight{padding:clamp(52px,6vw,84px) 0}

/* Consecutive dark sections retain the same vertical padding as other
   sections, so each heading and content group has room above and below. */

.x3-head{max-width:760px;margin-bottom:clamp(38px,5vw,64px)}
.x3-head--center{margin-left:auto;margin-right:auto;text-align:center}
.x3-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  height:32px;padding:0;margin-bottom:20px;
  font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);
}
.x3-eyebrow svg{width:13px;height:13px;color:var(--accent)}

.x3-h2{
  font-family:var(--font-display);font-stretch:118%;font-variation-settings:'wdth' 118;
  font-weight:400;
  font-size:clamp(28px,3.6vw,46px);
  line-height:1.08;letter-spacing:-.012em;
  color:var(--ink);
}
.x3-sec--dark .x3-h2,.x3-sec--deep .x3-h2{color:#fff}
.x3-h2 em{font-style:normal;color:var(--accent)}
.x3-h3{
  font-family:var(--font-display);font-stretch:112%;font-variation-settings:'wdth' 112;
  font-weight:400;font-size:clamp(19px,2vw,23px);line-height:1.22;
  letter-spacing:-.008em;color:var(--ink);
}
.x3-sec--dark .x3-h3,.x3-sec--deep .x3-h3{color:#fff}
.x3-lede{margin-top:18px;font-size:clamp(15px,1.25vw,17.5px);line-height:1.68;color:var(--ink-soft)}
.x3-sec--dark .x3-lede,.x3-sec--deep .x3-lede{color:rgba(255,255,255,.72)}
.x3-head--center .x3-lede{margin-left:auto;margin-right:auto}

/* Element-level fallbacks.
   Plenty of pages write a plain <h2> inside a section head and a plain <h3>/<h4>
   inside a tile rather than carrying the class. Rather than chase a class onto
   every heading in the site, the elements inherit the same type in the places
   the system already defines — so a heading is correct by position, and the
   class is only needed to override that. */
.x3-head > h2,
.x3-sec > .x3-wrap > h2{
  font-family:var(--font-display);font-stretch:118%;font-variation-settings:'wdth' 118;
  font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:1.08;
  letter-spacing:-.012em;color:var(--ink);
}
.x3-sec--dark .x3-head > h2,.x3-sec--deep .x3-head > h2{color:#fff}
.x3-head > p{margin-top:18px;font-size:clamp(15px,1.25vw,17.5px);line-height:1.68;color:var(--ink-soft)}
.x3-sec--dark .x3-head > p,.x3-sec--deep .x3-head > p{color:rgba(255,255,255,.72)}
.x3-head--center > p{margin-left:auto;margin-right:auto;max-width:720px}

.x3-tile > h3,.x3-tile > h4,.x3-step > h4,.x3-legal__card > h4{
  font-family:var(--font-display);font-stretch:112%;font-variation-settings:'wdth' 112;
  font-weight:400;font-size:clamp(18px,2vw,22px);line-height:1.22;
  letter-spacing:-.008em;color:var(--ink);margin-bottom:10px;
}
.x3-sec--dark .x3-tile > h3,.x3-sec--dark .x3-tile > h4,
.x3-sec--deep .x3-tile > h3,.x3-sec--deep .x3-tile > h4{color:#fff}
.x3-tile > p{font-size:14.8px;line-height:1.62;color:var(--ink-soft)}
.x3-sec--dark .x3-tile > p,.x3-sec--deep .x3-tile > p{color:rgba(255,255,255,.70)}

/* <em> is the accent mark in this system, never an italic. */
.x3 :where(h1,h2,h3,h4,h5) em,
.x3-h2 em,.x3-h3 em,.x3-cta h2 em{font-style:normal;color:var(--accent)}

/* =============================================================================
   3. BUTTONS
   ============================================================================= */
.x3-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  height:54px;padding:0 26px 0 5px;
  border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:15px;font-weight:500;white-space:nowrap;text-align:center;
  transition:background .2s var(--soft), transform .2s var(--soft), box-shadow .2s var(--soft);
}
.x3-btn:hover{background:#18202E;transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,18,32,.28)}
.x3-btn__disc{
  width:44px;height:44px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;flex:0 0 auto;
}
.x3-btn__disc svg{width:16px;height:16px;color:#fff}
.x3-btn span{margin-left:16px}

.x3-btn--accent{background:var(--accent);box-shadow:0 8px 26px rgba(255,107,0,.34)}
.x3-btn--accent .x3-btn__disc{background:rgba(255,255,255,.22)}
.x3-btn--accent:hover{background:var(--accent-deep);box-shadow:0 14px 34px rgba(255,107,0,.42)}

.x3-btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(11,18,32,.18);
  padding:0 26px;height:54px;
}
.x3-btn--ghost span{margin-left:0}
.x3-btn--ghost:hover{background:rgba(11,18,32,.05);box-shadow:inset 0 0 0 1px rgba(11,18,32,.34)}
.x3-sec--dark .x3-btn--ghost,.x3-sec--deep .x3-btn--ghost{
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.x3-sec--dark .x3-btn--ghost:hover,.x3-sec--deep .x3-btn--ghost:hover{
  background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.x3-btn--sm{height:44px;font-size:14px;padding:0 20px 0 4px}
.x3-btn--sm .x3-btn__disc{width:36px;height:36px}
.x3-btn--sm span{margin-left:12px}
.x3-btn--sm.x3-btn--ghost{padding:0 20px}

/* Text-only buttons need balanced space, without the arrow-disc offset.
   Allow long labels to wrap and stay centered on narrow screens. */
.x3-btn:not(:has(> .x3-btn__disc)){
  padding:14px 26px;gap:8px;max-width:100%;
  height:auto;min-height:54px;white-space:normal;
}
.x3-btn--sm:not(:has(> .x3-btn__disc)){padding:10px 20px;min-height:44px}
.x3-btn:not(:has(> .x3-btn__disc)) > span{margin-left:0}

/* Equal outer tracks center the label in the whole button. The circle stays
   in the left track; the empty right track reserves matching space. */
.x3-btn:has(> .x3-btn__disc){
  display:inline-grid;grid-template-columns:44px minmax(0,1fr) 44px;
  gap:0 16px;padding:5px;max-width:100%;
  height:auto;min-height:54px;white-space:normal;
}
.x3-btn:has(> .x3-btn__disc) > span{margin:0}
.x3-btn--sm:has(> .x3-btn__disc){
  grid-template-columns:36px minmax(0,1fr) 36px;
  gap:0 12px;padding:4px;min-height:44px;
}

.x3-btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.x3-btnrow--center{justify-content:center}

/* a text link that keeps the arrow-disc idea at the smallest size */
.x3-link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;color:var(--accent-deep);
}
.x3-link svg{width:13px;height:13px;transition:transform .2s var(--soft)}
.x3-link:hover svg{transform:translateX(4px)}
.x3-sec--dark .x3-link,.x3-sec--deep .x3-link{color:var(--accent-hot)}

/* =============================================================================
   4. PANELS, TILES AND GRIDS
   ============================================================================= */
.x3-grid{display:grid;gap:clamp(16px,2vw,26px)}
.x3-grid--2{grid-template-columns:repeat(2,1fr)}
.x3-grid--3{grid-template-columns:repeat(3,1fr)}
.x3-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){
  .x3-grid--3,.x3-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .x3-grid--2,.x3-grid--3,.x3-grid--4{grid-template-columns:1fr}
}

.x3-tile{
  position:relative;
  background:var(--paper);
  border:1px solid var(--ink-line);
  border-radius:var(--r-tile);
  padding:clamp(24px,2.6vw,34px);
  box-shadow:var(--shadow-tile);
  transition:transform .28s var(--soft), box-shadow .28s var(--soft), border-color .28s var(--soft);
}
.x3-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:rgba(255,107,0,.32)}
.x3-sec--alt .x3-tile{background:var(--paper)}
.x3-sec--dark .x3-tile,.x3-sec--deep .x3-tile{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 2px 18px rgba(0,0,0,.20), 0 22px 54px rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
.x3-sec--dark .x3-tile:hover,.x3-sec--deep .x3-tile:hover{
  background:rgba(255,255,255,.085);border-color:rgba(255,107,0,.45);
}

.x3-tile__icon{
  width:50px;height:50px;border-radius:16px;
  background:rgba(255,107,0,.12);
  display:grid;place-items:center;margin-bottom:20px;
}
.x3-tile__icon svg{width:21px;height:21px;color:var(--accent)}
.x3-sec--dark .x3-tile__icon,.x3-sec--deep .x3-tile__icon{background:rgba(255,107,0,.18)}
.x3-tile__icon--solid{background:var(--accent);box-shadow:0 6px 20px rgba(255,107,0,.36)}
.x3-tile__icon--solid svg{color:#fff}
.x3-tile h3{margin-bottom:10px}
.x3-tile p{font-size:14.8px;line-height:1.62;color:var(--ink-soft)}
.x3-sec--dark .x3-tile p,.x3-sec--deep .x3-tile p{color:rgba(255,255,255,.70)}

/* the big rounded feature panel — the page-scale echo of the hero panel */
.x3-panel{
  position:relative;
  border-radius:var(--r-panel);
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--ink-line);
  box-shadow:var(--shadow-tile);
}
.x3-panel--dark{
  background:linear-gradient(150deg,#0A1A2C 0%,#041D36 52%,#02101F 100%);
  border-color:rgba(255,255,255,.10);color:#fff;
}
.x3-panel--media{border:0;box-shadow:var(--shadow-lift)}
.x3-panel--media video,.x3-panel--media img{width:100%;height:100%;object-fit:cover}

.x3-split{display:grid;gap:clamp(28px,4vw,64px);align-items:center;grid-template-columns:1fr 1fr}
.x3-split--media-left{grid-template-columns:.86fr 1fr}
@media (max-width:900px){
  .x3-split,.x3-split--media-left{grid-template-columns:1fr}
}

/* a media block that keeps the theme's corner radius and ring */
.x3-media{
  position:relative;border-radius:var(--r-panel);overflow:hidden;
  box-shadow:var(--shadow-lift);
  aspect-ratio:16/10;background:var(--navy-deep);
}
.x3-media video,.x3-media img{width:100%;height:100%;object-fit:cover}
.x3-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(255,255,255,.34);border-radius:var(--r-panel);
}
.x3-media--tall{aspect-ratio:4/5}
.x3-media--wide{aspect-ratio:16/7}

/* =============================================================================
   5. THE PROOF STRIP
   ============================================================================= */
.x3-proof{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,22px);
}
@media (max-width:760px){.x3-proof{grid-template-columns:repeat(2,1fr)}}
.x3-proof__item{
  padding:clamp(22px,2.4vw,30px);
  border-radius:var(--r-tile);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
.x3-proof__num{
  font-family:var(--font-display);font-stretch:125%;font-variation-settings:'wdth' 125;
  font-weight:700;font-size:clamp(34px,4.2vw,54px);line-height:1;
  color:#fff;letter-spacing:-.01em;
}
.x3-proof__num span{color:var(--accent)}
.x3-proof__label{
  margin-top:12px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.60);
}

/* =============================================================================
   6. LOGO STRIP
   ============================================================================= */
.x3-logos{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.6vw,18px);
}
@media (max-width:900px){.x3-logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.x3-logos{grid-template-columns:repeat(2,1fr)}}
.x3-logos__cell{
  display:grid;place-items:center;min-height:96px;padding:20px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  transition:background .25s var(--soft), border-color .25s var(--soft);
}
.x3-logos__cell:hover{background:rgba(255,255,255,.10);border-color:rgba(255,107,0,.38)}
.x3-logos__cell img{
  max-height:42px;max-width:100%;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.55;
  transition:filter .25s var(--soft), opacity .25s var(--soft);
}
.x3-logos__cell:hover img{filter:none;opacity:1}

/* =============================================================================
   7. PORTFOLIO
   ============================================================================= */
.x3-work{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
@media (max-width:900px){.x3-work{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.x3-work{grid-template-columns:1fr}}
.x3-work__item{
  position:relative;display:block;border-radius:var(--r-tile);overflow:hidden;
  background:var(--paper);border:1px solid var(--ink-line);
  box-shadow:var(--shadow-tile);
  transition:transform .3s var(--soft), box-shadow .3s var(--soft);
}
.x3-work__item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.x3-work__item img{width:100%;height:auto}
.x3-work__veil{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(2,10,20,.86) 0%,rgba(2,10,20,.28) 52%,rgba(2,10,20,0) 100%);
  display:flex;align-items:flex-end;padding:20px;
  opacity:0;transition:opacity .3s var(--soft);
}
.x3-work__item:hover .x3-work__veil{opacity:1}
.x3-work__veil span{
  display:inline-flex;align-items:center;gap:9px;
  height:38px;padding:0 18px;border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.44);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:#fff;font-size:13px;font-weight:500;
}
.x3-work__veil svg{width:13px;height:13px}

/* =============================================================================
   8. FAQ
   ============================================================================= */
.x3-faq{max-width:880px;margin:0 auto;display:grid;gap:12px}
.x3-faq__item{
  border-radius:20px;overflow:hidden;
  background:var(--paper);border:1px solid var(--ink-line);
  box-shadow:var(--shadow-tile);
  transition:border-color .24s var(--soft), box-shadow .24s var(--soft);
}
.x3-faq__item[open]{border-color:rgba(255,107,0,.38);box-shadow:var(--shadow-lift)}
.x3-faq__q{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:18px;
  padding:22px clamp(20px,2.4vw,28px);
  font-size:clamp(15px,1.4vw,17px);font-weight:500;color:var(--ink);
}
.x3-faq__q::-webkit-details-marker{display:none}
.x3-faq__q::after{
  content:"";flex:0 0 auto;margin-left:auto;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,107,0,.12);
  background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent));
  background-size:13px 1.8px, 1.8px 13px;
  background-position:center, center;
  background-repeat:no-repeat;
  transition:transform .3s var(--expo), background-color .2s var(--soft);
}
.x3-faq__item[open] .x3-faq__q::after{transform:rotate(135deg)}
.x3-faq__a{padding:0 clamp(20px,2.4vw,28px) 24px;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.x3-faq__a a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}

/* =============================================================================
   9. FORMS
   ============================================================================= */
.x3-form{display:grid;gap:14px}
.x3-field{display:grid;gap:8px}
.x3-field label{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink-soft)}
.x3-sec--dark .x3-field label,.x3-sec--deep .x3-field label{color:rgba(255,255,255,.66)}
.x3-input,
.x3-form input[type=text],.x3-form input[type=email],.x3-form input[type=tel],
.x3-form input[type=url],.x3-form select,.x3-form textarea{
  width:100%;
  height:52px;padding:0 18px;
  border-radius:14px;
  border:1px solid var(--ink-line);
  background:var(--paper);
  font-family:inherit;font-size:15px;color:var(--ink);
  transition:border-color .2s var(--soft), box-shadow .2s var(--soft);
}
.x3-form textarea{height:auto;min-height:130px;padding:15px 18px;line-height:1.6;resize:vertical}
.x3-form select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B667A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px;
  padding-right:44px;
}
.x3-form input:focus,.x3-form select:focus,.x3-form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,107,0,.14);
}
.x3-sec--dark .x3-form input,.x3-sec--dark .x3-form select,.x3-sec--dark .x3-form textarea,
.x3-sec--deep .x3-form input,.x3-sec--deep .x3-form select,.x3-sec--deep .x3-form textarea{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff;
}
.x3-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.x3-form__row{grid-template-columns:1fr}}
.x3-form__note{font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.x3-sec--dark .x3-form__note,.x3-sec--deep .x3-form__note{color:rgba(255,255,255,.52)}
/* a failed required field, flagged on submit and cleared as soon as it is edited */
.x3-field.has-error input,
.x3-field.has-error select,
.x3-field.has-error textarea{border-color:#D63D2A;box-shadow:0 0 0 4px rgba(214,61,42,.12)}
.x3-field.has-error label{color:#D63D2A}

/* =============================================================================
   10. CONTACT ROWS
   ============================================================================= */
.x3-contact{display:grid;gap:2px}
.x3-contact__row{
  display:flex;align-items:center;gap:18px;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.10);
}
.x3-sec:not(.x3-sec--dark):not(.x3-sec--deep) .x3-contact__row{border-bottom-color:var(--ink-line)}
.x3-contact__row:last-child{border-bottom:0}
.x3-contact__key{
  flex:0 0 96px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.50);
}
.x3-sec:not(.x3-sec--dark):not(.x3-sec--deep) .x3-contact__key{color:var(--ink-soft)}
.x3-contact__val{font-size:15.5px;color:#fff}
.x3-sec:not(.x3-sec--dark):not(.x3-sec--deep) .x3-contact__val{color:var(--ink)}
.x3-contact__val a:hover{color:var(--accent-hot)}

/* =============================================================================
   11. CTA BAND
   ============================================================================= */
.x3-band{
  position:relative;overflow:hidden;
  border-radius:clamp(24px,3vw,40px);
  padding:clamp(44px,6vw,86px) clamp(26px,5vw,74px);
  background:linear-gradient(140deg,#0A1A2C 0%,#041D36 48%,#02101F 100%);
  box-shadow:var(--shadow-lift);
  text-align:center;
}
.x3-band::before{
  content:"";position:absolute;z-index:0;
  width:min(620px,86%);aspect-ratio:1;
  right:-14%;top:-56%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,0,.30) 0%,rgba(255,107,0,0) 68%);
  pointer-events:none;
}
.x3-band > *{position:relative;z-index:1}
.x3-band .x3-h2{color:#fff}
.x3-band .x3-lede{color:rgba(255,255,255,.72);max-width:660px;margin-left:auto;margin-right:auto}

/* =============================================================================
   12. BREADCRUMB
   ============================================================================= */
.x3-crumb{
  display:inline-flex;align-items:center;gap:10px;
  font-size:calc(11.6 * var(--k));letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:calc(14 * var(--k));
}
.x3-crumb a:hover{color:#fff}
.x3-crumb span{opacity:.5}

/* =============================================================================
   13. FOOTER
   ============================================================================= */
.x3-foot{background:var(--navy-deep);color:#fff;padding:clamp(60px,7vw,96px) 0 34px}
.x3-foot__grid{
  display:grid;gap:clamp(28px,3vw,44px);
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;
}
@media (max-width:1060px){.x3-foot__grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:680px){.x3-foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.x3-foot__grid{grid-template-columns:1fr}}
.x3-foot__brand img{height:42px;width:auto;filter:brightness(0) invert(1)}
.x3-foot__brand p{margin-top:20px;font-size:14.4px;line-height:1.66;color:rgba(255,255,255,.60);max-width:38ch}
.x3-foot h5{
  font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;margin-bottom:18px;font-weight:600;
}
.x3-foot h5::after{content:"";display:block;width:38px;height:3px;border-radius:2px;background:var(--accent);margin-top:14px}
.x3-foot__col a,.x3-foot__col span{
  display:block;font-size:14.4px;line-height:1.5;padding:7px 0;
  color:rgba(255,255,255,.74);transition:color .18s var(--soft);
}
.x3-foot__col a:hover{color:var(--accent-hot)}
.x3-foot__col .x3-foot__contact{display:flex;align-items:flex-start;gap:10px;overflow-wrap:anywhere}
.x3-foot__contact > svg{width:18px;height:18px;flex:0 0 18px;color:var(--accent);margin-top:2px}
.x3-foot__social{display:flex;gap:10px;margin-top:24px}
.x3-foot__social a{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.08);display:grid;place-items:center;
  transition:background .2s var(--soft), transform .2s var(--soft);
}
.x3-foot__social a:hover{background:var(--accent);transform:translateY(-2px)}
.x3-foot__social svg{width:17px;height:17px;color:#fff}
.x3-foot__bar{
  margin-top:clamp(40px,5vw,64px);padding-top:26px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between;
}
.x3-foot__bar p{font-size:13px;color:rgba(255,255,255,.46)}
.x3-foot__bar nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.x3-foot__bar nav a{font-size:13px;color:rgba(255,255,255,.52)}
.x3-foot__bar nav a:hover{color:var(--accent-hot)}

/* =============================================================================
   14. FLOATING WHATSAPP
   ============================================================================= */
.x3-wa{position:fixed;right:20px;bottom:20px;z-index:950}
/* A full-width white pill parked in the bottom-right corner lands on top of the
   stage's own copy, which sits in exactly that corner. So the button rests as a
   disc and only grows into its label on hover or focus — the corner stays clear
   and the control is still one tap away. */
.x3-wa__btn{
  display:flex;align-items:center;gap:11px;
  height:56px;padding:0 17px;border-radius:999px;
  background:#25D366;color:#fff;
  font-size:14.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 34px rgba(2,8,18,.30);
  transition:transform .22s var(--soft), box-shadow .22s var(--soft), padding .28s var(--expo);
}
.x3-wa__btn:hover{background:#1FB855;transform:translateY(-2px);box-shadow:0 16px 42px rgba(2,8,18,.38)}
.x3-wa__btn svg{width:22px;height:22px;flex:0 0 auto}
.x3-wa__btn > span:last-child{
  max-width:0;overflow:hidden;opacity:0;
  transition:max-width .32s var(--expo), opacity .22s var(--soft), margin .32s var(--expo);
  margin-left:-11px;
}
.x3-wa:hover .x3-wa__btn > span:last-child,
.x3-wa.is-open .x3-wa__btn > span:last-child,
.x3-wa__btn:focus-visible > span:last-child{max-width:220px;opacity:1;margin-left:0}
.x3-wa__menu{
  position:absolute;right:0;bottom:70px;width:280px;padding:10px;
  border-radius:22px;background:#fff;
  box-shadow:0 18px 50px rgba(2,8,18,.28);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s var(--soft), transform .22s var(--soft), visibility .22s;
}
.x3-wa.is-open .x3-wa__menu{opacity:1;visibility:visible;transform:none}
.x3-wa__menu a{display:block;padding:13px 15px;border-radius:14px;transition:background .18s var(--soft)}
.x3-wa__menu a:hover{background:var(--paper-alt)}
.x3-wa__menu strong{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.x3-wa__menu small{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
/* On a phone the corner is not contested, and a disc that only opens on hover
   is no use without a pointer — so it goes back to a full-width labelled bar. */
@media (max-width:600px){
  .x3-wa{right:14px;left:14px;bottom:14px}
  .x3-wa__btn{width:100%;justify-content:center;padding:0 22px}
  .x3-wa__btn > span:last-child{max-width:none;opacity:1;margin-left:0}
  .x3-wa__menu{width:100%}
}

/* =============================================================================
   15. LONG-FORM PROSE (legal pages, blog posts)
   ============================================================================= */
.x3-prose{max-width:820px;font-size:16px;line-height:1.78;color:var(--ink-soft)}
.x3-prose > * + *{margin-top:18px}
.x3-prose h2{
  font-family:var(--font-display);font-stretch:112%;font-variation-settings:'wdth' 112;
  font-size:clamp(22px,2.4vw,28px);line-height:1.2;color:var(--ink);
  margin-top:48px;letter-spacing:-.01em;
}
.x3-prose h3{font-size:18.5px;font-weight:600;color:var(--ink);margin-top:34px}
.x3-prose ul,.x3-prose ol{padding-left:4px;display:grid;gap:10px}
.x3-prose li{position:relative;padding-left:26px}
.x3-prose li::before{
  content:"";position:absolute;left:4px;top:.66em;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
}
.x3-prose ol{counter-reset:x3ol}
.x3-prose ol li::before{
  counter-increment:x3ol;content:counter(x3ol);
  width:auto;height:auto;background:none;border-radius:0;
  top:0;color:var(--accent);font-weight:600;font-size:14px;
}
.x3-prose a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.x3-prose strong{color:var(--ink);font-weight:600}
.x3-prose table{width:100%;border-collapse:collapse;font-size:14.5px}
.x3-prose th,.x3-prose td{padding:13px 16px;border-bottom:1px solid var(--ink-line);text-align:left}
.x3-prose th{font-weight:600;color:var(--ink);background:var(--paper-alt)}

/* =============================================================================
   14b. PRICING CARDS
   ============================================================================= */
.x3-pricing{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,28px);align-items:start;
}
@media (max-width:1060px){.x3-pricing{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.x3-pricing{grid-template-columns:minmax(0,1fr)}}

/* The custom quote is one offer, so it fills the pricing section. */
#pricing-custom_development .x3-pkg{grid-column:1 / -1}

.x3-pkg{
  position:relative;display:flex;flex-direction:column;
  height:100%;
  padding:clamp(28px,3vw,38px);
  border-radius:var(--r-panel);
  background:var(--paper);
  border:1px solid var(--ink-line);
  box-shadow:var(--shadow-tile);
  transition:transform .3s var(--soft), box-shadow .3s var(--soft), border-color .3s var(--soft);
}
.x3-pkg:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.x3-pkg--popular{
  border-color:rgba(255,107,0,.55);
  box-shadow:0 4px 22px rgba(255,107,0,.14), 0 28px 64px rgba(11,18,32,.16);
}
.x3-sec--dark .x3-pkg,.x3-sec--deep .x3-pkg{
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 2px 18px rgba(0,0,0,.18), 0 22px 54px rgba(0,0,0,.28);
}
.x3-pkg__flag{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 16px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 6px 20px rgba(255,107,0,.42);
}
.x3-pkg__head{text-align:center;margin-bottom:22px}
.x3-pkg__kicker{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:10px;
}
.x3-sec--dark .x3-pkg__kicker,.x3-sec--deep .x3-pkg__kicker{color:var(--accent-hot)}
.x3-pkg__name{
  font-family:var(--font-display);font-stretch:115%;font-variation-settings:'wdth' 115;
  font-weight:400;font-size:clamp(20px,2.1vw,25px);line-height:1.2;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:10px;
}
.x3-sec--dark .x3-pkg__name,.x3-sec--deep .x3-pkg__name{color:#fff}
.x3-pkg__desc{font-size:14.4px;line-height:1.6;color:var(--ink-soft)}
.x3-sec--dark .x3-pkg__desc,.x3-sec--deep .x3-pkg__desc{color:rgba(255,255,255,.70)}

.x3-pkg__plans{
  display:grid;gap:14px;text-align:center;
  padding:22px 0;margin-bottom:20px;
  border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);
}
.x3-sec--dark .x3-pkg__plans,.x3-sec--deep .x3-pkg__plans{border-color:rgba(255,255,255,.12)}
.x3-pkg__plan{display:grid;gap:4px}
.x3-pkg__planlabel{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.x3-sec--dark .x3-pkg__planlabel,.x3-sec--deep .x3-pkg__planlabel{color:rgba(255,255,255,.58)}
.x3-pkg__price{
  font-weight:700;font-size:clamp(30px,3.4vw,40px);line-height:1.05;
  color:var(--ink);letter-spacing:-.015em;
}
.x3-sec--dark .x3-pkg__price,.x3-sec--deep .x3-pkg__price{color:#fff}
.x3-pkg__line{font-size:13px;color:var(--ink-soft)}
.x3-pkg__note{font-size:12.5px;color:var(--ink-soft);opacity:.8}
.x3-sec--dark .x3-pkg__line,.x3-sec--dark .x3-pkg__note,
.x3-sec--deep .x3-pkg__line,.x3-sec--deep .x3-pkg__note{color:rgba(255,255,255,.62)}
.x3-pkg__limited{font-size:11.5px;color:var(--accent-deep)}
.x3-pkg__then{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.x3-pkg__total{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.x3-pkg__or{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:11.5px;letter-spacing:.14em}
.x3-pkg__or::before,.x3-pkg__or::after{content:"";height:1px;flex:1;background:var(--ink-line)}
.x3-sec--dark .x3-pkg__or::before,.x3-sec--dark .x3-pkg__or::after,
.x3-sec--deep .x3-pkg__or::before,.x3-sec--deep .x3-pkg__or::after{background:rgba(255,255,255,.14)}

.x3-pkg__guarantee{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;margin-bottom:20px;border-radius:14px;
  background:rgba(255,107,0,.10);
  border:1px solid rgba(255,107,0,.26);
  font-size:13px;font-weight:500;color:var(--accent-deep);
}
.x3-pkg__guarantee svg{flex:0 0 auto}
.x3-sec--dark .x3-pkg__guarantee,.x3-sec--deep .x3-pkg__guarantee{
  background:rgba(255,107,0,.14);color:#FFC69C;
}

.x3-pkg__list{display:grid;gap:11px;margin-bottom:20px}
.x3-pkg__list li{display:flex;align-items:flex-start;gap:11px;font-size:14.2px;line-height:1.55;color:var(--ink-soft)}
.x3-pkg__list svg{flex:0 0 auto;margin-top:3px;color:var(--accent)}
.x3-sec--dark .x3-pkg__list li,.x3-sec--deep .x3-pkg__list li{color:rgba(255,255,255,.76)}

.x3-pkg__more{margin-bottom:20px}
.x3-pkg__more summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 16px;border-radius:999px;
  background:rgba(11,18,32,.05);
  font-size:13px;font-weight:500;color:var(--ink);
  transition:background .18s var(--soft);
}
.x3-pkg__more summary::-webkit-details-marker{display:none}
.x3-pkg__more summary:hover{background:rgba(255,107,0,.12);color:var(--accent-deep)}
.x3-pkg__more summary svg{transition:transform .26s var(--expo)}
.x3-pkg__more[open] summary svg{transform:rotate(180deg)}
.x3-pkg__more[open] summary{margin-bottom:16px}
.x3-sec--dark .x3-pkg__more summary,.x3-sec--deep .x3-pkg__more summary{
  background:rgba(255,255,255,.10);color:#fff;
}
.x3-pkg__cta{margin-top:auto;width:100%;justify-content:center}

/* Keep service overview buttons aligned at the foot of each card. */
.x3-service-card{display:flex;flex-direction:column;align-items:flex-start}

/* Hosting plan icons must stay compact alongside their labels. */
.x3-hosting-plans li > svg,
.x3-hosting-plans .btn > svg{
  display:block;width:18px;height:18px;flex:0 0 18px;
}
.x3-hosting-plans li > svg{color:var(--accent)}
.x3-hosting-page li > svg{display:block;width:18px;height:18px;flex:0 0 18px;color:var(--accent)}
.x3-hosting-plans .x3-grid > .x3-tile{display:flex;flex-direction:column}
.x3-hosting-plans .x3-tile > .x3-btn{margin-top:auto;width:100%}

/* =============================================================================
   15a. LEGAL DOCUMENTS
   -----------------------------------------------------------------------------
   The nine policy pages are long-form legal text, written once and rarely
   touched. Their clauses carry per-element inline styles from the previous
   build; rather than rewrite hundreds of them — and risk corrupting the wording
   of a contract — the legacy colour tokens those styles reference are mapped to
   the new palette in x3-theme.css, and this restyles the clause cards around
   them. The words are untouched; only their frame changed.
   ============================================================================= */
.x3-legal{max-width:880px;margin:0 auto}
.x3-legal__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.x3-legal__card a{overflow-wrap:anywhere}
@media(max-width:600px){.x3-legal__grid{grid-template-columns:minmax(0,1fr)}}
.x3-legal > p{font-size:16px;line-height:1.78;color:var(--ink-soft);margin-bottom:18px}
.x3-legal__card{
  background:var(--paper);
  border:1px solid var(--ink-line);
  border-radius:var(--r-tile);
  padding:clamp(24px,2.8vw,34px);
  box-shadow:var(--shadow-tile);
  margin-bottom:16px;
}
.x3-legal__card h3,
.x3-legal__card h4{
  font-family:var(--font-display);font-stretch:112%;font-variation-settings:'wdth' 112;
  font-weight:400;font-size:clamp(18px,1.9vw,22px);line-height:1.24;
  letter-spacing:-.008em;color:var(--ink);margin-bottom:14px;
}
.x3-legal__card p{font-size:15.4px;line-height:1.75;color:var(--ink-soft)}
.x3-legal__card ul,.x3-legal__card ol{display:grid;gap:9px;margin:12px 0;padding-left:2px}
.x3-legal__card li{position:relative;padding-left:24px;font-size:15.2px;line-height:1.7;color:var(--ink-soft);list-style:none}
.x3-legal__card li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.x3-legal__card a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.x3-legal__card strong{color:var(--ink);font-weight:600}

/* =============================================================================
   15b. PROCESS STEPS
   ============================================================================= */
.x3-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px);counter-reset:x3step}
/* A five-step flow is a modifier, not an inline style — an inline
   grid-template-columns would out-rank the breakpoints below and strand the
   row at five columns on a phone. */
.x3-steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){.x3-steps--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.x3-steps,.x3-steps--5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.x3-steps,.x3-steps--5{grid-template-columns:minmax(0,1fr)}}
.x3-step{
  position:relative;
  padding:clamp(26px,2.8vw,34px);
  border-radius:var(--r-tile);
  background:var(--paper);
  border:1px solid var(--ink-line);
  box-shadow:var(--shadow-tile);
}
.x3-sec--dark .x3-step,.x3-sec--deep .x3-step{
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 2px 18px rgba(0,0,0,.18), 0 22px 54px rgba(0,0,0,.26);
}
.x3-step__n{
  counter-increment:x3step;
  width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;margin-bottom:20px;
  font-family:var(--font-display);font-stretch:118%;font-variation-settings:'wdth' 118;
  font-weight:700;font-size:17px;
  box-shadow:0 6px 20px rgba(255,107,0,.36);
}
.x3-step__n::before{content:counter(x3step)}
.x3-step h3{margin-bottom:10px}
.x3-step p{font-size:14.6px;line-height:1.62;color:var(--ink-soft)}
.x3-sec--dark .x3-step p,.x3-sec--deep .x3-step p{color:rgba(255,255,255,.70)}

/* =============================================================================
   15c. TEAM
   ============================================================================= */
.x3-team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
@media (max-width:980px){.x3-team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.x3-team{grid-template-columns:1fr}}
.x3-team--pair{max-width:calc(66.666% - clamp(6px,.74vw,9px));margin:clamp(18px,2.2vw,28px) auto 0;grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.x3-team--pair{max-width:none}}
.x3-member{
  border-radius:var(--r-tile);overflow:hidden;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 2px 18px rgba(0,0,0,.18), 0 22px 54px rgba(0,0,0,.28);
  display:flex;flex-direction:column;
  transition:transform .3s var(--soft), border-color .3s var(--soft);
}
.x3-member:hover{transform:translateY(-4px);border-color:rgba(255,107,0,.42)}
.x3-member__media{aspect-ratio:1;background:var(--navy-deep);overflow:hidden}
.x3-member__media video,.x3-member__media img{width:100%;height:100%;object-fit:cover;object-position:center top}
.x3-member__body{padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;gap:8px}
.x3-member__name{
  font-family:var(--font-display);font-stretch:118%;font-variation-settings:'wdth' 118;
  font-size:21px;color:#fff;letter-spacing:-.008em;
}
.x3-member__role{
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-hot);
}
.x3-member__bio{font-size:14.2px;line-height:1.62;color:rgba(255,255,255,.70);margin-top:6px}

/* =============================================================================
   16. THE FORM CARD
   ============================================================================= */
.x3-formcard{
  background:var(--paper);
  border-radius:var(--r-panel);
  padding:clamp(24px,3vw,38px);
  box-shadow:var(--shadow-lift);
}
.x3-sec--dark .x3-formcard,.x3-sec--deep .x3-formcard{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
}
.x3-formcard__error{
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;padding:14px 16px;border-radius:14px;
  background:rgba(214,61,42,.10);
  border:1px solid rgba(214,61,42,.30);
  font-size:14px;color:#D63D2A;
}
.x3-sec--dark .x3-formcard__error,.x3-sec--deep .x3-formcard__error{
  background:rgba(255,120,100,.12);border-color:rgba(255,120,100,.34);color:#FFB3A6;
}

/* =============================================================================
   17. REVIEWS
   ============================================================================= */
.x3-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:980px){.x3-reviews{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.x3-reviews{grid-template-columns:1fr}}
.x3-review{
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(24px,2.6vw,32px);
  border-radius:var(--r-tile);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 2px 18px rgba(0,0,0,.18), 0 22px 54px rgba(0,0,0,.26);
}
.x3-review__stars{display:flex;gap:3px;color:var(--accent)}
.x3-review__stars svg{width:16px;height:16px}
.x3-review__body{font-size:15px;line-height:1.66;color:rgba(255,255,255,.82);flex:1}
.x3-review__who{display:flex;align-items:center;gap:12px;padding-top:6px}
.x3-review__mark{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:var(--accent);display:grid;place-items:center;
  font-family:var(--font-display);font-stretch:118%;font-weight:700;
  font-size:15px;color:#fff;
}
.x3-review__name{display:block;font-size:14.5px;font-weight:600;color:#fff}
.x3-review__meta{display:block;font-size:12.5px;color:rgba(255,255,255,.52)}

/* =============================================================================
   18. THE ENQUIRY MODAL
   ============================================================================= */
.x3-modal{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:clamp(12px,3vw,32px);
  background:rgba(2,8,18,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--soft), visibility .28s;
}
.x3-modal.is-open{opacity:1;visibility:visible}
.x3-modal__box{
  width:min(620px,100%);max-height:92vh;max-height:92dvh;overflow-y:auto;
  border-radius:var(--r-panel);
  background:var(--paper);
  box-shadow:0 40px 100px rgba(2,8,18,.5);
  padding:clamp(24px,3.4vw,40px);
  transform:translateY(18px) scale(.985);
  transition:transform .34s var(--expo);
}
.x3-modal.is-open .x3-modal__box{transform:none}
.x3-modal__close{
  position:absolute;top:calc(clamp(12px,3vw,32px) + 14px);right:calc(clamp(12px,3vw,32px) + 14px);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:grid;place-items:center;color:#fff;
  transition:background .2s var(--soft)}
.x3-modal__close:hover{background:var(--accent)}
.x3-modal__close svg{width:19px;height:19px}
.x3-modal__head{margin-bottom:24px}
.x3-modal__head h2{
  font-family:var(--font-display);font-stretch:115%;font-variation-settings:'wdth' 115;
  font-size:clamp(22px,2.6vw,29px);line-height:1.14;color:var(--ink);letter-spacing:-.012em;
}
.x3-modal__head p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
body.x3-modal-open{overflow:hidden}

/* =============================================================================
   19. SCROLL REVEALS
   -----------------------------------------------------------------------------
   The same grammar as the stage entrance: surfaces are wiped with clip-path so
   their corners and any backdrop-filter survive, content lifts with opacity and
   transform. A single IntersectionObserver adds .is-in and the element animates
   to its authored state; it is unobserved immediately after, so nothing keeps
   running behind the scroll.
   ============================================================================= */
.js-reveal [data-rv]{transition-property:opacity,transform,clip-path;transition-duration:.78s;transition-timing-function:var(--expo)}
.js-reveal [data-rv="up"]{opacity:0;transform:translateY(26px)}
.js-reveal [data-rv="fade"]{opacity:0}
.js-reveal [data-rv="scale"]{opacity:0;transform:scale(.94)}
.js-reveal [data-rv="wipe"]{clip-path:inset(-25% 100% -25% -25%)}
.js-reveal [data-rv].is-in{opacity:1;transform:none;clip-path:inset(-25% 0% -25% -25%)}
.js-reveal [data-rv="up"].is-in,
.js-reveal [data-rv="fade"].is-in,
.js-reveal [data-rv="scale"].is-in{clip-path:none}

@media (prefers-reduced-motion:reduce){
  .js-reveal [data-rv]{opacity:1 !important;transform:none !important;clip-path:none !important}
}

/* a tile that carries a "Recommended" flag needs room for it above the box */
.x3-tile--flag{margin-top:15px}

/* =============================================================================
   20. THE ASSURANCE STRIP AND THE CLOSING CTA
   -----------------------------------------------------------------------------
   Two small blocks the service pages both use: a one-line promise directly
   under the stage, and the closing call to action. They keep the band's
   vocabulary without needing an extra wrapper element in every page.
   ============================================================================= */
.x3-assure{
  background:var(--navy);color:#fff;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.x3-assure .x3-wrap{
  display:flex;align-items:center;justify-content:center;
  gap:8px 16px;flex-wrap:wrap;text-align:center;
}
.x3-assure svg{width:20px;height:20px;color:var(--accent);flex:0 0 auto}
.x3-assure strong{font-size:15.5px;font-weight:600}
.x3-assure span{font-size:14.5px;color:rgba(255,255,255,.66)}

.x3-cta{
  background:linear-gradient(140deg,#0A1A2C 0%,#041D36 48%,#02101F 100%);
  color:#fff;text-align:center;overflow:hidden;
}
.x3-cta::before{
  content:"";position:absolute;z-index:0;
  width:min(680px,90%);aspect-ratio:1;right:-12%;top:-44%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,0,.26) 0%,rgba(255,107,0,0) 68%);
  pointer-events:none;
}
.x3-cta .x3-wrap{position:relative;z-index:1;max-width:820px}
.x3-cta h2{
  font-family:var(--font-display);font-stretch:118%;font-variation-settings:'wdth' 118;
  font-weight:400;font-size:clamp(28px,3.6vw,44px);line-height:1.08;
  letter-spacing:-.012em;color:#fff;margin-bottom:18px;
}
.x3-cta h2 em{font-style:normal;color:var(--accent)}
.x3-cta > .x3-wrap > p{font-size:clamp(15px,1.25vw,17.5px);line-height:1.68;color:rgba(255,255,255,.72);margin-bottom:30px}
.x3-cta__note{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.62);
}
.x3-cta__note svg{width:16px;height:16px;color:var(--accent);flex:0 0 auto}

/* Service-page CTAs: readable headings and compact, single-line buttons. */
.x3-sec.x3-cta > .x3-wrap > h2{color:#fff}
.x3-cta .x3-btn{width:max-content;max-width:100%;white-space:nowrap;gap:10px}
.x3-cta .x3-btn > svg{width:18px;height:18px;flex:0 0 18px}

.x3-blog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:36px}
.x3-blog-category{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill);line-height:1.5}
.x3-blog-readmore{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;min-height:44px;font-size:14px;font-weight:700;color:var(--accent-deep);text-decoration:none}
.x3-blog-readmore > svg{width:18px;height:18px;flex:0 0 18px}
.x3-blog-readmore:hover{color:var(--accent)}

/* Contact labels represented by accessible icons on the homepage. */
.x3-contact--icons .x3-contact__key{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:rgba(255,107,0,.14);color:var(--accent)}
.x3-contact--icons .x3-contact__row{align-items:center}

.x3-sec .x3-review-rating{height:auto!important;min-height:44px;flex-wrap:wrap;justify-content:center;padding-block:10px!important;text-align:center}
.x3-sec .x3-review-rating svg{color:inherit}

/* Reviews: soft light through glass, with a restrained entrance per row. */
.x3-reviews-section{position:relative;isolation:isolate;overflow:hidden;background:#061b30}
.x3-reviews-section > .x3-wrap{position:relative;z-index:1}
.x3-reviews-ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 35%,rgba(65,133,186,.04) 70%,transparent)}
.x3-reviews-ambient::before,.x3-reviews-ambient::after,.x3-reviews-ambient > span{content:"";position:absolute;inset:-60px;pointer-events:none;background-repeat:repeat-y;animation-play-state:paused}
.x3-reviews-ambient::before{
  background-image:radial-gradient(ellipse 46% 30% at 12% 40%,rgba(255,107,0,.38),transparent 100%);
  background-size:100% 1000px;animation:x3-review-light 18s ease-in-out -4s infinite;animation-play-state:paused}
.x3-reviews-ambient::after{
  background-image:radial-gradient(ellipse 48% 34% at 88% 62%,rgba(43,132,197,.42),transparent 100%);
  background-size:100% 1100px;animation:x3-review-light 22s ease-in-out -11s infinite reverse;animation-play-state:paused}
.x3-reviews-ambient__warm{
  background-image:radial-gradient(ellipse 40% 28% at 82% 28%,rgba(255,126,40,.32),transparent 100%);
  background-size:100% 1200px;animation:x3-review-light 25s ease-in-out -16s infinite;animation-play-state:paused}
.x3-reviews-ambient__cool{
  /* Keep the glow inside its tile so both repeat edges are fully transparent. */
  background-image:radial-gradient(ellipse 48% 30% at 24% 68%,rgba(57,150,205,.34),transparent 100%);
  background-size:100% 1050px;animation:x3-review-light 21s ease-in-out -8s infinite reverse;animation-play-state:paused}
.x3-reviews-section.is-ambient-active .x3-reviews-ambient::before,
.x3-reviews-section.is-ambient-active .x3-reviews-ambient::after,
.x3-reviews-section.is-ambient-active .x3-reviews-ambient > span{animation-play-state:running}
.x3-reviews-section .x3-review{
  background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 55%,rgba(255,255,255,.055));
  border-color:rgba(220,237,255,.19);
  -webkit-backdrop-filter:blur(26px) saturate(120%);backdrop-filter:blur(26px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 1px 0 0 rgba(255,255,255,.05),0 18px 45px rgba(0,0,0,.2)}
.x3-reviews-section .x3-review__body{color:rgba(255,255,255,.9)}
.x3-reviews-section .x3-review__meta{color:rgba(255,255,255,.65)}
.js-reveal .x3-review[data-rv="review"]{transition-property:opacity,transform;transition-duration:.6s;transition-timing-function:cubic-bezier(.22,.61,.36,1);clip-path:none}
.js-reveal .x3-review[data-rv="review"]:not(.is-in){opacity:0;transform:translateY(12px)}
.js-reveal .x3-review[data-rv="review"].is-in{opacity:1;transform:none;clip-path:none}
@keyframes x3-review-light{
  0%,100%{opacity:.08;transform:translate3d(-24px,-20px,0)}
  35%{opacity:1;transform:translate3d(22px,14px,0)}
  65%{opacity:.6;transform:translate3d(40px,30px,0)}
  85%{opacity:.12;transform:translate3d(0,4px,0)}
}
@media(max-width:640px){
  .x3-reviews-ambient::before,.x3-reviews-ambient::after,.x3-reviews-ambient > span{animation:none;opacity:.55;background-size:160% 900px;background-position:center top}
}
@media(prefers-reduced-motion:reduce){
  .x3-reviews-ambient::before,.x3-reviews-ambient::after,.x3-reviews-ambient > span{animation:none;opacity:.55}
  .js-reveal .x3-review[data-rv="review"]{transition:none;opacity:1;transform:none}
}

/* Narrow-screen layout repairs shared by the public pages. */
@media(max-width:700px){
  .x3-modal__close{background:var(--ink);z-index:1}
  .x3-proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x3-proof__item{min-width:0;padding:16px;overflow-wrap:anywhere}
  .x3-proof__num{font-size:clamp(20px,6vw,32px);white-space:nowrap}
  .x3-proof__label{font-size:11px;line-height:1.5}
  .x3-contact__val{min-width:0;overflow-wrap:anywhere}
  .x3-cta .x3-btn{white-space:normal}
  .x3-form input,.x3-form select,.x3-form textarea{min-width:0;font-size:16px!important}
}
@media(max-width:620px){.x3-team--pair{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){
  section[aria-label="Contact details"] .x3-proof{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
  .x3-wa{left:auto;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .x3-wa__btn{width:56px;height:56px;padding:0;justify-content:center}
  .x3-wa__btn > span:last-child{display:none}
  .x3-wa__menu{width:min(300px,calc(100vw - 28px))}
  .x3-foot{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  body:has(.ai-page) .x3-wa{bottom:calc(84px + env(safe-area-inset-bottom))}
  body:has(.ai-page) .x3-foot{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  body.x3-modal-open .ai-mobile-bar{display:none}
}

/* Illustrated feature tiles (Why Google Ads / Why Meta Ads). The picture is the
   tile's header: it bleeds to the card edges by cancelling the tile padding, so
   it has to repeat that padding value rather than inherit it. */
.x3-tile__img{
  display:block;
  width:calc(100% + 2 * clamp(24px,2.6vw,34px));
  margin:calc(-1 * clamp(24px,2.6vw,34px)) calc(-1 * clamp(24px,2.6vw,34px)) 22px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--r-tile) var(--r-tile) 0 0;
  background:var(--navy-deep);
}

/* ===========================================================================
   Enquiry modal — split layout.
   Left panel carries the brand orange and the ways to reach a person without
   filling anything in; right panel is the form. The box loses its own padding
   because each side supplies its own, otherwise the orange would not bleed to
   the edges.
   =========================================================================== */
.x3-modal__box--split{
  width:min(1000px,100%);
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1fr);
}
.x3-modal__box--split > *{min-width:0}

.x3-modal__aside{
  position:relative;
  padding:clamp(26px,2.8vw,38px);
  background:linear-gradient(158deg,var(--accent-hot) 0%,var(--accent) 46%,var(--accent-deep) 100%);
  color:#fff;
  display:flex;flex-direction:column;
}
/* soft depth so the flat orange does not read as a colour block */
.x3-modal__aside::after{
  content:"";position:absolute;right:-28%;top:-18%;
  width:min(420px,78%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.20),transparent 68%);
  pointer-events:none;
}
.x3-modal__aside > *{position:relative;z-index:1}

.x3-modal__aside-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.x3-modal__aside-eyebrow svg{width:13px;height:13px}
.x3-modal__aside-title{
  margin-top:14px;
  font-family:var(--font-display);font-stretch:115%;font-variation-settings:'wdth' 115;
  font-size:clamp(21px,2.3vw,27px);line-height:1.12;letter-spacing:-.012em;color:#fff;
}
.x3-modal__aside-lede{margin-top:11px;font-size:14px;line-height:1.58;color:rgba(255,255,255,.88)}

.x3-modal__lines{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.x3-modal__line{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:13px;
  padding:12px 14px;
  transition:background .2s var(--soft),border-color .2s var(--soft);
}
.x3-modal__line:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.38)}
.x3-modal__line-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.80);margin-bottom:6px;
}
.x3-modal__line-actions{display:flex;align-items:center;gap:10px;justify-content:space-between}
.x3-modal__line-tel{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:#fff;letter-spacing:-.005em;white-space:nowrap;
}
.x3-modal__line-tel svg{width:14px;height:14px;opacity:.85;flex:0 0 14px}
.x3-modal__line-tel:hover{text-decoration:underline;text-underline-offset:3px}
.x3-modal__line-wa{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  transition:transform .2s var(--soft),background .2s var(--soft);
}
.x3-modal__line-wa:hover{background:#1FB855;transform:translateY(-2px)}
.x3-modal__line-wa svg{width:15px;height:15px}

.x3-modal__mails{margin-top:18px;display:grid;gap:8px}
.x3-modal__mails a{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.94);
  overflow-wrap:anywhere;
}
.x3-modal__mails svg{width:14px;height:14px;opacity:.8;flex:0 0 14px}
.x3-modal__mails a:hover{text-decoration:underline;text-underline-offset:3px}

.x3-modal__aside-note{
  margin-top:auto;padding-top:22px;
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.84);
}
.x3-modal__aside-note svg{width:13px;height:13px;flex:0 0 13px}

.x3-modal__main{padding:clamp(26px,3vw,40px);background:var(--paper)}

/* Stack on narrow screens: the form is the action, so it leads and the direct
   contact details follow it. */
@media(max-width:860px){
  .x3-modal__box--split{grid-template-columns:minmax(0,1fr)}
  .x3-modal__aside{order:2}
  .x3-modal__main{order:1}
  .x3-modal__aside-note{margin-top:20px}
}

/* The proof strip under the hero breaks out of the standard content wrap: the
   four numbers read as full-width blocks, inset 150px each side. Below this
   breakpoint the normal page gutter is already wider than that inset, so the
   wrap is left alone rather than squeezed. */
@media (min-width:1100px){
  .x3-proof-band > .x3-wrap{
    max-width:none;
    width:calc(100% - 300px);
    padding-inline:0;
  }
}

/* ===========================================================================
   Blog article furniture.
   The written posts carry three recurring blocks — an author note, an FAQ and
   a sources list — plus inline code. .x3-prose styles the body copy; these give
   those blocks their own shape so a 2,700-word article stays readable.
   =========================================================================== */
.x3-prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;
  padding:2px 6px;
  border-radius:6px;
  background:var(--paper-alt);
  border:1px solid var(--ink-line);
  color:var(--ink);
  overflow-wrap:anywhere;
}

/* A wide comparison table must not force the page to scroll sideways. */
.x3-prose table{display:block;overflow-x:auto;max-width:100%}
.x3-prose td{vertical-align:top}

.x3-prose .post-faq{margin-top:52px;padding-top:12px;border-top:1px solid var(--ink-line)}
.x3-prose .post-faq h3{
  margin-top:28px;font-size:17px;font-weight:600;color:var(--ink);
}
.x3-prose .post-faq h3 + p{margin-top:8px}

.x3-prose .post-author{
  margin-top:52px;padding:22px 24px;
  border-left:4px solid var(--accent);
  border-radius:0 14px 14px 0;
  background:var(--paper-alt);
}
.x3-prose .post-author p{margin:0;font-size:14.5px;line-height:1.7}

.x3-prose .post-sources{margin-top:44px;padding-top:12px;border-top:1px solid var(--ink-line)}
.x3-prose .post-sources h2{font-size:18px;margin-top:22px}
.x3-prose .post-sources ul{gap:8px;margin-top:14px}
.x3-prose .post-sources li{font-size:13.5px;line-height:1.6}
.x3-prose .post-sources a{overflow-wrap:anywhere}

/* ===========================================================================
   Our Team.
   Each card owns one colour through --who: it tints the hero name, the rule
   and the glow, and nothing else. The photograph already carries that colour,
   so the card only has to agree with it.
   =========================================================================== */
.x3-crew-leads{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:44px;
}
.x3-crew-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,30px);margin-top:44px;
}

.x3-crew{
  position:relative;
  background:var(--paper);
  border:1px solid var(--ink-line);
  border-radius:var(--r-tile);
  overflow:hidden;
  box-shadow:var(--shadow-tile);
  transition:transform .28s var(--soft), box-shadow .28s var(--soft), border-color .28s var(--soft);
}
.x3-crew:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 20px rgba(4,29,54,.10), 0 26px 60px color-mix(in srgb, var(--who) 22%, transparent);
  border-color:color-mix(in srgb, var(--who) 46%, transparent);
}
.x3-sec--alt .x3-crew{background:#fff}

.x3-crew__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--navy-deep)}
.x3-crew--lead .x3-crew__media{aspect-ratio:4/5}
.x3-crew__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* a thin bar of the person's colour where the picture meets the text */
.x3-crew__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--who);
}
.x3-crew__tag{
  position:absolute;top:14px;left:14px;
  padding:6px 12px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--who);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}

.x3-crew__body{padding:clamp(20px,2.2vw,28px)}
.x3-crew__hero{
  display:block;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--who);
}
.x3-crew__name{
  margin-top:8px;
  font-family:var(--font-display);font-stretch:115%;font-variation-settings:'wdth' 115;
  font-size:clamp(20px,2.1vw,26px);line-height:1.1;color:var(--ink);letter-spacing:-.012em;
}
.x3-crew--lead .x3-crew__name{font-size:clamp(24px,2.6vw,32px)}
.x3-crew__role{
  margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);
}
.x3-crew__line{margin-top:14px;font-size:14.8px;line-height:1.65;color:var(--ink-soft)}

/* Expandable origin story — collapsed by default so the page stays readable. */
.x3-crew__story{margin-top:18px;border-top:1px solid var(--ink-line);padding-top:14px}
.x3-crew__story > summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:13.5px;font-weight:700;letter-spacing:.03em;color:var(--who);
}
.x3-crew__story > summary::-webkit-details-marker{display:none}
.x3-crew__story > summary svg{width:15px;height:15px;transition:transform .25s var(--soft)}
.x3-crew__story[open] > summary svg{transform:rotate(180deg)}
.x3-crew__story .x3-crew__story-shut{display:none}
.x3-crew__story[open] .x3-crew__story-open{display:none}
.x3-crew__story[open] .x3-crew__story-shut{display:inline}
.x3-crew__prose{margin-top:14px;max-width:none;font-size:14.5px;line-height:1.7}
.x3-crew__prose > * + *{margin-top:14px}

@media(max-width:1000px){
  .x3-crew-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .x3-crew-leads,.x3-crew-grid{grid-template-columns:minmax(0,1fr)}
}

/* Card link through to the person's own page, replacing the inline expander. */
.x3-crew__more{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;padding-top:14px;
  border-top:1px solid var(--ink-line);width:100%;
  font-size:13.5px;font-weight:700;letter-spacing:.03em;color:var(--who);
}
.x3-crew__more svg{width:15px;height:15px;transition:transform .22s var(--soft)}
.x3-crew:hover .x3-crew__more svg{transform:translateX(4px)}

/* A person's own page: portrait beside the intro, story below. */
.x3-person{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;
}
.x3-person__media{
  position:relative;margin:0;border-radius:var(--r-panel);overflow:hidden;
  aspect-ratio:3/4;background:var(--navy-deep);
  box-shadow:0 30px 70px rgba(4,29,54,.20);
}
.x3-person__media img{display:block;width:100%;height:100%;object-fit:cover}
.x3-person__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--who)}
.x3-person__tag{
  position:absolute;top:16px;left:16px;padding:7px 14px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--who);box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.x3-person__hero{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--who);margin-bottom:10px;
}
.x3-person__role{
  margin-top:8px;font-size:13.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);
}
.x3-person__intro .x3-lede{margin-top:20px}
.x3-person__facts{display:grid;gap:12px;margin-top:26px}
.x3-person__facts > div{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 16px;border-left:3px solid var(--who);
  background:var(--paper-alt);border-radius:0 12px 12px 0;
}
.x3-person__facts span{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.x3-person__facts strong{font-size:14.5px;color:var(--ink)}
.x3-person__story{max-width:760px;font-size:16.5px}

/* Previous / all / next. */
.x3-person-nav{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);margin-top:40px;
}
.x3-person-nav__link,.x3-person-nav__all{
  position:relative;display:block;padding:20px;
  border:1px solid var(--ink-line);border-radius:var(--r-tile);
  background:var(--paper);overflow:hidden;
  transition:transform .26s var(--soft), box-shadow .26s var(--soft), border-color .26s var(--soft);
}
.x3-person-nav__link:hover,.x3-person-nav__all:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px color-mix(in srgb, var(--who, var(--accent)) 20%, transparent);
  border-color:color-mix(in srgb, var(--who, var(--accent)) 44%, transparent);
}
.x3-person-nav__link img{
  width:56px;height:56px;border-radius:14px;object-fit:cover;
  display:block;margin-bottom:14px;
}
.x3-person-nav__dir{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--who);
}
.x3-person-nav__link:first-child .x3-person-nav__dir svg{transform:rotate(180deg)}
.x3-person-nav__link strong{display:block;margin-top:8px;font-size:17px;color:var(--ink)}
.x3-person-nav__link em{display:block;margin-top:2px;font-size:13px;font-style:normal;color:var(--ink-soft)}
.x3-person-nav__all{display:flex;flex-direction:column;justify-content:center;text-align:center}
.x3-person-nav__all svg{width:20px;height:20px;color:var(--accent);margin:0 auto 10px}
.x3-person-nav__all strong{font-size:17px;color:var(--ink)}
.x3-person-nav__all span{margin-top:4px;font-size:13px;color:var(--ink-soft)}

@media(max-width:860px){
  .x3-person{grid-template-columns:minmax(0,1fr)}
  .x3-person__media{max-width:420px;margin-inline:auto}
  .x3-person-nav{grid-template-columns:minmax(0,1fr)}
}

/* ===========================================================================
   BELOW THE STAGE — same brand, light surfaces
   ===========================================================================
   The stage is cinematic: huge display type, real colour, light and depth.
   Below it the page was running small, grey and flat, so the scroll felt like
   two different websites.

   The answer is not to darken the page. The palette stays white, off-white
   and grey. What changes is scale, colour and depth: headings sized to follow
   the stage rather than shrink away from it, icons that actually carry the
   accent, cards with a real edge and a warm lift, and a faint wash in each
   band so a white section is never a dead white rectangle.
   =========================================================================== */

/* --- a warm wash instead of flat white -----------------------------------
   Two very low-opacity blooms per band. Under the content, never clickable,
   and invisible as colour — they only stop the eye reading pure #FFF. */
.x3-sec{position:relative;isolation:isolate}
.x3-sec:not(.x3-sec--dark):not(.x3-sec--deep)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(64% 46% at 88% 0%,   rgba(255,107,0,.055), transparent 62%),
    radial-gradient(58% 44% at 6%  100%, rgba(4,29,54,.045),   transparent 64%);
}
/* Two identical bands in a row would repeat the same bloom, so the second
   one mirrors it. */
.x3-sec + .x3-sec:not(.x3-sec--dark):not(.x3-sec--deep)::before{
  background:
    radial-gradient(60% 44% at 10% 2%,  rgba(255,107,0,.05),  transparent 62%),
    radial-gradient(56% 42% at 92% 98%, rgba(4,29,54,.04),    transparent 64%);
}

/* --- type scale ----------------------------------------------------------
   This is most of why the page felt flat. The stage headline runs enormous;
   the section headings were about a third of it and dropped the thread. */
.x3-h2,
.x3-head > h2{
  font-size:clamp(31px,3.55vw,52px);
  line-height:1.05;
  letter-spacing:-.022em;
}
.x3-head > p{
  font-size:clamp(15.5px,1.26vw,18.5px);
  line-height:1.66;
}
.x3-head{max-width:920px}
.x3-head--center{margin-inline:auto}

/* The eyebrow gets a rule, so every section opens with a mark of the brand
   colour rather than small grey text. */
.x3-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;letter-spacing:.14em;
  color:var(--accent-deep);
}
.x3-eyebrow::after{
  content:"";width:clamp(22px,3vw,42px);height:2px;border-radius:999px;
  background:linear-gradient(90deg, var(--accent), transparent);
}
.x3-head--center .x3-eyebrow{justify-content:center}

/* --- tiles ---------------------------------------------------------------
   A white card on a white page needs an edge and a shadow with some weight
   in it, plus somewhere for the accent to appear on hover. */
.x3-tile{
  border:1px solid rgba(11,18,32,.07);
  box-shadow:
    0 1px 2px rgba(11,18,32,.04),
    0 10px 26px rgba(11,18,32,.06),
    0 28px 60px rgba(11,18,32,.07);
  transition:transform .3s var(--soft), box-shadow .3s var(--soft), border-color .3s var(--soft);
}
/* the accent edge, drawn only on hover so the grid stays calm at rest */
.x3-tile::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:var(--r-tile) var(--r-tile) 0 0;
  background:linear-gradient(90deg, var(--accent), var(--accent-hot));
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--expo);
}
.x3-tile:hover{
  transform:translateY(-6px);
  border-color:rgba(255,107,0,.30);
  box-shadow:
    0 1px 2px rgba(11,18,32,.05),
    0 14px 32px rgba(11,18,32,.08),
    0 34px 74px rgba(255,107,0,.16);
}
.x3-tile:hover::after{transform:scaleX(1)}

/* The icon chip was a pale square with a thin grey glyph. On white, a filled
   accent chip with a soft glow is what ties the band to the stage. */
.x3-tile__icon{
  width:58px;height:58px;border-radius:18px;
  background:linear-gradient(148deg, var(--accent-hot), var(--accent-deep));
  box-shadow:
    0 8px 20px rgba(255,107,0,.30),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.x3-tile__icon svg{width:25px;height:25px;color:#fff}
.x3-tile__icon--solid{background:linear-gradient(148deg, var(--accent-hot), var(--accent-deep))}

.x3-tile > h3, .x3-tile > h4{font-size:clamp(17px,1.45vw,20.5px);line-height:1.28}
.x3-tile > p{font-size:15.2px;line-height:1.66}

/* --- steps ---------------------------------------------------------------- */
.x3-step{position:relative}
.x3-step > h4{font-size:clamp(16.5px,1.4vw,19.5px)}

/* --- the numbers ---------------------------------------------------------
   Statistics are the loudest thing a light section has. Let them be loud. */
.x3-pkg__price, .x3-proof__num{letter-spacing:-.02em}

/* --- section rhythm ------------------------------------------------------
   A touch more air between bands so the larger type has room, and a hairline
   where two light bands meet so they do not merge into one page-long block. */
.x3-sec{padding:clamp(84px,9.5vw,136px) 0}
.x3-sec--tight{padding:clamp(56px,6.4vw,88px) 0}
.x3-sec--alt{background:var(--paper-alt)}
.x3-sec--alt + .x3-sec:not(.x3-sec--alt):not(.x3-sec--dark):not(.x3-sec--deep),
.x3-sec:not(.x3-sec--alt):not(.x3-sec--dark):not(.x3-sec--deep) + .x3-sec--alt{
  border-top:1px solid rgba(11,18,32,.06);
}

/* --- keep the dark bands in step ----------------------------------------
   There are only a few of them, and they should read as the same family. */
.x3-sec--dark .x3-eyebrow, .x3-sec--deep .x3-eyebrow{color:var(--accent-hot)}
.x3-sec--dark .x3-eyebrow::after, .x3-sec--deep .x3-eyebrow::after{
  background:linear-gradient(90deg, var(--accent-hot), transparent);
}
.x3-sec--dark .x3-tile, .x3-sec--deep .x3-tile{
  border-color:rgba(255,255,255,.13);
  box-shadow:0 2px 18px rgba(0,0,0,.22), 0 24px 58px rgba(0,0,0,.30);
}
.x3-sec--dark .x3-tile:hover, .x3-sec--deep .x3-tile:hover{
  border-color:rgba(255,107,0,.46);
  box-shadow:0 2px 20px rgba(0,0,0,.26), 0 30px 70px rgba(255,107,0,.18);
}
.x3-sec--dark .x3-head > p, .x3-sec--deep .x3-head > p{color:rgba(255,255,255,.74)}

/* --- mobile --------------------------------------------------------------
   The larger scale is a desktop gain; on a phone it has to come back down or
   a three-word heading eats the screen. */
@media(max-width:700px){
  .x3-sec{padding:64px 0}
  .x3-sec--tight{padding:46px 0}
  .x3-h2, .x3-head > h2{font-size:clamp(26px,7.4vw,34px)}
  .x3-head > p{font-size:15px}
  .x3-tile__icon{width:50px;height:50px;border-radius:16px}
  .x3-tile__icon svg{width:22px;height:22px}
  .x3-tile:hover{transform:none}
}