/* =========================================================
   TECH CORNER SOLUTIONS - STAGE 1 DRAFT STYLESHEET
   Shared by all four pages. Deliberately simple: stage 2
   replaces this with the full design (hero photo, animations,
   mobile menu, polish). Text sizes already follow the new scale.
========================================================= */

:root{
  --ink:#0e1720;
  --black:#111111;
  --white:#ffffff;
  --teal:#16c6d8;
  --teal-text:#0a7a86;
  --gray:#5f6670;
  --light:#f6f6f6;
  --border:#e6e6e6;
  --wa:#25d366;
  --radius:14px;
  --hero-pos:center 35%;     /* hero photo focal point on desktop: change the % to move the crop */
  --hero-pos-m:40% 50%;      /* hero photo focal point on phones: first number = left/right, second = up/down */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; font-size:16px; }

body{
  font-family:'Inter', Arial, sans-serif;
  font-size:1rem;            /* 16px body text on every screen */
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
}

img{ max-width:100%; display:block; }
a{ color:var(--teal-text); }

h1,h2,h3{ line-height:1.25; font-weight:800; }
h1{ font-size:clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); }   /* 30px phone, 44px max */
h2{ font-size:clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem); }   /* 28px phone, 34px desktop */
h3{ font-size:1.125rem; font-weight:700; }                  /* 18px card titles */
p{ color:var(--gray); }
.small, small{ font-size:0.875rem; }                        /* 14px */

.wrap{ max-width:1100px; margin:0 auto; padding:0 20px; }
section{ padding:56px 0; }
.alt{ background:var(--light); }
.center{ text-align:center; }
.section-intro{ max-width:640px; margin:10px auto 32px; }

/* ---------- notes for you (removed later) ---------- */
.note{
  background:#fff3cd; border:1px solid #ffe69c; color:#3b3000;
  padding:10px 14px; border-radius:8px; font-size:0.875rem;
  margin:0 auto 20px; max-width:760px; text-align:left;
}
.note p{ color:inherit; font-size:inherit; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; border:2px solid transparent;
  font-family:inherit; font-size:0.9375rem; font-weight:700;   /* 15px */
  text-decoration:none; cursor:pointer;
  background:var(--teal); color:var(--ink);
}
.btn:hover{ filter:brightness(0.93); }
.btn-wa{ background:var(--wa); color:var(--ink); }               /* WhatsApp green, WhatsApp only */
.btn-outline{ background:transparent; border-color:var(--teal); color:var(--teal-text); }
.btn-outline.on-dark{ color:var(--white); border-color:var(--white); }
.btn-sm{ padding:8px 16px; font-size:0.875rem; }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
.center .btn-row{ justify-content:center; }

/* ---------- header / nav ---------- */
.site-header{ background:var(--black); position:sticky; top:0; z-index:50; }
.nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand img{ height:52px; width:auto; background:var(--white); border-radius:8px; padding:4px; }   /* white badge keeps a dark logo visible on the black bar */
.nav nav{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.nav nav a:not(.btn){ color:var(--white); text-decoration:none; font-size:0.875rem; font-weight:500; padding:4px 0; border-bottom:2px solid transparent; }
.nav nav a:not(.btn):hover,
.nav nav a[aria-current="page"]{ color:var(--teal); border-bottom-color:var(--teal); }

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(rgba(14,23,32,.58), rgba(14,23,32,.68)), url("../images/hero.jpg") var(--hero-pos)/cover no-repeat;
  background-color:#0e1720;   /* shows until the photo is added */
  color:var(--white); text-align:center;
  padding:88px 0;
  min-height:clamp(480px, 80vh, 720px);
  display:flex; align-items:center;
}
.hero .wrap{ width:100%; }
.hero h1{ text-shadow:0 2px 14px rgba(0,0,0,.35); }
.hero p{ color:#d7d7d7; max-width:620px; margin:10px auto 20px; }
.hero .eyebrow{ color:var(--teal); font-size:0.875rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin:0 auto 10px; }

/* ---------- about (image beside text) ---------- */
.about{ padding:56px 0; }
.about-grid{ display:grid; gap:40px; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:820px){
  .about-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; }
}
.about-media{ position:relative; margin:0 12px 12px 0; min-height:320px; }
.about-media::before{            /* offset teal frame behind the photo */
  content:""; position:absolute; inset:14px -12px -12px 14px;
  border:3px solid var(--teal); border-radius:var(--radius); z-index:0;
}
.about-media img{
  position:relative; z-index:1; width:100%; height:100%;
  min-height:inherit; object-fit:cover;
  border-radius:var(--radius); background:var(--light);
  box-shadow:0 12px 30px rgba(14,23,32,.18);
}
.about-text .eyebrow{ color:var(--teal-text); font-size:0.875rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin:0 0 8px; }
.about-text .lead{ font-size:1.25rem; font-weight:700; color:var(--ink); margin:14px 0 12px; }
.about-text p{ margin-bottom:12px; }
.about-text .closing{ color:var(--teal-text); font-weight:700; font-size:1.125rem; margin:18px 0 14px; }

.page-head{ background:var(--ink); color:var(--white); text-align:center; padding:48px 0; }
.page-head p{ color:#d7d7d7; max-width:620px; margin:10px auto 0; }

/* ---------- grids / cards ---------- */
.grid{ display:grid; gap:20px; }
.grid-4{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }

.card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.card p{ margin-top:6px; }

.icon{
  width:48px; height:48px; border-radius:50%; margin-bottom:14px;
  display:grid; place-items:center; font-size:1.25rem;
  background:rgba(22,198,216,.14); color:var(--teal-text);
}
.icon.wa{ background:rgba(37,211,102,.18); color:#128c4a; }

/* ---------- mission & vision ---------- */
.mv-card{ position:relative; overflow:hidden; border-top:4px solid var(--teal); }
.mv-num{ position:absolute; top:6px; right:18px; font-size:4.5rem; font-weight:800; color:rgba(22,198,216,.16); line-height:1; }
.chips{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.chip{ padding:8px 18px; border:1px solid var(--teal); border-radius:999px; font-size:0.875rem; font-weight:700; background:var(--white); }

/* ---------- packages (equal height, buttons pinned to the bottom) ---------- */
.package{ display:flex; flex-direction:column; }
.package .price{ font-size:1.75rem; font-weight:800; margin:10px 0 4px; color:var(--ink); }
.package ul{ list-style:none; margin:16px 0 24px; flex:1; }
.package li{ padding-left:26px; position:relative; margin-bottom:8px; font-size:0.9375rem; }
.package li::before{ content:"\2713"; position:absolute; left:0; color:var(--teal-text); font-weight:800; }
.package .btn{ margin-top:auto; }
.package.featured{ border:2px solid var(--teal); }

.teaser{ display:flex; flex-direction:column; }
.teaser .price{ font-size:1.5rem; font-weight:800; margin:8px 0; color:var(--ink); }
.teaser a.more{ margin-top:auto; padding-top:12px; font-weight:700; text-decoration:none; }

/* ---------- steps ---------- */
.step-num{ width:44px; height:44px; border-radius:50%; background:var(--teal); color:var(--ink); font-weight:800; display:grid; place-items:center; margin-bottom:12px; }

/* ---------- contact ---------- */
.contact-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); }
.contact-card:hover{ border-color:var(--teal); }
.contact-card strong{ font-size:1.125rem; }
.contact-card span{ color:var(--gray); font-size:0.9375rem; }

form{ display:grid; gap:16px; max-width:640px; margin:0 auto; }
label{ display:block; font-weight:600; font-size:0.9375rem; margin-bottom:6px; }
input, select, textarea{
  width:100%; padding:12px 14px; font-size:1rem; font-family:inherit;
  border:2px solid var(--border); border-radius:10px; background:var(--white); color:var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(22,198,216,.18); }
textarea{ min-height:120px; resize:vertical; }
.check{ display:flex; gap:10px; align-items:flex-start; font-weight:400; }
.check input{ width:20px; height:20px; margin-top:3px; flex-shrink:0; }

details{ background:var(--white); border:1px solid var(--border); border-radius:10px; padding:14px 18px; margin-bottom:10px; }
summary{ cursor:pointer; font-weight:700; }
details p{ margin-top:10px; }
.faq{ max-width:760px; margin:0 auto; }

/* ---------- agreement page (skeleton) ---------- */
.badges{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.badge{ padding:6px 14px; border-radius:999px; background:rgba(22,198,216,.18); color:var(--white); font-size:0.875rem; font-weight:600; }
.terms{ max-width:760px; margin:0 auto; }
.clause{ padding:18px 0; border-bottom:1px solid var(--border); }
.clause h3{ margin-bottom:6px; }
.pick{ border:2px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:4px; cursor:pointer; font-weight:400; }
.pick input{ width:auto; margin-right:8px; }
.pick strong{ font-size:1.125rem; }
.sig-box{ border:2px dashed var(--border); border-radius:10px; min-height:140px; display:grid; place-items:center; text-align:center; color:var(--gray); padding:16px; background:var(--light); }

/* ---------- call-to-action band ---------- */
.cta-band{ background:var(--ink); color:var(--white); text-align:center; padding:56px 0; }
.cta-band p{ color:#d7d7d7; max-width:560px; margin:10px auto 22px; }

/* ---------- footer ---------- */
.site-footer{ background:#0b1118; color:#d7d7d7; padding:48px 0 18px; border-top:3px solid var(--teal); }
.footer-grid{ display:grid; gap:32px; grid-template-columns:1.3fr 0.8fr 1.3fr; }
.site-footer h3{ color:var(--white); font-size:1rem; margin-bottom:12px; letter-spacing:.5px; }
.site-footer a{ color:#d7d7d7; text-decoration:none; }
.site-footer a:hover{ color:var(--teal); }
.site-footer ul{ list-style:none; }
.site-footer li{ margin-bottom:10px; font-size:0.9375rem; }
.site-footer p{ color:#b9c0c8; font-size:0.9375rem; max-width:340px; }
.footer-brand h3{ font-size:1.125rem; color:var(--teal); }
.icon-list li{ display:flex; align-items:center; gap:12px; }
.icon-list i{
  width:34px; height:34px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center; font-size:0.9375rem;
  background:rgba(22,198,216,.14); color:var(--teal);
}
.icon-list .muted{ color:#8f98a2; }
.copy{ border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding-top:16px; font-size:0.8125rem; text-align:center; color:#8f98a2; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* ---------- hamburger button (shown on phones only) ---------- */
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,.28); border-radius:10px;
  color:var(--white); font-size:1.25rem; cursor:pointer;
}
.nav-toggle:hover{ border-color:var(--teal); color:var(--teal); }

/* ---------- floating WhatsApp button (phones only) ---------- */
.wa-float{
  display:none; transition:opacity .25s ease, transform .25s ease; position:fixed; right:16px; bottom:16px; z-index:60;
  width:54px; height:54px; border-radius:50%; background:var(--wa); color:var(--ink);
  align-items:center; justify-content:center; font-size:1.75rem; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}

/* ---------- small extras ---------- */
.kicker{ color:var(--teal-text); font-size:0.8125rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; }
.badge-pop{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--teal); color:var(--ink); font-size:0.75rem; font-weight:800;
  letter-spacing:1px; text-transform:uppercase; padding:4px 14px; border-radius:999px; white-space:nowrap;
}
.package{ position:relative; }
.card{ transition:transform .2s ease, box-shadow .2s ease; }
@media (hover:hover){
  .card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(14,23,32,.10); }
}
#enquiry form{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }


/* ---------- hamburger lines (drawn in CSS, no icon font needed) ---------- */
.nav-toggle .bars{ position:relative; display:block; width:20px; height:14px; }
.nav-toggle .bars i{ position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease; }
.nav-toggle .bars i:nth-child(1){ top:0; }
.nav-toggle .bars i:nth-child(2){ top:6px; }
.nav-toggle .bars i:nth-child(3){ top:12px; }
.site-header.open .nav-toggle .bars i:nth-child(1){ top:6px; transform:rotate(45deg); }
.site-header.open .nav-toggle .bars i:nth-child(2){ opacity:0; }
.site-header.open .nav-toggle .bars i:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* floating WhatsApp hides while the hero is on screen (home page) */
.wa-float.wa-hidden{ opacity:0; pointer-events:none; transform:scale(.85); }

/* ---------- hero buttons ---------- */
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- short wording is for phones only ---------- */
.short{ display:none; }
.swipe-hint{ display:none; }

/* ---------- creative touches ---------- */
.center h2::after{ content:""; display:block; width:44px; height:3px; background:var(--teal); border-radius:3px; margin:10px auto 0; }
.alt{ background:linear-gradient(180deg, #f6f6f6 0%, #eaf6f8 100%); }
.teaser{ position:relative; }
.teaser.featured{ border:2px solid var(--teal); }
.teaser .badge-pop{ left:20px; transform:none; }

/* ---------- steps: timeline on phones ---------- */
.steps .card{ position:relative; }

/* =========================================================
   PHONES AND SMALL TABLETS
========================================================= */
@media (max-width:768px){
  /* menu */
  .nav-toggle{ display:inline-flex; }
  .brand img{ height:44px; }
  .nav{ padding-top:10px; padding-bottom:10px; }
  .nav nav{
    display:none; width:100%; flex-direction:column; align-items:stretch; gap:0;
    margin-top:10px; padding:6px 0 12px; border-top:1px solid rgba(255,255,255,.14);
  }
  .site-header.open .nav nav{ display:flex; }
  .nav nav a:not(.btn){ padding:13px 4px; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav nav a[aria-current="page"]{ border-bottom-color:var(--teal); }
  .nav nav .btn{ margin-top:14px; padding:12px 16px; font-size:0.9375rem; }
  .wa-float{ display:flex; }

  /* spacing and type */
  section{ padding:36px 0; }
  .wrap{ padding:0 16px; }
  h2{ font-size:1.5rem; }
  .section-intro{ margin:8px auto 22px; }
  .page-head{ padding:30px 0; }
  .cta-band{ padding:36px 0; }
  .hero{ min-height:clamp(420px, 70vh, 560px); padding:56px 0; }
  .about{ padding:36px 0; }

  /* four-card grids become 2 x 2 */
  .grid-4{ grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:20px !important; }
  .grid-4 .card{ padding:16px; }
  .grid-4 .card h3{ font-size:1rem; }
  .grid-4 .card p{ font-size:0.875rem; line-height:1.5; }
  .icon{ width:40px; height:40px; font-size:1.0625rem; margin-bottom:10px; }

  /* general cards */
  .grid{ gap:12px; }
  .card{ padding:18px; }
  .mv-card .mv-num{ font-size:3rem; }
  .chips{ margin-top:18px; }

  /* about image */
  .about-grid{ gap:28px; }
  .about-media{ min-height:0; }
  .about-media img{ height:auto; aspect-ratio:4 / 3; min-height:0; }

  /* home package teasers become compact rows */
  .teaser{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; }
  .teaser h3{ grid-column:1; }
  .teaser .price{ grid-column:2; grid-row:1; margin:0; font-size:1.125rem; }
  .teaser p, .teaser a.more{ grid-column:1 / -1; }
  .teaser a.more{ padding-top:6px; margin-top:0; }

  /* services: packages */
  .package ul{ margin:10px 0 16px; }
  .package li{ font-size:0.875rem; margin-bottom:5px; }
  .package .price{ font-size:1.5rem; margin:6px 0 2px; }
  .package.featured{ margin-top:8px; }

  /* services: how it works as a vertical timeline */
  .steps{ display:block; }
  .steps .card{
    border:0; background:transparent; padding:0 0 22px; border-radius:0;
    display:grid; grid-template-columns:44px 1fr; column-gap:14px; align-items:start;
    transform:none !important; box-shadow:none !important;
  }
  .steps .card:last-child{ padding-bottom:0; }
  .steps .step-num{ grid-row:1 / span 2; margin:0; position:relative; z-index:1; }
  .steps .card h3{ grid-column:2; align-self:center; }
  .steps .card p{ grid-column:2; margin-top:2px; }
  .steps .card:not(:last-child)::after{
    content:""; position:absolute; left:21px; top:46px; bottom:2px; width:2px; background:rgba(22,198,216,.45);
  }

  /* contact */
  .contact-card strong{ font-size:1rem; }
  .contact-card span{ font-size:0.875rem; }
  #enquiry form{ padding:16px; gap:14px; }
  details{ padding:12px 14px; margin-bottom:8px; }
  summary{ font-size:0.9375rem; }
  details p{ font-size:0.9375rem; }

  /* footer */
  .site-footer{ padding:30px 0 14px; }
  .footer-grid{ grid-template-columns:1fr; gap:20px; }
  .footer-pages{ display:none; }
  .site-footer h3{ margin-bottom:8px; }
  .site-footer li{ margin-bottom:8px; }
  .footer-brand p{ max-width:none; }
  .copy{ margin-top:18px; padding-top:12px; }
}

/* =========================================================
   PHONES: round 2 (hero crop, home body, menu icon)
========================================================= */
@media (max-width:768px){
  /* hero: own height and focal point, so less of the photo is cut off */
  .hero{
    min-height:clamp(380px, 58vh, 480px); padding:48px 0;
    background-position:0 0, var(--hero-pos-m);
  }
  .hero-actions{ flex-direction:column; align-items:center; gap:10px; }
  .hero .btn-outline.hero-link{
    border-color:transparent; padding:6px 4px; font-weight:600;
    text-decoration:underline; text-underline-offset:5px; text-decoration-color:rgba(255,255,255,.5);
  }

  /* shorter wording on phones */
  .long{ display:none; }
  .short{ display:inline; }

  /* filled teal icon circles */
  .icon:not(.wa){ background:var(--teal); color:var(--ink); }

  /* mission and vision: swipeable strip */
  .mv-strip{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:16px;
    gap:12px; margin:18px -16px 0 !important; padding:4px 16px 10px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .mv-strip::-webkit-scrollbar{ display:none; }
  .mv-strip .card{ flex:0 0 78%; scroll-snap-align:start; padding:16px; }
  .mv-strip .card p{ font-size:0.9375rem; line-height:1.5; }
  .swipe-hint{ display:block; text-align:center; font-size:0.8125rem; color:var(--gray); margin-top:2px; }

  /* why businesses choose: slim rows */
  .grid-4.why{ grid-template-columns:1fr; gap:10px; }
  .grid-4.why .card{
    display:grid; grid-template-columns:44px 1fr; column-gap:14px; align-items:center; padding:12px 14px;
  }
  .grid-4.why .icon{ grid-row:1 / span 2; margin:0; }
  .grid-4.why h3{ grid-column:2; }
  .grid-4.why p{ grid-column:2; margin:0; }
}

/* =========================================================
   PHONES: round 3 (smaller text)
   Body text 15px, card text 14px. Form fields stay 16px so
   iPhones do not zoom in when a field is tapped.
========================================================= */
@media (max-width:768px){
  body{ font-size:0.9375rem; line-height:1.6; }
  h1{ font-size:1.625rem; }
  h2{ font-size:1.3125rem; }
  h3{ font-size:1rem; }

  .hero p{ font-size:0.9375rem; margin:8px auto 16px; }
  .hero .eyebrow{ font-size:0.75rem; letter-spacing:1.5px; }
  .page-head p, .cta-band p, .section-intro{ font-size:0.9375rem; }

  .btn{ font-size:0.875rem; padding:11px 20px; }
  .btn-sm{ font-size:0.8125rem; }

  .card p, .mv-strip .card p, .teaser p, .grid-4 .card p{ font-size:0.875rem; line-height:1.5; }
  .grid-4.why p{ font-size:0.8125rem; }
  .about-text .lead{ font-size:1.0625rem; margin:10px 0 8px; }
  .about-text .closing{ font-size:1rem; margin:14px 0 12px; }
  .about-text p{ margin-bottom:10px; }

  .kicker{ font-size:0.75rem; letter-spacing:1.5px; }
  .chip{ font-size:0.8125rem; padding:6px 14px; }
  .swipe-hint{ font-size:0.75rem; }
  .badge-pop{ font-size:0.6875rem; padding:3px 12px; }

  .teaser .price{ font-size:1.0625rem; }
  .teaser a.more{ font-size:0.875rem; }
  .package .price{ font-size:1.375rem; }
  .package li{ font-size:0.8125rem; }

  label, summary{ font-size:0.875rem; }
  details p{ font-size:0.875rem; }
  .small, small{ font-size:0.8125rem; }
  .contact-card strong{ font-size:0.9375rem; }
  .contact-card span{ font-size:0.8125rem; }

  .site-footer li, .site-footer p{ font-size:0.875rem; }
  .copy{ font-size:0.75rem; }
}

/* ---------- agreement: the tick is the signature ---------- */
.agree-box{ border:2px solid var(--teal); border-radius:var(--radius); background:rgba(22,198,216,.07); padding:16px 18px; }
.agree-box .kicker{ margin-bottom:8px; }
.agree-box .check{ margin-bottom:0; cursor:pointer; }
.agree-box .check span{ color:var(--ink); }

/* ---------- stop double-tap zoom when tapping buttons quickly ----------
   touch-action: manipulation keeps scrolling and pinch-zoom, but turns off
   the "double-tap to zoom" gesture. Pinch zoom stays for accessibility. */
html, body, a, button, summary, label, input, select, textarea{ touch-action:manipulation; }
.nav-toggle, .wa-float, .btn{ -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }

.nw{ white-space:nowrap; }
@media (max-width:768px){
  /* room at the very bottom so the floating WhatsApp button never covers the footer text */
  .site-footer{ padding-bottom:84px; }
}

/* ---------- "every package includes" strip (services) ---------- */
.includes{
  display:flex; align-items:center; justify-content:center; gap:10px; text-align:center;
  max-width:720px; margin:28px auto 0; padding:12px 18px;
  background:rgba(22,198,216,.10); border:1px solid rgba(22,198,216,.35); border-radius:999px;
  color:var(--ink); font-weight:600; font-size:0.9375rem;
}
.includes i{ color:var(--teal-text); flex-shrink:0; }
@media (max-width:768px){
  .includes{ border-radius:var(--radius); font-size:0.8125rem; padding:10px 14px; text-align:left; margin-top:20px; }
}

/* ---------- agreement: confirmation after signing ---------- */
.confirm{ border:2px solid var(--wa); background:rgba(37,211,102,.10); border-radius:var(--radius); padding:16px 18px; }
.confirm strong{ display:block; margin-bottom:6px; color:var(--ink); }
.confirm strong i{ color:#128c4a; margin-right:6px; }
.confirm p{ color:var(--ink); margin-top:4px; }