html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

@font-face {
  font-family: "Times Condensed";
  src: url("fonts/Times New Roman MT Condensed Regular/Times New Roman MT Condensed Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Times Condensed";
  src: url("fonts/Times New Roman MT Condensed Bold/Times New Roman MT Condensed Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg1:#0f1736;
  --bg2:#05070f;
  --text:#ececf4;
  --muted:rgba(236,236,244,.78);
  --line:rgba(236,236,244,.18);
}

body{
  font-family: "Playfair Display", serif;
  background: radial-gradient(circle at top, var(--bg1), var(--bg2));
  color: var(--text);
  line-height: 1.75;
  font-weight: 400;
}

button, input, textarea, select {
  font-family: "Playfair Display", serif;
}

/* Titles */
.logo,
.hero-title,
.section-title,
h1,h2,h3{
  font-family: "Times Condensed", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 1.1px;
}

/* Kicker labels */
.kicker{
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: 3px;
  opacity: .62;
  margin-bottom: 12px;
}

/* NAV */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 22px 70px;
  position: relative;
  z-index: 5;
}

.logo{
  font-size: 1.7rem;
  letter-spacing: .6px;
}

.navlinks{
  margin-left:auto;
  display:flex;
  gap:26px;
  align-items:center;
}

.navlinks a{
  color: var(--text);
  text-decoration:none;
  font-size: .95rem;
  letter-spacing: 2px;
  opacity: .85;
  font-weight: 400;
}

.navlinks a:hover{ opacity: 1; }


/* =========================
   MOON / OCEAN HERO
   ========================= */

.hero.hero-moon{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 0;

  background-image: url("assets/clouds.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* tint layer (this is how you "blend" the image into navy) */
.hero.hero-moon::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 50% 35%, rgba(15,23,54,.35), rgba(5,7,15,.88)),
    linear-gradient(to bottom, rgba(5,7,15,.35), rgba(5,7,15,.78));
}

/* extra overlay (you can keep this DIV in HTML OR remove it and rely on ::before) */
.hero.hero-moon .hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background: rgba(5,7,15,.18);
}

/* hero content */
.hero.hero-moon .hero-inner{
  position: relative;
  z-index:2;
  text-align:center;
  padding: 120px 40px 80px;
  max-width: 960px;
}

.hero-title{
  font-size: clamp(3.6rem, 5vw, 5rem);
  line-height: .95;
  letter-spacing: 1px;
  margin-bottom: 34px;
}

.hero-text{
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: rgba(236,236,244,.88);
  line-height: 1.9;
}


/* SECTIONS */
section{
  padding: 80px 120px;
}

/* ABOUT */
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  align-items:center;
}

.about-img{
  width:100%;
  border-radius: 4px;
  transform: translateX(-10px);
}

.about-text p{
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 22px;
}

/* BUTTON */
.btn{
  display:inline-block;
  margin-top: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(236,236,244,.35);
  color: var(--text);
  text-decoration:none;
  letter-spacing: 2px;
  font-size: .85rem;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.btn:hover{
  opacity: 1;
  transform: translateY(-1px);
  background: rgba(236,236,244,.06);
}


/* =========================
   SERVICES (LAYOUT + ORB)
   ========================= */
.services-wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 70px;
  align-items: center;
}

.services-title{
  font-size: 2.6rem;
  margin-bottom: 14px;
}

.accordion{
  width: 100%;
  max-width: 860px;
  margin-top: 28px;
}

.accordion-btn{
  width:100%;
  background:none;
  border:none;
  color: var(--text);
  text-align:left;
  padding: 22px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom: 1px solid var(--line);
  cursor:pointer;

  font-family: "Times Condensed","Times New Roman",serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .8px;
}

.accordion-btn .plus{
  font-size: 1.4rem;
  opacity: .7;
  transition: transform .25s ease, opacity .25s ease;
}

.accordion-btn[aria-expanded="true"] .plus{
  transform: rotate(45deg);
  opacity: 1;
}

.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition: max-height .5s ease;
  border-bottom: 1px solid var(--line);
}

.accordion-panel p{
  padding: 18px 0 24px;
  font-size: 1.03rem;
  color: var(--muted);
  max-width: 720px;
}

/* Right-side orb (blended + darker) */
.services-right{
  display:flex;
  justify-content:center;
  align-items:center;
}

.services-orb{
  width: min(420px, 40vw);
  max-width: 420px;
  opacity: .42;
  filter: brightness(.6) contrast(1) saturate(.9)
          drop-shadow(0 18px 45px rgba(0,0,0,.55));
}


/* FOOTER */
.footer{
  padding: 26px 70px;
  border-top: 1px solid rgba(236,236,244,.12);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 24px;
}

.footer-title{
  font-family: "Times Condensed","Times New Roman",serif;
  letter-spacing: 1px;
  opacity: .85;
  font-size: 1rem;
  font-weight: 400;
}

.socials a{
  font-family: "Playfair Display", serif;
  color: var(--text);
  text-decoration:none;
  margin-left: 18px;
  font-size: .95rem;
  letter-spacing: 1px;
  opacity: .75;
}
.socials a:hover{ opacity: 1; }


/* SCROLL REVEAL */
.reveal{
  opacity:0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.active{
  opacity:1;
  transform: translateY(0);
}


/* RESPONSIVE */
@media (max-width: 980px){
  section{ padding: 70px 40px; }
  .nav{ padding: 28px 40px; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-img{ transform: none; }
  .footer{ padding: 22px 40px; }
  .footer-inner{ flex-direction: column; align-items:flex-start; }
  .socials a{ margin-left: 0; margin-right: 16px; }

  .services-wrap{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .services-right{ order: -1; }
  .services-orb{
    width: min(420px, 80vw);
  }
}

/* =========================
   ABOUT QUAD LAYOUT
   ========================= */

.about-page{
  width: min(1180px, calc(100% - 80px));
  margin-inline: auto;
  padding-block: clamp(70px, 7vw, 130px);
}

.about-quad{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "img title"
    "left right";
  gap: clamp(26px, 5vw, 70px);
  align-items: start;
}

/* areas */
.about-quad-img{ grid-area: img; }
.about-quad-title{ grid-area: title; }
.about-quad-left{ grid-area: left; }
.about-quad-right{ grid-area: right; }

/* image */
.about-quad-img img{
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  opacity: .97;
}

/* title */
.about-quad-title{
  padding-top: 6px; /* keeps it slightly down like your mock */
}
.about-quad-title .about-title{
  margin: 0 0 14px 0;
}
.about-quad-title .kicker{
  margin: 0;
}

/* text blocks */
.about-quad .about-content{
  max-width: 62ch;
}
.about-quad .about-content p{
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.85;
}
.about-quad .about-content p + p{
  margin-top: 16px;
}

/* responsive */
@media (max-width: 980px){
  .about-page{
    width: min(900px, calc(100% - 48px));
    padding-block: 80px;
  }

  .about-quad{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "img"
      "left"
      "right";
    gap: 32px;
  }

  .about-quad-img img{
    max-width: 560px;
  }
}

/* =========================
   SERVICES PAGE (LIST STYLE)
   ========================= */

.services-page{
  width: min(1100px, calc(100% - 80px));
  margin-inline: auto;
  padding-block: clamp(70px, 7vw, 120px);
}

.services-header{
  text-align: center;
  margin-bottom: clamp(34px, 5vw, 70px);
}

.services-title{
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  letter-spacing: 3px;
  margin: 10px 0 14px;
}

.services-sub{
  max-width: 70ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.85;
}

.services-list{
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.service-item{
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(18px, 4vw, 50px);
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.service-name{
  font-size: 1.9rem;
  letter-spacing: .7px;
  margin-bottom: 12px;
}

.service-desc{
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.85;
}

.service-meta{
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding-top: 6px;
}

.service-price{
  font-family: "Times Condensed","Times New Roman",serif;
  letter-spacing: 1px;
  font-size: 1.2rem;
  opacity: .9;
}

@media (max-width: 980px){
  .services-page{
    width: min(900px, calc(100% - 48px));
    padding-block: 80px;
  }

  .service-item{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-meta{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}