/* ===================================================================
   HARP · IT & Network Solutions
   Design system: architectural black + warm stone, editorial serif.
   =================================================================== */

:root{
  /* core */
  --ink:        #0b0b0c;
  --ink-2:      #131312;
  --ink-soft:   #1b1a18;

  /* warm stone (brand) */
  --stone-1:    #9f9488;
  --stone-2:    #8b8278;
  --stone-3:    #777068;
  --stone-4:    #635e58;

  /* light */
  --cream:      #f6f2ec;
  --cream-2:    #ede6db;
  --paper:      #fbf9f5;

  --ink-on-cream: #16140f;
  --txt-muted:    #5f574c;

  --line:       rgba(159,148,136,.20);
  --line-light: rgba(20,18,15,.12);

  --accent:     #b89d7e;   /* warm signal tone for the wave + highlights */

  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --f-disp: "Fraunces", Georgia, serif;
  --f-brand:"Montserrat", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--f-body);
  background:var(--ink);
  color:#ece7df;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.section{ padding:120px 0; position:relative; }
.section--ink{ background:var(--ink); }
.section--cream{ background:var(--cream); color:var(--ink-on-cream); }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--f-brand);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--stone-1);
  margin-bottom:24px;
}
.eyebrow--dark{ color:var(--stone-4); }

.display{
  font-family:var(--f-disp);
  font-weight:400;
  font-size:clamp(2rem, 4.2vw, 3.5rem);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--ink-on-cream);
}
.display--light{ color:#f3eee6; }
.display .muted, .muted{ color:var(--stone-3); }
.display--light .muted{ color:var(--stone-1); }
.ital{ font-style:italic; font-weight:300; }

.sec-head{ max-width:760px; margin-bottom:72px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-brand); font-weight:500;
  font-size:.82rem; letter-spacing:.04em;
  padding:15px 30px; border-radius:2px;
  border:1px solid transparent; cursor:pointer;
  transition:all .4s var(--ease); white-space:nowrap;
}
.btn--solid{ background:#f3eee6; color:var(--ink); }
.btn--solid:hover{ background:var(--accent); color:var(--ink); transform:translateY(-2px); }
.btn--line{ border-color:rgba(236,231,223,.35); color:#ece7df; }
.btn--line:hover{ border-color:var(--accent); color:#fff; }
.btn--ghost{ border-color:var(--line); color:#ece7df; padding:11px 22px; }
.btn--ghost:hover{ border-color:var(--stone-1); }
.btn--full{ width:100%; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s, padding .5s;
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:22px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
}
.nav.scrolled{
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-color:var(--line);
}
.nav.scrolled .nav__inner{ padding:14px 32px; }

.brand{ display:flex; align-items:center; line-height:0; }
.brand__logo{ height:42px; width:auto; display:block; transition:height .5s var(--ease); }
.nav.scrolled .brand__logo{ height:36px; }

.nav__links{ display:flex; gap:38px; margin-left:auto; }
.nav__links a{
  font-family:var(--f-brand); font-weight:400; font-size:.82rem;
  letter-spacing:.04em; color:#cdc6bb; position:relative; padding:4px 0;
  transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--accent); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ margin-left:6px; }

.nav__burger{ display:none; background:none; border:0; width:34px; height:30px; position:relative; cursor:pointer; }
.nav__burger span{ position:absolute; left:5px; right:5px; height:1.5px; background:#f3eee6; transition:.35s var(--ease); }
.nav__burger span:nth-child(1){ top:11px; } .nav__burger span:nth-child(2){ bottom:11px; }
.nav__burger.open span:nth-child(1){ top:14px; transform:rotate(45deg); }
.nav__burger.open span:nth-child(2){ bottom:14px; transform:rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; gap:6px; padding:0 32px;
  background:rgba(11,11,12,.97); backdrop-filter:blur(18px);
  max-height:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none;
  border-top:1px solid transparent;
  transition:max-height .5s var(--ease), opacity .35s var(--ease), visibility .35s, padding .5s var(--ease);
}
.nav__mobile a{ font-family:var(--f-brand); font-size:1rem; padding:14px 0; border-bottom:1px solid var(--line); color:#ddd6cc; }
.nav__mobile .btn{ margin-top:18px; }
.nav__mobile.open{ max-height:440px; opacity:1; visibility:visible; pointer-events:auto; padding:8px 32px 28px; border-top-color:var(--line); }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  background:radial-gradient(120% 90% at 70% 10%, #1a1916 0%, var(--ink) 55%);
  overflow:hidden;
}
.hero__strings{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to right, rgba(11,11,12,.92) 0%, rgba(11,11,12,.55) 42%, rgba(11,11,12,0) 75%),
    linear-gradient(to top, rgba(11,11,12,.85) 0%, rgba(11,11,12,0) 35%);
}
.hero__content{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.hero__title{
  font-family:var(--f-disp); font-weight:300;
  font-size:clamp(2.8rem, 7vw, 5.7rem); line-height:1.02;
  letter-spacing:-.02em; color:#f5f1ea; margin:8px 0 28px;
}
.hero__lede{
  max-width:540px; font-size:1.12rem; color:#c8c1b6;
  font-weight:300; line-height:1.7; margin-bottom:40px;
}
.hero__cta{ display:flex; gap:16px; flex-wrap:wrap; }
.hero__note{
  margin-top:32px; font-family:var(--f-brand); font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--stone-3);
}
.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-brand); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--stone-3);
}
.hero__scroll i{ width:1px; height:46px; background:linear-gradient(var(--stone-2), transparent); animation:scrollPulse 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ---------- STRIP / marquee ---------- */
.strip{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:26px 0; }
.strip__track{ display:flex; gap:46px; align-items:center; width:max-content; animation:marquee 38s linear infinite; }
.strip__track span{ font-family:var(--f-disp); font-style:italic; font-size:1.25rem; color:#d7cfc3; white-space:nowrap; }
.strip__track i{ color:var(--accent); font-size:.7rem; font-style:normal; }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- INTRO ---------- */
.intro{ background:var(--cream); color:var(--ink-on-cream); }
.intro__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:80px; align-items:start; }
.intro__left .display{ font-size:clamp(1.9rem,3.4vw,2.9rem); }
.intro__right p{ font-size:1.06rem; color:var(--txt-muted); margin-bottom:22px; }
.intro__points{ list-style:none; margin-top:36px; border-top:1px solid var(--line-light); }
.intro__points li{
  display:flex; gap:18px; align-items:baseline; padding:20px 0;
  border-bottom:1px solid var(--line-light); font-size:1.02rem; color:var(--ink-on-cream);
}
.intro__points span{ font-family:var(--f-brand); font-size:.74rem; letter-spacing:.15em; color:var(--accent); }

/* ---------- SERVICES ---------- */
.services .eyebrow{ color:var(--stone-1); }
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.svc__card{
  background:var(--ink); padding:46px 40px 48px; position:relative;
  transition:background .5s var(--ease); overflow:hidden;
}
.svc__card::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),transparent); transition:width .6s var(--ease);
}
.svc__card:hover{ background:var(--ink-soft); }
.svc__card:hover::before{ width:100%; }
.svc__num{ font-family:var(--f-brand); font-size:.7rem; letter-spacing:.2em; color:var(--stone-4); position:absolute; top:30px; right:34px; }
.svc__ico{ width:48px; height:48px; color:var(--accent); margin-bottom:26px; }
.svc__ico svg{ width:100%; height:100%; }
.svc__card h3{ font-family:var(--f-disp); font-weight:400; font-size:1.5rem; color:#f1ece4; margin-bottom:14px; letter-spacing:-.01em; }
.svc__card p{ color:#a59d91; font-size:.96rem; font-weight:300; margin-bottom:22px; }
.svc__card ul{ list-style:none; border-top:1px solid var(--line); padding-top:18px; }
.svc__card ul li{ font-family:var(--f-brand); font-size:.8rem; letter-spacing:.02em; color:#8f8779; padding:7px 0 7px 18px; position:relative; }
.svc__card ul li::before{ content:""; position:absolute; left:0; top:14px; width:6px; height:6px; border:1px solid var(--stone-3); border-radius:50%; }

/* ---------- APPROACH ---------- */
.approach{ background:var(--paper); color:var(--ink-on-cream); }
.steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:s; }
.steps__item{ padding:38px 30px 38px 0; border-top:1px solid var(--line-light); position:relative; }
.steps__item::after{ content:""; position:absolute; left:0; top:0; width:38px; height:1px; background:var(--accent); }
.steps__n{ font-family:var(--f-brand); font-size:.78rem; letter-spacing:.2em; color:var(--accent); display:block; margin-bottom:26px; }
.steps__item h3{ font-family:var(--f-disp); font-weight:400; font-size:1.45rem; margin-bottom:12px; }
.steps__item p{ font-size:.96rem; color:var(--txt-muted); font-weight:300; padding-right:14px; }

/* ---------- WHO ---------- */
.who__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:start; }
.who__intro .display{ font-size:clamp(2rem,3.6vw,3rem); margin-bottom:24px; }
.who__lede{ color:var(--txt-muted); font-size:1.05rem; max-width:420px; }
.who__list{ display:flex; flex-direction:column; }
.who__row{ padding:30px 0; border-top:1px solid var(--line-light); display:grid; grid-template-columns:1fr; gap:8px; }
.who__row:last-child{ border-bottom:1px solid var(--line-light); }
.who__row h3{ font-family:var(--f-disp); font-weight:400; font-size:1.5rem; }
.who__row p{ color:var(--txt-muted); font-size:1rem; font-weight:300; }

/* ---------- ABOUT ---------- */
.about__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.about__media{ position:relative; }
.about__photo{
  aspect-ratio:4/5; border-radius:3px; overflow:hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, #26241f, #121110),
    repeating-linear-gradient(135deg, rgba(184,157,126,.05) 0 2px, transparent 2px 9px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.about__photo-ph{
  font-family:var(--f-brand); font-weight:300; letter-spacing:.4em;
  color:var(--stone-3); text-align:center; font-size:1.3rem; padding-left:.4em;
}
.about__photo-ph small{ display:block; font-size:.55rem; letter-spacing:.3em; margin-top:14px; color:var(--stone-4); }
.about__img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.about__badge{
  position:absolute; bottom:-22px; right:-14px; background:#f3eee6; color:var(--ink);
  padding:18px 24px; border-radius:2px; box-shadow:0 24px 50px rgba(0,0,0,.45);
}
.about__badge-k{ display:block; font-family:var(--f-disp); font-size:1.7rem; line-height:1; }
.about__badge-v{ display:block; font-family:var(--f-brand); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-4); margin-top:6px; }
.about__body p{ color:#b3ab9e; font-weight:300; margin-bottom:20px; font-size:1.05rem; }
.about__quote{
  font-family:var(--f-disp); font-style:italic; font-weight:300;
  font-size:1.5rem; line-height:1.4; color:#e7e0d5;
  border-left:2px solid var(--accent); padding:6px 0 6px 26px; margin:34px 0;
}
.about__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; border-top:1px solid var(--line); padding-top:30px; }
.about__stats strong{ display:block; font-family:var(--f-disp); font-weight:400; font-size:1.05rem; color:#efe9df; margin-bottom:5px; }
.about__stats span{ font-size:.82rem; color:var(--stone-2); }

/* ---------- TESTIMONIALS ---------- */
.tmon{ background:var(--ink-2); }
.tmon__head{ text-align:center; max-width:720px; margin:0 auto 70px; }
.tmon__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.tmon__card{
  position:relative; background:var(--ink); border:1px solid var(--line);
  border-radius:4px; padding:40px 34px 34px; display:flex; flex-direction:column;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.tmon__card:hover{ border-color:rgba(184,157,126,.4); transform:translateY(-4px); }
.tmon__card::before{
  content:"\201C"; position:absolute; top:8px; right:30px;
  font-family:var(--f-disp); font-size:6rem; line-height:1; color:rgba(184,157,126,.16);
}
.tmon__tag{
  font-family:var(--f-brand); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:24px;
}
.tmon__card blockquote{
  font-family:var(--f-disp); font-weight:300; font-style:italic;
  font-size:1.18rem; line-height:1.55; color:#e7e1d6; flex:1;
}
.tmon__card figcaption{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.tmon__card figcaption strong{ display:block; font-family:var(--f-disp); font-weight:400; font-size:1.15rem; color:#f1ece4; }
.tmon__card figcaption span{ font-family:var(--f-brand); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-2); margin-top:5px; display:block; }

/* ---------- CONTACT ---------- */
.contact__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:start; }
.contact__lede{ color:var(--txt-muted); font-size:1.08rem; max-width:440px; margin-bottom:40px; }
.contact__meta{ list-style:none; }
.contact__meta li{ display:flex; flex-direction:column; gap:5px; padding:18px 0; border-top:1px solid var(--line-light); }
.contact__k{ font-family:var(--f-brand); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.contact__v{ font-size:1.1rem; color:var(--ink-on-cream); }
.contact__v em{ font-style:normal; color:var(--stone-3); font-size:.85rem; }
a.contact__v:hover{ color:var(--accent); }

.contact__card{
  background:var(--ink); color:#ece7df; padding:46px 42px; border-radius:4px;
  box-shadow:0 40px 80px -30px rgba(20,18,15,.4);
}
.contact__card h3{ font-family:var(--f-disp); font-weight:400; font-size:1.7rem; margin-bottom:12px; color:#f1ece4; }
.contact__card > p{ color:#a59d91; font-weight:300; margin-bottom:30px; }
.contact__or{ display:flex; align-items:center; gap:16px; margin:22px 0; color:var(--stone-3); font-family:var(--f-brand); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; }
.contact__or::before,.contact__or::after{ content:""; flex:1; height:1px; background:var(--line); }

/* contact form */
.cform{ display:flex; flex-direction:column; gap:16px; margin-bottom:6px; }
.cform__field{ display:flex; flex-direction:column; gap:7px; }
.cform__field span{ font-family:var(--f-brand); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-2); }
.cform input, .cform textarea{
  width:100%; font-family:var(--f-body); font-size:.96rem; color:#f1ece4;
  background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:2px;
  padding:12px 14px; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.cform textarea{ resize:vertical; min-height:78px; }
.cform input::placeholder, .cform textarea::placeholder{ color:var(--stone-4); }
.cform input:focus, .cform textarea:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.06); }
.cform input.invalid, .cform textarea.invalid{ border-color:#b66; }
.cform button{ margin-top:6px; }
.cform__note{ font-family:var(--f-brand); font-size:.68rem; letter-spacing:.04em; color:var(--stone-3); text-align:center; margin:2px 0 0; }
.cform__note.err{ color:#cf8a8a; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding:80px 0 36px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:54px; }
.footer__logo{ height:50px; width:auto; display:block; }
.footer__brand p{ color:var(--stone-2); font-size:.92rem; font-weight:300; margin-top:24px; max-width:300px; }
.footer__col h4{ font-family:var(--f-brand); font-weight:500; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-1); margin-bottom:20px; }
.footer__col a{ display:block; color:#9b9387; font-size:.92rem; padding:6px 0; transition:color .3s; }
.footer__col a:hover{ color:#ece7df; }
.footer__base{ display:flex; justify-content:space-between; padding-top:30px; border-top:1px solid var(--line); font-family:var(--f-brand); font-size:.72rem; letter-spacing:.06em; color:var(--stone-4); }

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

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .intro__grid,.who__grid,.about__grid,.contact__grid{ grid-template-columns:1fr; gap:50px; }
  .svc{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .about__media{ max-width:420px; }
}
@media (max-width:980px){
  .tmon__grid{ grid-template-columns:1fr; max-width:600px; margin:0 auto; }
}
@media (max-width:760px){
  .section{ padding:84px 0; }
  .wrap{ padding:0 22px; }
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .nav__mobile{ display:flex; }
  .svc{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:1fr; gap:16px; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .footer__base{ flex-direction:column; gap:8px; }
  .hero__cta{ flex-direction:column; align-items:flex-start; }
  .hero__cta .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}