/* Strategy & Design — Portfolio
   Editorial dark theme. Fraunces display + Inter body. Warm gold accent. */
:root{
  --ink:#0d0f13; --panel:#15181e; --panel-2:#1b1f27; --bar:#222732;
  --line:rgba(236,231,222,.10); --line-2:rgba(236,231,222,.16);
  --text:#ece7de; --muted:#969ba4; --dim:#6c727b;
  --gold:#d8a24a; --gold-2:#ecc074;
  --ff-d:'Fraunces',Georgia,serif; --ff-b:'Inter',system-ui,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--ff-b); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 600px at 78% -8%, rgba(216,162,74,.10), transparent 60%);
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
h1,h2,h3{font-family:var(--ff-d); font-weight:600; letter-spacing:-.01em; line-height:1.04; margin:0}
em{font-style:italic; color:var(--gold-2)}

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

/* ---------- top bar ---------- */
.top{
  max-width:var(--wrap); margin:0 auto; padding:26px 28px;
  display:flex; align-items:center; gap:20px;
}
.wordmark{font-family:var(--ff-d); font-weight:600; font-size:1.22rem; letter-spacing:-.01em}
.wordmark span{color:var(--gold); margin:0 .12em}
.top-tag{
  font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:.34em .9em;
}
.top-cta{
  margin-left:auto; font-size:.86rem; font-weight:600; color:var(--ink);
  background:var(--gold); padding:.62em 1.2em; border-radius:999px; transition:background .18s,transform .18s;
}
.top-cta:hover{background:var(--gold-2); transform:translateY(-1px)}

/* ---------- hero ---------- */
.hero{max-width:var(--wrap); margin:0 auto; padding:clamp(3rem,8vw,6.5rem) 28px clamp(2.4rem,5vw,4rem)}
.eyebrow{
  font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.22em;
  color:var(--gold); margin:0 0 1.4rem;
}
.hero h1{font-size:clamp(2.6rem,7vw,5.4rem); margin-bottom:1.6rem}
.hero h1 em{position:relative}
.lede{max-width:60ch; font-size:clamp(1.05rem,1.7vw,1.32rem); color:#c5c1b8; margin:0}
.hero-stats{display:flex; flex-wrap:wrap; gap:1rem 2.6rem; margin-top:2.6rem}
.hero-stats span{font-size:.94rem; color:var(--muted)}
.hero-stats b{font-family:var(--ff-d); font-weight:600; font-size:1.5rem; color:var(--text); margin-right:.5rem; vertical-align:-2px}

/* ---------- marquees ---------- */
.marquees{padding:1.2rem 0 3.4rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:1rem 0 0}
.mq-label{
  max-width:var(--wrap); margin:0 auto; padding:1.4rem 28px .2rem;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--dim);
}
.mq-label span{color:var(--muted); font-weight:500}
.mq-label-r{text-align:right}
.marquee{
  overflow:hidden; padding:1rem 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.mq-track{display:flex; gap:22px; width:max-content; animation:mq 80s linear infinite}
.mq-rev{animation-direction:reverse}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-card{
  flex:0 0 auto; width:300px; border-radius:11px; overflow:hidden;
  background:var(--panel-2); border:1px solid var(--line); box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
}

/* browser chrome bar */
.fbar{display:flex; align-items:center; gap:6px; height:28px; padding:0 12px; background:var(--bar); border-bottom:1px solid var(--line)}
.fbar i{width:8px; height:8px; border-radius:50%; background:#3b414c}
.fbar i:first-child{background:#cf6a5a}
.fbar i:nth-child(2){background:#d8a24a}
.fbar i:nth-child(3){background:#5a9a6b}
.mq-card img{width:100%; height:auto}

/* ---------- the work ---------- */
.work{max-width:var(--wrap); margin:0 auto; padding:clamp(3.5rem,7vw,6rem) 28px}
.work-head{max-width:62ch; margin-bottom:3.2rem}
.work-head h2{font-size:clamp(2rem,4vw,3rem); margin-bottom:.7rem}
.work-head p{color:var(--muted); font-size:1.06rem; margin:0}
.work-note{margin-top:1.3rem; max-width:66ch; font-size:.88rem; color:var(--dim); border:1px solid var(--line-2); border-radius:10px; padding:.7rem 1rem; line-height:1.6}
.work-note strong{color:var(--muted); font-weight:600}
.work-note::before{content:"i"; display:inline-grid; place-items:center; width:1.3rem; height:1.3rem; margin-right:.55rem; vertical-align:-.34em; border-radius:50%; border:1px solid var(--line-2); color:var(--gold); font-family:var(--ff-d); font-size:.82rem; font-style:italic}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.2rem,4vw,3.6rem) clamp(2rem,4vw,3.4rem)}

.card{display:flex; flex-direction:column}
.card-shots{position:relative; padding-bottom:46px; padding-right:30px}
.shot{
  display:block; border-radius:12px; overflow:hidden; background:var(--panel-2);
  border:1px solid var(--line-2); box-shadow:0 26px 60px -30px rgba(0,0,0,.95);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.shot img{width:100%; height:auto}
.shot-fe{position:relative; z-index:1}
.shot-fe:hover{transform:translateY(-4px); border-color:rgba(216,162,74,.5); box-shadow:0 34px 70px -28px rgba(0,0,0,1)}
.shot-crm{
  position:absolute; right:0; bottom:0; width:54%; z-index:2;
  box-shadow:0 24px 50px -22px rgba(0,0,0,1);
}
.shot-crm:hover{transform:translateY(-4px); border-color:rgba(216,162,74,.5)}
.shot-tag{
  position:absolute; top:6px; right:8px; z-index:3;
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); padding:.24em .6em; border-radius:5px;
}

.card-body{padding-top:1.5rem}
.card-meta{display:flex; align-items:center; gap:.8rem; margin-bottom:.7rem}
.num{font-family:var(--ff-d); font-size:.95rem; color:var(--gold); font-weight:600}
.chip{font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--text);
  border:1px solid var(--line-2); border-radius:999px; padding:.28em .8em}
.loc{font-size:.8rem; color:var(--dim); margin-left:auto}
.card-body h3{font-size:1.6rem; margin-bottom:.55rem}
.card-body p{color:var(--muted); font-size:.98rem; margin:0 0 1.1rem; max-width:46ch}
.card-links{display:flex; gap:1.6rem}
.card-links a{font-size:.9rem; font-weight:600; color:var(--text); border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:color .15s,border-color .15s}
.card-links a span{color:var(--gold); transition:transform .15s; display:inline-block}
.card-links a:hover{color:var(--gold-2); border-color:var(--gold)}
.card-links a:hover span{transform:translate(2px,-2px)}

.more-note{
  margin:clamp(2.6rem,5vw,4rem) auto 0; max-width:54ch; text-align:center;
  font-size:1rem; color:var(--muted); line-height:1.6;
}
.more-note span{
  display:inline-grid; place-items:center; width:1.7em; height:1.7em; margin-right:.5em;
  vertical-align:-.45em; border-radius:50%; border:1px solid var(--line-2);
  color:var(--gold); font-family:var(--ff-d); font-weight:600;
}

/* ---------- closer ---------- */
.closer{max-width:var(--wrap); margin:0 auto; padding:clamp(3rem,6vw,5rem) 28px clamp(3.5rem,7vw,6rem); text-align:center; border-top:1px solid var(--line)}
.closer h2{font-size:clamp(2rem,4.5vw,3.2rem); margin-bottom:1rem}
.closer p{color:var(--muted); font-size:1.1rem; max-width:52ch; margin:0 auto 2rem}
.closer-cta{
  display:inline-block; font-weight:600; color:var(--ink); background:var(--gold);
  padding:.85em 1.8em; border-radius:999px; transition:background .18s,transform .18s;
}
.closer-cta:hover{background:var(--gold-2); transform:translateY(-2px)}

/* ---------- footer ---------- */
.foot{
  max-width:var(--wrap); margin:0 auto; padding:2rem 28px 3rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line); font-size:.84rem; color:var(--dim);
}
.foot a:hover{color:var(--gold)}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .grid{grid-template-columns:1fr; gap:3rem}
  .card-shots{max-width:560px}
}
@media (max-width:560px){
  .top{flex-wrap:wrap; gap:12px; padding:20px}
  .top-cta{margin-left:0}
  .hero{padding-top:2.4rem}
  .mq-card{width:230px}
  .card-shots{padding-right:22px; padding-bottom:38px}
  .card-links{gap:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  *{scroll-behavior:auto}
}