/* BlueNinja.net — shared site styles
   Design tokens carried over from the original "Patience Pending" coming-soon page,
   so every page that follows (About, Contact, Work) stays visually consistent. */

:root{
  --bg-deep:#0f151b;
  --bg-mid:#1a2530;
  --surface:#212e3a;
  --surface-2:#283847;
  --line:#3d5164;
  --ink:#e9eef2;
  --ink-soft:#96abbb;
  --ink-faint:#5f7385;
  --accent:#7fa8c4;
  --accent-dim:#4c6a80;
  --accent-pop:#7bc3f4;
  --fog-light:#d3dfe6;
  --fog-light-2:#b9c9d4;
  --shadow-hard:#0a0e12;
  --sheen-purple:#7c5cff;
  --sheen-teal:#00e0c6;
}

/* ---------- scroll / load reveal ---------- */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
  transition-delay:var(--delay, 0s);
}

.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

*, *::before, *::after{ box-sizing:border-box; }

html, body{
  background:var(--bg-deep);
}

body{
  margin:0;
  font-family:'Work Sans', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  line-height:1.6;
}

a{ color:inherit; }

img{ max-width:100%; display:block; }

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- ambient background fog ---------- */

.bg-fog{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.fog{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0;
}

.fog-a{
  width:560px;
  height:560px;
  top:-160px;
  left:-140px;
  background:radial-gradient(circle, var(--fog-light), transparent 68%);
  animation:fogInA 3.4s ease-out forwards, driftA 36s ease-in-out infinite;
}

.fog-b{
  width:500px;
  height:500px;
  bottom:-180px;
  right:-120px;
  background:radial-gradient(circle, var(--fog-light-2), transparent 68%);
  animation:fogInB 3.8s ease-out .3s forwards, driftB 42s ease-in-out infinite;
}

.fog-c{
  width:420px;
  height:420px;
  top:38%;
  left:50%;
  background:radial-gradient(circle, var(--fog-light), transparent 70%);
  animation:fogInC 3.6s ease-out .5s forwards, driftC 30s ease-in-out infinite;
}

@keyframes fogInA{
  from{ opacity:0; transform:translate(-40px,-30px) scale(0.85); }
  to{ opacity:0.15; transform:translate(0,0) scale(1); }
}

@keyframes fogInB{
  from{ opacity:0; transform:translate(40px,30px) scale(0.85); }
  to{ opacity:0.13; transform:translate(0,0) scale(1); }
}

@keyframes fogInC{
  from{ opacity:0; transform:translate(-50%,-30px) scale(0.85); }
  to{ opacity:0.09; transform:translate(-50%,0) scale(1); }
}

@keyframes driftA{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(90px,55px); }
}

@keyframes driftB{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-85px,-50px); }
}

@keyframes driftC{
  0%,100%{ transform:translate(-50%,0) scale(1); }
  50%{ transform:translate(calc(-50% + 60px),-30px) scale(1.12); }
}

@media (prefers-reduced-motion: reduce){
  .fog{ animation:none; opacity:0.1; }
}

main{
  position:relative;
  z-index:1;
}

.site-footer{
  position:relative;
  z-index:1;
}

/* ---------- header / nav ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid var(--line);
}

/* the blurred glass background lives on a pseudo-element rather than
   .site-header itself, because backdrop-filter on an ancestor creates a
   new containing block for position:fixed descendants — which would trap
   the mobile nav drawer/backdrop inside the header's own small box
   instead of letting them cover the full viewport */
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(15,21,27,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.nav-inner{
  max-width:1080px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

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

.brand-mark{
  position:relative;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}

.brand-mark svg{ position:absolute; top:0; left:0; }

.brand-mark img{
  position:relative;
  width:30px;
  height:auto;
  transform:scaleY(-1) rotate(-75deg);
}

.brand-word{
  font-family:'Bricolage Grotesque', 'Work Sans', system-ui, sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.site-nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:15.5px;
  letter-spacing:0.02em;
}

.site-nav a:not(.nav-cta){
  text-decoration:none;
  color:var(--ink-soft);
  transition:color 0.2s ease;
}

.site-nav a:not(.nav-cta):hover{ color:var(--ink); }

.site-nav a[aria-current="page"]{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-color:var(--accent);
}

.nav-cta{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:15px;
  text-decoration:none;
  color:var(--bg-deep);
  background:var(--accent);
  padding:9px 16px;
  border-radius:999px;
  white-space:nowrap;
  transition:background 0.2s ease, transform 0.2s ease;
}

.nav-cta:hover{ background:var(--fog-light-2, #b9c9d4); transform:translateY(-1px); }

.nav-drawer-cta{
  display:none;
}

/* keep the inline nav on one line as it gets tight, right up to the
   600px hamburger breakpoint, instead of an awkward flex-wrap */
@media (max-width:719.98px){
  .nav-inner{
    padding:16px 20px;
    gap:14px;
  }

  .site-nav{
    gap:18px;
  }

  .nav-cta--header{
    padding:8px 12px;
    font-size:14px;
  }
}

/* ---------- mobile nav toggle ---------- */

body.nav-locked{
  overflow:hidden;
}

.nav-toggle{
  display:none;
  position:relative;
  z-index:41;
  width:40px;
  height:40px;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  flex:none;
  align-items:center;
  justify-content:center;
}

.nav-toggle span{
  position:absolute;
  left:9px;
  width:22px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:19px; }
.nav-toggle span:nth-child(3){ top:24px; }

.nav-toggle.is-active span:nth-child(1){ top:19px; transform:rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ top:19px; transform:rotate(-45deg); }

.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:35;
  background:rgba(6,10,14,0.55);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}

.nav-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

@media (max-width:599.98px){
  .nav-cta--header{ display:none; }

  .nav-toggle{ display:flex; }

  .site-nav{
    position:fixed;
    top:0;
    right:0;
    z-index:40;
    width:min(78vw, 320px);
    height:100vh;
    height:100dvh;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:8px;
    background:var(--bg-mid);
    border-left:1px solid var(--line);
    box-shadow:-16px 0 40px rgba(0,0,0,0.4);
    padding:96px 28px 28px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform 0.35s cubic-bezier(.22,.9,.32,1);
  }

  .site-nav.is-open{
    transform:translateX(0);
  }

  .site-nav a:not(.nav-cta){
    font-size:17px;
    padding:10px 0;
  }

  .nav-drawer-cta{
    display:inline-block;
    margin-top:14px;
  }
}

/* ---------- section rhythm ---------- */

section{
  padding:88px 0;
  border-bottom:1px solid var(--line);
}

section:last-of-type{ border-bottom:none; }

.eyebrow{
  display:inline-block;
  margin:0 0 18px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:15px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-pop);
  font-weight:500;
}

h1, h2, h3{
  font-family:'Bricolage Grotesque', 'Work Sans', system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
}

.section-head{
  max-width:640px;
  margin:0 0 44px;
}

.section-head h2{
  font-size:clamp(26px, 4vw, 36px);
  margin-bottom:12px;
}

.section-head p:not(.eyebrow){
  color:var(--ink-soft);
  margin:0;
}

/* ---------- hero ---------- */

.hero{
  padding-top:100px;
  text-align:center;
  border-bottom:1px solid var(--line);
}

.hero-inner{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}

.headline{
  font-size:clamp(34px, 6.5vw, 62px);
  line-height:1.08;
  text-wrap:balance;
}

.drama-text{
  position:relative;
  display:inline-block;
  /* gradient + shine mechanics matched to sample.html's ".grad" / "@keyframes shine" exactly
     (90deg 3-stop gradient, background-size:200% auto, linear sweep to 200% center) —
     only the red/pink stop (was #ff5c8a) is swapped for this site's blue. */
  background-image:linear-gradient(90deg, var(--sheen-purple), var(--sheen-teal) 50%, var(--accent-pop));
  background-size:200% auto;
  background-position:0% center;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:dramaCycle 14.73s cubic-bezier(.45,0,.25,1) infinite;
}

.drama-text::after{
  content:"";
  position:absolute;
  inset:-60% -20%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, var(--fog-light) 0%, var(--fog-light-2) 35%, transparent 72%);
  opacity:0;
  filter:blur(10px);
  pointer-events:none;
  animation:dramaPuff 14.73s cubic-bezier(.45,0,.25,1) infinite;
}

@keyframes dramaCycle{
  0%{
    background-position:0% center; opacity:1;
    filter:blur(0); transform:translateY(0) scale(1);
    animation-timing-function:linear;
  }
  41%{
    /* exact match to sample.html's shine pass: linear, background-position -> 200% center —
       this is also the instant the purple band finishes its right-to-left swipe off the
       left edge (position hits 200% == one full repeat of the tile). Evaporation starts
       immediately from here, no hold. */
    background-position:200% center; opacity:1;
    filter:blur(0); transform:translateY(0) scale(1);
    animation-timing-function:cubic-bezier(.4,0,.7,0);
  }
  77%{
    background-position:200% center; opacity:0;
    filter:blur(16px); transform:translateY(-26px) scale(1.1);
    animation-timing-function:ease-out;
  }
  84%{
    background-position:0% center; opacity:0;
    filter:blur(16px); transform:translateY(-26px) scale(1.1);
  }
  96%{
    background-position:0% center; opacity:1;
    filter:blur(0); transform:translateY(0) scale(1);
  }
  100%{
    background-position:0% center; opacity:1;
    filter:blur(0); transform:translateY(0) scale(1);
  }
}

@keyframes dramaPuff{
  0%,65%{ opacity:0; transform:scale(0.7); }
  74%{ opacity:0.45; transform:scale(1.0); }
  81%{ opacity:0.6; transform:scale(1.2); }
  89%{ opacity:0.2; transform:scale(1.4); }
  100%{ opacity:0; transform:scale(0.7); }
}

@media (prefers-reduced-motion: reduce){
  .drama-text{
    animation:none;
    background-position:100% center;
    opacity:1;
    filter:none;
    transform:none;
  }
  .drama-text::after{ animation:none; opacity:0; }
}

.sub{
  max-width:46ch;
  font-size:17px;
  color:var(--ink-soft);
  margin:0;
}

.cta-btn{
  --rot:-3deg;
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  padding:16px 30px;
  background:var(--surface);
  border:3px solid var(--ink);
  border-radius:14px;
  color:var(--ink);
  text-decoration:none;
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:800;
  font-size:17px;
  transform:rotate(var(--rot));
  box-shadow:6px 6px 0 var(--shadow-hard);
  transition:transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s cubic-bezier(.34,1.56,.64,1), background 0.2s ease;
}

.cta-btn:hover{
  transform:rotate(1deg) scale(1.05) translateY(-2px);
  box-shadow:9px 9px 0 var(--shadow-hard);
  background:var(--surface-2);
}

.cta-btn:active{
  transform:rotate(0deg) scale(0.98) translateY(2px);
  box-shadow:3px 3px 0 var(--shadow-hard);
}

.cta-btn:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:4px;
}

.cta-btn--settle{
  opacity:0;
  animation:settleLevel 0.9s cubic-bezier(.22,1.4,.36,1) 0.5s forwards;
}

@keyframes settleLevel{
  0%{ opacity:0; transform:rotate(-11deg) scale(0.92) translateY(10px); }
  55%{ opacity:1; transform:rotate(3deg) scale(1.03) translateY(0); }
  100%{ opacity:1; transform:rotate(var(--rot)) scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .cta-btn--settle{ animation:none; opacity:1; transform:rotate(var(--rot)); }
}

/* ---------- about page ---------- */

.about-hero{
  padding-top:50px;
}

.about-intro{
  max-width:680px;
  margin:0 auto;
}

.about-heading{
  font-size:clamp(26px, 4vw, 36px);
  margin-bottom:20px;
  text-align:center;
}

.how-i-work .section-head h2{
  text-align:center;
}

.about-intro p{
  font-size:17px;
  color:var(--ink-soft);
}

/* the "How I Work" content reuses .about-intro to match the same centered
   column/margins as the "Hi, I'm Cameron" section above it */
.how-i-work .section-head,
.how-i-work .principle-list{
  max-width:none;
}

.about-intro p:first-of-type{ margin-top:0; }

.principle-list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:720px;
}

.principle-list li{
  border-top:1px solid var(--line);
  padding:22px 0;
  display:flex;
  gap:16px;
  align-items:baseline;
}

.principle-list li:last-child{ border-bottom:1px solid var(--line); }

.principle-list .mark{
  flex:none;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  color:var(--accent);
  font-size:14px;
}

.principle-list p{
  margin:0;
  color:var(--ink-soft);
  font-size:15.5px;
}

.principle-list strong{ color:var(--ink); }

/* ---------- credibility strip ---------- */

.credibility{
  padding:32px 0 26px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,0.015);
}

.marquee-wrap{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee{
  display:flex;
  align-items:center;
  gap:64px;
  width:max-content;
  animation:marqueeScroll 46s linear infinite;
}

.marquee span{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:16px;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}

.marquee span::before{
  content:'◆';
  display:inline-block;
  margin-right:14px;
  font-size:9px;
  color:var(--accent);
  vertical-align:middle;
}

@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-25%); }
}

.credibility-note{
  margin:20px 0 0;
  text-align:center;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:12.5px;
  color:var(--ink-faint);
}

@media (prefers-reduced-motion: reduce){
  .marquee{ animation:none; }
}

/* ---------- services ---------- */

.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.service-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
  transition:transform .3s ease, border-color .3s ease;
}

.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
}

.service-card h3{
  font-size:21px;
  margin-bottom:10px;
}

.service-card p{
  margin:0;
  color:var(--ink-soft);
  font-size:15px;
}

.care-note{
  margin:28px 0 0;
  font-style:italic;
  color:var(--ink-faint);
  font-size:14px;
  text-align:center;
}

@media (max-width:800px){
  .service-grid{ grid-template-columns:1fr; }
}

/* ---------- how it works ---------- */

.steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.steps li{
  padding:30px;
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(127,168,196,0.07), rgba(127,168,196,0.015));
  transition:transform .3s ease, border-color .3s ease;
}

.steps li:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
}

.step-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  margin-bottom:20px;
  border-radius:13px;
  background:rgba(127,168,196,0.16);
  color:var(--accent-pop);
}

.step-icon svg{
  width:23px;
  height:23px;
}

.steps h3{
  font-size:19.5px;
  margin-bottom:9px;
}

.steps p{
  margin:0;
  color:var(--ink-soft);
  font-size:15.5px;
}

@media (max-width:800px){
  .steps{ grid-template-columns:1fr; }
}

/* ---------- featured work ---------- */

.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
  margin-bottom:32px;
}

.work-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.work-card:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 14px 30px -18px rgba(0,0,0,0.55);
}

.work-thumb{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--surface-2);
}

.work-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1);
}

.work-card:hover .work-thumb img{
  transform:scale(1.05);
}

.work-card-body{
  padding:18px 20px 20px;
}

.work-card h3{
  font-size:16px;
  margin:0 0 6px;
  color:var(--ink);
}

.work-card p{
  margin:0;
  font-size:13.5px;
  color:var(--ink-soft);
}

.text-link{
  display:inline-block;
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}

.text-link:hover{ text-decoration:underline; }

/* ---------- about teaser (spotlight card) ---------- */

.about-teaser{
  padding:56px 0;
  border-bottom:none;
}

.about-spotlight{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, var(--bg-mid), var(--surface) 70%);
  padding:88px 40px;
  text-align:center;
}

.about-spotlight-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px circle at 16% 18%, rgba(127,168,196,0.30), transparent 60%),
    radial-gradient(420px circle at 84% 82%, rgba(123,195,244,0.22), transparent 60%);
}

.about-spotlight-content{
  position:relative;
  z-index:1;
  max-width:600px;
  margin:0 auto;
}

.about-spotlight-heading{
  font-size:clamp(26px, 4vw, 36px);
  color:var(--ink);
  margin-bottom:20px;
}

.about-teaser-text{
  color:var(--ink-soft);
  font-size:17px;
  margin:0 0 32px;
}

.about-spotlight .cta-btn{ margin-top:0; }

@media (max-width:640px){
  .about-spotlight{ padding:56px 24px; }
}

/* ---------- FAQ ---------- */

.faq-list{
  max-width:760px;
}

.faq-item{
  border-bottom:1px solid var(--line);
  padding:20px 0;
}

.faq-item summary{
  cursor:pointer;
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  font-size:16.5px;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary::after{
  content:'+';
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:20px;
  color:var(--accent);
  transition:transform 0.2s ease;
  flex:none;
}

.faq-item[open] summary::after{ transform:rotate(45deg); }

.faq-item p{
  margin:14px 0 0;
  color:var(--ink-soft);
  font-size:15px;
}

/* ---------- final CTA ---------- */

.final-cta{
  text-align:center;
  border-bottom:none;
}

.final-cta h2{
  font-size:clamp(26px, 4vw, 38px);
  max-width:600px;
  margin:0 auto 28px;
}

.final-cta .email-link{
  display:block;
  margin-top:16px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:14px;
  color:var(--ink-soft);
  text-decoration:none;
}

.final-cta .email-link:hover{ color:var(--ink); }

/* ---------- footer ---------- */

.site-footer{
  padding:36px 0;
  text-align:center;
}

.site-footer p{
  margin:0;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11.5px;
  color:var(--ink-faint);
  letter-spacing:0.02em;
}

.site-footer .microcopy{
  margin-top:6px;
  color:var(--ink-faint);
}

/* ---------- contact page ---------- */

.contact-hero{
  border-bottom:none;
  padding-bottom:24px;
}

.contact-form-section{
  padding-top:0;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-field label{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:13px;
  letter-spacing:0.03em;
  color:var(--ink-soft);
}

.form-field input,
.form-field select,
.form-field textarea{
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:16px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  resize:vertical;
  transition:border-color 0.2s ease, background 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--accent-pop);
  background:var(--surface-2);
}

.form-field select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:36px;
}

.form-field--hp{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.form-submit{
  align-self:flex-start;
}

.form-submit:disabled{
  opacity:0.6;
  cursor:default;
  transform:rotate(var(--rot)) !important;
}

.form-status{
  margin:0;
  font-size:15px;
  min-height:1.4em;
}

.form-status--success{ color:var(--accent-pop); }
.form-status--error{ color:#e39b9b; }

.contact-fallback{
  margin:32px 0 0;
  font-size:15px;
  color:var(--ink-soft);
}

.contact-fallback a{
  color:var(--accent-pop);
  text-decoration:none;
}

.contact-fallback a:hover{ text-decoration:underline; }

@media (max-width:640px){
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- work page ---------- */

.work-hero{
  border-bottom:none;
  padding-bottom:24px;
}

.work-list-section{
  padding-top:0;
}

.work-list{
  display:flex;
  flex-direction:column;
}

.work-case{
  display:flex;
  align-items:center;
  gap:40px;
  padding:44px 0;
  border-top:1px solid var(--line);
}

.work-case:first-child{
  border-top:none;
  padding-top:0;
}

.work-case:last-child{
  padding-bottom:0;
}

.work-case:nth-child(even){
  flex-direction:row-reverse;
}

.work-case-thumb{
  display:block;
  position:relative;
  flex:0 1 560px;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface-2);
}

.work-case-body{
  flex:1 1 320px;
  min-width:0;
}

.work-case-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1);
}

.work-case-thumb:hover img{
  transform:scale(1.05);
}

.work-case-tag{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:12.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--accent-pop);
  margin:0 0 10px;
}

.work-case-body h2{
  font-size:clamp(20px, 2.4vw, 26px);
  margin:0 0 12px;
}

.work-case-body p{
  margin:0 0 18px;
  color:var(--ink-soft);
  font-size:16px;
}

.work-case-body .text-link{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:14px;
}

@media (max-width:760px){
  .work-case,
  .work-case:nth-child(even){
    flex-direction:column;
    align-items:stretch;
    gap:20px;
    padding:32px 0;
  }

  /* .work-case:last-child's padding-bottom:0 (set outside this query,
     for the desktop row layout) otherwise wins here too because it's a
     more specific selector than the plain .work-case rule above, even
     though this query comes later in the file — specificity is checked
     before source order. Restated at matching specificity so every card
     gets the same bottom spacing on mobile, last one included. */
  .work-case:last-child{
    padding-bottom:32px;
  }

  .work-case-thumb{
    flex:0 0 auto;
  }

  /* .work-case-body's flex:1 1 320px (set outside this query) is meant
     to control WIDTH in the desktop row layout. Once .work-case switches
     to flex-direction:column above, that same 320px flex-basis is read
     as a minimum HEIGHT instead, padding every card's body out to a
     fixed 320px tall regardless of how much text it actually holds —
     which is what made the gap between the "Visit site" link and the
     next item look different from card to card (shorter descriptions
     left more empty space below the link). Reset to a content-sized
     height on mobile so the gap below the link is just the card's own
     padding, the same for every card.
  */
  .work-case-body{
    flex:1 1 auto;
  }
}