/* CASE STUDY DROPDOWN */

.nav-dropdown {
  position: relative;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-arrow {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  padding: 12px 0;
  background: #174d34;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 9999;
}

.dropdown-menu a {
  display: block;
  padding: 12px 20px;
  color: #ffffff;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-menu a:hover {
  background: rgba(255,255,255,0.08);
  color: #d5ff40;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-cta svg {
  flex-shrink: 0;
}
/* ---------- hero ---------- */
.hero{
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:140px; padding-bottom:60px;
  overflow:hidden;
  position:relative;
}
.hero-ghost{
  position:absolute; top:52%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(90px,16vw,260px);
  letter-spacing:-0.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(244,244,240,0.08);
  white-space:nowrap;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.hero-mark{
  position:absolute; z-index:0; color:rgba(207,255,4,0.5);
  pointer-events:none;
}
.hero-mark.m1{ top:18%; right:8%; width:34px; height:34px; }
.hero-mark.m2{ bottom:14%; left:6%; width:22px; height:22px; }
.hero-copy, .hero-visual{ position:relative; z-index:1; }
.hero .wrap{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center;
}
.hero-copy h1{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(46px,6.4vw,92px);
  line-height:0.98;
  letter-spacing:-0.01em;
}
.hero-copy h1 em{ font-weight:700; color: #FFA400; font-style: normal;
 }
.hero-copy .eyebrow{ margin-bottom:26px; }
.hero-copy .lede{
  margin-top:28px; max-width:460px; color:var(--ink-soft); font-size:16.5px;
}
.hero-actions{ display:flex; align-items:center; gap:26px; margin-top:44px; }
.hero-stat{ font-family:var(--f-mono); font-size:13px; color:var(--ink-soft); }
.hero-stat b{ font-family:var(--f-display); font-size:22px; color:var(--ink); display:block; }

.hero-visual{ position:relative; }
.hero-frame{
  position:relative; aspect-ratio:3/4; background:var(--paper-deep);
  border:1px solid var(--line-strong);
}
.hero-frame img{ width:100%; height:100%; object-fit:cover; }
.hero-frame::before, .hero-frame::after{
  content:""; position:absolute; width:22px; height:22px;
  border:1px solid var(--ink); opacity:0.5;
}
.hero-frame::before{ top:-11px; left:-11px; border-right:none; border-bottom:none; }
.hero-frame::after{ bottom:-11px; right:-11px; border-left:none; border-top:none; }
.hero-tag{
  position:absolute; bottom:-24px; left:-24px;
  background:#FFA400; color:var(--paper);
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.05em;
  padding:14px 18px; text-transform:uppercase;
}

/* ---------- marquee strip ---------- */
.marquee-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track{ display:inline-flex; animation:scroll-left 32s linear infinite; }
.marquee-track span{
  font-family:var(--f-display); font-weight:400;
  font-size:26px; color:var(--ink-soft); padding:0 34px;
  display:inline-flex; align-items:center; gap:34px;
}
.marquee-track span::after{ content:"—"; color:var(--taupe); font-style:normal; }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- about + skills ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.about-copy .big-line{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(28px,3vw,38px); line-height:1.28; max-width:520px;
}
.about-copy .big-line em{ color:var(--olive); }
.about-copy p.detail{ margin-top:28px; color:var(--ink-soft); max-width:480px; font-size:15.5px; }

.skill-row{ margin-top:44px; }
.skill{ margin-bottom:22px; }
.skill-top{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11px; margin-bottom:8px; }
.skill-bar{ height:2px; background:var(--line-strong); position:relative; }
.skill-bar span{
  position:absolute; left:0; top:0; height:100%; background:var(--olive);
  width:0; transition:width 1.4s cubic-bezier(.16,1,.3,1);
}
.skill-bar.in span{ width:var(--pct); }

.credo-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.credo-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-size:20px;
}
.credo-list li span{ font-family:var(--f-mono); font-size:12px; color:var(--taupe); }
.credo-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "title number"
        "desc number";
    column-gap: 30px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.credo-list li .credo-title {
    grid-area: title;
}

.credo-list li p {
    grid-area: desc;
    margin: 8px 0 0;
    font-weight: 200;
    font-size: 16px;
}

.credo-list li span {
    grid-area: number;
}

/* ---------- selected works ---------- */
.works-list{ display:flex; flex-direction:column; }
.work-row{
  display:grid; grid-template-columns:60px 1fr 200px 160px 24px;
  align-items:center; gap:20px;
  padding:34px 0; border-bottom:1px solid var(--line);
  transition:padding .4s ease;
  position:relative;
}
.work-row .num{ font-family:var(--f-mono); font-size:13px; color:var(--taupe); }
.work-row h3{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(24px,2.6vw,34px);
}
.work-row .tag{ font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--olive); }
.work-row .year{ font-family:var(--f-mono); font-size:13px; color:var(--ink-soft); }
.work-row .arrow{ transition:transform .4s ease; }
.work-row:hover{ padding-left:14px; }
.work-row:hover .arrow{ transform:translateX(6px) rotate(45deg); }
.work-thumb{
  position:absolute; top:50%; right:220px; transform:translateY(-50%) scale(0.9);
  width:220px; height:150px; overflow:hidden;
  opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease;
  border:1px solid var(--line-strong);
}
.work-row:hover .work-thumb{ opacity:1; transform:translateY(-50%) scale(1); }
.work-thumb img{ width:100%; height:100%; object-fit:cover; }

@media(max-width:800px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:280px; margin:0 auto 20px; }
  .about-grid{ grid-template-columns:1fr; }
  .work-row{ grid-template-columns:36px 1fr; }
  .work-row .tag,.work-row .year,.work-thumb{ display:none; }
}

/* ---------- capabilities ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.cap-card{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:38px 30px; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; transition:background .35s ease; }
.cap-card:hover{ background:var(--paper-deep); }
.cap-card .cap-num{ font-family:var(--f-mono); font-size:12.5px; color:var(--taupe); }
.cap-card h3{ font-family:var(--f-display); font-size:22px; font-weight:500; margin-top:20px; }
.cap-card p{ font-size:13.5px; color:var(--ink-soft); margin-top:10px; }
@media(max-width:900px){ .cap-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

/* ---------- testimonials ---------- */
.testi-track{ display:flex; gap:40px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
.testi-track::-webkit-scrollbar{ height:4px; }
.testi-track::-webkit-scrollbar-thumb{ background:var(--line-strong); }
.testi-card{
  min-width:420px; scroll-snap-align:start;
  background:var(--paper-deep); border:1px solid var(--line);
  padding:44px; display:flex; flex-direction:column; justify-content:space-between; min-height:280px;
}
.testi-card q{ font-family:var(--f-display); font-size:21px; line-height:1.45; quotes:none; }
.testi-who{ margin-top:30px; display:flex; align-items:center; gap:14px; }
.testi-who .dot{ width:8px; height:8px; border-radius:50%; background:var(--olive); }
.testi-who b{ font-family:var(--f-mono); font-size:13px; display:block; }
.testi-who span{ font-size:12.5px; color:var(--ink-soft); }
@media(max-width:600px){ .testi-card{ min-width:82vw; padding:30px; } }

/* ---------- contact cta band ---------- */
.contact-band{
  background:var(--olive); color:var(--paper);
  padding:110px 0; text-align:center;
}
.contact-band .eyebrow{ color:rgba(10,10,10,0.65); justify-content:center; }
.contact-band .eyebrow::before{ background:rgba(10,10,10,0.65); }
.contact-band h2{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(38px,6vw,78px); line-height:1.02; margin:26px 0 44px;
}
.contact-band h2 em{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:8px; }
.contact-band .btn{ border-color:var(--paper); }
.contact-band .btn:hover{ background:var(--paper); color:var(--olive-deep); }