/* ---------- Theme ---------- */
:root{
  --rose:        #cda3a1;
  --rose-deep:    #b3767a;
  --sage:        #8a9b78;
  --sage-deep:    #64764f;
  --olive:       #9d9a67;
  --periwinkle:  #8e97c9;
  --periwinkle-deep:#6b74ab;
  --cream:       #f5efe5;
  --cream-deep:   #ece1d1;
  --ink:         #2c2620;
  --ink-soft:     #5b4f43;
  --paper:       #fffaf3;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-script:  'Caveat', cursive;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: .9s;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  overflow:hidden;
}
h1,h2,h3,h4,h5{ font-family:var(--font-display); margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }

/* ---------- Top Nav ---------- */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  background:rgba(245,239,229,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(44,38,32,.06);
}
.logo{ display:flex; align-items:center; gap:.65rem; }
.logo-mark{
  flex-shrink:0; border-radius:50%; object-fit:cover; width:34px; height:34px;
  box-shadow:0 0 0 2px rgba(44,38,32,.08);
  transition:transform .4s var(--ease);
}
.logo:hover .logo-mark{ transform:rotate(-8deg) scale(1.05); }
.logo-text{
  font-family:var(--font-display);
  font-weight:700; font-size:1.2rem; letter-spacing:.01em; color:var(--ink);
}
.logo-accent{ color:var(--sage-deep); font-style:italic; font-weight:500; }
.nav-links{ display:flex; gap:2rem; position:relative; }
.nav-links a{
  font-size:.92rem; font-weight:500; color:var(--ink-soft);
  position:relative; padding:.2rem 0; transition:color .3s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--rose-deep); transition:width .35s var(--ease);
}
.nav-links a:hover, .nav-links a.is-current{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.is-current::after{ width:100%; }
.nav-links a:active{ opacity:.6; transition:opacity .1s ease; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.5rem; border-radius:999px; font-weight:600; font-size:.92rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.btn:active{ transform:scale(.94); transition-duration:.15s; }
.btn-primary{
  background:var(--ink); color:var(--paper);
  box-shadow:0 8px 24px -8px rgba(44,38,32,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(44,38,32,.55); background:var(--sage-deep); }
.btn-ghost{
  padding:.7rem 1.3rem; border-radius:999px; font-weight:600; font-size:.85rem;
  color:var(--ink); background:rgba(44,38,32,.07); transition:all .3s var(--ease);
}
.btn-ghost:hover{ background:rgba(44,38,32,.14); transform:translateY(-2px); }
.btn-ghost:active{ transform:scale(.94); transition-duration:.15s; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:.4rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* ---------- Dot navigation ---------- */
.dot-nav{
  position:fixed; right:clamp(1rem,3vw,2.25rem); top:50%; transform:translateY(-50%);
  z-index:55; display:flex; flex-direction:column; gap:.9rem;
}
.dot-nav button{ width:11px; height:11px; border-radius:50%; background:rgba(44,38,32,.18); transition:all .35s var(--ease); position:relative; }
.dot-nav button::before{
  content:attr(aria-label); position:absolute; right:150%; top:50%; transform:translateY(-50%) translateX(6px);
  white-space:nowrap; font-size:.72rem; font-weight:500; letter-spacing:.01em; background:var(--ink); color:var(--paper);
  padding:.4rem .85rem; border-radius:999px; box-shadow:0 12px 24px -10px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.dot-nav button:hover::before{ opacity:1; transform:translateY(-50%) translateX(0); }
.dot-nav button:hover{ transform:scale(1.2); }
.dot-nav button:active{ transform:scale(.85); transition-duration:.15s; }
.dot-nav button.is-active{ background:var(--ink); transform:scale(1.35); }

/* ---------- Slides / scroll snap ---------- */
.slides{
  height:100vh; height:100dvh; width:100%;
  overflow-y:scroll; overflow-x:hidden;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
}
.slide{
  height:100vh; height:100dvh; width:100%;
  scroll-snap-align:start; scroll-snap-stop:always;
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:clamp(5rem,8vw,7rem) clamp(1.5rem,6vw,5rem);
}
#hero, #services{ background:linear-gradient(160deg, var(--cream) 0%, var(--cream-deep) 100%); }
#work{ background:var(--paper); }
#about{ background:linear-gradient(160deg, #efe9d8 0%, var(--cream) 100%); }
#contact{ background:linear-gradient(160deg, var(--cream) 0%, var(--cream-deep) 100%); color:var(--ink); }
#contact .eyebrow{ color:var(--sage-deep); }
#contact input, #contact textarea{ background:var(--paper); color:var(--ink); border:1px solid rgba(44,38,32,.16); }
#contact input::placeholder, #contact textarea::placeholder{ color:var(--ink-soft); opacity:.6; }
#contact input:focus, #contact textarea:focus{ outline:none; border-color:var(--sage-deep); box-shadow:0 0 0 3px rgba(100,118,79,.14); }

.slide-inner{ max-width:1080px; width:100%; margin:0 auto; position:relative; z-index:2; transition:opacity .4s linear; }

/* Blobs (parallax) */
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; z-index:1; will-change:transform; }
.blob-rose{ width:38vw; height:38vw; background:var(--rose); top:-8%; left:-8%; }
.blob-sage{ width:30vw; height:30vw; background:var(--sage); bottom:-10%; right:-6%; }
.blob-peri{ width:22vw; height:22vw; background:var(--periwinkle); top:20%; right:12%; opacity:.35; }
.blob-sage-2{ width:34vw; height:34vw; background:var(--sage); top:-12%; right:-10%; opacity:.4; }
.blob-peri-2{ width:30vw; height:30vw; background:var(--periwinkle); bottom:-14%; left:-8%; opacity:.3; }
.blob-olive{ width:32vw; height:32vw; background:var(--olive); top:-10%; right:-8%; opacity:.35; }

/* ---------- Reveal / entrance animation ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slide.is-active .reveal{ opacity:1; transform:translateY(0); }
.slide-inner > .reveal:nth-of-type(1),.cards.reveal{ transition-delay:.05s; }
.slide-inner > .reveal:nth-of-type(2){ transition-delay:.16s; }
.slide-inner > .reveal:nth-of-type(3){ transition-delay:.27s; }
.slide-inner > .reveal:nth-of-type(4){ transition-delay:.38s; }
.slide-inner > .reveal:nth-of-type(5){ transition-delay:.49s; }
.cards .card:nth-child(1){ transition-delay:.2s; }
.cards .card:nth-child(2){ transition-delay:.34s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition-duration:.3s !important; transform:none !important; }
  .blob{ transition:none !important; }
  .hero-actions .btn-primary{ animation:none !important; }
  .hero-visual img{ animation:none !important; }
}
html.reduced-motion .reveal{ transition-duration:.25s; transform:translateY(8px); }

/* ---------- Hero ---------- */
.hero-inner{
  text-align:left; max-width:1180px;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(2rem,6vw,4rem);
}
.hero-text{ flex:1 1 480px; max-width:640px; }
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-deep); margin-bottom:1rem;
}
.display{
  font-size:clamp(3rem,9vw,6.2rem); font-weight:700; line-height:.98; color:var(--ink);
  margin-bottom:1rem;
}
.display span{ color:var(--rose-deep); font-style:italic; font-weight:500; }
.hero-visual{
  flex:0 1 400px; display:flex; align-items:center; justify-content:center;
}
.hero-visual img{
  width:100%; max-width:clamp(220px,30vw,400px); aspect-ratio:1;
  object-fit:cover; object-position:center;
  filter:drop-shadow(0 24px 36px rgba(44,38,32,.28));
  animation:heroVisualFloat 7s ease-in-out infinite;
}
@keyframes heroVisualFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
.hero-text > .reveal:nth-child(1){ transition-delay:.05s; }
.hero-text > .reveal:nth-child(2){ transition-delay:.16s; }
.hero-text > .reveal:nth-child(3){ transition-delay:.27s; }
.hero-text > .reveal:nth-child(4){ transition-delay:.38s; }
.hero-text > .reveal:nth-child(5){ transition-delay:.49s; }
.hero-visual.reveal{ transition-delay:.3s; }
.script-line{
  font-family:var(--font-script); font-size:clamp(1.4rem,2.6vw,2rem); color:var(--ink-soft);
  margin-bottom:2rem; max-width:32ch;
}
.hero-actions{ margin-bottom:2.2rem; }
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 8px 24px -8px rgba(44,38,32,.5); }
  50%{ box-shadow:0 10px 30px -6px rgba(179,118,122,.55); }
}
.hero-actions .btn-primary{ animation:ctaGlow 3.2s ease-in-out infinite; }
.social-row{ display:flex; gap:1rem; }
.social-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(44,38,32,.06); transition:all .3s var(--ease);
}
.social-icon svg{ width:16px; height:16px; }
.social-icon:hover{ background:var(--ink); color:var(--paper); transform:translateY(-3px); }
#contact .social-icon{ background:rgba(44,38,32,.07); }
#contact .social-icon:hover{ background:var(--ink); color:var(--paper); }

.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(44,38,32,.35); border-radius:20px; z-index:3;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:4px; height:8px; background:var(--ink-soft);
  border-radius:2px; transform:translateX(-50%); animation:cue 1.8s infinite;
}
@keyframes cue{ 0%{ opacity:1; top:6px;} 70%{ opacity:0; top:20px;} 100%{ opacity:0; top:6px;} }

/* ---------- Services ---------- */
.section-title{ font-size:clamp(2.1rem,5vw,3.2rem); font-weight:700; margin-bottom:2.2rem; }
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; }
.card{
  background:var(--paper); border-radius:22px; padding:2.2rem;
  box-shadow:0 20px 45px -24px rgba(44,38,32,.35);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  border:1px solid rgba(44,38,32,.05);
}
.card:hover{ transform:translateY(-8px); box-shadow:0 28px 55px -20px rgba(44,38,32,.4); }
.card-tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sage-deep); background:rgba(138,155,120,.14); padding:.35rem .8rem; border-radius:999px; margin-bottom:1rem;
}
.card-icon{
  width:52px; height:52px; border-radius:16px; background:var(--cream-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; color:var(--sage-deep);
}
#card-webdev .card-icon{ color:var(--periwinkle-deep); }
.card-icon svg{ width:26px; height:26px; }
#card-webdev .card-tag{ color:var(--periwinkle-deep); background:rgba(142,151,201,.14); }
.card h3{ font-size:1.5rem; margin-bottom:.6rem; }
.card p{ color:var(--ink-soft); font-size:.95rem; line-height:1.5; margin-bottom:1.2rem; }
.chip-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem; }
.chip-list li{
  font-size:.78rem; padding:.32rem .75rem; border-radius:999px; background:var(--cream-deep); color:var(--ink-soft);
}
.explore-link{
  font-weight:600; font-size:.92rem; color:var(--ink); display:inline-flex; gap:.4rem;
  position:relative; padding-bottom:.2rem; width:fit-content; background:none; border:none; font-family:inherit; cursor:pointer;
}
.explore-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:currentColor;
  transition:width .35s var(--ease);
}
.explore-link:hover::after{ width:100%; }
.explore-link span{ transition:transform .3s var(--ease); }
.explore-link:hover span{ transform:translateX(4px); }
.explore-link:active{ transform:scale(.97); transition:transform .15s var(--ease); }
.card-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.4rem; }
@keyframes cardPulse{
  0%,100%{ box-shadow:0 20px 45px -24px rgba(44,38,32,.35); }
  50%{ box-shadow:0 0 0 6px rgba(179,118,122,.35), 0 20px 45px -24px rgba(44,38,32,.35); }
}
.card.highlight{ animation:cardPulse 1.1s ease-in-out 2; }

/* ---------- Work / Showcase ---------- */
.work-inner{ max-width:1180px; }

.work-carousel{ position:relative; width:100%; }
.work-grid{
  display:flex; gap:1.4rem; width:100%; overflow-x:auto;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  padding:.4rem .2rem 1.3rem; cursor:grab;
  scrollbar-width:none; -ms-overflow-style:none;
  perspective:1200px;
}
.work-grid::-webkit-scrollbar{ display:none; }
.work-grid.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.work-card{
  flex:0 0 clamp(225px, 25vw, 290px);
  scroll-snap-align:start;
  background:var(--cream); border-radius:20px; overflow:hidden;
  border:1px solid rgba(44,38,32,.06);
  box-shadow:0 20px 45px -28px rgba(44,38,32,.4);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .45s var(--ease);
  transform-style:preserve-3d;
  will-change:transform;
}
.work-card.reveal{ transform:translateY(20px); }
.slide.is-active .work-card.reveal{ transform:translateY(0); }
.work-grid .work-card:nth-child(1){ transition-delay:.08s,.08s,.08s; }
.work-grid .work-card:nth-child(2){ transition-delay:.18s,.18s,.18s; }
.work-grid .work-card:nth-child(3){ transition-delay:.28s,.28s,.28s; }
.work-grid .work-card:nth-child(4){ transition-delay:.38s,.38s,.38s; }
.work-grid .work-card:nth-child(5){ transition-delay:.48s,.48s,.48s; }
.work-card:hover{ box-shadow:0 30px 60px -20px rgba(44,38,32,.45); }

.work-media{ height:150px; position:relative; overflow:hidden; }
.work-media-image img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

.work-body{ padding:1.2rem 1.3rem 1.4rem; }
.work-icon{
  width:40px; height:40px; border-radius:12px; background:var(--cream-deep); color:var(--periwinkle-deep);
  display:flex; align-items:center; justify-content:center;
}
.work-icon svg{ width:20px; height:20px; }
.work-body h3{ font-size:1.15rem; margin:.65rem 0 .4rem; }
.work-body p{ font-size:.87rem; color:var(--ink-soft); line-height:1.5; margin-bottom:.9rem; }
.work-detail-btn{ font-family:inherit; }

.carousel-arrow{
  position:absolute; top:42%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; background:var(--paper);
  border:1px solid rgba(44,38,32,.12); box-shadow:0 14px 30px -14px rgba(44,38,32,.4);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s ease;
}
.carousel-arrow svg{ width:18px; height:18px; }
.carousel-prev{ left:-8px; }
.carousel-next{ right:-8px; }
.carousel-arrow:hover{ transform:translateY(-50%) scale(1.08); box-shadow:0 18px 36px -14px rgba(44,38,32,.5); }
.carousel-arrow:active{ transform:translateY(-50%) scale(.9); transition-duration:.15s; }
.carousel-arrow[disabled]{ opacity:.25; pointer-events:none; }

.carousel-dots{ display:flex; gap:.5rem; justify-content:center; margin-top:.9rem; }
.carousel-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(44,38,32,.18); transition:all .3s var(--ease); }
.carousel-dots button:hover{ background:rgba(44,38,32,.35); }
.carousel-dots button.is-active{ background:var(--ink); width:22px; border-radius:999px; }

@media (max-width:720px){
  .carousel-arrow{ display:none; }
}


/* ---------- About ---------- */
.about-inner{ max-width:760px; }
.about-copy{ font-size:1.05rem; line-height:1.7; color:var(--ink-soft); margin-bottom:2.2rem; max-width:60ch; }
.about-stats{ display:flex; gap:2.5rem; }
.stat{ display:flex; flex-direction:column; }
.stat strong{ font-family:var(--font-display); font-size:2rem; color:var(--sage-deep); }
.stat span{ font-size:.8rem; color:var(--ink-soft); }

/* ---------- Contact ---------- */
.contact-inner{ max-width:640px; }
.contact-title{ color:var(--ink); }
.contact-form{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:2.4rem; }
.field-row{ display:flex; gap:.9rem; }
.contact-form input, .contact-form textarea{
  width:100%; padding:.85rem 1rem; border-radius:12px; font-family:inherit; font-size:.92rem;
  border:1px solid rgba(44,38,32,.15); background:var(--paper); resize:none;
}
.location{ font-size:.95rem; margin-bottom:1rem; color:var(--ink-soft); }
.copyright{ font-size:.78rem; color:var(--ink-soft); opacity:.7; margin-top:1rem; }

/* ---------- Floating chat + toast ---------- */
.chat-fab{
  position:fixed; bottom:1.75rem; right:1.75rem; z-index:70;
  display:flex; align-items:center; gap:.6rem; padding:.8rem 1.2rem 0.8rem 0.9rem;
  background:var(--ink); color:var(--paper); border-radius:999px;
  box-shadow:0 14px 32px -10px rgba(44,38,32,.55);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.chat-fab svg{ width:20px; height:20px; }
.chat-fab span{ font-size:.85rem; font-weight:600; }
.chat-fab:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 18px 36px -8px rgba(44,38,32,.6); }

.copy-toast{
  position:fixed; bottom:5.5rem; right:1.75rem; z-index:80;
  background:var(--ink); color:var(--paper); padding:.55rem 1rem; border-radius:10px; font-size:.82rem;
  opacity:0; transform:translateY(8px); transition:all .3s var(--ease); pointer-events:none;
}
.copy-toast.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .cards{ grid-template-columns:1fr; }
  .about-stats{ flex-wrap:wrap; gap:1.5rem; }
  .field-row{ flex-direction:column; }
  .dot-nav{ display:none; }
  .chat-fab span{ display:none; }
  .chat-fab{ padding:.9rem; }
  .hero-inner{ flex-direction:column-reverse; text-align:center; }
  .hero-text{ max-width:100%; }
  .hero-text .eyebrow, .hero-text .script-line{ margin-left:auto; margin-right:auto; }
  .hero-actions, .social-row{ justify-content:center; }
  .hero-visual img{ max-width:200px; }
}

/* mobile nav dropdown when toggled */
.topnav.is-open .nav-links{
  display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
  background:var(--paper); padding:1.5rem; gap:1.2rem; box-shadow:0 20px 30px -20px rgba(0,0,0,.2);
}
.topnav.is-open .nav-cta{ display:inline-flex; margin:0 1.5rem 1.5rem; }

/* ---------- Section-name badge ---------- */
.section-badge{
  position:fixed; top:clamp(5.5rem,11vw,7.5rem); left:50%; z-index:300; pointer-events:none;
  transform:translateX(-50%) translateY(-8px) scale(.94);
  opacity:0; transition:opacity .35s var(--ease), transform .4s var(--ease);
}
.section-badge.is-visible{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.section-badge-card{
  display:flex; align-items:center; gap:.65rem;
  padding:.7rem 1.6rem; border-radius:999px;
  background:var(--paper); border:1px solid rgba(44,38,32,.1);
  box-shadow:0 22px 40px -18px rgba(44,38,32,.4);
}
.section-badge-card::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--rose-deep); flex-shrink:0;
}
.section-badge-text{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1rem,2vw,1.25rem);
  color:var(--ink); letter-spacing:.01em;
}

/* ---------- Modal (tools) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:2rem 1.25rem; background:rgba(44,38,32,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .4s var(--ease);
}
.modal-overlay[hidden]{ display:none; }
.modal-overlay.is-visible{ opacity:1; }
.modal{
  background:var(--paper); width:min(94vw, 560px); max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden; position:relative; border-radius:28px;
  transform:scale(.9) translateY(24px); opacity:0;
  transition:transform .55s cubic-bezier(.16,.84,.44,1), opacity .4s ease;
  box-shadow:0 40px 80px -20px rgba(44,38,32,.5), 0 0 0 1px rgba(44,38,32,.05);
}
.modal.modal-wide{ width:min(94vw, 780px); }
.modal-overlay.is-visible .modal{ transform:scale(1) translateY(0); opacity:1; }
.modal-body{ overflow-y:auto; padding:2.8rem 2.2rem 2.2rem; transition:opacity .2s ease, transform .2s ease; }
.modal-body.is-swapping{ opacity:0; transform:translateY(10px); }
.modal-close{
  position:absolute; top:1.1rem; right:1.1rem; z-index:5; width:34px; height:34px; border-radius:50%;
  background:var(--cream-deep); font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease); box-shadow:0 4px 14px -6px rgba(44,38,32,.35);
}
.modal-close:hover{ background:var(--ink); color:var(--paper); transform:rotate(90deg) scale(1.08); }
.modal-body h3{ font-size:1.6rem; margin-bottom:.5rem; padding-right:1.6rem; }
.modal-body > p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:1.4rem; }

.modal-body > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.modal-body > *.is-in{ opacity:1; transform:translateY(0); }

.service-block{ transition:transform .3s var(--ease); }
.service-block:hover{ transform:translateX(2px); }
.pricing-card{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.pricing-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -16px rgba(44,38,32,.3); border-color:var(--sage-deep); }
.faq-item summary{ transition:color .25s var(--ease); }
.faq-item summary:hover{ color:var(--sage-deep); }

@media (max-width:600px){
  .modal, .modal.modal-wide{ width:100%; max-height:92vh; border-radius:22px; }
  .modal-body{ padding:2.4rem 1.4rem 1.8rem; }
}

.estimator-types{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; }
.est-type{
  font-size:.82rem; font-weight:600; padding:.5rem 1rem; border-radius:999px;
  background:var(--cream-deep); color:var(--ink-soft); transition:all .3s var(--ease);
}
.est-type.is-active{ background:var(--ink); color:var(--paper); }

.estimate-result{
  background:var(--cream); border-radius:16px; padding:1.1rem 1.3rem; margin-bottom:1.4rem;
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
}
.estimate-badge{
  font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:999px; background:var(--periwinkle); color:var(--ink);
  transition:background .4s var(--ease);
}
.estimate-result p{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* ---------- Service detail modals ---------- */
.service-tagline{ font-family:var(--font-script); color:var(--sage-deep); font-size:1.3rem; margin:-.3rem 0 1.3rem; }
.service-block{ margin-bottom:1.6rem; }
.service-block h4{ font-size:.98rem; margin-bottom:.7rem; }
.service-list{ display:flex; flex-direction:column; gap:.55rem; }
.service-list li{ font-size:.88rem; color:var(--ink-soft); line-height:1.5; }
.service-list li strong{ color:var(--ink); }
.service-steps{ display:flex; flex-direction:column; gap:.65rem; counter-reset:step; }
.service-steps li{ display:flex; gap:.8rem; font-size:.88rem; color:var(--ink-soft); align-items:flex-start; line-height:1.4; }
.service-steps li::before{
  counter-increment:step; content:counter(step); flex-shrink:0; width:24px; height:24px; margin-top:.05rem;
  border-radius:50%; background:var(--ink); color:var(--paper); font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.pricing-card{ border:1px solid rgba(44,38,32,.12); border-radius:16px; padding:1rem; text-align:center; }
.pricing-card.is-featured{ border-color:var(--sage-deep); background:var(--cream); }
.pricing-card .price{ font-family:var(--font-display); font-size:1.35rem; margin:.4rem 0; }
.pricing-card .price span{ font-size:.68rem; font-weight:500; color:var(--ink-soft); font-family:var(--font-body); }
.pricing-card ul{ text-align:left; font-size:.76rem; color:var(--ink-soft); display:flex; flex-direction:column; gap:.35rem; margin-top:.6rem; }
.pricing-card .service-sub{ font-size:.8rem; color:var(--ink-soft); text-align:left; margin-top:.5rem; line-height:1.45; }
.pricing-solo{ max-width:280px; margin:0 auto; }
.pricing-note{ font-size:.8rem; color:var(--ink-soft); margin-top:.6rem; line-height:1.4; }
.service-block > p{ font-size:.88rem; color:var(--ink-soft); line-height:1.5; margin-bottom:.8rem; }
.service-hint{ font-size:.82rem; color:var(--ink-soft); margin:-.4rem 0 .8rem; }
.industry-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:.7rem; }
.industry-card{
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
  padding:1rem .6rem; border-radius:16px; background:var(--cream-deep); font-size:.8rem; font-weight:600; color:var(--ink);
  border:none; font-family:inherit; cursor:pointer; width:100%;
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.industry-card:hover{ transform:translateY(-3px); background:var(--cream); box-shadow:0 14px 28px -16px rgba(44,38,32,.3); }
.industry-card:active{ transform:translateY(-1px) scale(.96); transition-duration:.15s; }
.industry-icon{
  width:40px; height:40px; border-radius:12px; background:var(--paper); color:var(--periwinkle-deep);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(44,38,32,.06);
}
.industry-icon svg{ width:20px; height:20px; }

.modal-back{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; color:var(--ink-soft);
  background:none; border:none; font-family:inherit; cursor:pointer; padding:0 0 1rem; transition:color .25s var(--ease), gap .25s var(--ease);
}
.modal-back:hover{ color:var(--ink); gap:.7rem; }
.modal-back:active{ transform:scale(.96); transition-duration:.15s; }

.theme-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.theme-card{
  border:1px solid rgba(44,38,32,.12); border-radius:16px; padding:1rem 1.1rem 1.2rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.theme-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -16px rgba(44,38,32,.3); }
.theme-card h4{ font-size:.92rem; margin-bottom:.35rem; }
.theme-card p{ font-size:.8rem; color:var(--ink-soft); line-height:1.45; }

.industry-hero{ border-radius:16px; overflow:hidden; box-shadow:0 0 0 1px rgba(44,38,32,.08); }
.industry-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.testimonial{
  font-style:italic; color:var(--ink-soft); border-left:3px solid var(--rose-deep);
  padding-left:1rem; font-size:.9rem; margin:0 0 .8rem; line-height:1.5;
}
.testimonial cite{ display:block; margin-top:.4rem; font-style:normal; font-size:.76rem; font-weight:600; color:var(--ink); }
.faq-item{ border-bottom:1px solid rgba(44,38,32,.08); padding:.7rem 0; }
.faq-item summary{ cursor:pointer; font-weight:600; font-size:.9rem; }
.faq-item p{ margin-top:.5rem; font-size:.84rem; color:var(--ink-soft); line-height:1.5; }

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

@media (prefers-reduced-motion: reduce){
  .section-badge{ display:none; }
  .modal{ transition:opacity .2s ease !important; transform:none !important; }
  .modal-body{ transition:none !important; }
  .modal-body.is-swapping{ opacity:1 !important; transform:none !important; }
  .modal-body > *{ transition:none !important; transform:none !important; opacity:1 !important; }
}