/* ---------- Brand tokens (sampled from the logo) ---------- */
:root{
  --paper:#FBF8F5;   /* page background, matches logo canvas */
  --bean:#EFE6DC;    /* soft section tint, the bean's beige */
  --forest:#2F3E38;  /* "steele" wordmark green: headings, buttons */
  --sage:#5E6B62;    /* calculator green: body text, secondary */
  --clay:#B08572;    /* "Counting Beans" rose: accents, links */
  --clay-dark:#8F6757;/* accent text on light backgrounds (AA contrast) */
  --line:#DDD0C4;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0}

html{scroll-behavior:smooth;scroll-padding-top:5rem}

body{background:var(--paper);color:var(--sage);font:400 1.0625rem/1.7 var(--sans)}

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

a{color:var(--clay-dark)}
:focus-visible{outline:2px solid var(--clay-dark);outline-offset:3px}

.wrap{
  margin-inline:clamp(1.25rem,6vw,7rem);
}

h1,h2,h3{font-family:var(--serif);color:var(--forest);font-weight:400;line-height:1.1}

h2{font-size:clamp(2rem,4vw,2.75rem);margin-bottom:1.25rem}

h3{font-size:1.5rem;line-height:1.25;margin-bottom:.5rem}

p+p{margin-top:1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; 
  padding:.85rem 1.75rem;
  border-radius: 0.5rem;
  border:1.5px solid var(--forest);
  background:var(--forest);
  color:var(--paper);
  font:500 .95rem var(--sans);
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s,color .2s
}

.btn:hover{background:var(--clay-dark);border-color:var(--clay-dark)}
.btn.ghost{background:transparent;color:var(--forest)}
.btn.ghost:hover{background:var(--forest);color:var(--paper)}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(251,248,245,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)
}

header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.5rem}

.logo img{
  height:64px;
  width:auto;
  mix-blend-mode:multiply
} /* multiply hides the JPEG's off-white canvas */

nav{display:flex;align-items:center;gap:1.75rem}

nav a:not(.btn){color:var(--forest);text-decoration:none;font-weight:500;font-size:.95rem}

nav a:not(.btn):hover{color:var(--clay-dark)}

nav .btn{padding:.6rem 1.25rem;white-space:nowrap}
/* ---------- Hero ---------- */
.hero{
  padding:clamp(2.5rem,8vw,5rem) 0;
}
.hero h1{
  font-size:clamp(2.5rem,9vw,5.75rem);
  letter-spacing:-.02em;
  max-width:none;
}
.hero h1 span{
    display:block
}
.hero h1 span:last-child{color:var(--clay-dark);font-style:italic}
.hero p{
  max-width:34rem;
  margin:1.5rem 0 2rem;
  font-size:clamp(1.05rem,2.5vw,1.2rem);
}.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- Sections ---------- */
section{padding:clamp(3.5rem,8vw,6rem) 0}

.tint{background:var(--bean)}

.about .wrap{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start
}

.portrait{
  aspect-ratio:4/5;
  border-radius:200px 200px 12px 12px;
  background:var(--bean) center/cover;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--clay-dark);
  font-size:.9rem;
  text-align:center;
  padding:1rem
}

.portrait{overflow:hidden;padding:0}

.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}

.about .cred{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.95rem}

.services .intro{
  max-width:45rem;
  margin-bottom:2.5rem}

.services {
    max-width: 85rem;
    margin-left: auto; 
    margin-right: auto;
}

.service{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:1rem 3rem;
  padding:2rem 0;
  border-top:1px solid rgba(47,62,56,.2)
}

.service:last-child{border-bottom:1px solid rgba(47,62,56,.2)}
.service ul{margin:.75rem 0 0;padding-left:1.1rem}
.service li::marker{color:var(--clay)}

/* ---------- Contact ---------- */
.contact .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem)}
form{display:grid;gap:1.1rem}
label{display:grid;gap:.35rem;font-weight:500;color:var(--forest);font-size:.95rem}
input,textarea,select{font:inherit;color:var(--forest);padding:.8rem 1rem;background:#fff;border:1.5px solid var(--line);border-radius:10px;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(176,133,114,.3)}
textarea{min-height:140px;resize:vertical}
.hp{position:absolute;left:-9999px} /* honeypot for spam bots */
form .btn{justify-self:start}
.direct{margin-top:1.5rem;font-size:.95rem}

footer{padding:2rem 0;border-top:1px solid var(--line);font-size:.9rem;text-align:center}


/* ---------- Animations ---------- */
@keyframes rise{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

/* Hero entrance, staggered */
.hero h1 span,
.hero p,
.hero .actions{
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1 span:nth-child(1){animation-delay:.1s}
.hero h1 span:nth-child(2){animation-delay:.25s}
.hero h1 span:nth-child(3){animation-delay:.4s}
.hero p{animation-delay:.6s}
.hero .actions{animation-delay:.75s}

/* Scroll reveal (class added by the script below) */
.js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);
}
.js .reveal.in{opacity:1;transform:none}

/* Buttons: gentle lift */
.btn{transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(47,62,56,.18)}
.btn:active{transform:translateY(0);box-shadow:none}

/* Nav links: underline grows from the left */
nav a:not(.btn){position:relative}
nav a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:1.5px;
  background:var(--clay-dark);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
nav a:not(.btn):hover::after{transform:scaleX(1)}

/* Header gains a soft shadow once you scroll */
header{transition:box-shadow .3s ease}
header.scrolled{box-shadow:0 4px 20px rgba(47,62,56,.08)}

/* Hover effects only on devices that actually hover (not phones) */
@media(hover:hover){
  .service{transition:padding-left .35s ease, background .35s ease}
  .service:hover{padding-left:1rem;background:rgba(239,230,220,.5)}

  .portrait img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .portrait:hover img{transform:scale(1.04)}
}

@media(max-width:760px){
  nav a:not(.btn){display:none}
  .about .wrap,.contact .wrap,.service{grid-template-columns:1fr}
  .portrait{max-width:320px}

  .logo img{height:48px}
  header .wrap{padding-block:.5rem}
  .hero .actions .btn{flex:1 1 100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}