:root{
  --pink: #F7C7D6;
  --pink-2: #FBE1EA;
  --rose: #A46E69;
  --white: #ffffff;

  /* Text */
  --text: rgba(255,255,255,0.92);
  --text-dim: rgba(255,255,255,0.72);
  --small-text: #6A3442;
  --small-text-dim: rgba(106, 52, 66, 0.74);
  --ink: #1F1B1B;

  /* Layout */
  --radius: 18px;
  --wrap: 1150px;

  /* Shadows */
  --shadow: 0 24px 50px rgba(18, 10, 12, 0.22);
  --shadow-soft: 0 16px 30px rgba(18, 10, 12, 0.14);

  /* Milky glass (tweak these to taste) */
  --glass-strong: rgba(255,255,255,0.84); /* most milky */
  --glass: rgba(255,255,255,0.72);        /* milky default */
  --glass-soft: rgba(255,255,255,0.58);   /* more transparent */
  --glass-light: rgba(255,255,255,0.40);  /* very transparent */

  /* Page-specific surfaces */
  --order-left-bg: var(--glass-light);
  --order-right-bg: var(--glass);
  --faq-bg: var(--glass-soft);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--pink);
  background-image: url("../img/bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

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

.wrap{
  width: min(var(--wrap), calc(100% - 44px));
  margin: 0 auto;
}

/* =========================
   Header
   ========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 16px 0 12px 0;
  background: transparent;
  transition: background 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease;
}

.topbar.is-scrolled{
  background-image:
    linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)),
    url("../img/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  box-shadow: 0 12px 30px rgba(18,10,12,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand img{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  background: rgba(255,255,255,0.15);
}

.brand span{
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--small-text);
}

.nav{
  display: flex;
  gap: 18px;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav a{
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--small-text-dim);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
}

.nav a:hover{ color: var(--small-text); }

.nav a.active{
  color: var(--small-text);
  border-bottom-color: rgba(106, 52, 66, 0.85);
}

.social{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.social a{
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--small-text-dim);
}

.social a:hover{ color: var(--small-text); }

.ig-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ig-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ig-icon{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.ig-icon .ig-dot{
  fill: currentColor;
  stroke: none;
}



/* =========================
   Mobile navigation
   ========================= */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.nav-toggle{
  display: none; /* shown on small screens */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(106,52,66,0.28);
  background: rgba(255,255,255,0.35);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.nav-toggle:hover{ background: rgba(255,255,255,0.48); }

.nav-toggle-icon{
  width: 22px;
  height: 22px;
  stroke: var(--small-text);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.nav-open{ overflow: hidden; }

.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.mobile-nav.is-open{
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav__panel{
  width: 100%;
  height: 100%;
  padding: 18px 18px 26px 18px;
  display: flex;
  flex-direction: column;

  /* Milky overlay that matches the site background */
  background-image:
    linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)),
    url("../img/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transform: translateY(-8px);
  transition: transform 220ms ease;
}

.mobile-nav.is-open .mobile-nav__panel{ transform: translateY(0); }

.mobile-nav__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nav-close{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(106,52,66,0.28);
  background: rgba(255,255,255,0.45);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.nav-close:hover{ background: rgba(255,255,255,0.60); }

.nav-close-icon{
  width: 22px;
  height: 22px;
  stroke: var(--small-text);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-nav__links{
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.mobile-nav__links a{
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(106,52,66,0.12);
  box-shadow: var(--shadow-soft);

  color: rgba(33, 24, 26, 0.86);
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 14px;
}

.mobile-nav__links a:hover{
  background: rgba(255,255,255,0.78);
}

.mobile-nav__links a.active{
  border-color: rgba(106, 52, 66, 0.55);
  box-shadow: 0 0 0 4px rgba(164,110,105,0.18), var(--shadow-soft);
}

.mobile-nav__footer{
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  justify-content: center;
}

.mobile-nav__footer .ig-link{
  color: rgba(33, 24, 26, 0.68);
}
.mobile-nav__footer .ig-link:hover{
  color: rgba(33, 24, 26, 0.90);
}

/* =========================
   Page layout
   ========================= */
.page{
  min-height: calc(100vh - 92px);
  display: flex;
  align-items: center;
  padding: 22px 0 58px 0;
}

.page-top{
  align-items: flex-start;
  padding-top: 28px;
}

.about-page .page{
  align-items: flex-start;
  padding-top: 28px;
}

/* =========================
   Hero / Poster
   ========================= */
.hero{
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: center;
}

.kicker{
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--small-text-dim);
  margin-bottom: 16px;
}

.hero-title{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.92;
  font-size: clamp(50px, 6.6vw, 100px);
  margin: 0;
  color: #ffffff;
/*
    Keep wrapping predictable:
    - No breaking inside words (prevents letter-by-letter wraps)
    - Wrap only at spaces and explicit opportunities (e.g., <br>, <wbr>)
  */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.hero-sub{
  margin-top: 18px;
  font-size: 15px;
  color: var(--small-text-dim);
  max-width: 46ch;
}

.actions{
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.cutout-wrap{
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.cutout{
  width: min(420px, 100%);
  filter: drop-shadow(0 26px 32px rgba(18, 10, 12, 0.26));
}

.home{
  /*
    Single knob to scale the homepage cutout image.
    Examples: 140%, 170%, 220%
  */
  --home-cutout-scale: 165%;
}

/* Keep homepage hero pinned near the top so a large cutout never gets clipped */
.home .page{
  align-items: flex-start;
}

.home .hero{
  /* left = text, right = image column */
  grid-template-columns: 4fr 1fr;
  gap: 14px;
  align-items: end;
}

/* When the cutout overlaps, keep text readable */
.home .hero > div:first-child{
  position: relative;
  z-index: 2;
}

.home .cutout-wrap{
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.home .cutout{
  /*
    Uses the single percentage above. Because the wrapper is flex-end,
    extra width naturally "spills" left into the text column.
  */
  width: var(--home-cutout-scale);
  max-width: none; /* allow overlap */
  transform: none;
  transform-origin: right bottom;
}

.poster{
  width: 100%;
  max-width: 980px;
}

.poster-title{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.92;
  font-size: clamp(44px, 6vw, 86px);
  margin: 0 0 14px 0;
  text-transform: uppercase;
}

/* =========================
   Buttons
   ========================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.10);
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  box-shadow: var(--shadow-soft);
  transition: transform .08s ease, background .15s ease;
}

.btn:hover{ background: rgba(255,255,255,0.18); }
.btn:active{ transform: translateY(1px); }

.btn.solid{
  background: rgba(255,255,255,0.88);
  color: rgba(33, 24, 26, 0.92);
  border-color: rgba(255,255,255,0.88);
}

.btn.solid:hover{ background: rgba(255,255,255,0.95); }

.btn.rose{
  background: rgba(106,52,66,0.92);
  border-color: rgba(106,52,66,0.92);
  color: rgba(255,255,255,0.98);
}
.btn.rose:hover{ background: rgba(106,52,66,0.98); }

.btn.ink{
  background: rgba(255,255,255,0.45);
  border-color: rgba(106, 52, 66, 0.35);
  color: var(--small-text);
  box-shadow: none;
}
.btn.ink:hover{ background: rgba(255,255,255,0.60); }

/* =========================
   Cards
   ========================= */
.card{
  background: var(--white);
  color: rgba(33, 24, 26, 0.90);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.card.glass{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================
   Forms (global)
   ========================= */
.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

label{
  display: grid;
  gap: 7px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(33, 24, 26, 0.72);
}

input, select, textarea{
  font: inherit;
  font-size: 14px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(33, 24, 26, 0.18);
  background: rgba(255,255,255,0.95);
  outline: none;
  width: 100%;
  display: block;
}

textarea{ resize: vertical; min-height: 110px; }

input:focus, select:focus, textarea:focus{
  border-color: rgba(164,110,105,0.55);
  box-shadow: 0 0 0 4px rgba(164,110,105,0.18);
}

.note{
  font-size: 13px;
  color: rgba(33, 24, 26, 0.60);
  margin-top: 10px;
}

/* =========================
   Gallery
   ========================= */
.gallery{
  width: 100%;
  max-width: 1120px;
}

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

.gallery-grid img{
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255,255,255,0.24);
}


/* =========================
   Order page
   ========================= */
.span-2{ grid-column: 1 / -1; }

.order-layout{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 14px;
  align-items: start;
}

.order-page .order-left-card{
  background: var(--order-left-bg);
}
.order-page .order-right-card{
  background: var(--order-right-bg);
}

.order-page .dm-note,
.order-page .dm-note-hero{
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  margin: 6px 0 18px 0;
  color: rgba(106,52,66,0.92);
}

.order-page .dm-note a,
.order-page .dm-note-hero a{
  color: rgba(106,52,66,0.98);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fieldset.no-box{
  border: 0;
  padding: 0;
  margin: 14px 0 10px 0;
  min-inline-size: auto;
}
.fieldset.no-box legend{
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(33,24,26,0.86);
}

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

.radio-line,
.checkline{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(33,24,26,0.14);
  background: rgba(255,255,255,0.72);
  cursor: pointer;
}

.order-page .radio-line.flat,
.order-page .checkline.flat{
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

.radio-line input,
.checkline input{
  flex: 0 0 auto;
  margin: 0;
  width: 18px;
  height: 18px;
}

.radio-line span,
.checkline span{
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(33,24,26,0.82);
}

.order-page .helper{
  font-size: 13px;
  font-weight: 500;
  color: rgba(33,24,26,0.58);
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.45;
  margin-top: 8px;
}

.size-text-list{
  display: grid;
  gap: 10px;
}

.summary{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(33,24,26,0.10);
}
.summary-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(33,24,26,0.08);
  color: rgba(33,24,26,0.78);
}
.summary-row.total{
  border-bottom: none;
  padding-top: 10px;
  font-weight: 800;
}
.summary-note{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(33,24,26,0.58);
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.45;
}

.submit-wrap{
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.submit-btn{
  width: auto;
  min-width: 320px;
}

.order-page textarea{
  width: 100%;
  display: block;
  box-sizing: border-box;
}

/* =========================
   FAQ
   ========================= */
.faq-list{
  display: grid;
  gap: 12px;
}
.faq-item{
  background: var(--faq-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(33, 24, 26, 0.90);
}
.faq-item h3{
  margin: 0 0 8px 0;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(33,24,26,0.86);
}
.faq-item p{
  margin: 0;
  color: rgba(33,24,26,0.72);
  line-height: 1.55;
}

/* About */
.about{
  width: 100%;
  max-width: 980px;
}

.about-page .kicker,
.about-page .poster-title{
  position: relative;
  z-index: 2;
}

.about-page .about-grid{
  position: relative;
  z-index: 1;
}

.about-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 14px;
  margin-top: 10px;
  align-items: center;
}

.about-photo{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.about-photo img{
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* Footer */
.footer{
  padding: 20px 0 26px 0;
  color: var(--small-text-dim);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer a{ color: var(--small-text-dim); }
.footer a:hover{ color: var(--small-text); }

.footer .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.footer .row > div{ flex: 1; }
.footer .row > div:nth-child(1){ text-align: left; }
.footer .row > div:nth-child(2){ text-align: center; }
.footer .row > div:nth-child(3){ text-align: right; }

.footer-email{
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.footer-email a{ color: var(--small-text); }
.footer-email a:hover{ color: rgba(106, 52, 66, 0.90); }


/* =========================
   Responsive
   ========================= */
@media (max-width: 860px){
  .has-mobile-nav .topbar .nav,
  .has-mobile-nav .topbar .social{ display: none; }

  .has-mobile-nav .topbar .nav-toggle{ display: inline-flex; }
}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .order-layout{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid{ grid-template-columns: 1fr; }
  .about-photo img{ height: 340px; }
  .grid-2{ grid-template-columns: 1fr; }

  .home .hero{ grid-template-columns: 1fr; }
  .home .cutout-wrap{ justify-content: center; }
  .home .cutout{
    width: min(420px, 100%);
    max-width: 100%;
  }
}

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

.about-page .card{ background: #ffffff; }
.faq-item{ background: #ffffff; }

.order-page .order-right-card{
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


/* Order page: spacing between How it works list and Policies block */
.order-page .how-list{
  margin-bottom: 22px;
}

.order-page .policy-block{
  margin-top: 18px;
}

/* Make headings bold */
.order-page .chip,
.order-page .policy-title{
  font-weight: 900;
}