/* Konchi landing page — official brand colors and photography from supplied references. */
:root {
  --brand: #527f3a;
  --brand-bright: #78a825;
  --brand-dark: #335825;
  --ink: #263127;
  --paper: #fafbf7;
  --muted: #687468;
  --line: #e1e8da;
}
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#dce9cb;color:var(--ink)}
.site-shell{
  width:min(100% - 104px,1300px);
  min-height:100svh;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
}
.site-header{
  min-height:116px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo-link{display:inline-flex;align-items:center;flex-shrink:0;outline-offset:8px}
.logo-link:focus-visible{outline:2px solid var(--brand-bright);border-radius:3px}
.site-logo{width:184px;height:auto;display:block}
.site-address{color:#59724e;font-size:14px;letter-spacing:.01em;font-weight:550}
.site-address span{margin-left:4px;font-size:16px}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  flex:1;
  gap:clamp(34px,5.2vw,88px);
  padding-block:20px 46px;
}
.hero-copy{min-width:0;padding-block:25px 18px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 clamp(24px,3.4vw,44px);
  color:var(--brand);
  font-size:12px;
  font-weight:750;
  letter-spacing:.21em;
}
.status-dot{
  width:9px;height:9px;flex-shrink:0;
  border-radius:50%;background:var(--brand-bright);
  box-shadow:0 0 0 6px #e8f0df;
}
h1{
  margin:0;
  font-size:clamp(59px,6.1vw,90px);
  font-weight:760;
  line-height:1.05;
  letter-spacing:-.076em;
}
.headline-row{display:block;white-space:nowrap}
.headline-green{color:var(--brand)}
.headline-dot{color:var(--brand-bright)}
.lead{
  margin:33px 0 8px;
  font-size:clamp(22px,2vw,28px);
  line-height:1.35;
  font-weight:650;
  letter-spacing:-.035em;
  color:var(--brand-dark);
}
.description{
  max-width:455px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}
.service-pill{
  width:fit-content;
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:38px;
  padding:8px 20px 8px 9px;
  border:1px solid #dce8d4;
  border-radius:100px;
  background:#eff4e9;
  color:var(--brand-dark);
  font-size:13px;
  font-weight:640;
}
.service-pill img{width:37px;height:37px;display:block;object-fit:contain;flex-shrink:0}
.hero-card{
  margin:0;
  min-width:0;
  position:relative;
  overflow:hidden;
  border-radius:21px;
  border:1px solid #e8e9dc;
  background:#f4f1e9;
  box-shadow:0 18px 55px rgba(57,63,42,.09);
}
.photo-wrap{overflow:hidden;aspect-ratio:1.1/1;background:#e8e1d4}
.photo-wrap picture{display:block;width:100%;height:100%}
.hero-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center 49%}
.photo-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:105px;
  padding:22px 30px;
  background:#fffdf9;
  border-top:1px solid #eae9e0;
}
.caption-copy{display:flex;flex-direction:column;gap:7px}
.caption-kicker{color:#7a8c70;font-size:10px;font-weight:750;letter-spacing:.2em}
.caption-title{color:var(--brand-dark);font-size:19px;font-weight:700;letter-spacing:-.035em}
.caption-number{
  display:grid;place-items:center;flex-shrink:0;
  width:37px;height:37px;border-radius:50%;
  background:#e9f1e3;color:var(--brand);font-size:12px;font-weight:750;
}
.site-footer{
  min-height:90px;
  padding-block:26px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#748573;
  font-size:12px;
}
@media(max-width:1120px){
  .site-shell{width:min(100% - 72px,1020px)}
  .hero{gap:34px}
  h1{font-size:clamp(54px,6.2vw,73px)}
  .description{font-size:16px}
  .photo-caption{padding:20px 22px;min-height:93px}
  .caption-title{font-size:17px}
}
@media(max-width:790px){
  .site-shell{width:min(100% - 50px,640px)}
  .site-header{min-height:90px}
  .site-logo{width:160px}
  .site-address{font-size:13px}
  .hero{grid-template-columns:1fr;gap:38px;padding-block:34px 42px}
  .hero-copy{padding-block:0}
  .eyebrow{margin-bottom:30px}
  h1{font-size:clamp(60px,10vw,84px)}
  .lead{margin-top:27px}
  .description{max-width:540px}
  .service-pill{margin-top:30px}
  .photo-wrap{aspect-ratio:1.23/1}
  .photo-caption{min-height:92px}
}
@media(max-width:490px){
  .site-shell{width:calc(100% - 38px)}
  .site-logo{width:139px}
  .site-header{min-height:84px}
  .hero{padding-top:26px;gap:33px}
  h1{font-size:clamp(46px,12vw,62px)}
  .lead{font-size:21px}
  .description{font-size:15.5px;line-height:1.75}
  .hero-card{border-radius:15px}
  .photo-wrap{aspect-ratio:1.12/1}
  .photo-caption{padding:17px 19px;min-height:83px}
  .caption-title{font-size:16px}
  .caption-number{width:33px;height:33px;font-size:20px}
  .site-footer{align-items:flex-start;flex-direction:column;gap:8px;font-size:11px}
}
@media(prefers-reduced-motion:no-preference){
  .hero-copy{animation:arrive .65s ease-out both}
  .hero-card{animation:arrive .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:.08s}
  @keyframes arrive{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
}