:root{
  --parchment:#F3EBDD;
  --espresso:#2A1D17;
  --umber:#6A4630;
  --rose:#84564E;      /* rose-brown, deepened slightly to pass contrast on parchment */
  --gold:#A98B4C;      /* hairlines only */
  --taupe:#7A6555;
  --serif:'Lora', Georgia, 'Times New Roman', serif;
  --sans:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Carlito', 'Helvetica Neue', Arial, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:4rem; }
body{
  background:var(--parchment); color:var(--espresso);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--umber); outline-offset:3px; border-radius:4px; }
.wrap{ width:min(100% - 3rem, 56rem); margin-inline:auto; }

/* Navigation: slim and frosted */
.nav{
  position:sticky; top:0; z-index:10;
  background:rgba(243,235,221,.78);
  -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(169,139,76,.35);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:3.25rem; }
.brand{ font-family:var(--serif); font-size:1.05rem; letter-spacing:.01em; }
.nav-right{ display:flex; align-items:center; gap:1.1rem; }
.nav-link{ font-size:.9rem; color:var(--umber); }
.pill{
  font-size:.875rem; font-weight:500; padding:.4rem 1rem; border-radius:999px;
  background:var(--espresso); color:var(--parchment); transition:background .2s;
}
.pill:hover{ background:var(--umber); }

/* Hero */
.hero{ padding:clamp(4rem, 14vw, 9rem) 0 clamp(3.5rem, 10vw, 6.5rem); }
.where{ color:var(--rose); font-size:.9rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.5rem; }
h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.9rem, 10.5vw, 6.25rem); line-height:1.02; letter-spacing:-.025em;
  max-width:12ch;
}
h1.long{ font-size:clamp(2.4rem, 8vw, 4.75rem); max-width:16ch; }
.verbs{
  font-family:var(--serif); font-style:italic; color:var(--umber);
  font-size:clamp(1.15rem, 3vw, 1.6rem); line-height:1.45; margin-top:1.75rem;
}
.intro{ max-width:34rem; margin-top:1.75rem; }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }
.btn{
  display:inline-flex; align-items:center; min-height:3rem; padding:0 1.6rem;
  border-radius:999px; font:inherit; font-weight:500; font-size:1rem; cursor:pointer;
  transition:background .2s, color .2s;
}
.btn-primary{ background:var(--espresso); color:var(--parchment); border:0; }
.btn-primary:hover{ background:var(--umber); }
.btn-ghost{ border:1px solid var(--espresso); background:transparent; color:var(--espresso); }
.btn-ghost:hover{ background:var(--espresso); color:var(--parchment); }

/* The one orchestrated moment: hero lines settle in on load */
.js .hero .rise{ opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.js .hero .rise:nth-child(2){ animation-delay:.12s; }
.js .hero .rise:nth-child(3){ animation-delay:.24s; }
.js .hero .rise:nth-child(4){ animation-delay:.36s; }
.js .hero .rise:nth-child(5){ animation-delay:.48s; }
.js .hero .rise:nth-child(6){ animation-delay:.6s; }
.js .hero .rise:nth-child(7){ animation-delay:.72s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* Sections, per brand system: gold hairline, small label, content */
section{ border-top:1px solid var(--gold); padding:clamp(2.5rem, 7vw, 4.5rem) 0; }
.label{ color:var(--rose); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h2{
  font-family:var(--serif); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(1.8rem, 5vw, 2.85rem); line-height:1.12; margin-top:.9rem; max-width:24ch;
}
.lede{ max-width:38rem; margin-top:1.1rem; }
.note{ color:var(--taupe); font-size:.9rem; margin-top:.75rem; max-width:38rem; }
.sub{ font-family:var(--serif); font-size:1.3rem; margin-top:2.5rem; }

/* Link rows: large tap targets, hairline separated */
.rows{ list-style:none; margin-top:2rem; border-top:1px solid rgba(42,29,23,.14); }
.row{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:1.15rem .25rem; border-bottom:1px solid rgba(42,29,23,.14);
  transition:padding .25s ease, background .25s ease;
}
a.row[href]:hover{ background:rgba(106,70,48,.06); padding-inline:.9rem; }
.row-title{ display:block; font-family:var(--serif); font-size:1.25rem; line-height:1.3; }
.row-desc{ display:block; color:var(--umber); font-size:.95rem; margin-top:.15rem; max-width:34rem; }
.row svg{ flex:none; width:1.1rem; height:1.1rem; stroke:var(--umber); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.soon{ flex:none; font-size:.8rem; color:var(--taupe); border:1px solid rgba(122,101,85,.5); border-radius:999px; padding:.15rem .7rem; white-space:nowrap; }
.price{ flex:none; font-family:var(--serif); font-size:1.15rem; text-align:right; max-width:11rem; line-height:1.3; }

/* UGC portfolio */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; }
.chip{
  font:inherit; font-size:.9rem; padding:.45rem 1rem; border-radius:999px;
  border:1px solid rgba(42,29,23,.35); background:transparent; color:var(--espresso); cursor:pointer;
  transition:background .2s, color .2s;
}
.chip[aria-pressed="true"]{ background:var(--espresso); color:var(--parchment); border-color:var(--espresso); }
.reel{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:1.5rem -1.5rem 0; padding:0 1.5rem .75rem; -webkit-overflow-scrolling:touch;
}
.clip{ flex:0 0 min(70vw, 17rem); scroll-snap-align:start; }
.media{ aspect-ratio:9/16; background:var(--espresso); border-radius:14px; overflow:hidden; }
.media video, .media iframe{ width:100%; height:100%; border:0; display:block; object-fit:cover; }
.clip h3{ font-family:var(--serif); font-weight:400; font-size:1.1rem; margin-top:.8rem; line-height:1.3; }
.clip p{ font-size:.88rem; color:var(--umber); margin-top:.15rem; }
.tag{ display:inline-block; font-size:.76rem; color:var(--taupe); border:1px solid rgba(122,101,85,.5); border-radius:999px; padding:.05rem .65rem; margin-top:.45rem; }
.empty{ margin-top:1.75rem; color:var(--umber); max-width:34rem; }
@media (min-width:820px){
  .reel{ flex-wrap:wrap; overflow:visible; margin-inline:0; padding-inline:0; gap:1.5rem 1.25rem; }
  .clip{ flex:0 0 calc(33.333% - .85rem); }
}

/* Plain lists, numbered steps, quotes */
.plain{ margin-top:1.25rem; padding-left:1.2rem; max-width:38rem; color:var(--espresso); }
.plain li{ margin-top:.4rem; }
.steps{ margin-top:1.5rem; padding-left:1.4rem; max-width:38rem; }
.steps li{ margin-top:.7rem; padding-left:.3rem; }
.quote{ margin-top:2rem; max-width:38rem; }
.quote blockquote{ font-family:var(--serif); font-size:1.35rem; line-height:1.45; }
.quote cite{ display:block; margin-top:.6rem; font-style:normal; color:var(--umber); font-size:.95rem; }

/* Brief form */
.field{ display:grid; gap:.35rem; margin-top:1.25rem; max-width:38rem; }
.field label{ font-size:.92rem; color:var(--umber); }
.field input, .field select, .field textarea{
  font:inherit; color:var(--espresso); width:100%;
  background:rgba(255,255,255,.45); border:1px solid rgba(42,29,23,.25);
  border-radius:12px; padding:.8rem 1rem;
}
.field textarea{ min-height:6rem; resize:vertical; }
.hint{ font-size:.92rem; color:var(--umber); min-height:1.5em; }
.emotion-box{ border-left:2px solid var(--gold); padding-left:1rem; }

footer{ border-top:1px solid var(--gold); padding:2.5rem 0 3.5rem; color:var(--taupe); font-size:.875rem; }
footer .wrap{ display:grid; gap:.6rem; }
footer a{ text-decoration:underline; text-underline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .hero .rise{ animation:none; opacity:1; transform:none; }
  a.row, .btn, .pill, .chip{ transition:none; }
}

/* Home hero additions */
.hero-sub{ font-family:var(--serif); font-style:italic; color:var(--umber); font-size:clamp(1.15rem,3.2vw,1.6rem); line-height:1.4; margin-top:1.5rem; }
.path{ margin-top:1.5rem; color:var(--rose); font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; line-height:1.8; }

/* Websites and web apps cards */
.what{ margin-top:1.25rem; max-width:34rem; font-size:1.08rem; }
.cards{ display:grid; gap:1rem; margin-top:2rem; }
.card{ border:1px solid rgba(42,29,23,.16); border-radius:14px; padding:1.25rem 1.25rem 1.35rem; background:rgba(255,255,255,.4); }
.card-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem; }
.card h3{ font-family:var(--serif); font-weight:400; font-size:1.4rem; line-height:1.25; }
.badge{ font-size:.76rem; border-radius:999px; padding:.12rem .7rem; border:1px solid; white-space:nowrap; }
.badge-live{ color:var(--espresso); background:rgba(176,141,69,.22); border-color:var(--gold); }
.badge-development{ color:var(--rose); border-color:var(--rose); }
.badge-completed{ color:var(--taupe); border-color:rgba(122,101,85,.6); }
.role{ color:var(--rose); font-size:.82rem; font-weight:700; letter-spacing:.06em; margin-top:.5rem; }
.card p{ margin-top:.55rem; max-width:38rem; }
.card .detail{ color:var(--umber); font-size:.92rem; }
.stack{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.85rem; }
.stack span{ font-size:.78rem; border:1px solid rgba(122,101,85,.5); border-radius:999px; padding:.1rem .65rem; color:var(--umber); }
.cardlink{ display:inline-block; margin-top:1rem; text-decoration:underline; text-underline-offset:3px; font-weight:500; }
.stackline{ margin-top:1.25rem; }
.steps-inline{ list-style:none; margin-top:1.5rem; display:grid; gap:.6rem; max-width:38rem; }
.steps-inline li{ padding-left:1.1rem; border-left:2px solid var(--gold); }
@media (min-width:820px){ .cards{ grid-template-columns:1fr 1fr; } .card:first-child{ grid-column:1 / -1; } }

.cardlinks{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.venture{ border-top:1px solid rgba(42,29,23,.14); padding:1.1rem 0; }
.venture h3{ font-family:var(--serif); font-weight:400; font-size:1.3rem; }
.venture p{ margin-top:.3rem; max-width:36rem; color:var(--umber); }
.venture .cardlinks{ margin-top:.2rem; }
.services{ display:grid; gap:.9rem; margin-top:2rem; }
.service{ border:1px solid rgba(42,29,23,.16); border-radius:14px; padding:1.1rem 1.25rem; background:rgba(255,255,255,.4); }
.service h3{ font-family:var(--serif); font-weight:400; font-size:1.25rem; }
.service p{ margin-top:.35rem; color:var(--umber); }
.service .btn{ margin-top:.9rem; }
@media (min-width:820px){ .services{ grid-template-columns:1fr 1fr; } }
.choices{ display:grid; gap:.7rem; margin-top:1.5rem; }
.choice{ text-align:left; border:1px solid rgba(42,29,23,.2); border-radius:14px; padding:1rem 1.1rem; background:rgba(255,255,255,.4); font:inherit; color:var(--espresso); cursor:pointer; }
.choice strong{ display:block; font-family:var(--serif); font-weight:400; font-size:1.15rem; }
.choice span{ display:block; margin-top:.25rem; color:var(--umber); font-size:.92rem; }
.choice[aria-pressed="true"]{ border-color:var(--gold); background:rgba(176,141,69,.16); }
.formmsg{ margin-top:1rem; color:var(--rose); }
.fine{ color:var(--umber); font-size:.9rem; margin-top:.75rem; max-width:36rem; }