/* ============================================================
   OTF Advisors — otfadvisors.com static rebuild
   Faithful port of the Wix design to hand-written HTML/CSS
   ============================================================ */
:root{
  --teal:#49A593;        /* brand teal (buttons, accents, bands) */
  --teal-dark:#3E8E7E;
  --green-chat:#3E8E41;  /* "Let's Chat" button green */
  --dark:#262626;        /* dark strips / footer */
  --grey-bg:#ECECEC;     /* light grey section background */
  --nav-bg:#F6F6F6;      /* header background (matches logo jpg) */
  --ink:#2F2F2F;
  --body:#4A4A4A;
  --font-head:'Jost',Futura,'Trebuchet MS',sans-serif;      /* chunky geometric headings */
  --font-thin:'Josefin Sans',Futura,sans-serif;             /* airy letterspaced headings */
  --font-body:'Mulish',Avenir,'Segoe UI',sans-serif;        /* body copy */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--body);background:#fff;line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:100;background:var(--nav-bg);box-shadow:0 1px 0 rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:96px}
.nav .logo img{height:64px;width:auto}
.nav ul{display:flex;list-style:none;gap:34px;align-items:center}
.nav ul a{font-family:var(--font-body);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#575757;transition:color .2s}
.nav ul a:hover,.nav ul a.active{color:var(--teal)}
.nav .burger{display:none;background:none;border:0;font-size:26px;color:#333;cursor:pointer}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:calc(100vh - 96px);min-height:640px;display:flex;align-items:center;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.hero .inner{position:relative;z-index:2;width:100%}
.hero h1{font-family:var(--font-thin);font-weight:600;color:#fff;text-transform:uppercase;
  font-size:clamp(2.4rem,6.2vw,5.4rem);line-height:1.18;letter-spacing:.28em;max-width:20ch;
  text-shadow:0 2px 30px rgba(0,0,0,.25)}

/* ---------- generic sections ---------- */
section{padding:90px 0}
.center{text-align:center}
h2.thin{font-family:var(--font-thin);font-weight:300;color:var(--ink);font-size:clamp(2rem,4vw,3.1rem);
  letter-spacing:.28em;text-transform:capitalize;margin-bottom:38px}
h2.thin.upper{text-transform:uppercase}
h2.bold,h3.bold{font-family:var(--font-head);font-weight:600;color:var(--ink)}
.lead{max-width:640px;margin:0 auto 8px;text-align:center}
.narrow{max-width:680px;margin:0 auto}

/* ---------- one-stop-shop services grid (home) ---------- */
.oss{background:var(--grey-bg)}
.oss .sub{font-family:var(--font-thin);letter-spacing:.18em;font-size:1.25rem;color:var(--ink);margin-top:-26px;margin-bottom:60px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:70px 60px;max-width:1150px;margin:0 auto}
.svc{text-align:center}
.svc .icon{height:44px;margin-bottom:20px;display:flex;justify-content:center;align-items:flex-end;color:#8a8a8a}
.svc .icon svg{height:40px;width:auto;stroke:#9a9a9a;fill:none;stroke-width:1.4}
.svc h3{font-family:var(--font-head);font-size:1.25rem;font-weight:600;color:var(--ink);margin-bottom:10px}
.svc p{font-size:.98rem}
.svc a.more{display:inline-block;margin-top:12px;font-weight:700;color:var(--ink);font-size:.95rem;border-bottom:1px solid transparent}
.svc a.more:hover{color:var(--teal)}

/* ---------- dark statement band ---------- */
.band-dark{background:var(--dark);color:#fff;text-align:center;padding:74px 30px 66px}
.band-dark h2{font-family:var(--font-thin);font-weight:300;font-size:clamp(1.15rem,2.4vw,1.9rem);letter-spacing:.42em;text-transform:uppercase;line-height:1.8}
.teal-rule{height:7px;background:var(--teal)}
.img-strip img{width:100%;height:clamp(320px,48vw,620px);object-fit:cover}

/* ---------- software band ---------- */
.software .flex{display:flex;align-items:center;gap:60px;justify-content:center;flex-wrap:wrap}
.software h2{font-family:var(--font-head);font-weight:600;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--ink);line-height:1.35;max-width:330px}
.software img{max-width:560px;width:100%}

/* ---------- teal band ---------- */
.band-teal{background:var(--teal);color:#fff}
.band-teal .flex{display:flex;gap:70px;align-items:center;flex-wrap:wrap}
.band-teal h2{font-family:var(--font-head);font-weight:600;font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.15;flex:1;min-width:280px}
.band-teal p{flex:1;min-width:280px;font-size:1.05rem}
.band-teal p::after{content:"";display:block;width:64px;height:2px;background:#fff;margin-top:26px}

/* ---------- why choose us ---------- */
.why{padding:0;display:grid;grid-template-columns:1fr 2fr}
.why .photo{background:#f0efed}
.why .photo img{width:100%;height:100%;object-fit:cover;min-height:520px}
.why .content{padding:90px 70px}
.why h2{font-family:var(--font-thin);font-weight:300;font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:.06em;color:var(--ink);margin-bottom:8px}
.why .tag{margin-bottom:54px}
.why .grid{display:grid;grid-template-columns:1fr 1fr;gap:52px 64px}
.why .num{font-family:var(--font-thin);font-weight:600;font-size:1.9rem;letter-spacing:.3em;color:var(--ink)}
.why h3{font-family:var(--font-body);font-weight:700;font-size:1.1rem;color:var(--ink);margin:8px 0 16px}
.why p{font-size:.98rem}

/* ---------- news band ---------- */
.news{background:var(--dark);color:#fff}
.news .grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1000px;margin:0 auto}
.news .item{border-left:2px solid var(--teal);padding-left:34px}
.news .date{font-family:var(--font-thin);letter-spacing:.3em;font-size:.95rem;color:var(--teal);text-transform:uppercase;margin-bottom:18px}
.news h3{font-family:var(--font-head);font-weight:500;font-size:1.5rem;line-height:1.4;margin-bottom:16px}
.news p{color:#b5b5b5;letter-spacing:.12em;font-size:.9rem}
.news .more{margin-top:56px;text-align:center}
.btn-outline{display:inline-block;border:1px solid var(--teal);color:var(--teal);border-radius:24px;padding:11px 30px;font-size:.95rem;transition:.25s}
.btn-outline:hover{background:var(--teal);color:#fff}
.btn-outline.white{border-color:#fff;color:#fff}
.btn-outline.white:hover{background:#fff;color:var(--teal)}

/* ---------- contact ---------- */
.contact .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:90px;max-width:1060px;margin:0 auto}
.contact h3{font-family:var(--font-body);font-weight:700;color:var(--ink);font-size:1.15rem;margin-bottom:10px}
.contact .blockgap{margin-top:44px}
.contact form{display:flex;flex-direction:column;gap:26px;margin-top:26px}
.contact input{border:0;border-bottom:1px solid #9c9c9c;background:transparent;padding:10px 12px;font-size:1rem;font-family:var(--font-body);color:var(--ink);outline:none}
.contact input:focus{border-color:var(--teal)}
.btn-solid{background:var(--teal);color:#fff;border:0;padding:15px;font-size:1.05rem;font-family:var(--font-body);cursor:pointer;transition:.25s}
.btn-solid:hover{background:var(--teal-dark)}

/* ---------- footer ---------- */
footer{background:var(--dark);color:#cfcfcf;padding:56px 0 40px;font-size:.95rem}
footer .top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:30px;margin-bottom:26px}
footer a:hover{color:var(--teal)}
footer small{color:#8f8f8f}

/* ---------- floating chat ---------- */
.lets-chat{position:fixed;right:26px;bottom:26px;z-index:90;background:var(--green-chat);color:#fff;
  padding:16px 34px;font-family:var(--font-body);font-size:1rem;letter-spacing:.04em;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.25s}
.lets-chat:hover{background:#357A38;transform:translateY(-2px)}

/* ---------- inner-page heroes ---------- */
.page-hero-dark{background:var(--dark);color:#fff;padding:86px 0}
.page-hero-dark .flex{display:flex;gap:80px;align-items:center;flex-wrap:wrap}
.page-hero-dark h1{font-family:var(--font-head);font-weight:600;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.15;flex:1;min-width:260px}
.page-hero-dark p{flex:1;min-width:280px;font-size:1.05rem;color:#e4e4e4}
.page-hero-dark p::after{content:"";display:block;width:64px;height:2px;background:#fff;margin-top:24px}

/* ---------- about page ---------- */
.story{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.story .dark{background:#232323;color:#fff;display:flex;align-items:center;padding:90px 70px}
.story .dark h2{font-family:var(--font-head);font-weight:600;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1.2}
.story .dark h2::after{content:"";display:block;width:34px;height:2px;background:#fff;margin-top:22px}
.story .text{padding:90px 70px}
.story .text h3{font-family:var(--font-body);font-weight:700;font-size:1.2rem;color:var(--ink);margin-bottom:22px}
.testimonials{padding:0 0 90px}
.testimonials .grid{display:grid;grid-template-columns:1fr 1fr 1fr}
.testimonials .t{border:1px solid #e3e3e3;border-top:0;padding:70px 44px;text-align:center}
.testimonials .q{font-size:3.4rem;font-family:Georgia,serif;color:var(--ink);line-height:.5;margin-bottom:34px}
.testimonials h3{font-family:var(--font-body);font-weight:700;color:var(--ink);font-size:1.2rem;margin-bottom:18px}
.testimonials p{font-size:1rem}
.team{background:var(--grey-bg)}
.team-photo{padding:90px 0 70px;text-align:center}
.team-photo .member{position:relative;width:min(480px,80%);margin:0 auto}
.team-photo img{width:100%;filter:grayscale(1)}
.team-photo .overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff}
.team-photo .overlay h3{font-family:var(--font-body);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.18em;text-transform:uppercase}
.team-photo .overlay p{font-size:1.15rem;margin-top:10px;color:#f0f0f0}
.team-photo figcaption{margin-top:34px;font-size:1rem;color:var(--body)}

/* ---------- services page ---------- */
.offer .grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;max-width:1080px;margin:0 auto}
.offer .col > .head{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px}
.offer .col .head svg{width:34px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.5;flex-shrink:0;margin-top:6px}
.offer h2{font-family:var(--font-head);font-weight:600;font-size:1.75rem;color:var(--ink);line-height:1.3}
.offer h3{font-family:var(--font-body);font-weight:700;color:var(--ink);font-size:1.05rem;margin:30px 0 12px}
.offer p.note{margin-bottom:6px}
.offer ul{padding-left:22px}
.offer li{margin-bottom:7px}
.offer .bold-line{font-weight:700;color:var(--ink);margin:22px 0}

/* ---------- schedule page ---------- */
.schedule{min-height:56vh;display:flex;align-items:center}
.schedule .box{max-width:640px;margin:0 auto;text-align:center}
.schedule h1{font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:2.2rem;margin-bottom:18px}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .nav ul{display:none}
  .nav .burger{display:block}
  .nav ul.open{display:flex;position:absolute;top:96px;left:0;right:0;background:var(--nav-bg);flex-direction:column;padding:26px;gap:20px;box-shadow:0 12px 20px rgba(0,0,0,.08)}
  .svc-grid{grid-template-columns:1fr;gap:50px}
  .why{grid-template-columns:1fr}
  .why .content{padding:70px 30px}
  .why .grid{grid-template-columns:1fr}
  .news .grid{grid-template-columns:1fr;gap:50px}
  .contact .grid{grid-template-columns:1fr;gap:60px}
  .story{grid-template-columns:1fr}
  .story .dark,.story .text{padding:70px 30px}
  .testimonials .grid{grid-template-columns:1fr}
  .offer .grid{grid-template-columns:1fr;gap:60px}
  .hero h1{letter-spacing:.18em}
}