/* ===== Home — Topographic ================================== */
/* Bold. Texture-led. The contour map IS the hero.            */

/* --- HERO --- */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding:120px 40px 80px;
  background-color:var(--forest); position:relative; overflow:hidden;
}
.hero .topo-bg{
  position:absolute; inset:0;
  background-image:url('/media/topo-tan.svg');
  background-size:1600px auto; background-position:center; opacity:.18;
}
.hero .photo-ring{
  width:380px; height:380px; border-radius:50%;
  position:relative; z-index:2; overflow:hidden;
  border:2px solid rgba(185,140,90,.4);
  box-shadow:0 0 0 12px rgba(185,140,90,.08), 0 0 0 24px rgba(185,140,90,.04), 0 40px 80px rgba(0,0,0,.5);
  margin-bottom:60px;
}
.hero .photo-ring img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero .kicker{
  font-size:13px; letter-spacing:.38em; text-transform:uppercase;
  color:var(--amber); margin-bottom:20px; position:relative; z-index:2;
}
.hero h1{
  font-size:clamp(46px,7.5vw,100px); color:var(--sand);
  position:relative; z-index:2; margin-bottom:22px; letter-spacing:-.01em;
}
.hero .sub{
  font-size:20px; color:rgba(240,232,216,.7); max-width:34em; margin:0 auto;
  position:relative; z-index:2;
}
.hero .scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;
  color:rgba(185,140,90,.7); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
}
.hero .scroll-cue::after{ content:""; width:1px; height:40px; background:rgba(185,140,90,.4); }

/* --- APPS SECTION --- */
.apps{ background:var(--forest-2); padding:100px 0 80px; position:relative; overflow:hidden; }
.apps .topo-app{
  position:absolute; inset:0;
  background-image:url('/media/topo-green.svg');
  background-size:1400px auto; background-position:center; opacity:.15;
}
.apps .sec-head{ text-align:center; margin-bottom:70px; position:relative; z-index:2; }
.apps .sec-head .eyebrow{ color:var(--amber); margin-bottom:16px; }
.apps .sec-head h2{ font-size:clamp(30px,4vw,52px); color:var(--sand); }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; position:relative; z-index:2; }
.app{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:38px 38px 36px;
  display:flex; flex-direction:column; gap:26px; box-shadow:0 2px 16px rgba(0,0,0,.13); }
.app .row{ display:flex; gap:28px; align-items:flex-start; }
.app .meta{ flex:1; }
.app-icon{ width:54px; height:54px; border-radius:14px; overflow:hidden; flex:none;
  box-shadow:0 4px 14px rgba(0,0,0,.18); margin-bottom:16px; }
.app-icon img{ width:100%; height:100%; display:block; object-fit:cover; }
.app h3{ font-size:32px; margin-bottom:8px; color:var(--ink); }
.app .lede{ font-size:18px; color:var(--ink); margin:0 0 10px; font-weight:400; }
.app p{ font-size:16px; color:var(--ink-soft); margin:0; }
.phone{ width:140px; flex:none; border-radius:24px; padding:8px;
  background:linear-gradient(160deg,#2c2f2b,#43483f); box-shadow:0 16px 30px rgba(20,28,18,.30); }
.phone .scr{ border-radius:17px; overflow:hidden; aspect-ratio:9/19.5; }
.phone .scr img{ width:100%; height:100%; object-fit:cover; display:block; }
.app.call .phone .scr{ background:linear-gradient(160deg,#3a4f32,#1e2b1a); }
.app.weight .phone .scr{ background:linear-gradient(160deg,#4a3520,#2a1f12); }
.feat{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.feat li{ display:flex; gap:11px; font-size:15.5px; color:var(--ink); align-items:baseline; }
.feat li::before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; transform:translateY(2px); }
.app.call .feat li::before{ background:var(--moss); }
.app.weight .feat li::before{ background:var(--clay); }
.app-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-size:15px; color:var(--moss); letter-spacing:.02em;
  border-bottom:1px solid rgba(70,96,63,.3); padding-bottom:2px;
  transition:border-color .15s, color .15s; align-self:flex-start;
}
.app-link:hover{ color:#2c4128; border-color:var(--moss); }
.app.weight .app-link{ color:var(--clay); border-color:rgba(194,86,42,.3); }
.app.weight .app-link:hover{ color:#a03e18; border-color:var(--clay); }

/* --- CONTACT --- */
.contact{ background:var(--sand); padding:90px 0 80px; position:relative; overflow:hidden; }
.contact .topo-c{
  position:absolute; inset:0;
  background-image:url('/media/contours.png');
  background-size:900px auto; background-position:left center; opacity:.45;
  -webkit-mask-image:linear-gradient(90deg,#000 0 55%, transparent 85%);
          mask-image:linear-gradient(90deg,#000 0 55%, transparent 85%);
}
.contact .wrap{ position:relative; display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:start; }
.contact h2{ font-size:clamp(28px,3.2vw,44px); color:var(--forest); margin-bottom:16px; }
.contact .intro-p{ font-size:18px; color:var(--ink-soft); max-width:28em; margin:0 0 24px; line-height:1.65; }
.contact .email-also{ font-size:14px; color:var(--ink-soft); }
.contact .email-also a{ color:var(--moss); text-decoration:underline; text-underline-offset:3px; }
/* form */
.contact-form{ display:flex; flex-direction:column; gap:16px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family:var(--np); font-size:16px; font-weight:300;
  padding:13px 16px; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); outline:none;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--moss); box-shadow:0 0 0 3px rgba(70,96,63,.12);
}
.field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235d6661' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px; cursor:pointer;
}
.submit-btn{
  align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border:none; border-radius:11px; cursor:pointer;
  background:var(--forest); color:var(--sand);
  font-family:var(--np); font-size:16px; font-weight:400; letter-spacing:.04em;
  transition:transform .16s, box-shadow .16s;
}
.submit-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,43,26,.25); }
.submit-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; flex:none; }

@media(max-width:860px){
  .contact .wrap{ grid-template-columns:1fr; gap:40px; }
  .form-row-2{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }
  .app .row{ flex-direction:column; align-items:center; text-align:center; }
  .app .meta{ text-align:center; }
  .feat{ text-align:left; }
  .hero .photo-ring{ width:260px; height:260px; }
}