/* Domain strip */
.domains{
  padding-block:clamp(2.25rem,3.6vw,3.25rem);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  background:linear-gradient(180deg,rgba(11,19,32,.5),rgba(2,5,10,0));
  text-align:center;
}
.domains-title{
  font-size:clamp(1.05rem,1.7vw,1.42rem);
  font-weight:600;
  color:#E4ECF5;
  max-width:64ch;
  margin:0 auto clamp(1.25rem,2.2vw,1.75rem);
  letter-spacing:-.01em;
}
.domain-list{
  display:flex;flex-wrap:wrap;
  gap:.7rem;justify-content:center;
}
.domain-chip{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.62rem 1.15rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.02);
  font-size:.9rem;font-weight:500;
  color:#DCE6F1;
  transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast),color var(--t-fast);
}
.domain-chip .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--color-primary);
  box-shadow:0 0 10px var(--color-primary);
}
.domain-chip:hover{
  border-color:var(--color-border-strong);
  background:rgba(25,199,242,.08);
  color:#fff;
  transform:translateY(-2px);
}

/* Why Sails split panel */
.why-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,3vw,3.5rem);
  align-items:center;
  padding:clamp(1.5rem,3.4vw,3.2rem);
  background:var(--color-surface);
  background-image:var(--grad-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.why-panel::before{
  content:"";
  position:absolute;top:-40%;right:-14%;
  width:520px;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(25,199,242,.16),transparent 68%);
  pointer-events:none;
}
.why-content h2{margin-bottom:var(--space-md)}
.why-content > p{color:var(--color-text-secondary);margin-bottom:var(--space-md)}
.why-points{display:grid;gap:.7rem;margin-bottom:var(--space-md)}
.why-points li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.96rem;color:#DCE6F1;
}
.why-points .icon{
  width:18px;height:18px;flex:none;margin-top:.22rem;
  color:var(--color-primary);
}
.why-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.why-visual{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--color-border);
  aspect-ratio:4/3;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
}
.why-visual svg,
.why-visual__image,
.why-visual img{width:100%;height:100%;object-fit:cover;display:block}

/* Final CTA. Background is a video slot; falls back to a horizon glow. */
.final-cta{
  position:relative;
  text-align:center;
  padding-block:clamp(4.5rem,8vw,7.5rem);
  overflow:hidden;
  isolation:isolate;
  border-top:1px solid var(--color-border);
}
.final-cta > .container{position:relative;z-index:2;max-width:920px}
.final-cta h2{
  font-size:clamp(1.9rem,3.6vw,3.15rem);
  margin-bottom:var(--space-md);
}
.final-cta > .container > p{
  color:var(--color-text-secondary);
  max-width:62ch;
  margin:0 auto var(--space-lg);
}
/* With media behind it the section needs more vertical room to breathe. */
.final-cta.has-media{
  min-height:min(78vh,720px);
  display:grid;
  align-content:center;
  padding-block:clamp(6rem,12vw,10rem);
}

/* ---------- Reusable background media layer ---------- */
.media-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:var(--color-bg);
}
.media-bg__video,
.media-bg__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* Iframe embeds cannot be object-fit, so oversize and centre them instead. */
.media-bg__frame{
  position:absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
  width:100vw;
  height:56.25vw;          /* 16:9 */
  min-height:100%;
  min-width:177.77vh;      /* 16:9 the other way */
  pointer-events:none;
}
.media-bg__frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
/* Keeps headline contrast readable over any footage. */
.media-bg__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,5,10,.86) 0%,rgba(2,5,10,.55) 38%,rgba(2,5,10,.78) 100%),
    radial-gradient(circle at 50% 60%,rgba(25,199,242,.14),transparent 62%);
}
.media-bg--hero .media-bg__overlay{
  background:linear-gradient(180deg,rgba(2,5,10,.7) 0%,rgba(2,5,10,.45) 45%,rgba(2,5,10,.92) 100%);
}

/* Empty state for the CTA: a composed horizon, not a blank band. */
.cta-horizon{
  position:absolute;
  left:0;right:0;bottom:0;
  height:clamp(180px,26vw,340px);
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.cta-horizon__glow{
  position:absolute;left:50%;bottom:-64%;translate:-50% 0;
  width:min(1500px,150vw);aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,
    rgba(25,199,242,.28) 0%,
    rgba(27,92,255,.12) 32%,
    transparent 58%);
  filter:blur(6px);
}
.cta-horizon__arc{
  position:absolute;left:50%;bottom:-60%;translate:-50% 0;
  width:min(1400px,146vw);aspect-ratio:1/1;border-radius:50%;
  border-top:1px solid rgba(122,205,255,.34);
}

/* Case study blocks */
.case-blocks{
  display:grid;gap:var(--space-lg);
  max-width:76ch;margin:0 auto var(--space-xl);
}
.case-block{
  border-left:2px solid var(--color-primary);
  padding-left:var(--space-md);
}
.case-block h2{font-size:1.4rem;margin-bottom:.6rem}
.case-block p{color:var(--color-text-secondary)}

.tech-list{max-width:76ch;margin:0 auto var(--space-xl)}
.tech-list h2{font-size:1.2rem;margin-bottom:var(--space-sm)}
.tech-list ul,
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;padding:0}
.tech-list li,
.tag-list li{
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  padding:.4rem .9rem;
  font-size:var(--fs-small);
  color:var(--color-text-secondary);
}
.tag-list{max-width:76ch;margin:var(--space-lg) auto 0}
.tag-list a{color:inherit}
.tag-list a:hover{color:var(--color-primary)}

.article-figure{
  max-width:1080px;
  margin:0 auto clamp(2rem,4vw,3.5rem);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--color-border);
}
.article-figure img{width:100%;height:auto;display:block}

.related{margin-top:clamp(3rem,6vw,5rem)}
.related .section-title{
  font-size:clamp(1.5rem,2.4vw,2rem);
  text-align:center;
  margin-bottom:var(--space-lg);
}

/* Team grid */
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,1.8vw,1.6rem);
}
.team-card{
  background:var(--color-surface);
  background-image:var(--grad-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  text-align:center;
  transition:transform var(--t-med),border-color var(--t-med);
}
.team-card:hover{transform:translateY(-4px);border-color:var(--color-border-strong)}
.team-card__photo{
  position:relative;
  width:104px;height:104px;
  margin:0 auto var(--space-sm);
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--color-border-strong);
  background:linear-gradient(140deg,#0E2337,#061019);
  display:grid;place-items:center;
}
.team-card__photo img{width:100%;height:100%;object-fit:cover}
.team-card__initials{
  font-weight:800;font-size:1.35rem;
  color:var(--color-primary);letter-spacing:.05em;
}
.team-card h3{font-size:1rem;margin-bottom:.3rem}
.team-card p{
  font-size:var(--fs-small);
  color:var(--color-text-secondary);
  min-height:2.4em;
}
.team-card__link{
  display:inline-block;
  margin-top:.6rem;
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--color-primary);
}
.team-card__link:hover{text-decoration:underline}

/* Contact layout */
.contact-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
}
.contact-form-panel{
  background:var(--color-surface);
  background-image:var(--grad-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.6rem);
}
.contact-form-panel h2{margin-bottom:var(--space-md)}
.contact-form-panel .prose{max-width:none;margin:0}
.contact-details{display:grid;gap:var(--space-md)}
.contact-block{
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-md);
  background:rgba(11,19,32,.5);
}
.contact-block h2{
  display:flex;align-items:center;gap:.6rem;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-primary);margin-bottom:var(--space-sm);
}
.contact-block .icon{width:16px;height:16px}
.contact-block li + li{margin-top:.5rem}
.contact-block a{color:#DCE6F1}
.contact-block a:hover{color:var(--color-primary)}
.office-list li{display:grid;gap:.2rem}
.office-list b{font-size:.85rem;color:#fff}
.office-list span{font-size:var(--fs-small);color:var(--color-text-secondary);line-height:1.55}

.apply-panel{
  text-align:center;
  max-width:56ch;margin-inline:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:clamp(1.75rem,4vw,3rem);
  background:var(--color-surface);
  background-image:var(--grad-surface);
}
.apply-panel h2{margin-bottom:var(--space-sm)}
.apply-panel p{color:var(--color-text-secondary);margin-bottom:var(--space-md)}

/* Blog layout with optional sidebar */
.blog-layout{display:grid;grid-template-columns:1fr;gap:var(--space-xl)}
.blog-layout:has(.blog-sidebar){grid-template-columns:1fr 300px}
.blog-sidebar .widget + .widget{margin-top:var(--space-lg)}
.blog-sidebar .widget-title{font-size:1.05rem;margin-bottom:var(--space-sm)}
.blog-sidebar li{padding:.35rem 0;color:var(--color-text-secondary)}
.blog-sidebar a:hover{color:var(--color-primary)}

.search-bar{max-width:560px;margin:0 auto var(--space-xl)}
.search-form{display:flex;gap:.6rem}
.search-field{
  flex:1;
  padding:.85rem 1.1rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.03);
  color:#fff;
}
.search-field::placeholder{color:var(--color-text-secondary)}
.search-field:focus{outline:none;border-color:var(--color-border-strong)}