/* Selorme Media - Modern Clean One-Pager */
:root{
  --green-900:#0B2E22;
  --green-800:#103A2F;
  --green-700:#14463A;
  --green-600:#1B5A4A;
  --gold-500:#F2B705;
  --gold-400:#FFC72B;
  --gold-300:#FFD86B;
  --cream:#F9F7F3;
  --cream-2:#F1EDE8;
  --ink:#121414;
  --muted:#5A6661;
  --line:#E6E2DC;
  --radius-pill:999px;
  --radius-card:20px;
  --radius-lg:28px;
  --shadow:0 12px 40px rgba(11,46,34,0.12);
  --shadow-soft:0 8px 24px rgba(11,46,34,0.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0;
  font-family:"Instrument Sans", system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.container{width:min(1160px,92vw); margin:0 auto}
.kicker{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--green-600); display:flex; align-items:center; gap:10px;
}
.kicker::before{content:""; width:28px; height:2px; background:var(--gold-500); border-radius:99px; display:inline-block}
.kicker--light{color:var(--gold-300)}
.kicker--light::before{background:var(--gold-400)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(249,247,243,0.85);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(11,46,34,0.06);
  transition:background .25s, box-shadow .25s;
}
.site-header.is-scrolled{background:rgba(255,255,255,0.92); box-shadow:0 6px 24px rgba(11,46,34,0.07)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-logo{height:56px; width:auto; display:block; object-fit:contain; image-rendering:-webkit-optimize-contrast}
.brand-mark{width:44px; height:44px; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-soft)}
.brand-text{line-height:1}
.brand-name{font-family:"Fraunces", serif; font-weight:700; font-size:1.35rem; letter-spacing:-.02em; color:var(--ink); display:block}
.brand-sub{font-family:"Fraunces", serif; font-weight:600; font-size:1.15rem; color:var(--green-800); display:block; margin-top:-2px}
.nav{display:flex; align-items:center; gap:22px}
.nav-link{font-weight:500; font-size:.95rem; text-decoration:none; color:var(--ink); opacity:.86}
.nav-link:hover{opacity:1; color:var(--green-800)}
.nav-link--muted{opacity:.62}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-pill); font-weight:600; text-decoration:none; border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--green-900); color:#fff; box-shadow:0 6px 18px rgba(11,46,34,0.18)}
.btn--primary:hover{background:var(--green-800)}
.btn--ghost{background:#fff; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--green-900)}
.btn--sm{padding:9px 16px; font-size:.9rem}
.btn--lg{padding:13px 22px; font-size:1rem}
.btn--block{width:100%}
.menu-toggle{display:none; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line); background:#fff; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer}
.menu-toggle span{display:block; width:18px; height:2px; background:var(--ink); border-radius:99px; transition:transform .2s, opacity .2s}
@media (max-width:860px){
  .nav{
    position:fixed; inset:72px 0 auto 0; background:#fff; border-top:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding:18px 16px 22px; gap:10px;
    box-shadow:0 20px 40px rgba(0,0,0,.08); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.22s;
  }
  .nav.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav-link{padding:12px 14px; border-radius:12px}
  .nav-link:hover{background:var(--cream)}
  .menu-toggle{display:inline-flex}
}

/* Hero */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(800px 500px at 70% -10%, rgba(242,183,5,0.18), transparent 60%),
  radial-gradient(700px 400px at 10% 10%, rgba(11,46,34,0.06), transparent 60%),
  var(--cream);
  padding:28px 0 16px;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:28px 0 36px}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:7px 12px; font-size:.82rem; font-weight:600; color:var(--muted); box-shadow:var(--shadow-soft)
}
.eyebrow-dot{width:8px; height:8px; border-radius:50%; background:var(--green-600); box-shadow:0 0 0 6px rgba(27,90,74,0.12); display:inline-block}
.hero-title{
  font-family:"Fraunces", serif; font-weight:700; letter-spacing:-.04em; line-height:.95;
  font-size:clamp(2.6rem, 5.2vw, 4.2rem); margin:18px 0 14px;
}
.hero-title .accent{
  color:transparent;
  background:linear-gradient(90deg, var(--green-800) 0%, #2E7D62 55%, var(--gold-500) 100%);
  -webkit-background-clip:text; background-clip:text;
}
.hero-lead{color:var(--muted); font-size:1.08rem; max-width:54ch; margin:0 0 22px}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.hero-note{font-size:.82rem; color:var(--muted); font-weight:500}
.trust-row{display:flex; align-items:center; gap:18px; margin-top:26px; flex-wrap:wrap}
.trust-item strong{display:block; font-family:"Fraunces", serif; font-size:1.3rem; line-height:1}
.trust-item span{font-size:.82rem; color:var(--muted); font-weight:600}
.trust-divider{width:1px; height:36px; background:var(--line)}

.hero-visual{position:relative; display:grid; place-items:center; min-height:520px}
.phone-stack{position:relative; width:320px; height:460px}
.phone{
  position:absolute; border-radius:36px; border:8px solid #111; background:#0B2E22; box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.phone--back{width:240px; height:480px; left:10px; top:8px; opacity:.22; transform:rotate(-6deg); background:linear-gradient(180deg, #143D2F, #0B2E22)}
.phone--front{width:260px; height:500px; left:48px; top:0; overflow:hidden; background:linear-gradient(180deg, #0B2E22 0%, #143D2F 55%, #1B5A4A 100%)}
.phone-notch{width:110px; height:22px; background:#111; border-radius:0 0 14px 14px; margin:0 auto}
.phone-screen{padding:18px}
.phone-logo{display:flex; align-items:center; gap:12px; color:#fff; font-weight:700; font-size:1.1rem; line-height:1}
.phone-cards{margin-top:18px; display:grid; gap:10px}
.p-card{height:72px; border-radius:16px; background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.6); display:flex; align-items:center; gap:10px; padding:12px}
.p-card--accent{background:linear-gradient(135deg, var(--gold-400), var(--gold-300)); border-color:transparent}
.p-card--wide{height:96px}
.p-dot{width:10px; height:10px; border-radius:50%}
.float-card{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px 12px;
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow); font-size:.86rem;
}
.float-card strong{display:block; font-size:.88rem; line-height:1.1}
.float-card span{color:var(--muted); font-size:.78rem}
.float-card--top{top:18px; right:-6px}
.float-card--bottom{bottom:22px; left:-4px}
.float-icon{width:28px; height:28px; border-radius:10px; display:grid; place-items:center; background:var(--gold-400); font-weight:700}
.float-icon--green{background:var(--green-900); color:#fff}
.hero-blob{position:absolute; border-radius:50%; filter:blur(22px); opacity:.18}
.hero-blob--gold{width:380px; height:380px; background:var(--gold-400); right:-80px; top:-40px}
.hero-blob--green{width:420px; height:420px; background:#1B5A4A; left:-120px; bottom:-120px}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:18px}
  .hero-visual{min-height:500px; order:-1}
  .phone-stack{transform:scale(.95)}
}

/* Sections */
.section{padding:64px 0}
.section--about{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.about-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:32px; align-items:start}
.about-left h2{font-family:"Fraunces", serif; font-size:clamp(1.8rem, 3vw, 2.5rem); line-height:1.05; letter-spacing:-.03em; margin:12px 0 0}
.about-left h2 em{font-style:normal; background:linear-gradient(90deg, var(--gold-500), var(--green-700)); -webkit-background-clip:text; background-clip:text; color:transparent}
.about-right p{color:var(--muted); font-size:1.02rem; margin:0 0 12px}
.about-right p strong{color:var(--ink)}
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-pill); padding:9px 12px; font-weight:600; font-size:.86rem}
.pill i{width:22px; height:22px; border-radius:50%; background:var(--green-900); color:var(--gold-400); display:grid; place-items:center; font-style:normal; font-size:.7rem}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr} }

/* Mission */
.mission{background:var(--green-900); color:#fff; padding:54px 0; position:relative; overflow:hidden}
.mission::before{
  content:""; position:absolute; inset:auto -120px -120px auto; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(242,183,5,0.22), transparent 65%);
}
.mission-inner{position:relative; text-align:center; max-width:860px}
.mission-badge{display:inline-flex; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-pill); padding:6px 12px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--gold-300)}
.mission blockquote{font-family:"Fraunces", serif; font-size:clamp(1.6rem, 3.2vw, 2.45rem); line-height:1.1; letter-spacing:-.03em; margin:16px 0 10px}
.mission blockquote span{color:var(--gold-400)}
.mission p{color:rgba(255,255,255,.78); margin:0 auto; max-width:58ch}

/* Services */
.section--services{background:var(--cream)}
.section-head h2{font-family:"Fraunces", serif; font-size:clamp(1.8rem, 3vw, 2.4rem); letter-spacing:-.03em; margin:10px 0 6px}
.section-head p{color:var(--muted); max-width:60ch; margin:0}
.section-head--center{text-align:center}
.section-head--center p{margin:0 auto}
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px}
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:18px 18px 16px;
  box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:10px; min-height:200px;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.svc-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(11,46,34,0.12)}
.svc-card--featured{background:linear-gradient(180deg, #fff 60%, #FFFBEB)}
.svc-card--dark{background:var(--green-900); color:#fff; border-color:rgba(255,255,255,.12)}
.svc-card--dark p{color:rgba(255,255,255,.72)}
.svc-card--dark .svc-link{color:var(--gold-300)}
.svc-icon{width:44px; height:44px; border-radius:12px; background:var(--cream); border:1px solid var(--line); display:grid; place-items:center}
.svc-icon--light{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16)}
.svc-card h3{font-size:1.02rem; line-height:1.2; margin:2px 0 0}
.svc-card p{color:var(--muted); font-size:.94rem; margin:0; flex:1}
.svc-link{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-700)}
@media (max-width:980px){ .services-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .services-grid{grid-template-columns:1fr} }

/* Process */
.section--process{background:#fff; border-top:1px solid var(--line)}
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px}
.process-step{background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-card); padding:20px; position:relative}
.step-num{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--green-900); color:var(--gold-400); font-weight:700; font-size:.86rem}
.process-step h3{margin:6px 0 6px; font-size:1.05rem}
.process-step p{color:var(--muted); margin:0; font-size:.94rem}
@media (max-width:860px){ .process-grid{grid-template-columns:1fr} }

/* Contact */
.section--contact{background:linear-gradient(180deg, var(--green-900) 0%, #0F3A2E 100%); color:#fff}
.contact-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:28px; align-items:start}
.contact-copy h2{font-family:"Fraunces", serif; font-size:clamp(1.9rem, 3vw, 2.6rem); line-height:.95; letter-spacing:-.03em; margin:10px 0 10px}
.contact-copy p{color:rgba(255,255,255,.78); margin:0 0 14px}
.contact-points{list-style:none; padding:0; margin:0 0 18px; display:grid; gap:8px}
.contact-points li{display:flex; align-items:center; gap:10px; font-weight:600; font-size:.95rem}
.cp-icon{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.12); color:var(--gold-300); font-size:.75rem}
.contact-meta{display:flex; gap:18px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); padding-top:16px}
.meta-label{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62); display:block; font-weight:700}
.meta-item a{color:var(--gold-300); text-decoration:none; font-weight:700}
.meta-item strong{color:#fff}
.contact-form{
  background:#fff; color:var(--ink); border-radius:var(--radius-lg); padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.2);
}
.contact-form label{display:grid; gap:6px; font-weight:600; font-size:.88rem; margin-bottom:12px}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1.5px solid var(--line); background:#fff; font:inherit; font-weight:500; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{outline:none; border-color:var(--green-700); box-shadow:0 0 0 4px rgba(20,70,58,0.12)}
.contact-form textarea{resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hp{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important}
.form-foot{font-size:.78rem; color:var(--muted); margin:10px 0 0; text-align:center}
.form-toast{margin-top:10px; border-radius:12px; padding:10px 12px; font-weight:600; font-size:.9rem; display:none}
.form-toast.is-show{display:block}
.form-toast--success{background:#ECFDF3; border:1px solid #A6F4C5; color:#065F46}
.form-toast--error{background:#FEF2F2; border:1px solid #FECACA; color:#991B1B}
@media (max-width:960px){ .contact-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} }

/* Footer — aligned */
.site-footer{background:#0A1F17; color:rgba(255,255,255,.78); border-top:1px solid rgba(255,255,255,.08); padding:22px 0}
.footer-inner{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center}
.footer-brand{display:flex; align-items:center; gap:12px; line-height:1}
.footer-brand span{display:flex; flex-direction:column; justify-content:center; gap:2px}
.footer-brand br{display:none}
.footer-logo{width:36px; height:36px; display:block; flex-shrink:0; object-fit:contain; border-radius:8px; background:transparent; align-self:center}
.footer-brand strong{color:#fff; font-size:1rem; line-height:1.1; display:block}
.footer-brand small{color:rgba(255,255,255,.62); font-size:.82rem; line-height:1.1; display:block}
.footer-links{display:flex; gap:20px; justify-content:center; align-items:center}
.footer-links a{color:rgba(255,255,255,.78); text-decoration:none; font-weight:600; font-size:.9rem}
.footer-links a:hover{color:#fff}
.footer-copy{text-align:right; opacity:.9; display:flex; align-items:center; justify-content:flex-end}
@media (max-width:860px){
  .footer-inner{grid-template-columns:1fr; text-align:center}
  .footer-brand{justify-content:center}
  .footer-links{justify-content:center}
  .footer-copy{text-align:center; justify-content:center}
}

/* Utilities */
.accent{}

/* Animations */
@media (prefers-reduced-motion:no-preference){
  .svc-card, .process-step, .contact-form{animation:rise .6s ease both}
  .svc-card:nth-child(2){animation-delay:.05s} .svc-card:nth-child(3){animation-delay:.1s}
  @keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
}