/* ============================================================
   YUME SYSTEMS — components the company site needs on top of the
   shared design system. Same tokens, no new colours.
   ============================================================ */

/* ---- section rhythm ---- */
.sec{padding:96px 0; border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.sec-tight{padding:68px 0}
.eyebrow{
  display:flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.sec h2{font-size:clamp(28px,4.2vw,46px); max-width:20ch}
.sec .intro{font-size:clamp(16.5px,1.9vw,19px); color:var(--fg-2); max-width:62ch; margin:18px 0 0; line-height:1.65}

/* ---- the measured claim strip under the hero ---- */
.strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin-top:52px;
}
.strip div{background:var(--bg); padding:22px 24px}
.strip b{
  display:block; font-family:var(--display); font-size:30px; font-weight:600;
  letter-spacing:-.02em; color:var(--fg); line-height:1;
}
.strip span{display:block; margin-top:8px; font-size:13.5px; color:var(--fg-3); line-height:1.5}

/* ---- service cards ---- */
.svc{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:18px; margin-top:44px}
.svc article{
  background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px; display:flex; flex-direction:column;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.svc article:hover{border-color:var(--line-3); transform:translateY(-2px)}
.svc .n{font-family:var(--mono); font-size:11.5px; color:var(--accent); letter-spacing:.14em}
.svc h3{font-size:21px; margin:12px 0 10px; letter-spacing:-.012em}
.svc p{color:var(--fg-2); font-size:15px; margin:0 0 14px; line-height:1.62}
.svc ul{list-style:none; margin:auto 0 0; padding:0; font-size:14px; color:var(--fg-3)}
.svc li{padding-left:18px; position:relative; margin-bottom:7px; line-height:1.5}
.svc li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:1.5px; background:var(--accent)}

/* ---- a service, written out at length ---- */
.line{border-top:1px solid var(--line); padding:54px 0}
.line:first-of-type{border-top:0; padding-top:12px}
.line-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
@media(max-width:900px){.line-grid{grid-template-columns:1fr; gap:26px}}
.line h3{font-size:clamp(24px,3vw,32px); letter-spacing:-.018em}
.line .who{margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--fg-3); line-height:1.7}
.line p{color:var(--fg-2); line-height:1.7; margin:0 0 16px}
.line .deliv{
  margin-top:22px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--ring-1); padding:20px 22px;
}
.line .deliv b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:12px}
.line .deliv ul{list-style:none; margin:0; padding:0; font-size:14.5px; color:var(--fg-2); columns:2; column-gap:26px}
@media(max-width:600px){.line .deliv ul{columns:1}}
.line .deliv li{padding-left:18px; position:relative; margin-bottom:9px; break-inside:avoid; line-height:1.5}
.line .deliv li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:1.5px; background:var(--accent)}

/* ---- work cards ---- */
.work{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; margin-top:44px}
.work article{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--ring-0); display:flex; flex-direction:column;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.work article:hover{border-color:var(--line-3); transform:translateY(-2px)}
.work .shot{
  aspect-ratio:16/10; background:var(--ring-2); border-bottom:1px solid var(--line);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.work .shot img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.work .shot .ph{font-family:var(--mono); font-size:11.5px; color:var(--fg-3); letter-spacing:.14em; text-align:center; padding:0 20px}
.work .body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.work .tag{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 9px; border-radius:var(--r-sm);
  border:1px solid var(--accent-line); color:var(--accent); background:var(--accent-tint);
  align-self:flex-start; margin-bottom:12px;
}
.work .tag.live::before{content:"● "; font-size:8px; vertical-align:2px}
.work h3{font-size:20px; margin:0 0 8px; letter-spacing:-.012em}
.work p{color:var(--fg-2); font-size:14.8px; margin:0 0 16px; line-height:1.6}
.work .meta{margin-top:auto; display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.work .meta a{
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--fg);
  text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px; text-underline-offset:3px;
}
.work .meta a:hover{color:var(--accent)}

/* ---- process ---- */
.steps{counter-reset:s; list-style:none; padding:0; margin:46px 0 0; display:grid; gap:4px; max-width:860px}
.steps li{
  counter-increment:s; padding:22px 0 22px 68px; position:relative;
  border-top:1px solid var(--line);
}
.steps li:first-child{border-top:0}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:22px;
  font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em;
  border:1px solid var(--accent-line); background:var(--accent-tint);
  width:40px; height:28px; display:grid; place-items:center; border-radius:var(--r-sm);
}
.steps strong{display:block; font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:6px; letter-spacing:-.012em}
.steps span{color:var(--fg-2); font-size:15px; line-height:1.65}

/* ---- pricing ---- */
.tracks{display:flex; gap:8px; margin-top:34px; flex-wrap:wrap}
.tracks button{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 16px; border-radius:var(--r-md); cursor:pointer;
  border:1px solid var(--line-2); background:transparent; color:var(--fg-3);
  transition:all .2s var(--ease);
}
.tracks button:hover{color:var(--fg); border-color:var(--line-3)}
.tracks button[aria-selected="true"]{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin-top:28px}
.plans article{
  background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px; display:flex; flex-direction:column;
}
.plans article.best{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.plans .flag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; display:block; min-height:14px;
}
.plans h3{font-size:20px; margin:0 0 4px}
.plans .amt{font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.02em; color:var(--fg); margin:12px 0 2px}
.plans .for{color:var(--fg-3); font-size:14px; margin:6px 0 0}
.plans ul{list-style:none; padding:0; margin:20px 0 0; font-size:14.5px; color:var(--fg-2)}
.plans li{padding-left:20px; position:relative; margin-bottom:10px; line-height:1.5}
.plans li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:1.5px; background:var(--accent)}
.plans .when{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; color:var(--fg-3); line-height:1.6;
}

/* ---- team ---- */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:44px}
.team article{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:24px;
  background:var(--ring-0); text-align:left;
}
.team .av{
  width:68px; height:68px; border-radius:50%; margin-bottom:16px; display:grid; place-items:center;
  background:var(--ring-2); border:1px solid var(--line-2); overflow:hidden;
  font-family:var(--mono); font-size:11px; color:var(--fg-3);
}
.team .av img{width:100%; height:100%; object-fit:cover; display:block}
.team h3{font-size:17.5px; margin:0 0 3px}
.team .role{font-family:var(--mono); font-size:11.5px; color:var(--accent); letter-spacing:.08em; text-transform:uppercase}
.team p{color:var(--fg-3); font-size:14px; margin:12px 0 0; line-height:1.6}

/* ---- call to action band ---- */
.band{
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:40px;
  background:var(--ring-1); display:grid; grid-template-columns:1fr auto;
  gap:30px; align-items:center; margin-top:16px;
}
@media(max-width:760px){.band{grid-template-columns:1fr; padding:28px}}
.band h2{font-size:clamp(23px,3vw,32px); margin:0 0 10px; max-width:24ch}
.band p{color:var(--fg-2); margin:0; max-width:56ch; line-height:1.65}

/* ---- a short list of facts, used on About ---- */
.facts-list{list-style:none; padding:0; margin:30px 0 0; max-width:720px}
.facts-list li{
  display:grid; grid-template-columns:190px 1fr; gap:22px;
  padding:16px 0; border-top:1px solid var(--line); font-size:15px;
}
@media(max-width:620px){.facts-list li{grid-template-columns:1fr; gap:4px}}
.facts-list b{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); font-weight:500}
.facts-list span{color:var(--fg-2); line-height:1.6}

/* ---- a note the reader should not miss ---- */
.callout{
  border-left:3px solid var(--accent); background:var(--accent-tint);
  padding:18px 22px; border-radius:0 var(--r-md) var(--r-md) 0; margin-top:28px;
  color:var(--fg-2); font-size:15px; line-height:1.68; max-width:70ch;
}
.callout b{color:var(--fg)}

/* ---- hero: real screens, stacked like prints on a desk ---- */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr; gap:40px}}
.stack{position:relative; aspect-ratio:4/3.4; width:100%}
.stack figure{
  position:absolute; margin:0; border-radius:var(--r-md); overflow:hidden;
  background:var(--ring-0); border:1px solid var(--line-2);
  box-shadow:0 18px 44px rgba(27,24,21,.13);
  transition:transform .4s var(--ease);
}
:root[data-theme="dark"] .stack figure{box-shadow:0 18px 44px rgba(0,0,0,.5)}
.stack figure img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.stack .s1{left:0;   top:0;   width:74%; aspect-ratio:16/10; z-index:1}
.stack .s2{left:13%; top:30%; width:74%; aspect-ratio:16/10; z-index:2}
.stack .s3{left:26%; top:60%; width:74%; aspect-ratio:16/10; z-index:3}
.stack:hover .s1{transform:translate(-8px,-8px)}
.stack:hover .s3{transform:translate(8px,8px)}
.stack figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:7px 10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(transparent,rgba(27,24,21,.82)); color:#fff;
}

/* ---- platform row ---- */
.plats{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.plats span{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg-2);
}
.plats span.on{border-color:var(--accent-line); background:var(--accent-tint); color:var(--accent)}

/* ---- a full-bleed banner between sections ---- */
.banner{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ring-1); padding:64px 0; margin:0;
}
.banner .q{
  font-family:var(--display); font-size:clamp(24px,3.6vw,40px); font-weight:500;
  line-height:1.24; letter-spacing:-.018em; max-width:26ch; color:var(--fg);
}
.banner .q em{font-style:italic; color:var(--accent)}
.banner .by{margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--fg-3); letter-spacing:.08em}

/* ---- contact form: two columns on a wide screen ---- */
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){.frow2{grid-template-columns:1fr}}
.cside{display:grid; gap:12px; align-content:start}