#contactForm textarea#message::placeholder{font-family:inherit;font-size:inherit;font-weight:400;line-height:1.5;color:rgba(255,255,255,0.45);opacity:1;letter-spacing:0}
#fileBtn{font-family:inherit;font-weight:600;letter-spacing:0;box-shadow:none!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#fileBtn:hover{box-shadow:none!important;filter:brightness(1.02)}
#fileBtn:focus{box-shadow:none!important}

/* robust placeholder matching across browsers + textarea font sync */
#contactForm textarea#message{font-size:inherit;font-family:inherit}
#contactForm textarea#message::placeholder{font-family:inherit;font-size:inherit;font-weight:400;line-height:1.5;color:rgba(255,255,255,0.45);opacity:1;letter-spacing:0}

#contactForm textarea#message{font-size:inherit;font-family:inherit}#contactForm textarea#message::placeholder{font-family:inherit;font-size:inherit;font-weight:400;line-height:1.5;color:rgba(255,255,255,0.45);opacity:1;letter-spacing:0}#contactForm textarea#message::-webkit-input-placeholder{font-family:inherit;font-size:inherit;font-weight:400;line-height:1.5;color:rgba(255,255,255,0.45);opacity:1;letter-spacing:0}#contactForm textarea#message::-moz-placeholder{font-family:inherit;font-size:inherit;font-weight:400;line-height:1.5;color:rgba(255,255,255,0.45);opacity:1;letter-spacing:0}#contactForm textarea#message:-ms-input-placeholder{font-family:inherit;font-size:inherit;font-weight:400;line-height:1.5;color:rgba(255,255,255,0.45);opacity:1;letter-spacing:0}#contactForm textarea#message:-moz-placeholder{font-family:inherit;font-size:inherit;font-weight:400;line-height:1.5;color:rgba(255,255,255,0.45);opacity:1;letter-spacing:0}


/* --- SLOGAN: final positioning + left→right animation (desktop & mobile) --- */
#about .slogan-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  justify-items:center;
  margin-top:-0.35rem !important;  /* closer to top edge */
  padding-top:0 !important;
  border-top:none;
}
#about .slogan-grid .s1{justify-self:start;text-align:left;color:#515151;}
#about .slogan-grid .s2{justify-self:center;text-align:center;color:#207bd6;}
#about .slogan-grid .s3{justify-self:end;text-align:right;color:#339f63;}
#about .slogan-grid .s1,
#about .slogan-grid .s2,
#about .slogan-grid .s3{
  font-family:"Poppins","Montserrat",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:500;
  letter-spacing:.25px;
  line-height:1;
  font-size:clamp(22px,3.1vw,44px);
  opacity:0;
  transform:translateY(10px);
  will-change:transform,opacity;
}
/* left -> center -> right sequence */
body.js-booted #about .slogan-grid .s1{animation:taFadeUp .80s cubic-bezier(.16,.84,.44,1) .10s both;}
body.js-booted #about .slogan-grid .s2{animation:taFadeUp .80s cubic-bezier(.16,.84,.44,1) 1.00s both;}
body.js-booted #about .slogan-grid .s3{animation:taFadeUp .80s cubic-bezier(.16,.84,.44,1) 1.70s both;}
@keyframes taFadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
/* Keep 3 columns on mobile too; just scale type a touch */
@media (max-width:640px){
  #about .slogan-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  }
  #about .slogan-grid .s1,
  #about .slogan-grid .s2,
  #about .slogan-grid .s3{
    font-size:clamp(16px,4.6vw,22px);
  }
}
@media (prefers-reduced-motion: reduce){
  #about .slogan-grid .s1,
  #about .slogan-grid .s2,
  #about .slogan-grid .s3{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}



/* --- Mobile vertical spacing nudge: move cards higher (no desktop impact) --- */
@media (max-width:640px){
  #about.section-card{ 
    margin-top:-0.35rem !important;
    padding-top:clamp(0.6rem,1.8vw,0.9rem) !important;
  }
  #services.section-card{ 
    margin-top:0.65rem !important;
    padding-top:clamp(0.6rem,1.8vw,0.9rem) !important;
  }
  #contact.section-card{ 
    margin-top:0.65rem !important;
    padding-top:clamp(0.6rem,1.8vw,0.9rem) !important;
  }
  /* Safety fallback if classes differ */
  section.section-card:first-of-type{
    margin-top:-0.35rem !important;
  }
}




/* Match internal page card styling on homepage inner boxes */
#about.section-card,
#services.section-card,
#contact.section-card{
  background-color:#020617;
  border-radius:2rem;
  border:1px solid rgba(148, 163, 184, 0.28);
  box-shadow:0 28px 80px rgba(15, 23, 42, 0.95);
}
/* --- Global mobile nudge: move entire content slightly higher --- */
@media (max-width:640px){
  body, main, .wrapper, .content, .page-wrapper {
    margin-top:-0.75rem !important;
    padding-top:0 !important;
  }
  header, .hero, .site-header {
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }
  #about.section-card {
    margin-top:-0.5rem !important;
  }
}



/* --- Mobile hero height fix so About is visible on first load (iOS-safe) --- */
@media (max-width:640px){
  @supports (height: 100dvh) {
    .hero, section.hero, .hero-section {
      min-height: 72dvh !important;
      height: 72dvh !important;
    }
  }
  @supports (height: 100svh) {
    .hero, section.hero, .hero-section {
      min-height: 72svh !important;
      height: 72svh !important;
    }
  }
  .hero, section.hero, .hero-section {
    min-height: 72vh !important;
    height: 72vh !important;
    background-position: center 30%;
    background-size: cover;
  }
  header, .site-header { margin-bottom:0 !important; padding-bottom:0 !important; }
  #about { scroll-margin-top: 64px; }
}
/* === Services image grid (3-up responsive) === */
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,16px);align-items:stretch}
@media (max-width:1024px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.services-grid{grid-template-columns:1fr}}
.service{aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.12);background:rgba(0,0,0,.06)}
.service img{width:100%;height:100%;object-fit:cover;display:block}

/* === Services spacing + layering === */
#services.services{position:relative;z-index:1;margin-top:clamp(32px,5vw,64px);margin-bottom:clamp(32px,5vw,64px)}

/* === Base grid + gap (desktop/tablet) === */
#services .services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
@media (min-width:641px) and (max-width:1024px){
  #services .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
#services .service{border-radius:24px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.25);background:#141414}

/* === Unified service height + media fit === */
:root{--svc-h:clamp(340px,42vw,560px)}
#services .service{height:var(--svc-h)}
#services .service img,
#services .service video{width:100%;height:100%;object-fit:cover;display:block;border:0;outline:0;border-radius:inherit}
#services .service video{background:#000000}

/* === Mobile carousel (swipe) === */
@media (max-width:640px){
  .services-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding:0 8px}
  .services-grid::-webkit-scrollbar{display:none}
  .service{flex:0 0 100%;scroll-snap-align:center}
}

/* === Carousel dots (mobile) === */
.services-dots{display:none;justify-content:center;gap:8px;margin-top:10px}
.services-dots button{width:6px;height:6px;border-radius:9999px;border:none;background:#939eb2;opacity:.6;transition:opacity .2s, transform .2s}
.services-dots button[aria-current="true"]{opacity:1;transform:scale(1.25)}
@media (max-width:640px){
  .services-dots{display:flex}
}

/* === Services layout fix: prevent overlap, add gaps, mobile centered carousel === */
#services{position:relative;z-index:1}
#services .container{padding-inline:clamp(12px,3vw,24px)}

#services .services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
@media (min-width:641px) and (max-width:1024px){
  #services .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
:root{--svc-h:clamp(340px,42vw,560px)}
#services .service{height:var(--svc-h);border-radius:24px;overflow:hidden;background:#000000;box-shadow:0 6px 24px rgba(0,0,0,.25)}
#services .service img,#services .service video{width:100%;height:100%;object-fit:cover;display:block}

/* Mobile carousel with peeking neighbors */
@media (max-width:640px){
  #services .services-grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:12px;padding:0 12px;
  }
  #services .service{flex:0 0 84%;scroll-snap-align:center;transition:transform .25s ease, opacity .25s ease}
  #services .service.dim{transform:scale(.94);opacity:.9}
  #services .service:first-child{margin-left:4px}
  #services .service:last-child{margin-right:4px}
  #services .services-grid::-webkit-scrollbar{display:none}
}

/* === Services desktop gaps + portrait ratio === */
#services .container{padding-left:clamp(16px,3vw,28px);padding-right:clamp(16px,3vw,28px)}
#services .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);align-items:stretch}
@media (min-width:641px) and (max-width:1024px){
  #services .services-grid{grid-template-columns:repeat(2,1fr)}
}
/* Portrait 3:4 cards for desktop */
@media (min-width:641px){
  #services .service{aspect-ratio:3/4;height:auto}
}
#services .service{background:#000000;border-radius:24px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.25)}
#services .service img,#services .service video{width:100%;height:100%;object-fit:cover;display:block}

/* === Services: always 3-across (tablet & desktop), with gaps and size caps === */
@media (min-width:641px){
  #services .container{padding-left:clamp(16px,3vw,28px);padding-right:clamp(16px,3vw,28px)}
  #services .services-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:clamp(16px,2.2vw,28px) !important;
    justify-items:stretch;
    align-items:stretch;
  }
  /* keep portrait feel; cap size so cards never feel huge */
  #services .service{
    aspect-ratio:3/4;
    height:clamp(320px, 50vh, 560px);
    max-width:calc(560px * 0.75); /* keep proportion with height cap */
  }
}
#services .service{background:#000000;border-radius:24px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.25)}
#services .service img,#services .service video{width:100%;height:100%;object-fit:cover;display:block}

/* === Mobile carousel: single view with side peeks (scroll-snap) === */
@media (max-width:640px){
  #services .services-grid{
    display:block !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding: 0 clamp(18px,6vw,28px);
    gap:0 !important;
    white-space:nowrap;
  }
  #services .service{
    display:inline-block;
    width: calc(100% - clamp(64px, 18vw, 96px)); /* leave equal peeks either side */
    margin: 0 clamp(12px,4.5vw,20px);
    scroll-snap-align:center;
    vertical-align:top;
  }
  #services .services-grid::-webkit-scrollbar{ display:none; }
}

/* === Desktop/tablet cards: keep gap & scale full 1200x1600 without cropping === */
@media (min-width:641px){
  #services .services-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:clamp(16px,2.2vw,28px) !important;
  }
  #services .service{
    aspect-ratio:3/4;
    height:clamp(380px, 48vh, 560px);
    max-width:min(100%, 560px * 0.75);
  }
}

/* Media inside cards: letterbox using contain (no crop) */
#services .service{background:#000000;border-radius:24px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.25)}
#services .service img,
#services .service video{
  width:100%;
  height:100%;
  object-fit:contain !important; /* switch from cover to contain to show full 1200x1600 */
  background:#000000;
  display:block;
}



/* === No letterbox: fill cards, keep height, edges flush === */
#services .service img,
#services .service video{ 
  object-fit: cover !important; /* fill container, crop minimal if needed */
  background: transparent !important;
}

/* Use 3:4 card ratio and fixed height; width derives from aspect => no side bars */
@media (min-width:641px){
  #services .services-grid{
    display:flex !important;
    flex-wrap:wrap;
    gap:clamp(16px,2.2vw,28px) !important;
    justify-content:center;
  }
  #services .service{
    aspect-ratio: 3 / 4;
    height: clamp(380px, 48vh, 560px) !important;
    width: auto !important;      /* derive from aspect ratio */
    flex: 0 0 auto;              /* prevent stretch */
  }
}


/* High-contrast links on dark sections (cards + footer) */
.page-card a,
.page-card a:visited,
#site-footer a,
#site-footer a:visited {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.page-card a:hover,
#site-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  opacity: 0.85;
}


/* WTN internal tool layout */
.wtn-form { margin-top: 1.5rem; }
.wtn-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0.9rem 1.1rem;
  margin-top: 0.5rem;
}
.wtn-grid--single { grid-template-columns: minmax(0,1fr); }
.wtn-form label span {
  display:block;
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:0.2rem;
}
.wtn-form input,
.wtn-form textarea,
.wtn-form select {
  width:100%;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.5);
  background:rgba(15,23,42,0.9);
  color:#e5e7eb;
  padding:0.55rem 0.9rem;
  font:inherit;
}
.wtn-form textarea {
  border-radius:16px;
  min-height:3.1rem;
}
.wtn-form input:focus,
.wtn-form textarea:focus,
.wtn-form select:focus {
  outline:none;
  border-color:var(--green-light);
  box-shadow:0 0 0 1px rgba(50,168,82,0.65);
}
.wtn-radio {
  display:flex;
  align-items:flex-start;
  gap:0.5rem;
  font-size:0.95rem;
}
.wtn-radio input { margin-top:0.25rem; }
.wtn-subsection {
  margin-top:0.75rem;
  padding:0.85rem 1rem 1.05rem;
  border-radius:1.25rem;
  background:rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,184,0.35);
}
.wtn-actions {
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-top:1rem;
}
.btn-primary,
.btn-secondary,
.btn-outline {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  padding:0.6rem 1.25rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font:inherit;
  font-weight:600;
  text-decoration:none;
}
.btn-primary {
  background:linear-gradient(90deg,var(--green),var(--green-light));
  color:#f9fafb;
  box-shadow:0 8px 22px rgba(15,106,55,0.7);
}
.btn-secondary {
  background:rgba(15,23,42,0.85);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,0.7);
}
.btn-outline {
  background:transparent;
  color:#e5e7eb;
  border:1px dashed rgba(148,163,184,0.7);
}
.wtn-divider {
  margin:1.75rem 0 1.25rem;
  border:none;
  border-top:1px solid rgba(148,163,184,0.4);
}
#outputText {
  width:100%;
  margin-top:0.75rem;
  border-radius:1rem;
  border:1px solid rgba(148,163,184,0.5);
  background:rgba(15,23,42,0.85);
  color:#e5e7eb;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:0.82rem;
  padding:0.75rem 0.85rem;
  min-height:12rem;
}
#wtnStatus {
  margin-top:0.35rem;
}
@media (min-width: 720px) {
  .wtn-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wtn-grid--single { grid-template-columns:minmax(0,1fr); }
}


/* Tailored Assistance: mobile contact form alignment + width
   Keep text snug beside radios/checkboxes and use full width on small screens */
@media (max-width: 640px){
  .contact form .service-group{
    width:100%;
  }

  .contact form .choice-inline{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
  }

  .contact form .choice-inline input{
    flex:0 0 auto;
    margin-right:0.5rem;
  }

  .contact form .choice-inline span{
    flex:1 1 auto;
    text-align:left !important;
    white-space:normal;
    font-size:0.95rem;
  }
}


/* Tailored Assistance: final mobile radio/checkbox alignment
   Make mobile behave like desktop (inline-flex, tight gap), overriding previous experiments */
@media (max-width: 640px){
  .contact form .choice-inline{
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:auto !important;
  }
  .contact form .choice-inline input{
    margin-right:0.35rem !important;
  }
  .contact form .choice-inline span{
    flex:none !important;
    text-align:left !important;
    white-space:nowrap !important;
    font-size:0.95rem !important;
  }
  .contact form .service-group{
    width:100% !important;
  }
}

/* Tailored Assistance: mobile radio/checkbox text snug next to controls */
@media (max-width: 640px){
  .contact form .choice-inline{
    display:inline-block !important;
    width:auto !important;
    text-align:left !important;
  }
  .contact form .choice-inline input{
    margin:0 0.3rem 0 0 !important;
    vertical-align:middle !important;
  }
  .contact form .choice-inline span{
    vertical-align:middle !important;
    white-space:normal !important;
    font-size:0.95rem !important;
  }
  .contact form .service-group{
    width:100% !important;
  }
}

/* Tailored Assistance: mobile radio/checkbox layout with absolute-positioned inputs
   Ensures text always appears directly beside the control on iOS Safari */
@media (max-width: 640px){
  .contact form .choice-inline{
    position:relative !important;
    display:block !important;
    padding-left:2.4rem !important;
    text-align:left !important;
  }
  .contact form .choice-inline input{
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
  }
  .contact form .choice-inline span{
    display:block !important;
    white-space:normal !important;
    font-size:0.95rem !important;
  }
}