/*
Theme Name: Sundsvall Studio G75 GO4A (Use cases rail-right)
Theme URI: https://sundsvall.studio/
Author: Sundsvall Studio
Description: Full-format hero video with a separated editorial SUNDSVALL header (no overlap). Wider Use Cases block; contact stays right-rail.
Version: 2.6.2g75-go4a
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sundsvall-studio-g75
*/

:root{
  --bg:#0b0c10;
  --fg:#eef0f6;
  --muted:rgba(238,240,246,.68);
  --hair:rgba(238,240,246,.12);

  --sans: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --padX: 22px;
  --headerH: 104px;
  --wpbar: 0px;
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.screen-reader-text{position:absolute; left:-9999px}


/* WP admin bar (when logged in) adds html margin-top which can cause a tiny scroll on desktop.
   We neutralize it and account for the bar via --wpbar so everything stays one-screen. */
html{ margin-top: 0 !important; }
body.admin-bar{ --wpbar: 32px; padding-top: var(--wpbar); }
@media (max-width: 782px){
  body.admin-bar{ --wpbar: 46px; }
}


/* Header (separated — never on top of video) */

/* v2.3.7: editorial header CTA (no button look) */
.header__inner{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.header__top{
  display:grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: baseline;
  column-gap: 44px;
}

.header__nav{
  grid-column: 2;
  justify-self: center;
  align-self: baseline;
  min-width: 0;
}
.header__ghost{
  grid-column: 3;
  width: 1px;
}

/* Menu list (WP menu) */
.nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}

/* Links */
.nav__list a,
.nav__link{
  font-family: var(--sans);
  font-weight: 650;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(238,240,246,.78);
  padding: 2px 0;
  border-bottom: 1px solid transparent; /* reveal on hover/focus only */
  transition: color .2s ease, border-bottom-color .2s ease, transform .2s ease;
}
.nav__list a:hover,
.nav__link:hover{
  color: rgba(238,240,246,.95);
  border-bottom-color: rgba(238,240,246,.42);
  transform: translateY(-1px);
}
.nav__list a:focus-visible,
.nav__link:focus-visible{
  outline: 2px solid rgba(238,240,246,.55);
  outline-offset: 4px;
}

/* Responsive: keep breathing room */
@media (max-width: 920px){
  .header__top{ column-gap: 28px; }
  .nav__list{ gap: 14px; }
}
@media (max-width: 720px){
  .header__top{
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .header__nav{
    grid-column: 1;
    justify-self: start;
  }
  .nav__list{ justify-content: flex-start; }
}
/* keep header clean on small phones */
@media (max-width: 640px){
  .header__kicker{ display:none; }
}

.header{
  height: var(--headerH);
  display:flex;
  align-items:center;
  padding: 0 var(--padX);
  border-bottom: 1px solid var(--hair);
  background: rgba(11,12,16,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand{
  display:flex;
  align-items:baseline;
  gap: 12px;
  line-height:1;
  min-width: 0;
}
.brand__name{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(26px, 3.2vw, 44px);
  white-space: nowrap;
  text-transform: none;
}
.brand__sub{
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(238,240,246,.62);
  white-space: nowrap;
}

/* Hero video (full-format below header, no overlay) */
.hero{
  position:relative;
  width:100%;
  /* fallbacks: vh → svh → dvh */
  height: calc(100vh - var(--headerH) - var(--wpbar));
  height: calc(100svh - var(--headerH) - var(--wpbar));
  height: calc(100dvh - var(--headerH) - var(--wpbar));
  min-height: 420px;
  overflow:hidden;
  background:#07080b;
}
.hero__poster,
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero__video{
  filter: contrast(1.06) saturate(.95);
}

/* Subtle cinematic vignette */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(to bottom, rgba(11,12,16,.10), rgba(11,12,16,0) 38%, rgba(11,12,16,.34));
  pointer-events:none;
}

/* iOS fallback via JS sets --vh */
.hero.use-vh{
  height: calc((var(--vh, 1vh) * 100) - var(--headerH) - var(--wpbar));
}

@media (max-width: 520px){
  :root{ --padX: 16px; --headerH: 104px; }
  .brand{gap: 10px;}
  .brand__sub{
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(238,240,246,.62);
  white-space: nowrap;
} /* ultra clean on phone */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero__video{display:none;}
}


/* --- v2.1.8: minimal below-fold content (still clean) --- */
.section{
  padding: 56px var(--padX) 72px;
}
.section--tight{ padding-top: 44px; }
.section__wrap{
  max-width: 1120px;
  margin: 0 auto;
}
.kicker{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.58);
  font-weight: 600;
}
.h2{
  margin: 14px 0 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 650;
}
.lead{
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(238,240,246,.72);
  max-width: 64ch;
}
.scope{
  margin-top: 24px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.scope .pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border: 1px solid rgba(238,240,246,.12);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(238,240,246,.70);
  background: rgba(255,255,255,.02);
}
.actions{
  margin-top: 24px;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(238,240,246,.18);
  background: rgba(238,240,246,.06);
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  font-weight: 650;
}
.btn:hover{ background: rgba(238,240,246,.10); }

.hr{
  height:1px;
  background: rgba(238,240,246,.10);
  margin-top: 44px;
}
.small{
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(238,240,246,.52);
}
@media (max-width: 520px){
  .section{ padding: 44px var(--padX) 58px; }
  .scope .pill{ padding: 7px 11px; letter-spacing: .14em; }
}


/* v2.1.9: header kicker (what we do) without changing layout */
.header__inner{
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 14px;
}
.header__kicker{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(238,240,246,.58);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
  text-align:right;
}
@media (max-width: 520px){
  .header__kicker{
    font-size: 10px;
    letter-spacing: .16em;
    max-width: 48vw;
  }
}



/* keep header clean on small phones */
@media (max-width: 640px){
  .header__kicker{ display:none; }
}
@media (max-width: 520px){
  .header__cta{ padding: 9px 11px; font-size: 10px; letter-spacing: .20em; }
}




/* v2.6.1: Brand-only + descriptor under brand (removes redundant STUDIO) */
.brandblock{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 10px;
  min-width: 0;
}
.brand__descriptor{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.brand__descriptor .desc__headline{
  font-family: var(--sans);
  font-weight: 650;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.05;
  color: rgba(238,240,246,.86);
}
.brand__descriptor .desc__subline{
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(238,240,246,.52);
}

/* Ensure header top row aligns to baseline */
.header__top{
  align-items:flex-start;
}


/* v2.4.4: Header layout – brand left, kicker right, menu centered at bottom (more breathing room) */
.header{
  height: var(--headerH);
  display:flex;
  align-items:stretch;
}
.header__inner{
  position: relative;
  width: 100%;
  height: 100%;
  display:block; /* override earlier flex/grid */
}
.header__top{
  position:absolute;
  top: 24px;
  left: 0;
  right: 0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 18px;
}
.header__kicker{
  text-align:right;
  max-width: 48vw;
}
.header__nav{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  display:flex;
  justify-content:center;
  align-items:baseline;
  min-width: 0;
}
.nav__list{
  list-style:none;
  margin:0;
  padding:0 10px;
  display:flex;
  gap: 18px;
  flex-wrap: nowrap;
  justify-content:center;
  align-items:baseline;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.nav__list::-webkit-scrollbar{ display:none; }
.nav__list a,
.nav__link{
  display:inline-block;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(238,240,246,.78);
  padding: 2px 0;
  border-bottom: 1px solid transparent; /* reveal on hover/focus */
  transition: color .2s ease, border-bottom-color .2s ease, transform .2s ease;
}
.nav__list a:hover,
.nav__link:hover{
  color: rgba(238,240,246,.95);
  border-bottom-color: rgba(238,240,246,.42);
  transform: translateY(-1px);
}
.nav__list a:focus-visible,
.nav__link:focus-visible{
  outline: 2px solid rgba(238,240,246,.55);
  outline-offset: 4px;
}

/* Small screens: hide kicker to keep the header clean */
@media (max-width: 640px){
  .header__kicker{ display:none; }
  .header__top{ top: 16px; }
  .header__nav{ bottom: 12px; justify-content:flex-end; }
  .nav__list{ justify-content:flex-end; }
}




/* v2.5.3: kicker typography — SUNDSVALL ultra cool (editorial, quiet, precise) */
.header__kicker{
  text-transform: none;
  letter-spacing: 0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 0;
  top: -1px; /* optical baseline */
}
.header__kicker .kicker__headline{
  text-transform: none;
  letter-spacing: .04em;
  font-weight: 650;
  font-size: clamp(12px, 1.08vw, 13px);
  line-height: 1.05;
  color: rgba(238,240,246,.88);
}
.header__kicker .kicker__subline{
  display:block;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-weight: 650;
  font-size: 10px;
  line-height: 1;
  color: rgba(238,240,246,.52);
}
@media (max-width: 980px){
  .header__kicker{ max-width: 56vw; }
}
@media (max-width: 640px){
  .header__kicker{ top: 0; }
}


/* v2.5.1: baseline alignment (brand left vs kicker right) */
.brand__name{ line-height: 1; }
.header__kicker .kicker__headline{ line-height: 1; }
.header__kicker{
  position: relative;
  top: -1px; /* optical baseline alignment on desktop */
}
@media (max-width: 640px){
  .header__kicker{ top: 0px; } /* avoid over-tuning on phones */
}


/* v2.5.2: kicker typography — more SUNDSVALL (quiet, editorial, high-end) */
.header__kicker{
  text-transform: uppercase;
  letter-spacing: .22em;
}
.header__kicker .kicker__headline{
  font-weight: 650;
  font-size: clamp(11px, 1.05vw, 12px);
  color: rgba(238,240,246,.86);
}
.header__kicker .kicker__subline{
  display:block;
  margin-top: 6px;
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .20em;
  color: rgba(238,240,246,.55);
}

/* v2.5.0: Hero messaging (right) – 2-line, minimal, AI-studio clear */
.header__kicker{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap: 6px;
  text-align:right;
}
.header__kicker .kicker__headline{
  font-weight: 650;
  font-size: 12px;
  color: rgba(238,240,246,.66);
  letter-spacing: .08em;
  text-transform: none;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.header__kicker .kicker__subline{
  font-weight: 650;
  font-size: 10px;
  color: rgba(238,240,246,.42);
  letter-spacing: .22em;
  text-transform: none;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}


/* v2.2.1: scroll hint (subtle, clear) (subtle, clear) */
.scrollhint{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  pointer-events:none;
  user-select:none;
}
.scrollhint__label{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.55);
  font-weight: 650;
}
.scrollhint__chev{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(238,240,246,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(238,240,246,.55);
}
.scrollhint__chev::before{
  content:"";
  width: 6px;
  height: 6px;
  border-right: 1px solid rgba(238,240,246,.60);
  border-bottom: 1px solid rgba(238,240,246,.60);
  transform: rotate(45deg) translate(-1px, -1px);
}
@media (prefers-reduced-motion: no-preference){
  .scrollhint__chev{ animation: sundsvall-bob 1.8s ease-in-out infinite; }
  @keyframes sundsvall-bob{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(6px); }
  }
}
@media (prefers-reduced-motion: reduce){
  .scrollhint__chev{ animation:none; }
}


/* v2.2.2: minimal footer + legal pages */
.footer{
  padding: 18px var(--padX) 26px;
  border-top: 1px solid rgba(238,240,246,.10);
  background: rgba(11,12,16,.94);
}
.footer__inner{
  max-width: none;
  margin: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.footer__left{
  display:flex;
  align-items:baseline;
  gap: 12px;
  flex-wrap:wrap;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(238,240,246,.50);
  font-weight: 650;
}
.footer__location{ color: rgba(238,240,246,.45); }
.footer__links{ display:flex; gap: 14px; justify-content:flex-end; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 650; }
.footer__links a{
  font: inherit;
  color: rgba(238,240,246,.55);
}
.footer__links a:hover{
  color: rgba(238,240,246,.80);
}

/* Legal page typography (keeps the same tone) */
.legal{
  max-width: 860px;
  margin: 0 auto;
  padding: 46px var(--padX) 70px;
}
.legal h1{
  margin: 0 0 18px;
  font-size: clamp(26px, 3.2vw, 42px);
  letter-spacing: -0.02em;
}
.legal h2{
  margin: 28px 0 10px;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(238,240,246,.66);
}
.legal p, .legal li{
  color: rgba(238,240,246,.72);
  line-height: 1.7;
  font-size: 15px;
}
.legal .box{
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(238,240,246,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}
.legal .muted{
  color: rgba(238,240,246,.52);
  font-size: 13px;
}

/* v2.6.0: Editorial sections (manifest / pillars / process / capabilities) */
.section{
  padding: 44px 0;
  border-top: 1px solid rgba(238,240,246,.08);
}
.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
}
.grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:start;
}
.eyebrow{
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.50);
  margin: 0 0 10px 0;
}
.h2{
  font-family: var(--sans);
  font-weight: 650;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: .02em;
  line-height: 1.12;
  margin: 0;
  color: rgba(238,240,246,.90);
}
.lead{
  font-family: var(--sans);
  font-weight: 450;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: rgba(238,240,246,.62);
  max-width: 46ch;
  justify-self:end;
}
.pillars{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pillar{
  padding: 18px 0;
}
.h3{
  font-family: var(--sans);
  font-weight: 650;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  color: rgba(238,240,246,.84);
}
.pillar p{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(238,240,246,.55);
  max-width: 34ch;
}
.process{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 18px;
}
.process__label{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.45);
}
.process__steps{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.62);
  white-space: nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.process__steps::-webkit-scrollbar{ display:none; }
.process__steps .sep{ opacity: .45; padding: 0 10px; }
.cap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:start;
}
.cap__list{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  justify-self:end;
}
.cap__list li{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.55);
}

@media (max-width: 860px){
  .grid, .cap{ grid-template-columns: 1fr; }
  .lead{ justify-self:start; max-width: 58ch; }
  .pillars{ grid-template-columns: 1fr; }
  .process{ flex-direction: column; align-items:flex-start; }
}




/* v2.6.1a: move scope kicker to the right (stable minimal change) */
.header__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 48px;
}
.header__subkicker{
  margin-top: 6px;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(238,240,246,.52);
  max-width: 56vw;
  text-align:right;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.header__subkicker::-webkit-scrollbar{ display:none; }

@media (max-width: 860px){
  .header__top{ flex-direction:column; gap: 12px; }
  .header__subkicker{ text-align:left; max-width:100%; }
}


/* v2.6.1b: bündig left + visible right scope in header grid */
.brand__descriptor{ align-items:flex-start; }
.desc__headline{ display:block; }

.header__subkicker{
  grid-column: 3;
  justify-self: end;
  align-self: baseline;
  display:block;
  margin-top: 6px;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(238,240,246,.52);
  max-width: 56vw;
  text-align:right;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.header__subkicker::-webkit-scrollbar{ display:none; }

@media (max-width: 860px){
  .header__top{
    grid-template-columns: 1fr;
    row-gap: 12px;
    column-gap: 0;
  }
  .header__nav{ grid-column: 1; justify-self: start; }
  .header__subkicker{
    grid-column: 1;
    justify-self: start;
    text-align:left;
    max-width: 100%;
    margin-top: 0;
  }
}


/* v2.6.1c: right kicker statement + scope (2-line) */
.header__subkicker{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.header__subkicker .subkicker__headline{
  font-family: var(--sans);
  font-weight: 650;
  font-size: clamp(12px, 1.08vw, 13px);
  letter-spacing: .04em;
  line-height: 1;
  color: rgba(238,240,246,.88);
}
.header__subkicker .subkicker__subline{
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(238,240,246,.52);
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.header__subkicker .subkicker__subline::-webkit-scrollbar{ display:none; }


/* G9: Footer hello link (same DNA as legal links) */
.footer__hello{
  text-decoration: none;
}
.footer__hello:hover{
  text-decoration: none;
}


/* G11: Meet the AI Crew section (editorial plate) */
.crew{
  padding: 72px 0;
}
.crew__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.crew__title{
  margin: 0;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(238,240,246,.88);
}
.crew__right{
  justify-self: end;
  text-align: right;
}
.crew__email{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em;
  color: rgba(238,240,246,.92);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  display: inline-block;
}
.crew__email::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: rgba(238,240,246,.22);
  opacity: 0;
  transition: opacity .18s ease;
}
.crew__email:hover::after{
  opacity: 1;
}
.crew__meta{
  margin-top: 10px;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.42);
}

@media (max-width: 860px){
  .crew{
    padding: 56px 0;
  }
  .crew__inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .crew__right{
    justify-self: start;
    text-align: left;
  }
}


/* G12: What we do (editorial deck) */
.what{
  padding: 72px 0;
}
.what__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.what__label{
  margin: 0;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.52);
}
.what__right{
  justify-self: end;
  text-align: right;
  max-width: 520px;
}
.what__headline{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .01em;
  color: rgba(238,240,246,.92);
}
.what__text{
  margin-top: 10px;
  font-family: var(--sans);
  font-weight: 550;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(238,240,246,.72);
}
.what__quiet{
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.38);
}

@media (max-width: 860px){
  .what{
    padding: 56px 0;
  }
  .what__inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .what__right{
    justify-self: start;
    text-align: left;
    max-width: 560px;
  }
}


/* G14: if label hidden, let right column breathe */
.what__inner > .what__right:only-child{
  justify-self: end;
}
@media (max-width: 860px){
  .what__inner > .what__right:only-child{
    justify-self: start;
  }
}


/* G15: Studio statement directly under hero (right-aligned, no label) */
.what{
  padding: 56px 0;
}
.what__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: block; /* override grid */
}
.what__right{
  margin-left: auto;
  text-align: right;
  max-width: 560px;
}
@media (max-width: 860px){
  .what{
    padding: 44px 0;
  }
  .what__right{
    margin-left: 0;
    text-align: left;
  }
}


/* G19: quiet micro line */
.micro{
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.38);
}


/* G27: Manifest hierarchy (brand label bold, claim calmer) */
.section--manifest .eyebrow{
  font-weight: 800;
  letter-spacing: .02em;
}
.section--manifest .h2{
  font-weight: 500;
  color: rgba(238,240,246,.90);
}
.section--manifest .lead{
  color: rgba(238,240,246,.78);
}

/* G27: Capabilities (editorial, matches grid system) */
.caps{
  padding: 56px 0 64px;
}
.caps .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.caps__label{
  font-family: var(--sans);
  font-weight: 750;
  font-size: 18px;
  letter-spacing: .01em;
  color: rgba(238,240,246,.92);
}
.caps__sub{
  margin-top: 10px;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.38);
}
.caps__right{
  justify-self: end;
  text-align: right;
  max-width: 560px;
}
.caps__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.caps__list li{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .01em;
  color: rgba(238,240,246,.78);
}
.caps__micro{
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.38);
}
@media (max-width: 860px){
  .caps{ padding: 44px 0 56px; }
  .caps .grid{ grid-template-columns: 1fr; gap: 18px; }
  .caps__right{ justify-self: start; text-align: left; }
}


/* G28: Requested type hierarchy
   - SUNDSVALL STUDIO bigger/bolder
   - Claim ("From Creative Direction to AI Production.") calmer/smaller (slogan)
   - Capabilities label uses same style as claim
   - AI BY DEFAULT uses same style/size as SUNDSVALL STUDIO
*/
.section--manifest .eyebrow{
  font-weight: 800;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(238,240,246,.94);
  margin-bottom: 14px;
}
.section--manifest .h2{
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: .01em;
  color: rgba(238,240,246,.90);
}

/* Capabilities left: label matches claim */
.caps__label{
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: .01em;
  color: rgba(238,240,246,.90);
}

/* AI BY DEFAULT matches SUNDSVALL STUDIO */
.caps__sub{
  margin-top: 12px;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(238,240,246,.94);
}

@media (max-width: 860px){
  .section--manifest .eyebrow{ font-size: 20px; }
  .caps__sub{ font-size: 20px; }
  .section--manifest .h2, .caps__label{ font-size: 15px; }
}


/* G29: Capabilities header order (AI BY DEFAULT above Capabilities) */
.caps__sub{
  margin-top: 0 !important;
  margin-bottom: 12px;
}


/* G30: Make first two right columns perfectly flush */
.section--manifest .manifest__right{
  justify-self: end;
  text-align: right;
  max-width: 560px;
}
@media (max-width: 860px){
  .section--manifest .manifest__right{
    justify-self: start;
    text-align: left;
  }
}


/* G31: shared right-column measure for the first two blocks */
:root{
  --right-measure: 560px;
}
.section--manifest .manifest__right,
.caps__right{
  max-width: var(--right-measure);
}


/* G35: Restore original right-aligned editorial feel */
.section--manifest .manifest__right,
.caps__right{
  justify-self: end;
  text-align: right;
}

/* Reduce "empty middle" by increasing the measure + type slightly (no grid change) */
:root{
  --right-measure: 660px; /* was 560 */
}

/* apply shared measure */
.section--manifest .manifest__right,
.caps__right{
  max-width: var(--right-measure);
}

/* Slightly larger reading size for the right column */
.section--manifest .lead{
  font-size: 15px;
  line-height: 1.55;
}
.caps__list li{
  font-size: 15px;
  line-height: 1.5;
}

/* Keep micro calm */
.section--manifest .micro,
.caps__micro{
  font-size: 10px;
}

/* Mobile stays left for readability */
@media (max-width: 860px){
  .section--manifest .manifest__right,
  .caps__right{
    justify-self: start;
    text-align: left;
    max-width: 100%;
  }
}


/* G36: Remove empty middle by using a single right-aligned rail for the first blocks */
:root{
  --rail: 720px;
}

/* Manifest + Capabilities: single column, content sits on a right rail */
.section--manifest .grid,
.caps .grid{
  grid-template-columns: 1fr !important;
}

.section--manifest .manifest__right,
.caps__right{
  justify-self: end;
  text-align: right;
  max-width: var(--rail);
}

/* Move labels into the rail, keep hierarchy */
.section--manifest .eyebrow{
  margin: 0 0 14px 0;
}
.caps__sub{
  margin: 0 0 12px 0 !important;
}
.caps__label{
  margin: 0 0 14px 0;
}

/* Keep mobile readable */
@media (max-width: 860px){
  .section--manifest .manifest__right,
  .caps__right{
    justify-self: start;
    text-align: left;
    max-width: 100%;
  }
}


/* G37: Make the claim (h2) a left-aligned eyecatcher while keeping the rail clean */
.section--manifest .h2{
  text-align: left !important;
  font-weight: 650;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .01em;
  margin: 0 0 14px 0;
}
.section--manifest .lead,
.section--manifest .micro{
  text-align: right;
}
@media (max-width: 860px){
  .section--manifest .h2,
  .section--manifest .lead,
  .section--manifest .micro{
    text-align: left !important;
  }
}


/* G38: Hero copy hierarchy (B as main, A as quiet context) */
.section--manifest .h2{
  font-weight: 650;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .01em;
  margin: 0 0 14px 0;
  text-align: left !important;
}
.section--manifest .lead{
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(238,240,246,.72);
  margin: 0 0 14px 0;
}
.section--manifest .micro{
  font-weight: 750;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.40);
}

/* Keep rail clean: lead+micro right on desktop, claim left */
.section--manifest .lead,
.section--manifest .micro{
  text-align: right;
}
@media (max-width: 860px){
  .section--manifest .h2,
  .section--manifest .lead,
  .section--manifest .micro{
    text-align: left !important;
  }
}


/* G40: DNA polish — reduce duplication, strengthen hierarchy, keep it quiet */
.section--manifest{
  padding-top: 56px;
  padding-bottom: 44px;
}

/* Make the quiet line quieter */
.section--manifest .lead{
  font-size: 13px;
  line-height: 1.7;
  color: rgba(238,240,246,.62);
  margin-bottom: 12px;
}

/* Stamp feels like a mark, not body text */
.section--manifest .micro{
  letter-spacing: .26em;
  color: rgba(238,240,246,.38);
  margin-top: 0;
}

/* Capabilities: keep list calm, slightly tighter */
.caps__list li{
  font-size: 14px;
  line-height: 1.55;
}

/* Crew: one-line lead as quiet proof */
.crew__lead{
  font-size: 13px;
  line-height: 1.7;
  color: rgba(238,240,246,.62);
}

/* Footer: prevent empty label spacing if "hello" removed */
.footer__hello{
  display:none !important;
}


/* G41: Fjord Slice micro-mark in footer (quiet) */
.footer__left{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer__mark{
  width:14px;
  height:14px;
  opacity:.75;
  display:inline-block;
  flex:0 0 auto;
  transform: translateY(-1px);
}
.footer__location{
  margin-left: 12px;
}
@media (max-width: 860px){
  .footer__left{ gap:8px; }
  .footer__mark{ width:15px; height:15px; }
  .footer__location{ margin-left: 10px; }
}


/* G42: Ensure black mark is visible on dark background */
.footer__mark{
  filter: invert(1);
  opacity: .72;
}


/* =========================
   G43: Editorial system pass
   ========================= */

:root{
  --wrap: 1200px;
  --space-xl: 96px;
  --space-lg: 72px;
  --space-md: 48px;
  --space-sm: 28px;

  --display: 22px;  /* manifesto line */
  --body: 14px;
  --micro: 10px;
  --ink: rgba(238,240,246,.92);
  --quiet: rgba(238,240,246,.64);
  --faint: rgba(238,240,246,.40);
}

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}

/* Header: one voice */
.header{
  padding: 28px 0 18px 0;
}
.header__inner{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.header__meta{
  text-align:right;
  font-size: var(--micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--quiet);
  white-space:nowrap;
}

/* Manifest: signature block */
.section--manifest{
  padding: var(--space-lg) 0 var(--space-md) 0;
}
.manifest{
  display:flex;
  justify-content:flex-end;
}
.manifest__rail{
  max-width: 760px;
  text-align:right;
}
.manifest__eyebrow{
  font-size: var(--micro);
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--faint);
  margin:0 0 14px 0;
}
.manifest__headline{
  font-size: var(--display);
  line-height: 1.18;
  font-weight: 650;
  letter-spacing:.01em;
  margin:0 0 14px 0;
  color: var(--ink);
}
.manifest__lead{
  font-size: var(--body);
  line-height: 1.7;
  margin:0 0 14px 0;
  color: var(--quiet);
}
.manifest__stamp{
  font-size: var(--micro);
  letter-spacing:.28em;
  text-transform:uppercase;
  color: var(--faint);
  font-weight: 750;
  margin:0;
}

/* System (AI by default) */
.section--system{
  padding: var(--space-md) 0 var(--space-lg) 0;
}
.system{
  display:flex;
  justify-content:flex-end;
}
.system__rail{
  max-width: 760px;
  text-align:right;
}
.system__label{
  font-size: var(--display);
  font-weight: 650;
  line-height: 1.2;
  margin:0 0 14px 0;
  color: var(--ink);
}
.system__list{
  list-style:none;
  padding:0;
  margin:0;
}
.system__list li{
  font-size: var(--body);
  line-height:1.65;
  color: var(--quiet);
  padding: 2px 0;
}
.system__micro{
  margin-top: 18px;
  font-size: var(--micro);
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--faint);
}

/* Use cases */
.section--usecases{
  padding: var(--space-lg) 0 var(--space-xl) 0;
}
.usecases__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.usecase{
  border-top: 1px solid rgba(238,240,246,.14);
  padding-top: 16px;
}
.usecase__title{
  font-size: 12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 10px 0;
  color: var(--ink);
}
.usecase__copy{
  font-size: var(--body);
  line-height: 1.7;
  color: var(--quiet);
  margin:0;
}

/* Crew */
.section--crew{
  padding: 0 0 var(--space-lg) 0;
}
.crew__rail{
  max-width: 760px;
  margin-left:auto;
  text-align:right;
}
.crew__title{
  font-size: 12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 10px 0;
  color: var(--ink);
}
.crew__lead{
  font-size: var(--body);
  line-height:1.7;
  color: var(--quiet);
  margin:0 0 14px 0;
}
.crew__meta{
  font-size: var(--micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--faint);
  margin: 0;
}

/* Footer mark visibility (kept from G42) */
.footer__mark{ filter: invert(1); opacity:.72; }

@media (max-width: 980px){
  .usecases__grid{ grid-template-columns: 1fr; gap: 22px; }
  .header__meta{ white-space: normal; }
  .manifest__rail, .system__rail, .crew__rail{ text-align:left; max-width: 100%; }
  .manifest, .system{ justify-content:flex-start; }
  .header__inner{ align-items: flex-start; }
  .header__meta{ text-align:left; }
}


/* =========================
   G44: Header wordmark + separation
   ========================= */

.header{
  position: relative;
  z-index: 50;
  background: #000; /* clean separation from hero video */
  border-bottom: 1px solid rgba(238,240,246,.10);
}

.header__inner{
  align-items: center !important; /* vertically centered */
  justify-content: space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap: 0;
  text-decoration:none;
}

.brand__name{
  letter-spacing: .06em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Desktop: keep wordmark left, aligned to wrap edge (not floating) */
@media (min-width: 981px){
  .header__inner{ justify-content: space-between; }
  .header__meta{ text-align:right; }
}

/* If meta is empty, keep header clean */
.header__meta:empty{ display:none; }

/* Make sure hero never visually collides with header */
.hero{
  border-top: 0;
}


/* G45: Put scroll hint where it belongs (bottom center) */
.hero__hint{
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  pointer-events: none;
  opacity: .55;
}

/* On small screens, keep it a touch higher to avoid browser UI */
@media (max-width: 480px){
  .hero__hint{ bottom: 26px !important; }
}


/* =========================
   G46: Split wordmark (SUNDSVALL / STUDIO)
   ========================= */

.brand{
  display:inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}

.brand__name{
  letter-spacing: .06em;
  font-weight: 750;
  text-transform: uppercase;
}

.brand__studio{
  margin-left: 10px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 650;
  color: rgba(238,240,246,.56);
  transform: translateY(-2px); /* optical baseline */
}

@media (max-width: 480px){
  .brand__studio{
    margin-left: 8px;
    font-size: 10px;
    letter-spacing: .26em;
    transform: translateY(-1px);
  }
}


/* =========================
   G48: Ensure STUDIO always renders + subtle scroll pulse
   ========================= */

.brand__studio{
  display:inline-block;
  opacity:.62; /* slightly stronger so it's readable */
}

/* Subtle pulse (quiet, editorial) */
@keyframes sundsvallScrollPulse{
  0%,100%{ opacity:.22; }
  50%{ opacity:.60; }
}
.hero__hint--blink{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  animation: sundsvallScrollPulse 1.8s ease-in-out infinite;
}


/* =========================
   G52: Capabilities (editorial, right-rail)
   ========================= */

.section--capabilities{
  padding: 48px 0 72px 0;
}
.capabilities{
  display:flex;
  justify-content:flex-end;
}
.capabilities__rail{
  max-width: 760px;
  text-align:right;
}
.capabilities__label{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238,240,246,.40);
  margin: 0 0 14px 0;
}
.capabilities__headline{
  font-size: 22px;
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: .01em;
  margin: 0 0 14px 0;
  color: rgba(238,240,246,.92);
}
.capabilities__list{
  list-style:none;
  padding:0;
  margin:0;
}
.capabilities__list li{
  font-size: 14px;
  line-height: 1.65;
  color: rgba(238,240,246,.64);
  padding: 2px 0;
}
.capabilities__micro{
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(238,240,246,.40);
  font-weight: 750;
  margin-bottom: 0;
}

@media (max-width: 980px){
  .capabilities{ justify-content:flex-start; }
  .capabilities__rail{ text-align:left; max-width: 100%; }
}


/* =========================
   G57: Manifest clean-up (kicker removed) + Option A lead
   ========================= */

.section--manifest .manifest__rail{
  text-align:right;
}
.section--manifest .manifest__rail p{
  text-align:right;
}


/* =========================
   G61: Manifest block typo polish (desktop)
   ========================= */

.section--manifest{
  /* a touch more breathing room above/below */
  padding-top: clamp(28px, 4vh, 44px);
  padding-bottom: clamp(36px, 6vh, 64px);
}

.section--manifest .manifest__rail{
  text-align: right;
}

.section--manifest .manifest__headline{
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin: 0 0 10px 0;
  /* keep it strong but not shouting */
  font-weight: 600;
}

.section--manifest .manifest__lead{
  margin: 0 0 14px 0;
  line-height: 1.45;
  opacity: .84;
}

.section--manifest .manifest__stamp{
  margin: 0;
  opacity: .72;
  letter-spacing: .18em;
}

@media (min-width: 980px){
  .section--manifest .manifest__rail{
    max-width: 560px;
    margin-left: auto;
  }
  .section--manifest .manifest__headline{
    font-size: clamp(22px, 2.1vw, 30px);
  }
  .section--manifest .manifest__lead{
    font-size: clamp(14px, 1.12vw, 16px);
  }
  .section--manifest .manifest__stamp{
    font-size: 11px;
  }
}

@media (min-width: 1280px){
  .section--manifest .manifest__rail{ max-width: 600px; }
  .section--manifest .manifest__headline{ margin-bottom: 12px; }
  .section--manifest .manifest__lead{ margin-bottom: 16px; }
}


/* =========================
   G62: Capabilities label quieter + list trim polish
   ========================= */

.capabilities__label{
  opacity: .42;
  font-size: 9px;
  letter-spacing: .30em;
}

.capabilities__headline{
  margin-top: 2px;
}

/* Slightly tighter list rhythm */
.capabilities__list li{
  padding: 1px 0;
  line-height: 1.55;
}


/* =========================
   G63: Capabilities label readability bump (still editorial)
   ========================= */

.capabilities__label{
  opacity: .62;           /* was ~.42 */
  font-size: 10px;        /* was 9px */
  letter-spacing: .28em;  /* tiny reduction for clarity */
}


/* =========================
   G68: Capabilities clean system
   ========================= */

.capabilities__list li{
  padding: 1px 0;
  line-height: 1.55;
}


/* =========================
   G69: Use cases (editorial, clean)
   ========================= */

.section--usecases{
  padding-top: clamp(44px, 7vh, 84px);
  padding-bottom: clamp(44px, 7vh, 84px);
}

.usecases__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.usecases__label{
  opacity: .62;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.usecases__headline{
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 10px 0;
}

.usecases__sub{
  margin: 0;
  opacity: .78;
  line-height: 1.45;
  max-width: 44ch;
}

.usecases__right{
  display: grid;
  gap: 18px;
}

.usecase{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.usecase__title{
  margin: 0 0 6px 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.usecase__line{
  margin: 0 0 10px 0;
  opacity: .78;
  line-height: 1.45;
}

.usecase__tags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.usecase__tag{
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .62;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
}

.usecase__media{
  width: 100%;
}

.usecase__placeholder,
.usecase__img,
.usecase__video{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display: block;
  object-fit: cover;
}

.usecase__video{ background: #000; }

@media (min-width: 980px){
  .usecases__grid{
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(28px, 3vw, 52px);
    align-items: start;
  }

  .usecases__right{
    gap: 22px;
  }

  .usecase{
    grid-template-columns: 1fr;
  }
}


/* =========================
   G70: Use cases launch mode (no empty media boxes)
   ========================= */

.usecase{
  padding-top: 14px;
}

.usecase__meta{
  max-width: 58ch;
}

.usecase__tags{
  margin-top: 2px;
}


/* =========================
   G74: Contact section — same editorial system as other blocks
   ========================= */

.section--contact{
  padding-top: clamp(40px, 6.5vh, 80px);
  padding-bottom: clamp(40px, 6.5vh, 80px);
}

.contact__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.contact__label{
  opacity: .62;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact__headline{
  margin: 0 0 10px 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.06;
}

.contact__sub{
  margin: 0;
  opacity: .78;
  line-height: 1.45;
  max-width: 44ch;
}

.contact__right{
  display: grid;
  gap: 8px;
  justify-items: start;
}

.contact__email{
  display: inline-block;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.contact__email:hover{
  opacity: .82;
}

.contact__meta{
  opacity: .62;
  font-size: 12px;
}

@media (min-width: 980px){
  .contact__grid{
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(28px, 3vw, 52px);
  }
  .contact__right{
    justify-items: end;
    text-align: right;
  }
}

/* =========================
   G74: Remove divider lines in Campaign / Commerce / Social list
   ========================= */

.services__item,
.outputs__item,
.campaigns__item,
.case__item,
.usecase,
.card,
.block{
  border-top: none !important;
  border-bottom: none !important;
}

.services__item:before,
.outputs__item:before,
.campaigns__item:before,
.case__item:before,
.usecase:before,
.card:before,
.block:before{
  display: none !important;
}


/* =========================
   G75: Contact — right rail, DNA clean (no divider line)
   ========================= */

.section--contact{
  padding-top: clamp(44px, 7vh, 92px);
  padding-bottom: clamp(44px, 7vh, 92px);
}

.contact__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

/* Panel behaves like the other right-side blocks */
.contact__panel{
  justify-self: end;
  text-align: right;
  max-width: 56ch;
}

.contact__label{
  opacity: .62;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact__headline{
  margin: 0 0 10px 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.06;
}

.contact__sub{
  margin: 0 0 14px 0;
  opacity: .78;
  line-height: 1.45;
}

.contact__links{
  display: grid;
  gap: 8px;
  justify-items: end;
}

.contact__email{
  display: inline-block;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.contact__email:hover{ opacity: .82; }

.contact__meta{
  opacity: .62;
  font-size: 12px;
}

@media (min-width: 980px){
  .contact__grid{
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(28px, 3vw, 52px);
  }

  .contact__spacer{
    min-height: 1px;
  }
}

/* === G75 GO: Desktop right-rail rhythm (use cases + contact) === */

/* Make the use-cases and contact sections share the same right rail geometry */
.usecases__spacer{ display:none; }

@media (min-width: 980px){
  .usecases__wrap,
  .contact__wrap{
    display: grid;
    grid-template-columns: 1fr minmax(380px, 520px);
    gap: 0;
    align-items: start;
  }

  .usecases__spacer{ display:block; min-height: 1px; }
  .contact__spacer{ min-height: 1px; }
}

/* Use-cases: editorial list (no centered 3-col grid) */
.usecases__rail {
  max-width: 980px;
  margin-left: auto;
  padding-right: var(--pad);
  padding-left: var(--pad);
  text-align: left;
}

.usecases__items{
  display: grid;
  gap: 28px;
  justify-items: end;
  text-align: right;
}

.usecases__kicker{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 8px;
}

.usecases__copy{
  margin: 0;
  max-width: 44ch;
  opacity: .78;
  font-size: 14px;
  line-height: 1.55;
}

@media (min-width: 980px){
  .usecases__items{ gap: 34px; }
  .usecases__copy{ font-size: 15px; }
}

/* Contact: keep it as a quiet footer-adjacent rail, but with breathing room */
.contact__rail{
  width: 100%;
  display: grid;
  gap: 10px;
  justify-items: end;
  text-align: right;
}

.contact__label{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .62;
  margin-bottom: 2px;
}

.contact__email{
  font-size: 18px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.32);
  padding-bottom: 4px;
}

.contact__email:hover{ border-bottom-color: rgba(255,255,255,.52); }

.contact__copy{ margin: 0; opacity: .72; font-size: 13px; }

.contact__meta{ margin-top: 6px; letter-spacing: .22em; text-transform: uppercase; }


/* USECASES_RESPONSIVE */
@media (max-width: 900px){
  .usecases__items{ grid-template-columns: 1fr; }
}