/* ===========================================================
   BimjuX Technology — styles.css
   Theme: "Air · Water · Forest" — calm, earthy, airy.
   Fonts: Fraunces (display) + Schibsted Grotesk (body)
   =========================================================== */

:root{
  /* surfaces */
  --paper:      #f4f6ef;   /* misty off-white            */
  --paper-2:    #ebf0e7;   /* slightly deeper mist       */
  --glass:      rgba(255,255,255,.55);
  --glass-line: rgba(255,255,255,.7);

  /* nature palette */
  --ink:        #1c2a23;   /* deep forest ink (text)     */
  --ink-soft:   #41514a;
  --muted:      #6c7d74;
  --forest:     #2f5e4f;   /* primary deep green         */
  --forest-deep:#214339;
  --moss:       #5f8a6f;
  --water:      #5fa6a0;    /* aqua                        */
  --water-soft: #d2e7e3;
  --sky:        #cbe0ec;    /* airy blue                  */
  --sand:       #e4d4ae;    /* earth                       */
  --clay:       #c0875d;    /* warm accent (sparingly)    */

  --line:   rgba(31,42,35,.10);
  --line-2: rgba(31,42,35,.16);

  --radius:   20px;
  --radius-s: 13px;
  --max:      1160px;
  --ease:     cubic-bezier(.22,.61,.36,1);
  --shadow:   0 22px 60px -28px rgba(33,67,57,.40);
  --shadow-s: 0 10px 30px -18px rgba(33,67,57,.35);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  font-family:"Schibsted Grotesk", system-ui, sans-serif;
  font-size:17px; line-height:1.65; color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* layered, airy atmosphere */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 82% -10%, var(--sky), transparent 60%),
    radial-gradient(900px 700px at -5% 8%, var(--water-soft), transparent 55%),
    radial-gradient(800px 700px at 50% 115%, #e7efdd, transparent 60%);
  opacity:.85;
}
/* faint organic grain for warmth */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:26px }
.eyebrow{
  font-family:"Schibsted Grotesk"; font-weight:600; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--water);
  display:inline-flex; align-items:center; gap:11px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--water) }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:"Schibsted Grotesk"; font-weight:600; font-size:.97rem;
  padding:13px 24px; border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--forest-deep);
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn:hover{ transform:translateY(-2px); border-color:var(--forest) }
.btn.solid{
  background:var(--forest); color:#f4f6ef; border-color:var(--forest);
  box-shadow:var(--shadow-s);
}
.btn.solid:hover{ background:var(--forest-deep); box-shadow:0 16px 40px -16px rgba(47,94,79,.6) }

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px) saturate(1.2);
  background:rgba(244,246,239,.6);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{ border-color:var(--line); background:rgba(244,246,239,.85) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px }
.brand{ display:flex; align-items:center; gap:11px }
.brand img, .brand .logo{ width:34px; height:34px; flex:0 0 auto }
.brand .name{ font-family:"Fraunces", serif; font-weight:600; font-size:1.22rem; letter-spacing:-.01em; color:var(--ink) }
.brand .name b{ color:var(--water); font-weight:600 }
.nav-links{ display:flex; gap:34px; align-items:center }
.nav-links a{ color:var(--ink-soft); font-size:.96rem; transition:color .2s }
.nav-links a:hover{ color:var(--forest) }
.nav .btn{ padding:10px 20px }

/* ---------------- hero ---------------- */
.hero{ position:relative; padding:104px 0 70px }
.hero h1{
  font-family:"Fraunces", serif; font-weight:600;
  font-size:clamp(2.7rem,6.4vw,5.1rem); line-height:1.02;
  letter-spacing:-.02em; max-width:15ch; color:var(--ink); margin-top:24px;
}
.hero h1 em{ font-style:italic; color:var(--forest); }
.hero h1 .water{ color:var(--water); font-style:normal }
.lede{ margin-top:26px; max-width:52ch; color:var(--ink-soft); font-size:1.18rem }
.hero-cta{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.free-pill{
  margin-top:30px; display:inline-flex; align-items:center; gap:12px;
  padding:11px 18px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(8px); box-shadow:var(--shadow-s); font-size:.94rem; color:var(--ink-soft);
}
.free-pill .tag{ font-weight:700; color:var(--forest); letter-spacing:.04em }
.free-pill b{ color:var(--forest) }

/* floating organic blobs (air) */
.blob{ position:absolute; border-radius:50%; filter:blur(8px); opacity:.5; z-index:-1; pointer-events:none }
.blob.b1{ width:240px; height:240px; top:60px; right:6%; background:radial-gradient(circle at 30% 30%, #bfe0d8, transparent 70%); animation:float 13s var(--ease) infinite }
.blob.b2{ width:170px; height:170px; top:280px; right:24%; background:radial-gradient(circle at 30% 30%, var(--sky), transparent 70%); animation:float 17s var(--ease) infinite reverse }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-26px) } }

/* trust strip */
.trust{ margin-top:54px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; color:var(--muted); font-size:.9rem }
.trust .stars{ color:var(--clay); letter-spacing:2px }
.trust .divider{ width:1px; height:18px; background:var(--line-2) }

/* ---------------- sections ---------------- */
section{ position:relative; padding:90px 0 }
.sec-head{ max-width:60ch; margin-bottom:50px }
.sec-head h2{
  font-family:"Fraunces", serif; font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.8vw,2.9rem); line-height:1.08; margin-top:14px; color:var(--ink);
}
.sec-head p{ color:var(--ink-soft); margin-top:14px; max-width:50ch }

/* scroll reveal */
.io{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.io.in{ opacity:1; transform:none }

/* ---------------- services ---------------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px }
.card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(10px); padding:32px 28px;
  box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow); border-color:#fff }
.card .ic{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--water-soft), #fff); color:var(--forest);
  margin-bottom:18px; font-size:1.25rem;
}
.card h3{ font-family:"Fraunces", serif; font-weight:600; font-size:1.3rem; margin-bottom:9px; letter-spacing:-.01em }
.card p{ color:var(--ink-soft); font-size:.98rem }

/* ---------------- process ---------------- */
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  border-radius:var(--radius); overflow:hidden;
  background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(10px);
}
.step{ padding:36px 30px; border-right:1px solid var(--line) }
.step:last-child{ border-right:none }
.step .k{ font-family:"Fraunces", serif; font-weight:600; font-size:2.3rem; line-height:1; color:var(--water) }
.step:first-child .k{ color:var(--clay) }
.step h4{ font-family:"Fraunces", serif; font-weight:600; font-size:1.12rem; margin:14px 0 8px }
.step p{ color:var(--ink-soft); font-size:.95rem }

/* ---------------- testimonials ---------------- */
.t-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px }
.quote{
  border-radius:var(--radius); padding:30px 28px;
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(10px); box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; gap:18px;
}
.quote .stars{ color:var(--clay); letter-spacing:2px; font-size:.95rem }
.quote p{ font-size:1.04rem; color:var(--ink); line-height:1.55 }
.quote .who{ display:flex; align-items:center; gap:12px; margin-top:auto }
.quote .av{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; color:#fff;
  font-family:"Schibsted Grotesk"; font-size:1rem;
}
.quote .who b{ display:block; font-weight:600; font-size:.96rem; color:var(--ink) }
.quote .who span{ font-size:.84rem; color:var(--muted) }
.av-water{ background:var(--water) } .av-forest{ background:var(--forest) }
.av-clay{ background:var(--clay) } .av-moss{ background:var(--moss) }
.opt{ color:var(--muted); font-weight:400 }

/* ---------------- about ---------------- */
.about{ display:grid; grid-template-columns:1.3fr .9fr; gap:48px; align-items:center }
.blurb h2{
  font-family:"Fraunces", serif; font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.7vw,2.7rem); line-height:1.07; margin:14px 0 22px;
}
.blurb p{ color:var(--ink-soft); margin-bottom:16px }
.blurb p strong{ color:var(--ink); font-weight:600 }
.profile{ border-radius:var(--radius); padding:34px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(10px); box-shadow:var(--shadow-s) }
.profile .label{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--water); font-weight:600 }
.about-meta{ display:flex; flex-direction:column; margin-top:12px }
.about-meta .row{ display:flex; gap:12px; align-items:baseline; border-top:1px solid var(--line); padding:14px 0 }
.about-meta .row b{ margin-left:auto; font-weight:600 }
.about-meta .row span{ color:var(--muted) }

/* ---------------- contact / form ---------------- */
.contact .wrap{ display:grid; grid-template-columns:.92fr 1.08fr; gap:50px; align-items:start }
.contact-aside h2{ font-family:"Fraunces", serif; font-weight:600; letter-spacing:-.015em; font-size:clamp(2rem,4.2vw,3rem); line-height:1.05 }
.contact-aside p{ color:var(--ink-soft); margin-top:18px; max-width:42ch }
.contact-list{ margin-top:30px; display:flex; flex-direction:column; gap:14px }
.contact-list a, .contact-list div.item{ display:flex; gap:13px; align-items:center; color:var(--ink) }
.contact-list .pin{ width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:11px; background:var(--water-soft); color:var(--forest) }
.contact-list small{ display:block; color:var(--muted); font-size:.8rem }

.form-card{ border-radius:var(--radius); padding:34px; background:rgba(255,255,255,.72); border:1px solid var(--glass-line); backdrop-filter:blur(12px); box-shadow:var(--shadow) }
.field{ margin-bottom:17px }
.field label{ display:block; font-size:.85rem; color:var(--ink-soft); margin-bottom:7px; font-weight:500 }
.field label .req{ color:var(--clay) }
.field input, .field select, .field textarea{
  width:100%; background:#fff; color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--radius-s); padding:13px 14px;
  font-family:inherit; font-size:.98rem; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:96px }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--water); box-shadow:0 0 0 3px rgba(95,166,160,.18);
}
.field select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236c7d74' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-card button[type=submit]{ width:100%; justify-content:center; margin-top:6px }
.form-note{ margin-top:13px; font-size:.81rem; color:var(--muted); text-align:center }
.form-msg{ display:none; margin-top:16px; padding:13px 16px; border-radius:var(--radius-s); font-size:.92rem }
.form-msg.ok{ display:block; background:rgba(95,138,111,.16); border:1px solid var(--moss); color:var(--forest-deep) }
.form-msg.err{ display:block; background:rgba(192,90,90,.12); border:1px solid #c97a7a; color:#8a3030 }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#c97a7a; box-shadow:0 0 0 3px rgba(201,122,122,.15) }

/* honeypot — visually hidden, off-screen, not display:none (bots skip display:none) */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0 }

/* ---------------- footer ---------------- */
footer{ border-top:1px solid var(--line); padding:42px 0; margin-top:30px }
.foot{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:.88rem }
.foot .brand .name{ font-size:1.02rem }

/* ---------------- section wave dividers ---------------- */
.wave{ display:block; width:100%; height:auto; line-height:0 }

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .nav-links{ display:none }
  .about, .contact .wrap{ grid-template-columns:1fr }
  .step{ border-right:none; border-bottom:1px solid var(--line) }
  .step:last-child{ border-bottom:none }
}
@media (max-width:520px){
  body{ font-size:16px }
  .two{ grid-template-columns:1fr }
  .hero{ padding-top:72px }
  .trust{ gap:14px }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto }
  .io,.blob{ opacity:1!important; transform:none!important }
}