/* ========================= PaperPushers — theme.css ========================= */
/* ---- Tokens ---- */
:root{
  --main:#D2009E;
  --secondary:#FFF53E;
  --highlight:#77FD3E;
  --accent-blue:#12ABE9;
  --deep-purple:#7A3CE6;
  --dark-blue:#132445;
  --offwhite:#F7F7F8;
  --text-dark:#0b0b0e;
  --text-light:#ffffff;
  --grad-angle:135deg;
  --section-scale:1;
}
html{height:100%;scroll-behavior:smooth}
body{
  min-height:100%;
  font-family:'Montserrat',sans-serif;
  background:#0b0b0e;
}
#fullpage{
  position:relative;
  display:flex;
  flex-direction:column;
  scroll-snap-type:y mandatory;
  scroll-padding-top:72px;
  width:100%;
}
#fullpage>.section{
  flex:0 0 auto;
}
*,*::before,*::after{box-sizing:border-box}
.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;
}

/* ---- Typography ---- */
.section-title{
  font-weight:800;
  letter-spacing:-1.5px;
  text-transform:none;
  line-height:1.05;
  font-size:clamp(2.1rem,3.4vw,4.2rem);
  margin-bottom:.9rem;
}
.section[data-anchor="services"] .section-title,
.section[data-anchor="work"] .section-title,
.section[data-anchor="about"] .section-title,
.section[data-anchor="contact"] .section-title{
  font-size:clamp(2.8rem,5.5vw,6rem);
  letter-spacing:-1px;
}
.section-lead{
  font-size:clamp(1rem,0.8vw + 0.85rem,1.4rem);
  line-height:1.45;
  font-weight:400;
  margin-bottom:2.5rem;
  color:inherit;
}
.card-title{
  font-size:clamp(1.15rem,0.7vw + .95rem,1.6rem);
  font-weight:600;
  letter-spacing:-.3px;
  line-height:1.2;
  margin:0 0 .75rem;
}
.card-subtitle{
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 .65rem;
  color:var(--card-subtitle-color,var(--secondary));
}
.card-text{
  font-size:clamp(.82rem,0.38vw + .78rem,.95rem);
  line-height:1.6;
  margin:0 0 1rem;
  color:inherit;
}
.card-text:last-child{margin-bottom:0}
input,
textarea,
select,
button{
  font-family:'Montserrat',sans-serif;
}
.hero-title{
  font-size:clamp(3rem,8vw,10rem);
  margin-bottom:1.5rem;
  line-height:1;
  font-weight:800;
  letter-spacing:0.04em;
}
.hero-lead{
  max-width:56rem;
  margin-left:auto;
  margin-right:auto;
}
.section-lead--narrow{
  max-width:48rem;
  margin-left:auto;
  margin-right:auto;
}
.section-grid{
  width:100%;
  max-width:72rem;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.about-card{
  padding:1.5rem;
}
.panel{
  padding:1.5rem;
  border-radius:18px;
}
.text-center{text-align:center}
.hero-actions{margin-top:2.5rem}
@media(min-width:901px){
  .panel{padding:2rem}
  .about-card{padding:2rem}
}


/* ---- Header ---- */
.header{position:fixed;top:0;left:0;right:0;height:72px;z-index:1200;display:flex;align-items:center;background:#0b0b0e;border-bottom:1px solid rgba(255,255,255,.08)}
.header .inner{width:100%;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px}
.brand{font-weight:800;letter-spacing:-.2px;color:#fff;font-size:1.1rem;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.brand__icon{width:28px;height:28px;display:block;border-radius:8px}
.brand__text{line-height:1}
.nav{display:flex;gap:20px;justify-content:center}
.nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  opacity:.92;
  transition:color .2s ease,opacity .2s ease;
}
.nav a:hover,
.nav a:focus-visible{
  color:var(--main);
  opacity:1;
}
.nav a.is-active{
  color:var(--secondary);
  opacity:1;
}
.header-cta{display:flex;justify-content:flex-end}
.header-cta .btn-quote{
  color:#fff;
  background:linear-gradient(120deg,var(--deep-purple) 0%,var(--main) 100%);
  background-size:200% 200%;
  background-position:0% 50%;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  cursor:pointer;
  transition:background-position .55s ease;
}
.header-cta .btn-quote:hover{background-position:100% 50%}

/* ---- Floating CTA ---- */
#floating-cta{
  position:fixed;
  color:#fff;
  background:linear-gradient(var(--grad-angle),var(--deep-purple),var(--main));
  background-size:200% 200%;
  background-position:0% 50%;
  z-index:12000;
  user-select:none;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
  cursor:pointer;
  transition:background-position .55s ease;
}
#floating-cta:hover{background-position:100% 50%}

/* ---- Sections ---- */
.section{
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:calc(72px + 2rem) 1.25rem 2.5rem;
  padding-bottom:calc(72px + 2rem);
  min-height:100svh;
  color:var(--text-light);
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.section::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(to bottom, rgba(0,0,0,0) 62%, rgba(0,0,0,.18) 100%)}
.section>.container{
  position:relative;
  z-index:1;
  padding-top:2rem;
  padding-bottom:2rem;
}
.section h1,.section h2{font-weight:800;letter-spacing:-2px;text-transform:none;line-height:1.05;opacity:0;animation:fadeInUp 900ms ease forwards}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* ---- Backgrounds ---- */
.fp-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:200% 200%;
  overflow:hidden;
  isolation:isolate;
  filter:saturate(1.08) contrast(1.05);
  --glow-1-color:rgba(210,0,158,.38);
  --glow-2-color:rgba(255,245,62,.28);
  --glow-3-color:rgba(18,171,233,.25);
  --glow-1-pos:18% 28%;
  --glow-2-pos:82% 24%;
  --glow-3-pos:58% 78%;
  --glow-speed:20s;
}
.fp-bg::before{
  content:'';
  position:absolute;
  inset:-25%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at var(--glow-1-pos), var(--glow-1-color) 0%, transparent 58%),
    radial-gradient(circle at var(--glow-2-pos), var(--glow-2-color) 0%, transparent 60%),
    radial-gradient(circle at var(--glow-3-pos), var(--glow-3-color) 0%, transparent 65%);
  mix-blend-mode:screen;
  opacity:.8;
  animation:glowPulse var(--glow-speed) ease-in-out infinite alternate;
}
.fp-bg::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background-image:radial-gradient(transparent 0, rgba(0,0,0,.03) 100%),repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  mix-blend-mode:overlay;
  opacity:.45;
}
.bg-stripe-intro{
  --glow-1-color:rgba(122,60,230,.4);
  --glow-2-color:rgba(255,245,62,.18);
  --glow-3-color:rgba(18,171,233,.22);
  --glow-1-pos:12% 22%;
  --glow-2-pos:88% 32%;
  --glow-3-pos:46% 82%;
  --glow-speed:18s;
  background:
    radial-gradient(1000px 520px at 12% 8%, rgba(255,255,255,.08), transparent 58%),
    radial-gradient(820px 520px at 92% 24%, rgba(255,255,255,.05), transparent 68%),
    linear-gradient(160deg,#2f1c57 0%,#4c2c8f 35%,#6a39c9 70%,#2b1a54 100%);
  animation:bg-pan 18s ease-in-out infinite alternate;
}
.bg-stripe-services{
  --glow-1-color:rgba(255,245,62,.38);
  --glow-2-color:rgba(119,253,62,.22);
  --glow-3-color:rgba(18,171,233,.38);
  --glow-1-pos:76% 26%;
  --glow-2-pos:26% 70%;
  --glow-3-pos:48% 86%;
  --glow-speed:20s;
  background:radial-gradient(700px 500px at 80% 30%, rgba(255,245,62,.35), transparent 60%),radial-gradient(600px 400px at 20% 70%, rgba(18,171,233,.35), transparent 60%),linear-gradient(160deg,#12ABE9 0%,#45c7ff 50%,#12ABE9 100%);
  animation:bg-pan 20s ease-in-out infinite alternate;
}
.bg-stripe-portfolio{
  --glow-1-color:rgba(210,0,158,.5);
  --glow-2-color:rgba(255,122,217,.42);
  --glow-3-color:rgba(255,96,171,.32);
  --glow-1-pos:18% 18%;
  --glow-2-pos:78% 62%;
  --glow-3-pos:52% 86%;
  --glow-speed:22s;
  background:
    radial-gradient(1200px 640px at 15% 15%, rgba(255,122,217,.45), transparent 58%),
    radial-gradient(1000px 640px at 90% 65%, rgba(255,96,171,.32), transparent 60%),
    linear-gradient(135deg,#52003f 0%,#B5007A 40%,#D2009E 70%,#FF7FD1 100%);
  animation:bg-pan 24s ease-in-out infinite alternate-reverse;
}
.bg-stripe-about{
  --glow-1-color:rgba(59,130,246,.35);
  --glow-2-color:rgba(122,60,230,.38);
  --glow-3-color:rgba(119,253,62,.22);
  --glow-1-pos:18% 78%;
  --glow-2-pos:84% 22%;
  --glow-3-pos:46% 40%;
  --glow-speed:22s;
  background:radial-gradient(900px 500px at 15% 80%, rgba(59,130,246,.25), transparent 60%),radial-gradient(700px 400px at 85% 20%, rgba(122,60,230,.28), transparent 60%),linear-gradient(180deg, #0b1020, #132445);
  animation:bg-pan 22s ease-in-out infinite alternate-reverse;
}
.bg-stripe-contact{
  --glow-1-color:rgba(255,245,62,.42);
  --glow-2-color:rgba(255,200,80,.38);
  --glow-3-color:rgba(210,0,158,.28);
  --glow-1-pos:72% 32%;
  --glow-2-pos:24% 72%;
  --glow-3-pos:48% 88%;
  --glow-speed:26s;
  background:
    radial-gradient(800px 520px at 75% 30%, rgba(255,245,62,.35), transparent 58%),
    radial-gradient(800px 520px at 25% 70%, rgba(255,200,80,.28), transparent 60%),
    linear-gradient(165deg,#FFF53E 0%,#FFD84D 45%,#FFB347 100%);
  animation:bg-pan 26s ease-in-out infinite alternate;
}
@keyframes glowPulse{
  0%{
    transform:translate3d(0,0,0) scale(.95);
    opacity:.7;
  }
  50%{
    transform:translate3d(-2.5%,2.5%,0) scale(1.05);
    opacity:.85;
  }
  100%{
    transform:translate3d(3%, -3%,0) scale(1.12);
    opacity:1;
  }
}
@keyframes bg-pan{0%{background-position:0% 40%,100% 60%,50% 50%}100%{background-position:100% 60%,0% 40%,50% 50%}}

/* ---- Cards + Buttons ---- */
.glass{position:relative;z-index:2;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:18px;backdrop-filter:blur(14px);box-shadow:0 12px 40px rgba(0,0,0,.2)}
.service-card{position:relative;padding:0;overflow:hidden}
.service-card.glass{border:none;background:rgba(255,255,255,.08)}
.service-card__inner{position:relative;width:100%;height:100%;min-height:160px;border-radius:18px;overflow:hidden}
.service-card__face{position:absolute;inset:0;padding:1.5rem;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:18px;transition:opacity .45s ease,transform .45s ease}
.service-card__front{background:transparent;opacity:1;transform:translateY(0)}
.service-card__back{opacity:0;transform:translateY(12px);color:#fff;font-weight:500}
.services-grid .card-title{text-align:center;width:100%;margin-bottom:0;font-weight:600;letter-spacing:-.2px}
@media (hover:hover) and (pointer:fine){
  .service-card:hover .service-card__front{opacity:.1;transform:translateY(-12px)}
  .service-card:hover .service-card__back{opacity:1;transform:translateY(0)}
}
.services-grid .service-card__back{background:linear-gradient(140deg,var(--deep-purple),var(--main))}
.work-card{position:relative;padding:0;overflow:hidden}
.work-card.glass{border:none;background:rgba(255,255,255,.12)}
.work-card__inner{position:relative;width:100%;height:100%;min-height:160px;border-radius:18px;overflow:hidden}
.work-card__face{position:absolute;inset:0;padding:1.5rem;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:18px;transition:opacity .45s ease,transform .45s ease}
.work-card__front{background:transparent;opacity:1;transform:translateY(0)}
.work-card__back{
  opacity:0;
  transform:translateY(12px);
  color:#fff;
  font-weight:500;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.4rem;
}
.work-card__back .card-subtitle{margin-bottom:0}
.work-card__back .card-text{margin:0;color:#fff;text-align:center}
.works-grid .card-title{text-align:center;width:100%;margin-bottom:0;font-weight:600;letter-spacing:-.2px}
@media (hover:hover) and (pointer:fine){
  .work-card:hover .work-card__front{opacity:.1;transform:translateY(-12px)}
  .work-card:hover .work-card__back{opacity:1;transform:translateY(0)}
}
.works-grid .work-card__back{background:linear-gradient(140deg,var(--accent-blue),var(--dark-blue))}
.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.works-grid .work-card__inner{min-height:160px}
.btn,
.btn-quote,
#floating-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  min-width:150px;
  padding:0 24px;
  border-radius:12px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:-0.01em;
  text-align:center;
  border:none;
  cursor:pointer;
}
.btn{
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:transform .3s ease,background-position .55s ease,color .3s ease;
  background-size:200% 200%;
  background-position:0% 50%;
  color:#fff;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);background-position:100% 50%}
.btn:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:3px}
.btn-primary{background:linear-gradient(115deg,var(--secondary) 0%,var(--main) 100%);color:#fff}
.btn-primary:hover{background:linear-gradient(115deg,var(--main) 0%,var(--secondary) 100%)}
.btn-outline{color:#fff;background:linear-gradient(var(--grad-angle),rgba(255,255,255,.20),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.btn-peek{background:linear-gradient(115deg,var(--main) 0%,var(--deep-purple) 100%);color:#fff}
.btn-peek:hover{background:linear-gradient(115deg,var(--deep-purple) 0%,var(--main) 100%)}
.btn-cta-blue{background:linear-gradient(115deg,var(--accent-blue) 0%,var(--dark-blue) 100%);color:#fff}
.btn-cta-blue:hover{background:linear-gradient(115deg,var(--dark-blue) 0%,var(--accent-blue) 100%)}
.section[data-anchor="home"] .btn-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
}
.section[data-anchor="home"] .btn-row .btn{
  width:220px;
  text-align:center;
}
.toast{
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translate(-50%,120%);
  padding:14px 26px;
  border-radius:18px;
  font-weight:800;
  font-size:1rem;
  background:rgba(11,11,14,.88);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 24px 55px rgba(9,9,12,.4);
  opacity:0;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s ease;
  z-index:15000;
}
.toast.is-visible{
  transform:translate(-50%,0);
  opacity:1;
  pointer-events:auto;
}
.toast[data-tone="success"]{
  background:linear-gradient(var(--grad-angle),var(--highlight),#bfffa6);
  color:#08200b;
  border-color:rgba(8,32,11,.15);
}
.toast[data-tone="error"]{
  background:linear-gradient(var(--grad-angle),#ff6b94,#ff0066);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}

/* ---- Layout helpers ---- */
.container{max-width:1100px;margin-inline:auto;padding-inline:1rem}
.grid-3{display:grid;gap:24px}
@media(min-width:901px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-3.works-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.text-on-dark{color:rgba(255,255,255,.96)}
.text-soft-on-dark{color:rgba(255,255,255,.82)}
.text-on-light{color:var(--text-dark)}
.text-glow{text-shadow:0 6px 30px rgba(0,0,0,.45)}

/* ---- Contact ---- */
.section[data-anchor="contact"] .container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:0;
  min-height:calc(100svh - 112px);
  padding-top:72px;
  padding-bottom:16px;
}
.section[data-anchor="contact"] .contact-title{color:var(--main)}
.section[data-anchor="contact"]{
  padding-bottom:0 !important;
  background-color:#FFD84D; /* fallback so footer never falls onto body background */
}
.section[data-anchor="contact"]::after{background:none}
.contact-card{
  position:relative;
  display:grid;
  gap:20px;
  align-items:start;
  overflow:visible;
  scrollbar-width:thin;
  flex:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:1.5rem;
}
.section[data-anchor="contact"] .contact-card .card-title{
  font-weight:600;
  letter-spacing:-.2px;
}
.contact-title{line-height:1.05}
.contact-actions{display:flex;flex-direction:column;gap:16px}
.contact-actions__button{align-self:center}
.contact-meta{
  display:grid;
  gap:8px;
  align-content:start;
  border-top:1px solid rgba(15,23,42,.12);
  padding-top:16px;
  margin-top:4px;
}
.contact-meta .card-text a,
.info-modal__body .card-text a{
  font-weight:700;
  text-decoration:underline;
  color:inherit;
}
.contact-meta .card-text a:hover,
.info-modal__body .card-text a:hover{
  color:var(--main);
}
.contact-form{position:relative;display:grid;gap:16px}
.contact-form .form-field{display:flex;flex-direction:column;gap:10px}
.contact-form .form-field label{
  font-size:1.05rem;
  font-weight:700;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:0.9rem 1rem;
  font-size:1rem;
  font-family:'Montserrat',sans-serif;
  background:rgba(255,255,255,.85);
  color:var(--text-dark);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(15,23,42,.55);
}
.contact-form textarea{min-height:200px;resize:vertical}
.contact-form .form-status{
  min-height:1.25rem;
  color:#D2009E;
  font-weight:500;
  font-size:0.9rem;
}
.captcha-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.captcha-row span{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:0.4rem 0.75rem;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.7);
  font-weight:700;
  color:var(--text-dark);
}
.captcha-row input{
  flex:0 0 auto;
  max-width:150px;
  text-align:center;
}
.field-project{display:flex;flex-direction:column;gap:12px}
.field-project textarea{flex:1 1 auto;min-height:240px}
.field-status{align-self:flex-start}
.field-button{justify-self:stretch}

.site-footer{
  align-self:stretch;
  width:100%;
  margin-top:auto;
  padding:16px;
  border-top:1px solid rgba(122,60,230,.25);
  background:transparent;
  text-align:center;
  font-size:.9rem;
  color:var(--deep-purple);
}
.site-footer a{color:var(--deep-purple);font-weight:700;text-decoration:underline}
.site-footer a:hover{color:var(--main)}

@media (min-width:901px){
  .contact-card{
    gap:28px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:2rem;
  }
  .contact-card{margin-left:auto;margin-right:auto}
  .contact-meta{border-top:none;border-left:1px solid rgba(15,23,42,.12);padding-left:24px;padding-top:0;margin-top:0}
  .contact-form{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:
    "field-name field-project"
    "field-email field-project"
    "field-captcha field-project"
    "field-status field-status"
    "field-button field-button";
    column-gap:28px;row-gap:16px;
  }
  .field-name{grid-area:field-name}
  .field-email{grid-area:field-email}
  .field-captcha{grid-area:field-captcha}
  .field-project{grid-area:field-project;min-height:100%;}
  .field-status{grid-area:field-status}
  .field-button{grid-area:field-button}
  .field-project textarea{min-height:260px}
  .captcha-row{justify-content:flex-start}
}

@media (max-width:900px){
  .contact-form textarea{min-height:200px}
  .captcha-row{justify-content:flex-start}
  .contact-card{gap:20px}
  .section[data-anchor="contact"] .container{
    min-height:auto;
    padding-top:72px;
    padding-bottom:72px;
    gap:0;
  }
}

@media (max-height:900px){
  .section{padding:1rem}
  .section-title{font-size:clamp(1.8rem,3.1vw,3.4rem)}
  .section-lead{
    font-size:clamp(.95rem,0.7vw + .75rem,1.2rem);
    margin-bottom:1.25rem;
  }
  .card-title{font-size:clamp(1.05rem,0.6vw + .9rem,1.4rem)}
  .card-text{font-size:clamp(.85rem,0.4vw + .78rem,.98rem)}
  .services-grid,.works-grid{gap:16px}
  .grid-3{gap:18px}
  .service-card__inner,
  .work-card__inner,
  .works-grid .work-card__inner{min-height:140px}
  .section[data-anchor="home"] .btn-row .btn{width:190px}
  .btn{padding:10px 16px;font-size:.9rem}
  .contact-card{gap:16px;max-width:700px}
  .contact-form textarea{min-height:160px}
  .section[data-anchor="contact"] .container{padding-top:50px}
}
@media (max-height:780px){
  .section{padding:.75rem}
  .section-title{font-size:clamp(1.6rem,2.6vw,3rem)}
  .services-grid,.works-grid{gap:12px}
  .grid-3{gap:14px}
  .service-card__inner,
  .work-card__inner,
  .works-grid .work-card__inner{min-height:120px}
  .section[data-anchor="home"] .btn-row .btn{width:170px}
  .contact-card{max-width:640px}
  .contact-form textarea{min-height:140px}
  .field-project textarea{min-height:130px}
}

/* ---- Contact modal ---- */
.contact-modal{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:24px;z-index:14000;opacity:0;pointer-events:none;transition:opacity .3s ease;overflow-y:auto}
.contact-modal.is-open{opacity:1;pointer-events:auto}
.contact-modal__overlay{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(6px)}
.contact-modal__content{
  position:relative;
  width:100%;
  max-width:680px;
  max-height:calc(100vh - 80px);
  overflow:auto;
  padding:32px;
  border-radius:28px;
  box-shadow:0 40px 90px -30px rgba(15,23,42,.45);
  color:#fff;
}
.contact-modal__content h3,
.contact-modal__content p,
.contact-modal__content label,
.contact-modal__content .form-status{color:#fff}
.contact-modal__content input,
.contact-modal__content textarea{color:#0f172a}
.contact-modal__content input::placeholder,
.contact-modal__content textarea::placeholder{color:rgba(15,23,42,.7)}
.contact-modal__content #captcha-question{color:#0f172a}
.contact-modal__close,
.info-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  border:none;
  width:44px;
  height:44px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--secondary),var(--main));
  color:#fff;
  font-weight:800;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.55);
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.contact-modal__close:hover,
.info-modal__close:hover{
  transform:scale(1.05);
  box-shadow:0 16px 34px -12px rgba(0,0,0,.62);
  background:linear-gradient(135deg,var(--highlight),var(--main));
}
.contact-modal__close:focus,
.info-modal__close:focus{
  outline:2px solid var(--secondary);
  outline-offset:3px;
}
.contact-modal__content .btn-cta-blue{
  background:linear-gradient(115deg,var(--highlight) 0%, var(--deep-purple) 100%);
  color:#fff;
}
.contact-modal__content .btn-cta-blue:hover{
  background:linear-gradient(115deg,var(--deep-purple) 0%, var(--highlight) 100%);
}
body.is-modal-open{overflow:hidden}

.info-modal{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:24px;z-index:13000;opacity:0;pointer-events:none;transition:opacity .3s ease;overflow-y:auto}
.info-modal.is-open{opacity:1;pointer-events:auto}
.info-modal__overlay{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(6px)}
.info-modal__content{position:relative;width:100%;max-width:640px;max-height:calc(100vh - 80px);overflow:auto;padding:32px;border-radius:28px;box-shadow:0 32px 80px -26px rgba(15,23,42,.5);color:#fff;font-size:0.95rem;line-height:1.5;text-align:left}
.info-modal__content{
  font-size:0.82rem;
  line-height:1.45;
  padding:24px;
  border-radius:20px;
}
.info-modal__content .card-title,
.info-modal__content .card-text{color:#fff}
.info-modal__content .card-title{font-size:1.25rem;margin-bottom:.75rem}
.info-modal__content .card-text{font-size:0.82rem;margin-bottom:.35rem}

/* ========================= MOBILE OVERRIDES ========================= */
.mobile-only{display:none}
@media (max-width:900px){
  #fullpage{scroll-snap-type:y proximity}
  /* universal clamp */
  *,*::before,*::after{box-sizing:border-box}
  html,body,#fullpage,.section{width:100% !important;max-width:100% !important;overflow-x:hidden !important}
  .section{scroll-margin-top:72px}
  .section>.container{width:100% !important;max-width:100% !important;padding-left:16px !important;padding-right:16px !important;margin-left:0 !important;margin-right:0 !important}
  .section-title{font-size:clamp(2.4rem,6.2vw + .6rem,3.1rem);letter-spacing:-1.1px;margin-bottom:1.3rem}
  .section-lead{font-size:1.15rem;margin-bottom:1.9rem}
  .card-title{font-size:1.4rem;margin-bottom:.6rem}
  .card-text{font-size:1rem;margin-bottom:.85rem}
  .card-text:last-child{margin-bottom:0}

  /* header + menu */
  .header{height:64px;padding-top:env(safe-area-inset-top)}
  .header .inner{grid-template-columns:auto auto;gap:8px;padding:0 12px;justify-content:space-between}
  .brand{
    font-size:1rem;
    font-weight:800;
    letter-spacing:-.05em;
    text-transform:none;
    gap:8px;
  }
  .brand__icon{width:24px;height:24px}
  .header-cta{display:none}
  #menu-toggle.mobile-only{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:46px;
    padding:0 18px;
    border:0;
    border-radius:16px;
    color:#0b0b0e;
    background:transparent;
    position:relative;
    overflow:hidden;
    font-weight:700;
    font-size:.95rem;
    font-family:'Montserrat',sans-serif;
    min-width:64px;
    justify-self:end;
    box-shadow:0 12px 32px rgba(0,0,0,.35);
    color:#fff;
  }
  #menu-toggle.mobile-only::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:var(--menu-toggle-gradient, linear-gradient(130deg,var(--secondary),var(--main)));
    z-index:0;
  }
  #menu-toggle.mobile-only:focus-visible{outline:2px solid var(--highlight);outline-offset:4px}
  #menu-toggle.mobile-only{z-index:0;text-transform:none;letter-spacing:-.02em}
  #menu-toggle.mobile-only .menu-icon{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
    justify-content:center;
    width:24px;
  }
  #menu-toggle.mobile-only .menu-icon span{
    display:block;
    width:24px;
    height:2px;
    border-radius:999px;
    background:#fff;
  }
  #menu{display:none}
  #menu.is-open{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:64px;
    right:12px;
    left:auto;
    width:min(360px,calc(100% - 24px));
    max-height:calc(100vh - 88px);
    padding:20px 22px;
    gap:6px;
    background:var(--menu-panel-gradient, linear-gradient(145deg,var(--deep-purple),var(--main)));
    color:#fff;
    backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow-y:auto;
    bottom:auto;
    z-index:1500;
    box-shadow:0 24px 60px rgba(0,0,0,.4);
  }
  #menu a{
    display:block;
    padding:14px 0;
    font-size:1.05rem;
    font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#fff;
  }
  #menu a:last-child{border-bottom:none}

  /* hero */
  .bg-stripe-intro{
    background:linear-gradient(160deg,#2f1c57 0%,#4c2c8f 35%,#6a39c9 70%,#2b1a54 100%);
    animation:none;
  }
  .section[data-anchor="home"]::after{display:none}
  .section[data-anchor="home"]{min-height:calc(100svh - 64px);padding:2rem 1rem 2rem}
  .section[data-anchor="home"] .container{max-width:680px}
  .section[data-anchor="home"] h1{text-transform:none;line-height:1.1;margin-bottom:.8rem;font-size:clamp(2.8rem,7vw + .4rem,3.4rem) !important;text-shadow:0 4px 18px rgba(0,0,0,.35)}
  .section[data-anchor="home"] p{
    font-size:clamp(1.1rem,1.6vw + .8rem,1.4rem);
    line-height:1.35;
    font-weight:400;
    max-width:90%;
    margin-inline:auto;
  }
  .section[data-anchor="home"] .btn{
    width:min(320px,100%);
    height:56px;
    line-height:56px;
    padding:0 18px;
    font-size:1.05rem;
    font-weight:700;
  }
  .section[data-anchor="home"] .btn-row{
    margin-top:1.5rem !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }

  /* h2 mobile */
  .section[data-anchor="services"] h2,
  .section[data-anchor="work"] h2,
  .section[data-anchor="about"] h2,
  .section[data-anchor="contact"] h2{
    text-transform:none;font-weight:900;letter-spacing:-1px;line-height:1.15;font-size:clamp(2rem,6.2vw + .6rem,2.6rem)
  }

  /* tabs full-bleed */
.tabs-nav{display:none}
.toolbox-tabs,.works-tabs,.about-tabs{
  position:relative;
  z-index:3;
  width:100% !important;
  margin:8px 0 12px !important;
  padding:8px 4px !important;
    display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    scroll-padding-left:8px;
  }
  .toolbox-tabs .tab,.works-tabs .tab,.about-tabs .tab{
    flex:0 0 auto;white-space:nowrap;padding:10px 14px;border-radius:18px;font-weight:700;font-size:.95rem;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);color:#fff;scroll-snap-align:start
  }
  .toolbox-tabs .tab.is-active,.works-tabs .tab.is-active,.about-tabs .tab.is-active{background:linear-gradient(var(--grad-angle),var(--secondary),var(--highlight));color:#0b0b0e;border-color:transparent}
  .panel{
    margin-top:18px !important;
    padding:1.4rem !important;
    border-radius:22px;
    background:rgba(6,10,24,.82);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 55px rgba(0,0,0,.45);
    text-align:left;
  }
  .services-grid,.works-grid,.about-grid{display:none !important}
  .toolbox-panel,.works-panel,.about-panel{display:block}

  /* card glow off on mobile to avoid edge halos */
  .glass{box-shadow:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);backdrop-filter:none}

  /* spacing so floating CTA never covers content */
  .section[data-anchor="services"],.section[data-anchor="work"],.section[data-anchor="about"]{padding-bottom:3.5rem !important}
  #floating-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(280px, calc(100% - 48px));
    left:50%;
    right:auto;
    transform:translateX(-50%);
    bottom:calc(20px + env(safe-area-inset-bottom));
    height:56px;
    border-radius:18px;
    font-size:1.05rem;
    box-shadow:0 24px 55px rgba(0,0,0,.45);
    border:none;
  }

}

/* ---- Desktop: hide mobile tabs/panels ---- */
@media (min-width:901px){
  .toolbox-tabs,.toolbox-panel,
  .works-tabs,.works-panel,
  .about-tabs,.about-panel{display:none}
  .tabs-nav{display:none !important}
}

/* --- MOBILE: force tabs to be one row with horizontal scroll --- */
@media (max-width:900px){
  .tabs-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    max-width:680px;
    margin:8px auto 12px;
  }
  .tabs-nav .tabs{flex:1;min-width:0}
  .tabs-nav__arrow{
    display:none;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    height:32px;
    border:none;
    background:transparent;
    color:#fff;
    font-size:1.6rem;
    font-weight:900;
    line-height:1;
    transition:opacity .2s ease;
  }
  .tabs-nav.is-scrollable .tabs-nav__arrow{display:inline-flex}
  .tabs-nav__arrow:disabled{
    opacity:.35;
    pointer-events:none;
  }
  .tabs-nav__arrow:not(:disabled){opacity:.82}
  .tabs-nav__arrow:not(:disabled):active{opacity:1}

  .toolbox-tabs, .works-tabs, .about-tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch;
    padding:8px 4px !important;
    margin:8px 0 12px !important;
    width:100% !important;
  }
  .toolbox-tabs .tab, .works-tabs .tab, .about-tabs .tab{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:auto !important;               /* stop full-width pills */
    min-width:max-content !important;    /* keep text on one line */
    flex:0 0 auto !important;            /* prevent wrapping */
    white-space:nowrap !important;
  }
  .toolbox-tabs::-webkit-scrollbar,
  .works-tabs::-webkit-scrollbar,
  .about-tabs::-webkit-scrollbar{display:none}
}

/* força horizontal no mobile, com bleed até às bordas */
@media (max-width:900px){
  .section[data-anchor="services"] .toolbox-tabs,
  .section[data-anchor="work"] .works-tabs,
  .section[data-anchor="about"] .about-tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:8px 4px !important;
    margin:8px 0 12px !important;
    width:100% !important;
  }
  .section[data-anchor="services"] .toolbox-tabs .tab,
  .section[data-anchor="work"] .works-tabs .tab,
  .section[data-anchor="about"] .about-tabs .tab{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    min-width:max-content !important;
  }

}
  .btn,
  .btn-quote,
  #floating-cta{
    font-weight:700;
  }