:root{
  --bg:#ffffff;
  --text:#0b0d12;
  --muted:#5c6270;
  --line: rgba(10, 12, 18, .12);
  --shadow: 0 16px 50px rgba(0,0,0,.10);
  --radius: 18px;
  --radius2: 24px;
}

/* Force hidden attribute to always hide elements */
[hidden]{display:none !important;}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: #0a0a0a;
  color: var(--text);
  line-height: 1.55;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{
  width:min(1100px, calc(100% - 40px));
  margin-inline:auto;
}

/* HERO */
.hero{
  min-height: 100vh;
  position:relative;

  /* HERO IMAGE PLACEHOLDER:
     Later we’ll replace this with your own photo stored locally.
  */
  background-image: url("./images/hero-main.jpg");
  background-size: cover;
  background-position: center;
}

.hero__overlay{
  position:absolute;
  inset:0;
  /* Dark top + bottom, clear middle */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.55) 18%,
    rgba(0,0,0,.00) 40%,
    rgba(0,0,0,.00) 60%,
    rgba(0,0,0,.55) 82%,
    rgba(0,0,0,.75) 100%
  );
}

.hero__top{
  position:sticky;
  top:0;
  z-index:40;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.hero__nav{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 16px 0;
}

.brand__name{
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
}

.nav{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav a{
  color: rgba(255,255,255,.88);
  font-weight:600;
  font-size:14px;
  padding:10px 12px;
  border-radius:999px;
}
.nav a:hover{background: rgba(255,255,255,.12)}
.nav__cta{
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
}

.nav__toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  height:2px;
  margin:6px 10px;
  background:#fff;
  border-radius:2px;
}

.nav__mobile{
  position:relative;
  z-index:2;
  display:grid;
  gap:10px;
  padding: 12px 0 16px;
}
.nav__mobile a{
  color:#fff;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
}

.hero__content{
  position:relative;
  z-index:2;
  min-height: calc(100vh - 76px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding: 44px 18px 44px;
}

.hero__text{
  color:#fff;
  max-width: 900px;
  text-align:center;
  margin-inline:auto;
  margin-top: 8px;
}
.hero__text h1{
  margin:0 0 10px;
  font-size: 44px;
  line-height:1.05;
  letter-spacing:-.8px;
}
.hero__text p{
  margin:0 0 18px;
  font-size: 16px;
  color: rgba(255,255,255,.86);
}

.hero__buttons{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.hero__hint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  letter-spacing:.35px;
}
.hero__line{
  width:1px;
  height:34px;
  background: rgba(255,255,255,.6);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn--solid{
  background:#fff;
  color:#000;
}
.btn--ghost{
  background: rgba(255,255,255,.14);
  color:#fff;
  border-color: rgba(255,255,255,.22);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}

/* Sections */
.section{padding: 72px 0}
.section__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  margin-bottom: 22px;
}
.section__head h2{
  margin:0;
  font-size: 32px;
  letter-spacing:-.4px;
}
.section__head p{
  margin:0;
  color: var(--muted);
  max-width: 680px;
}

/* Collage gallery */
.collage{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.shot{
  grid-column: span 4;
  border:0;
  padding:0;
  border-radius: var(--radius);
  overflow:hidden;
  cursor:pointer;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  background:#fff;
}
.shot img{
  width:100%;
  height: 260px;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .25s ease;
}
.shot:hover img{transform: scale(1.06)}
.shot.wide{grid-column: span 8}
.shot.tall img{height: 534px}

/* Pricing */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.priceCard{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 20px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  background:#fff;
  position:relative;
}
.priceCard h3{margin:0 0 6px}
.price{margin:0 0 14px; font-size:34px; font-weight:800; letter-spacing:-.8px}
.priceCard ul{margin:0 0 16px; padding-left:18px; color: var(--muted)}
.priceCard li{margin:8px 0}
.priceCard.featured{border-color: rgba(0,0,0,.35)}
.pill{
  position:absolute;
  top:16px;
  right:16px;
  font-size:12px;
  font-weight:800;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
}

/* About */
.about{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.about__card{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 20px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.about__card p{color: var(--muted)}
.about__mini{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.about__mini div{
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.about__mini strong{display:block}
.about__mini span{display:block; color: var(--muted); font-size:12px}

.checks{margin:0; padding-left:18px; color: var(--muted)}
.note{margin:12px 0 0; color: var(--muted)}

/* Contact form */
.form{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  max-width: 820px;
}
.form label{
  display:grid;
  gap:8px;
  font-weight:700;
  font-size:13px;
}
.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
input, select, textarea{
  width:100%;
  padding: 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  outline:none;
  font: inherit;
}
textarea{resize:vertical; min-height: 150px}
.small{margin:10px 0 0; color: var(--muted); font-size:12px}

/* Lightbox */
.lightbox{
  width:min(980px, calc(100% - 28px));
  border:none;
  padding:0;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.lightbox::backdrop{background: rgba(0,0,0,.72)}
.lightbox img{
  width:100%;
  max-height: 80vh;
  object-fit:contain;
  background:#000;
}
.lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  padding: 22px 0;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.footer p{margin:0; color: var(--muted)}
.footer a{color: var(--muted)}
.footer a:hover{color: var(--text)}

@media (max-width: 900px){
  .pricing{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .section__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  margin-bottom: 22px;
}
  .shot{grid-column: span 6}
  .shot.wide{grid-column: span 12}
  .hero__text h1{font-size: 38px}
}

@media (max-width: 640px){
  .nav{display:none}
  .nav__toggle{display:block}
  .row{grid-template-columns:1fr}
  .shot{grid-column: span 12}
  .shot img{height: 240px}
  .shot.tall img{height: 240px}
  .hero__content{
  position:relative;
  z-index:2;
  min-height: calc(100vh - 76px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding: 44px 18px 44px;
}
  .hero__text h1{font-size: 32px}
}

/* ===== Collage OVERRIDES (no cropping, mixed portrait/landscape) ===== */
.collage{
  display: block !important;        /* override any grid */
  column-count: 3;
  column-gap: 12px;
}

.shot{
  display: inline-block !important; /* needed for columns */
  width: 100% !important;
  margin: 0 0 12px !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  border: 0;
  padding: 0;
}

.shot img{
  width: 100% !important;
  height: auto !important;          /* <-- no fixed height */
  object-fit: contain !important;   /* <-- no cropping */
  max-height: 340px !important;      /* <-- keeps collage from becoming huge */
  transform: none !important;
}

/* kill any old "tall" forced heights */
.shot.tall img{ height: auto !important; }

/* responsive columns */
@media (max-width: 900px){
  .collage{ column-count: 2; }
}
@media (max-width: 640px){
  .collage{ column-count: 1; }
}
/* ===== end overrides ===== */



/* Section panel styling (visual separation) */
.panel{
  width:min(1100px, calc(100% - 40px));
  margin-inline:auto;
  background:#ffffff;
  border-radius: 28px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  padding: 44px 26px;
  border: 1px solid rgba(10,12,18,.06);
}

/* A little more air between panels */
.section{
  padding: 42px 0;
}

/* Gallery filters */
.filters{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 6px 0 20px;
}

.chip{
  border:1px solid rgba(10,12,18,.14);
  background:#fff;
  color:#0b0d12;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}

.chip:hover{
  transform: translateY(-1px);
}

.chip.is-active{
  background:#0b0d12;
  color:#fff;
  border-color:#0b0d12;
}


/* Services toggle */
.toggleRow{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 6px 0 26px;
}

.toggle{
  border:1px solid rgba(10,12,18,.14);
  background:#fff;
  color:#0b0d12;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
}

.toggle:hover{ transform: translateY(-1px); }

.toggle.is-active{
  background:#0b0d12;
  color:#fff;
  border-color:#0b0d12;
}

/* Services layout */
.servicePane{ display:none; }
.servicePane.is-active{ display:block; }

.serviceLayout{
  display:grid;
  grid-template-columns: 1.05fr 1.95fr;
  gap: 18px;
  align-items:start;
}

.serviceMedia{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(10,12,18,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
  background:#fff;
}

.serviceMedia img{
  width:100%;
  height: 100%;
  max-height: 560px;
  object-fit: cover;
  display:block;
}

/* Cards container inside services */
.serviceCards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 900px){
  .serviceLayout{ grid-template-columns: 1fr; }
  .serviceMedia img{ max-height: 420px; }
  .serviceCards{ grid-template-columns: 1fr; }
}


/* Hero button sizing + note */
.hero__buttons .btn{
  padding: 14px 18px;
  font-size: 14px;
  border-radius: 999px;
}

.heroNote{
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  text-align:center;
  max-width: 760px;
}


/* Services cards (2-up) */
.serviceCards--two{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 900px){
  .serviceCards--two{ grid-template-columns: 1fr; }
}

/* Card alignment fixes */
.priceCard{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.priceCard h3{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.priceCard .price{
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.priceCard ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.priceCard .btn{
  margin-top: auto;
}


/* Contact centering */
.contactWrap{
  width: 100%;
  display:flex;
  justify-content:center;
}

#contact .container{
  width: min(980px, 100%);
}

/* ===== Services layout hard overrides (clean 1 image + 2 cards) ===== */
#services .panel{
  overflow: hidden;
}

.servicesGrid{
  display:grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 18px;
  align-items: start;
}

.servicesImage{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(10,12,18,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
  background:#fff;
}

.servicesImage img{
  width:100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display:block;
}

.servicesCards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

#services .priceCard{
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 320px;
}

#services .priceCard .btn{
  margin-top: auto;
}

/* Responsive */
@media (max-width: 900px){
  .servicesGrid{ grid-template-columns: 1fr; }
  .servicesCards{ grid-template-columns: 1fr; }
  .servicesImage img{ max-height: 420px; }
}
/* ===== end services overrides ===== */

/* ===== HERO spacing adjustment ===== */

/* Move hero text slightly lower */
.hero__text{
  margin-top: 40px !important;
}

/* Bottom copyright note */
.heroBottomNote{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 140px;  /* moved much higher */
  z-index: 5;

  width: min(980px, calc(100% - 28px));
  padding: 10px 14px;

  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  color: rgba(255,255,255,.92);

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Slight fade so it feels premium */
.heroBottomNote{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 140px;  /* moved much higher */
  z-index: 5;

  width: min(980px, calc(100% - 28px));
  padding: 10px 14px;

  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  color: rgba(255,255,255,.92);

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Ensure proper spacing */
.hero__content{
  padding-bottom: 60px;
}


/* === Force hero bottom note to always be visible === */
.hero{
  position: relative;
}

.hero__content{
  position: relative;
}

/* Pin it to the bottom of the hero */
.heroBottomNote{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 140px;  /* moved much higher */
  z-index: 5;

  width: min(980px, calc(100% - 28px));
  padding: 10px 14px;

  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  color: rgba(255,255,255,.92);

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Give the scroll hint some room above it if it overlaps */
.scrollHint{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 4;
}








/* ===== Hero Editing promo (match hero typography) ===== */
.heroEditing{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 240px;   /* moved higher */
  z-index: 7;

  width: min(980px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.heroEditing__text{
  margin: 0;
  font-size: 26px;          /* MUCH bigger */
  font-weight: 800;
  line-height: 1.3;
  color: rgba(255,255,255,.95);
  text-shadow: 0 12px 35px rgba(0,0,0,.65);
}

.heroEditing__btn{
  padding: 16px 26px;
  font-weight: 900;
  font-size: 15px;
  border-radius: 999px;
}

/* Mobile tweaks */
@media (max-width: 520px){
  .heroEditing{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 240px;   /* moved higher */
  z-index: 7;

  width: min(980px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
  .heroEditing__text{
  margin: 0;
  font-size: 26px;          /* MUCH bigger */
  font-weight: 800;
  line-height: 1.3;
  color: rgba(255,255,255,.95);
  text-shadow: 0 12px 35px rgba(0,0,0,.65);
}
}




/* ===== Contact icons ===== */
#contact .contactIcons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  margin-top:26px;
}

#contact .contactIcon{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;

  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.92);
  border: 1px solid rgba(0,0,0,0.10);

  transition: transform .2s ease, background .2s ease, color .2s ease;
}

#contact .contactIcon svg{
  width:28px;
  height:28px;
  fill: currentColor;
}

#contact .contactIcon:hover{
  background: rgba(0,0,0,0.92);
  color: white;
  transform: translateY(-3px);
}


/* Contact intro text */
#contact .contactIntro{
  text-align:center;
  max-width:600px;
  margin: 0 auto 18px auto;
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(0,0,0,0.75);
}


/* Services Layout */
.servicesSection {
  background: #ffffff;
  padding: 80px 20px;
  border-radius: 20px;
  margin: 80px auto;
  max-width: 1100px;
}

.servicesSection h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.servicesSection .sectionSub {
  text-align: center;
  margin-bottom: 50px;
  color: rgba(0,0,0,0.6);
}

.servicesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}

.serviceCard {
  background: #f9f9f9;
  padding: 40px;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  text-align: left;
}

.serviceCard h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.serviceCard .price {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.serviceCard ul {
  list-style: disc;
  padding-left: 18px;
  margin-bottom: 25px;
}

.serviceCard ul li {
  margin-bottom: 10px;
  color: rgba(0,0,0,0.75);
}

.serviceCard .btnPrimary {
  display: inline-block;
  padding: 12px 24px;
  background: black;
  color: white;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
}

/* ===== Services simple (2 cards only) ===== */
.servicesSimple{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}

@media (max-width: 900px){
  .servicesSimple{ grid-template-columns: 1fr; }
}

/* Make sure the cards align cleanly */
#services .priceCard{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

#services .priceCard .price{
  margin: 0;
}

#services .priceCard ul{
  margin: 0;
  padding-left: 18px;
}

#services .priceCard .btn{
  margin-top: auto;
}

/* ===== Services: dark cards + green price ===== */
#services .priceCard{
  background: #0b0b0b !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important;
}

#services .priceCard h3,
#services .priceCard p,
#services .priceCard li{
  color: rgba(255,255,255,0.90) !important;
}

#services .priceCard .price{
  color: #22c55e !important; /* green */
}

#services .priceCard .pill{
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* Common CTA under both cards */
#services .servicesCta{
  display:flex;
  justify-content:center;
  margin-top: 22px;
}

#services .servicesCta .btn{
  padding: 14px 26px;
  border-radius: 999px;
}

#services .servicesCta{
  display:flex;
  justify-content:center;
  margin-top:30px;
  padding-bottom:10px;
}

#services .servicesCta .btn{
  padding:14px 30px;
  border-radius:999px;
}


/* ===== Services CTA: keep it in normal flow + centered ===== */
#services .servicesCta{
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 22px !important;
  padding-bottom: 8px !important;
}

#services .servicesCta .btn{
  position: static !important;
  inset: auto !important;
  float: none !important;
  margin: 0 !important;
}


/* ===== Services CTA Button Upgrade ===== */
#services .servicesCta .btn{
  background: #1877F2;               /* Facebook blue */
  color: #ffffff !important;         /* White text */
  border: none;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 999px;
  transition: all 0.25s ease;
  box-shadow: 0 0 18px rgba(24,119,242,0.6);
}

/* Glow on hover */
#services .servicesCta .btn:hover{
  background: #1e82ff;
  box-shadow: 0 0 28px rgba(24,119,242,0.85);
  transform: translateY(-2px);
}


/* ===== About Section Upgrade ===== */

.aboutSingleCard{
  background: #ffffff;
  border-radius: 24px;
  padding: 50px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

.aboutSingleCard p{
  color: #444;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.sectionTitle{
  text-align: center;
  margin-bottom: 40px;
}


/* ===== About Section (single card) ===== */
.aboutSingleCard{
  background: #fff;
  border-radius: 24px;
  padding: 48px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

.aboutSingleCard p{
  color: #444;
  font-size: 1.06rem;
  line-height: 1.75;
  margin: 0 0 18px 0;
}


/* Ensure hidden gallery shots are truly gone from layout */
#galleryGrid .shot[hidden]{
  display: none !important;
}


/* ===== Editing page tweaks ===== */
.page--editing{
  background: #000;
}

/* Use a hero image for editing page */
.hero--editing{
  background-image: url("./images/hero-main.jpg");
  background-size: cover;
  background-position: center;
}

/* Move editing hero text toward the top */
.hero__content--top{
  padding-top: 120px;
  align-items: flex-start;
}

/* Dark overlay behind the top text line */
.heroKicker{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Editing section cards */
.editGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .editGrid{ grid-template-columns: 1fr; }
}

.editCard{
  background: #0b0b0b;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.editCard h3{
  margin: 0 0 10px 0;
  color: rgba(255,255,255,0.94);
}

.editCard p{
  margin: 0 0 14px 0;
  color: rgba(255,255,255,0.80);
  line-height: 1.7;
}

.editBadges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}

.editList{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.82);
  line-height: 1.9;
}

.editSteps{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.82);
  line-height: 1.9;
}

/* Make "Request editing" CTA match your Facebook-blue glow */
.page--editing #pricing .servicesCta .btn{
  background: #1877F2;
  color: #fff !important;
  border: none;
  box-shadow: 0 0 18px rgba(24,119,242,0.6);
}
.page--editing #pricing .servicesCta .btn:hover{
  background: #1e82ff;
  box-shadow: 0 0 28px rgba(24,119,242,0.85);
  transform: translateY(-2px);
}


/* ===== Editing page: 2-card grid ===== */
.editGrid--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 980px){
  .editGrid--two{ grid-template-columns: 1fr; }
}

/* ===== How it works flow ===== */
.howFlow{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 16px;
  padding: 10px 0 4px;
}

@media (max-width: 980px){
  .howFlow{
    flex-direction:column;
    align-items:stretch;
  }
  .howArrow{
    display:none;
  }
}

.howStep{
  flex: 1;
  background: #0b0b0b;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  text-align:center;
}

.howStep h3{
  margin: 10px 0 6px 0;
  font-size: 1.05rem;
}

.howStep p{
  margin: 0;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  font-size: 0.98rem;
}

.howIcon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.howIcon svg{
  width: 26px;
  height: 26px;
  fill: rgba(255,255,255,0.92);
}

.howArrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 28px;
  color: rgba(0,0,0,0.35);
  padding: 0 2px;
  user-select:none;
}


/* ==============================
   Editing page – Premium styling
   (Overrides earlier dull styles)
   ============================== */

:root{
  --edit-accent-1: #4f8cff;   /* premium blue */
  --edit-accent-2: #22c55e;   /* clean green */
  --edit-accent-3: #a855f7;   /* soft purple */
  --edit-card-bg: rgba(12,12,14,0.92);
  --edit-text: rgba(255,255,255,0.92);
  --edit-subtext: rgba(255,255,255,0.72);
}

/* Editing Services cards */
.editCard{
  position: relative;
  background: var(--edit-card-bg) !important;
  color: var(--edit-text) !important;
  border-radius: 22px;
  padding: 26px 26px 22px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 26px 70px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03) inset;
  overflow: hidden;
  transform: translateZ(0);
}

/* Gradient border ring */
.editCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 24px;
  background: linear-gradient(135deg,
    rgba(79,140,255,0.85),
    rgba(34,197,94,0.55),
    rgba(168,85,247,0.70)
  );
  z-index: 0;
  filter: blur(0);
}

/* Inner surface on top of the gradient ring */
.editCard::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 21px;
  background: radial-gradient(1200px 500px at 10% 0%,
      rgba(79,140,255,0.22),
      rgba(0,0,0,0) 55%),
    radial-gradient(1200px 500px at 90% 10%,
      rgba(168,85,247,0.16),
      rgba(0,0,0,0) 60%),
    var(--edit-card-bg);
  z-index: 1;
}

/* Ensure content sits above overlays */
.editCard > *{
  position: relative;
  z-index: 2;
}

.editCard h3{
  margin: 0 0 10px 0;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}

.editCard p{
  margin: 0 0 14px 0;
  color: var(--edit-subtext) !important;
  line-height: 1.6;
}

.editList{
  margin: 0 0 14px 0;
  padding-left: 18px;
}

.editList li{
  margin: 8px 0;
  color: rgba(255,255,255,0.86);
}

/* Make the bullets feel more premium */
.editList li::marker{
  color: rgba(79,140,255,0.95);
}

/* Badges (software tags) */
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.88) !important;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.badge:hover{
  border-color: rgba(79,140,255,0.35) !important;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.30),
    0 0 0 3px rgba(79,140,255,0.10);
}

/* Add a subtle “accent line” on top of each card */
.editCard .editBadges{
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* How it works: make the mini cards match the premium feel */
.howStep{
  background: rgba(12,12,14,0.90) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 22px !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.03) inset !important;
}

.howIcon{
  background: rgba(79,140,255,0.14) !important;
  border: 1px solid rgba(79,140,255,0.22) !important;
  box-shadow: 0 16px 40px rgba(79,140,255,0.18);
}

.howIcon svg{
  fill: rgba(255,255,255,0.95) !important;
}

/* Arrows: use accent color and glow */
.howArrow{
  color: rgba(79,140,255,0.75) !important;
  text-shadow: 0 0 18px rgba(79,140,255,0.35);
  font-weight: 700;
  transform: translateY(2px);
}

/* Optional: small hover lift for desktop */
@media (hover:hover){
  .editCard:hover{
    transform: translateY(-2px);
    box-shadow:
      0 34px 90px rgba(0,0,0,0.62),
      0 0 0 1px rgba(255,255,255,0.05) inset;
  }
}



/* =======================================
   Editing page – NEW color scheme (premium)
   ======================================= */

:root{
  --edit-bg: rgba(10,10,12,0.94);
  --edit-text: rgba(255,255,255,0.92);
  --edit-sub: rgba(255,255,255,0.72);
  --lr-a: #2dd4ff;    /* cyan */
  --lr-b: #4f46e5;    /* indigo */
  --ps-a: #a855f7;    /* purple */
  --ps-b: #3b82f6;    /* blue */
}

.editCard{
  background: var(--edit-bg) !important;
  color: var(--edit-text) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03) inset !important;
}

/* fix the accidental "tell" if it exists from older paste */

/* Gradient ring */
.editCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 24px;
  z-index: 0;
  opacity: 0.95;
}

.editCard::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 21px;
  background:
    radial-gradient(1200px 520px at 10% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0) 50%),
    radial-gradient(900px 420px at 90% 10%, rgba(255,255,255,0.05), rgba(0,0,0,0) 55%),
    var(--edit-bg);
  z-index: 1;
}

.editCard > *{ position: relative; z-index: 2; }

.editCard p{ color: var(--edit-sub) !important; }
.editList li{ color: rgba(255,255,255,0.88) !important; }
.editList li::marker{ color: rgba(255,255,255,0.55) !important; }

/* Top-right app icon */
.editAppIcon{
  position:absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.editAppIcon svg{
  width: 26px;
  height: 26px;
}

#lrIcon rect{ fill: #0b1220; }
#lrIcon path{ fill: #bfeaff; }

#psIcon rect{ fill: #0b1220; }
#psIcon path{ fill: #d7c7ff; }

/* Different ring per card: Lightroom first, Photoshop second */
.editCard:nth-of-type(1)::before{
  background: linear-gradient(135deg, rgba(45,212,255,0.95), rgba(79,70,229,0.85), rgba(0,0,0,0));
}
.editCard:nth-of-type(2)::before{
  background: linear-gradient(135deg, rgba(168,85,247,0.95), rgba(59,130,246,0.80), rgba(0,0,0,0));
}

/* How it works cards: stronger contrast + nicer arrows */
.howStep{
  background: rgba(15,15,18,0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important;
}
.howArrow{
  color: rgba(59,130,246,0.85) !important;
  text-shadow: 0 0 16px rgba(59,130,246,0.35) !important;
  font-weight: 800 !important;
}

.howIcon{
  background: rgba(59,130,246,0.14) !important;
  border: 1px solid rgba(59,130,246,0.28) !important;
  box-shadow: 0 16px 40px rgba(59,130,246,0.22) !important;
}



/* ===== Editing page icon spacing (prevents overlap) ===== */
.editCard { position: relative; }
.editCard h3 { padding-right: 84px; } /* reserve room for icon */

.editAppIcon{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
.editAppIcon__img{
  width: 72%;
  height: 72%;
  object-fit: contain;
  display:block;
}



/* ===== Editing page icon overlap FIX (scoped + forced) ===== */
body[data-page="editing"] .editCard,
body[data-page="editing"] .editCard *{
  box-sizing: border-box;
}

/* reserve space for the top-right icon so it never overlaps the title */
body[data-page="editing"] .editCard h3{
  padding-right: 104px !important;
}

/* icon placement */
body[data-page="editing"] .editAppIcon{
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
  z-index: 3 !important;
}

body[data-page="editing"] .editAppIcon__img{
  width: 72% !important;
  height: 72% !important;
  object-fit: contain !important;
  display: block !important;
}

/* =========================
   Editing page: Split Hero
   ========================= */
body[data-page="editing"] .hero--split{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* The 2 images side-by-side */
body[data-page="editing"] .heroSplit{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  z-index: 0;
}

body[data-page="editing"] .heroSplit__half{
  background-size: cover;
  background-position: center;
}

/* IMPORTANT: Put your images here:
   /public/images/editing/before.jpg (unedited)
   /public/images/editing/after.jpg (edited) */
body[data-page="editing"] .heroSplit__half--before{
  background-image: url("./images/editing/before.jpg");
}
body[data-page="editing"] .heroSplit__half--after{
  background-image: url("./images/editing/after.jpg");
}

/* Keep existing content above images */
body[data-page="editing"] .hero--split .hero__top,
body[data-page="editing"] .hero--split .hero__content,
body[data-page="editing"] .hero--split .hero__hint,
body[data-page="editing"] .hero--split .heroBottomOverlay{
  position: relative;
  z-index: 2;
}

/* Move hero text to top with a clean dark backing */
body[data-page="editing"] .hero__content--top{
  padding-top: 96px;
  padding-bottom: 24px;
}

body[data-page="editing"] .hero__text--top{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
}

body[data-page="editing"] .hero__text--top h1{
  margin: 0 0 10px 0;
}

body[data-page="editing"] .heroAccent{
  color: #31A8FF; /* Adobe-ish blue */
}

/* Bottom third overlay for Adobe suite row */
body[data-page="editing"] .heroBottomOverlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 0 44px;
  background: linear-gradient(to top, rgba(0,0,0,0.68), rgba(0,0,0,0.0));
}

body[data-page="editing"] .heroTools{
  text-align: center;
}

body[data-page="editing"] .heroTools__label{
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  background: rgba(0,0,0,0.35);
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
}

body[data-page="editing"] .heroTools__icons{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

body[data-page="editing"] .heroTools__icons img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 8px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}

/* Keep scroll hint visible above bottom overlay */
body[data-page="editing"] .hero--split .hero__hint{
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 3;
}

@media (max-width: 700px){
  body[data-page="editing"] .heroSplit{
    grid-template-columns: 1fr;
  }
  body[data-page="editing"] .heroSplit__half--after{
    display:none; /* on small screens we show "before" only */
  }
}

/* =========================
   Editing hero height fix
   ========================= */

body[data-page="editing"] .hero--split{
  min-height: 88vh;   /* was 100vh */
  height: 88vh;
}

/* Make images scale properly without pushing layout */
body[data-page="editing"] .heroSplit{
  height: 100%;
}

body[data-page="editing"] .heroSplit__half{
  background-size: cover;
  background-position: center center;
}

/* Adjust text positioning slightly higher */
body[data-page="editing"] .hero__content--top{
  padding-top: 80px;
}

/* Keep bottom overlay tighter */
body[data-page="editing"] .heroBottomOverlay{
  padding-bottom: 30px;
}

/* Make Adobe icons slightly smaller */
body[data-page="editing"] .heroTools__icons img{
  width: 38px;
  height: 38px;
}




/* ===== Adobe Suite Bar (Editing page) ===== */
.adobeBar{
  background:#0b0f16;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:22px 0;
}
.adobeBar__title{
  margin:0 0 12px 0;
  text-align:center;
  color:rgba(255,255,255,.92);
  font-weight:700;
  letter-spacing:.2px;
}
.adobeBar__icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.adobeBar__icons img{
  width:42px;
  height:42px;
  object-fit:contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
  opacity:.98;
}
@media (max-width: 520px){
  .adobeBar__icons img{ width:34px; height:34px; }
}

/* ===== Adobe Suite Bar (FORCE TRUE BLACK) ===== */
.adobeBar{
  background:#000 !important;
  background-image:none !important;
}
.adobeBar *{
  background-color:transparent;
}

/* =========================
   How It Works – Color Upgrade
   ========================= */

/*#how .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255,255,255,0.08);
  background: #111;
}

#how .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Upload – Blue */
/*#how .card:nth-child(1) {
  border-top: 4px solid #3B82F6;
}
#how .card:nth-child(1) .icon {
  background: rgba(59,130,246,0.15);
  color: #3B82F6;
}

/* Editing – Purple */
/*#how .card:nth-child(2) {
  border-top: 4px solid #8B5CF6;
}
#how .card:nth-child(2) .icon {
  background: rgba(139,92,246,0.15);
  color: #8B5CF6;
}

/* Preview – Orange */
/*#how .card:nth-child(3) {
  border-top: 4px solid #F59E0B;
}
#how .card:nth-child(3) .icon {
  background: rgba(245,158,11,0.15);
  color: #F59E0B;
}

/* Delivery – Green (Success) */
/*#how .card:nth-child(4) {
  border-top: 4px solid #22C55E;
}
#how .card:nth-child(4) .icon {
  background: rgba(34,197,94,0.15);
  color: #22C55E;
}


/* =========================================
   Editing page – How it works (COLOR UPGRADE)
   Works even if class names differ
   ========================================= */

/* Target the 4 cards inside the How section no matter the wrapper class */
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards){
  display: flex;
  flex-wrap: wrap;
}

/* Base card styling (broad target) */
body[data-page="editing"] #how :is(.howCard,.howStep,.howStepCard,.howItem,.card){
  position: relative;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Hover lift */
body[data-page="editing"] #how :is(.howCard,.howStep,.howStepCard,.howItem,.card):hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(0,0,0,.45) !important;
}

/* Add top accent bar to each card */
body[data-page="editing"] #how :is(.howCard,.howStep,.howStepCard,.howItem,.card)::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:14px;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  opacity: .95;
}

/* We color the accents by card order (1–4) */
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(1) :is(.howCard,.howStep,.howStepCard,.howItem,.card)::before{
  background: #31A8FF; /* Upload – Adobe blue */
}
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(2) :is(.howCard,.howStep,.howStepCard,.howItem,.card)::before{
  background: #A855F7; /* Editing – Purple */
}
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(3) :is(.howCard,.howStep,.howStepCard,.howItem,.card)::before{
  background: #F59E0B; /* Preview – Amber */
}
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(4) :is(.howCard,.howStep,.howStepCard,.howItem,.card)::before{
  background: #22C55E; /* Delivery – Green success */
}

/* Icon bubble color (works with common icon class names) */
body[data-page="editing"] #how :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.25) !important;
}

/* Color icon bubbles by step order too */
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(1) :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  border-color: rgba(49,168,255,.35) !important;
  background: rgba(49,168,255,.12) !important;
}
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(2) :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  border-color: rgba(168,85,247,.35) !important;
  background: rgba(168,85,247,.12) !important;
}
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(3) :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  border-color: rgba(245,158,11,.35) !important;
  background: rgba(245,158,11,.12) !important;
}
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(4) :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  border-color: rgba(34,197,94,.40) !important;
  background: rgba(34,197,94,.12) !important;
}

/* Make Delivery card feel like "success" */
body[data-page="editing"] #how :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(4) :is(.howCard,.howStep,.howStepCard,.howItem,.card){
  border-color: rgba(34,197,94,.28) !important;
}

/* ================================
   EDITING PAGE — How it works (fix visibility + add color)
   ================================ */

/* Card grid wrapper (covers most class names you might be using) */
body[data-page="editing"] :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards){
  display: flex !important;
  gap: 22px !important;
  justify-content: center !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
}

/* Base card (make it readable + punchy) */
body[data-page="editing"] :is(.howCard,.howStep,.howStepCard,.howItem){
  background: linear-gradient(180deg, #16181d, #0f1115) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.45) !important;
  position: relative !important;
  overflow: hidden !important;
  transform: translateZ(0);
}

/* Make ALL text inside the cards visible again */
body[data-page="editing"] :is(.howCard,.howStep,.howStepCard,.howItem) *{
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
}

/* Add a top accent bar */
body[data-page="editing"] :is(.howCard,.howStep,.howStepCard,.howItem)::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:14px;
  height:5px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
}

/* Step-by-step colors (1 Upload, 2 Editing, 3 Preview, 4 Delivery) */
body[data-page="editing"] :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(1) :is(.howCard,.howStep,.howStepCard,.howItem)::before{
  background: linear-gradient(90deg, #31A8FF, #00D4FF) !important;
}
body[data-page="editing"] :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(2) :is(.howCard,.howStep,.howStepCard,.howItem)::before{
  background: linear-gradient(90deg, #A855F7, #6366F1) !important;
}
body[data-page="editing"] :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(3) :is(.howCard,.howStep,.howStepCard,.howItem)::before{
  background: linear-gradient(90deg, #F59E0B, #F97316) !important;
}
body[data-page="editing"] :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(4) :is(.howCard,.howStep,.howStepCard,.howItem)::before{
  background: linear-gradient(90deg, #22C55E, #16A34A) !important;
}

/* Icon bubble — make it pop */
body[data-page="editing"] :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.35) !important;
}

/* Colored icon bubble per step */
body[data-page="editing"] :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(1) :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  background: rgba(49,168,255,.14) !important;
  border-color: rgba(49,168,255,.35) !important;
}
body[data-page="editing"] :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(2) :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  background: rgba(168,85,247,.14) !important;
  border-color: rgba(168,85,247,.35) !important;
}
body[data-page="editing"] :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(3) :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  background: rgba(245,158,11,.14) !important;
  border-color: rgba(245,158,11,.35) !important;
}
body[data-page="editing"] :is(.howSteps,.howGrid,.howRow,.howWrap,.howContainer,.howCards) > :nth-child(4) :is(.howIcon,.howStepIcon,.stepIcon,.iconBubble,.icon){
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(34,197,94,.38) !important;
}

/* Arrows — stronger blue */
body[data-page="editing"] :is(.howArrow,.arrow,.stepArrow){
  color: #31A8FF !important;
  opacity: 1 !important;
  filter: drop-shadow(0 6px 10px rgba(49,168,255,.35));
}

/* Hover lift */
body[data-page="editing"] :is(.howCard,.howStep,.howStepCard,.howItem):hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 30px 75px rgba(0,0,0,.55) !important;
}


/* =========================================================
   FIX FOR GOOD: Editing page "How it works" (color + readable)
   ========================================================= */

body[data-page="editing"] #how .howFlow{
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:18px !important;
  flex-wrap:wrap !important;
  margin-top:22px !important;
  padding: 10px 0 4px !important;
}

body[data-page="editing"] #how .howArrow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:34px !important;
  font-weight:900 !important;
  color:#31A8FF !important;
  opacity:1 !important;
  text-shadow: 0 0 18px rgba(49,168,255,.35) !important;
  margin-top:58px !important;
}

/* Base card */
body[data-page="editing"] #how .howStep{
  width:210px !important;
  min-height:240px !important;
  padding:24px 18px 18px !important;
  border-radius:22px !important;
  position:relative !important;
  overflow:hidden !important;

  background: linear-gradient(180deg, #151821 0%, #0b0d12 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
  text-align:center !important;
}

/* Make sure NOTHING inside is faded */
body[data-page="editing"] #how .howStep *{
  opacity:1 !important;
  color: rgba(255,255,255,.92) !important;
}

/* Top accent bar */
body[data-page="editing"] #how .howStep::before{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  right:16px !important;
  top:14px !important;
  height:6px !important;
  border-radius:999px !important;
  background: rgba(255,255,255,.20) !important;
}

/* Titles & text */
body[data-page="editing"] #how .howStep h3{
  margin:12px 0 8px !important;
  font-size:18px !important;
  letter-spacing:-.01em !important;
}
body[data-page="editing"] #how .howStep p{
  margin:0 !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color: rgba(255,255,255,.78) !important;
}

/* Icon bubble */
body[data-page="editing"] #how .howIcon{
  width:56px !important;
  height:56px !important;
  border-radius:16px !important;
  margin: 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.35) !important;
}

body[data-page="editing"] #how .howIcon svg{
  width:26px !important;
  height:26px !important;
  fill: rgba(255,255,255,.95) !important;
}

/* Step accent colors (use nth-of-type so arrows don't mess the order) */
body[data-page="editing"] #how .howStep:nth-of-type(1)::before{ background: linear-gradient(90deg, #31A8FF, #00D4FF) !important; }
body[data-page="editing"] #how .howStep:nth-of-type(2)::before{ background: linear-gradient(90deg, #A855F7, #6366F1) !important; }
body[data-page="editing"] #how .howStep:nth-of-type(3)::before{ background: linear-gradient(90deg, #F59E0B, #F97316) !important; }
body[data-page="editing"] #how .howStep:nth-of-type(4)::before{ background: linear-gradient(90deg, #22C55E, #16A34A) !important; }

/* Icon bubble tints per step */
body[data-page="editing"] #how .howStep:nth-of-type(1) .howIcon{ background: rgba(49,168,255,.14) !important; border-color: rgba(49,168,255,.35) !important; }
body[data-page="editing"] #how .howStep:nth-of-type(2) .howIcon{ background: rgba(168,85,247,.14) !important; border-color: rgba(168,85,247,.35) !important; }
body[data-page="editing"] #how .howStep:nth-of-type(3) .howIcon{ background: rgba(245,158,11,.14) !important; border-color: rgba(245,158,11,.35) !important; }
body[data-page="editing"] #how .howStep:nth-of-type(4) .howIcon{ background: rgba(34,197,94,.14) !important; border-color: rgba(34,197,94,.38) !important; }

/* Hover pop */
@media (hover:hover){
  body[data-page="editing"] #how .howStep:hover{
    transform: translateY(-6px) !important;
    box-shadow: 0 34px 80px rgba(0,0,0,.55) !important;
  }
}

/* Mobile */
@media (max-width: 980px){
  body[data-page="editing"] #how .howArrow{ display:none !important; }
  body[data-page="editing"] #how .howStep{ width:min(360px, 92vw) !important; }
}

/* =========================================================
   HOW IT WORKS — COLOR + VISIBILITY UPGRADE (FORCED)
   ========================================================= */

/* Make sure the cards themselves are dark + readable */
#how .howStep{
  background: linear-gradient(180deg, #141821 0%, #0b0d12 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.45) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Force text to show (fix “white-on-white” / low-opacity issues) */
#how .howStep *,
#how .howStep h3,
#how .howStep p{
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
}

#how .howStep p{
  color: rgba(255,255,255,.78) !important;
}

/* Strong top accent bar */
#how .howStep::before{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  right:16px !important;
  top:14px !important;
  height:6px !important;
  border-radius:999px !important;
  background: rgba(255,255,255,.20) !important;
}

/* Soft glow overlay */
#how .howStep::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:.9 !important;
  background: radial-gradient(420px 240px at 20% 10%, rgba(255,255,255,.10), rgba(0,0,0,0) 60%) !important;
}

/* Icon bubble pop */
#how .howIcon{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
}

/* STEP COLORS (1 Upload, 2 Editing, 3 Preview, 4 Delivery) */
#how .howStep:nth-of-type(1)::before{ background: linear-gradient(90deg, #31A8FF, #00D4FF) !important; }
#how .howStep:nth-of-type(2)::before{ background: linear-gradient(90deg, #F59E0B, #F97316) !important; }
#how .howStep:nth-of-type(3)::before{ background: linear-gradient(90deg, #A855F7, #6366F1) !important; }
#how .howStep:nth-of-type(4)::before{ background: linear-gradient(90deg, #22C55E, #16A34A) !important; }

/* Glow tint per card */
#how .howStep:nth-of-type(1)::after{ background: radial-gradient(420px 240px at 20% 10%, rgba(49,168,255,.22), rgba(0,0,0,0) 60%) !important; }
#how .howStep:nth-of-type(2)::after{ background: radial-gradient(420px 240px at 20% 10%, rgba(245,158,11,.20), rgba(0,0,0,0) 60%) !important; }
#how .howStep:nth-of-type(3)::after{ background: radial-gradient(420px 240px at 20% 10%, rgba(168,85,247,.20), rgba(0,0,0,0) 60%) !important; }
#how .howStep:nth-of-type(4)::after{ background: radial-gradient(420px 240px at 20% 10%, rgba(34,197,94,.22), rgba(0,0,0,0) 60%) !important; }

/* Icon bubble tint per step */
#how .howStep:nth-of-type(1) .howIcon{ background: rgba(49,168,255,.14) !important; border-color: rgba(49,168,255,.35) !important; }
#how .howStep:nth-of-type(2) .howIcon{ background: rgba(245,158,11,.14) !important; border-color: rgba(245,158,11,.35) !important; }
#how .howStep:nth-of-type(3) .howIcon{ background: rgba(168,85,247,.14) !important; border-color: rgba(168,85,247,.35) !important; }
#how .howStep:nth-of-type(4) .howIcon{ background: rgba(34,197,94,.14) !important; border-color: rgba(34,197,94,.38) !important; }

/* Delivery = success emphasis */
#how .howStep:nth-of-type(4){
  border-color: rgba(34,197,94,.30) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.50) !important;
}

/* Arrows: stronger + glow */
#how .howArrow{
  color: #31A8FF !important;
  opacity: 1 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 16px rgba(49,168,255,.35) !important;
}

/* Hover lift */
@media (hover:hover){
  #how .howStep:hover{
    transform: translateY(-7px) !important;
    box-shadow: 0 38px 105px rgba(0,0,0,.58) !important;
  }
}

/* =========================================================
   HOW IT WORKS — FIX COLORS FOR ARROW-IN-BETWEEN LAYOUT
   Steps are children 1,3,5,7 because arrows are 2,4,6
   ========================================================= */

#how .howFlow > .howStep:nth-child(1)::before{ background: linear-gradient(90deg, #31A8FF, #00D4FF) !important; }
#how .howFlow > .howStep:nth-child(3)::before{ background: linear-gradient(90deg, #F59E0B, #F97316) !important; }
#how .howFlow > .howStep:nth-child(5)::before{ background: linear-gradient(90deg, #A855F7, #6366F1) !important; }
#how .howFlow > .howStep:nth-child(7)::before{ background: linear-gradient(90deg, #22C55E, #16A34A) !important; }

#how .howFlow > .howStep:nth-child(1)::after{ background: radial-gradient(420px 240px at 20% 10%, rgba(49,168,255,.22), rgba(0,0,0,0) 60%) !important; }
#how .howFlow > .howStep:nth-child(3)::after{ background: radial-gradient(420px 240px at 20% 10%, rgba(245,158,11,.20), rgba(0,0,0,0) 60%) !important; }
#how .howFlow > .howStep:nth-child(5)::after{ background: radial-gradient(420px 240px at 20% 10%, rgba(168,85,247,.20), rgba(0,0,0,0) 60%) !important; }
#how .howFlow > .howStep:nth-child(7)::after{ background: radial-gradient(420px 240px at 20% 10%, rgba(34,197,94,.22), rgba(0,0,0,0) 60%) !important; }

#how .howFlow > .howStep:nth-child(1) .howIcon{ background: rgba(49,168,255,.14) !important; border-color: rgba(49,168,255,.35) !important; }
#how .howFlow > .howStep:nth-child(3) .howIcon{ background: rgba(245,158,11,.14) !important; border-color: rgba(245,158,11,.35) !important; }
#how .howFlow > .howStep:nth-child(5) .howIcon{ background: rgba(168,85,247,.14) !important; border-color: rgba(168,85,247,.35) !important; }
#how .howFlow > .howStep:nth-child(7) .howIcon{ background: rgba(34,197,94,.14) !important; border-color: rgba(34,197,94,.38) !important; }

/* Delivery gets a stronger "success" feel */
#how .howFlow > .howStep:nth-child(7){
  border-color: rgba(34,197,94,.30) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.50) !important;
}



/* =========================
   EXACT MOBILE HERO FIX
   ========================= */

.heroEditing,
.heroBottomNote {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    background-position: center center;
  }

  .hero__top {
    position: sticky;
    top: 0;
  }

  .hero__nav {
    padding: 14px 0;
  }

  .brand__name {
    font-size: 17px;
  }

  .nav {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hero__content {
    min-height: auto;
    display: block;
    padding: 48px 0 60px;
  }

  .hero__text {
    max-width: 100%;
    padding: 0 6px;
    margin-top: 0;
  }

  .hero__text h1 {
    font-size: clamp(2rem, 8.8vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    margin: 0 0 14px;
  }

  .hero__text p {
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 0 0 18px;
    max-width: 100%;
  }

  .hero__buttons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .hero__buttons .btn {
    width: min(100%, 300px);
    min-height: 50px;
  }

  .hero__hint {
    display: none;
  }

  .heroEditing {
    width: min(92%, 360px);
    margin: 18px auto 12px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.14);
    text-align: center;
  }

  .heroEditing__text {
    margin: 0 0 12px;
    color: rgba(255,255,255,.92);
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .heroEditing__btn {
    width: min(100%, 260px);
    margin: 0 auto;
  }

  .heroBottomNote {
    position: static;
    width: min(92%, 500px);
    margin: 20px auto 20px;
    padding: 12px 14px;
    border-radius: 16px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(255,255,255,.86);
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
  }
}

@media (max-width: 480px) {
  .container {
    width: min(100%, calc(100% - 28px));
  }

  .hero__content {
    padding: 36px 0 14px;
  }

  .hero__text h1 {
    font-size: clamp(1.8rem, 9.6vw, 2.55rem);
    line-height: 1.05;
  }

  .hero__text p {
    font-size: 0.93rem;
  }

  .heroEditing {
    width: 100%;
    padding: 14px;
  }

  .heroEditing__text {
    font-size: 0.9rem;
  }

  .heroBottomNote {
    width: 100%;
    font-size: 0.74rem;
    padding: 11px 12px;
  }
}

/* =========================
   MOBILE HERO CLEANUP
   ========================= */

/* keep desktop title by default */
.heroTitle--mobile {
  display: none;
}

.heroTitle--desktop {
  display: inline;
}

/* make hamburger visible and clean */
.nav__toggle {
  position: relative;
  z-index: 60;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: #fff;
  border-radius: 999px;
}

/* mobile fixes */
@media (max-width: 768px) {
  /* remove heavy hero darkening so image is visible */
  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.20) 0%,
      rgba(0,0,0,.08) 22%,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,.08) 75%,
      rgba(0,0,0,.18) 100%
    );
  }

  /* desktop nav hidden, hamburger shown */
  .nav {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
  }

  /* show shorter mobile title */
  .heroTitle--desktop {
    display: none;
  }

  .heroTitle--mobile {
    display: inline;
  }

  .hero__text h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
  }

  .hero__text p {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* mobile menu panel */
  .nav__mobile {
    padding: 12px 0 16px;
  }

  .nav__mobile a {
    display: block;
    text-align: center;
    font-weight: 700;
  }
}

@media (max-width: 480px) {
  .hero__text h1 {
    font-size: clamp(1.8rem, 9vw, 2.35rem);
    line-height: 1.1;
  }

  .hero__text p {
    font-size: 0.95rem;
  }
}

/* Editing services menu button */

.navEditing{
  background:#1473E6;
  color:#fff;
  font-weight:700;
  text-align:center;
  border-radius:12px;
  border:none;
}

.navEditing:hover{
  background:#0d66d0;
}

/* Hide editing box on mobile */

@media (max-width: 768px) {
  .heroEditing {
    display: none;
  }
}