/* ==========================================================================
   My Massage Guy — mymassageguy.com.au
   ========================================================================== */

:root{
  --navy-900:#010717;
  --navy-800:#050d21;
  --navy-700:#0a1630;
  --navy-600:#122040;
  --line-dark:rgba(255,255,255,.10);

  --paper:#f6f7f9;
  --paper-2:#ffffff;
  --ink:#0d1421;
  --ink-soft:#4a5568;
  --line:#e2e6ec;

  --blue:#1a7ae0;
  --blue-dark:#116ac9;
  --blue-soft:#5fa8ee;

  --display:'Barlow Condensed', 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap:1180px;
  --pad:clamp(20px, 5vw, 40px);
  --sec-y:clamp(64px, 9vw, 120px);
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:.005em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:12px 18px; font-weight:600;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

/* ── Shared type ───────────────────────────────────────────── */
.eyebrow{
  font-family:var(--display);
  font-size:15px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue); margin:0 0 18px;
}
.sec-title{
  font-size:clamp(34px, 5.2vw, 56px);
  text-transform:uppercase;
  letter-spacing:.01em;
  margin-bottom:20px;
}
.sec-head{max-width:680px; margin:0 auto clamp(44px,6vw,72px); text-align:center}
.sec-head--left{max-width:560px; margin-inline:0; text-align:left}
.sec-head .btn{margin-top:12px}
.sec-lead{color:var(--ink-soft); font-size:18px}
.section{padding-block:var(--sec-y)}
.section--dark{background:var(--navy-900); color:#dfe6f2}
.section--dark .sec-lead,
.section--dark p{color:#a9b6cc}
.section--dark h2,.section--dark h3{color:#fff}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display);
  font-size:17px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 30px; border:1px solid transparent; border-radius:var(--radius);
  text-decoration:none; cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn svg{width:18px; height:18px; fill:currentColor}
.btn--solid{background:var(--blue); color:#fff}
.btn--solid:hover{background:var(--blue-dark); transform:translateY(-1px)}
.btn--ghost{border-color:rgba(255,255,255,.28); color:#fff}
.btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.btn--full{width:100%}

/* ── Top bar ───────────────────────────────────────────────── */
.topbar{background:var(--navy-800); color:#8ea0bd; font-size:13.5px; border-bottom:1px solid var(--line-dark)}
.topbar__inner{display:flex; align-items:center; gap:14px; height:42px; letter-spacing:.02em}
.topbar__sep{width:1px; height:14px; background:rgba(255,255,255,.16)}
.topbar__phone{margin-left:auto; color:#fff; text-decoration:none; font-weight:600; letter-spacing:.04em}
.topbar__phone:hover{color:var(--blue-soft)}

/* ── Header ────────────────────────────────────────────────── */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(1,7,23,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.header__inner{display:flex; align-items:center; gap:24px; height:112px; transition:height .25s ease}
.header.is-stuck .header__inner{height:88px}
.brand{display:block; flex:0 0 auto}
.brand img{height:78px; width:auto; transition:height .25s ease}
.header.is-stuck .brand img{height:60px}

.nav{margin-left:auto; display:flex; align-items:center; gap:30px}
.nav a{
  font-family:var(--display); font-size:16.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:#c6d2e6; text-decoration:none;
  transition:color .2s ease;
}
.nav a:hover{color:#fff}
.nav__cta{color:#fff !important; padding:12px 24px; font-size:15.5px}

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; background:none; border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius); padding:0; cursor:pointer;
}
.burger span{display:block; width:20px; height:1.5px; background:#fff; margin:4px auto; transition:transform .25s ease, opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(26,122,224,.20) 0%, rgba(26,122,224,0) 55%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color:#fff;
  padding-block:clamp(72px, 11vw, 140px) clamp(64px, 9vw, 116px);
  border-bottom:1px solid var(--line-dark);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(26,122,224,.7), transparent);
}
.hero__inner{position:relative; z-index:2; max-width:900px}
.hero__mark{
  position:absolute; top:50%; right:-60px; transform:translateY(-50%);
  width:min(46vw, 560px); opacity:.10; pointer-events:none; z-index:1;
}
.hero__title{
  font-size:clamp(40px, 7.2vw, 80px);
  text-transform:uppercase;
  letter-spacing:.005em;
  margin-bottom:26px;
}
.hero__title em{font-style:normal; color:var(--blue-soft)}
.hero__lead{max-width:590px; font-size:clamp(17px,2.1vw,20px); color:#b7c4da; margin-bottom:36px}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:clamp(44px,6vw,68px)}

.hero__facts{
  display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,56px);
  margin:0; padding-top:30px; border-top:1px solid var(--line-dark);
}
.hero__facts dt{
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:#7e8fab; margin-bottom:6px;
}
.hero__facts dd{
  margin:0; font-family:var(--display); font-size:26px; font-weight:600;
  letter-spacing:.02em; color:#fff; text-transform:uppercase;
}

/* ── Trust strip ───────────────────────────────────────────── */
.strip{background:var(--paper-2); border-bottom:1px solid var(--line)}
.strip__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.strip__item{padding:clamp(32px,4vw,46px) clamp(20px,2.4vw,34px); border-right:1px solid var(--line)}
.strip__item:first-child{padding-left:0}
.strip__item:last-child{border-right:0; padding-right:0}
.strip__no{
  display:block; font-family:var(--display); font-size:14px; font-weight:600;
  letter-spacing:.2em; color:var(--blue); margin-bottom:14px;
}
.strip__item h2{font-size:23px; text-transform:uppercase; margin-bottom:8px}
.strip__item p{font-size:15.5px; color:var(--ink-soft); line-height:1.6}

/* ── Services ──────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px)}
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(30px,3vw,42px);
  display:flex; flex-direction:column;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.card:hover{
  border-color:#c8d5e6;
  box-shadow:0 20px 50px -32px rgba(9,25,55,.55);
  transform:translateY(-3px);
}
.card__icon{width:54px; height:54px; margin-bottom:22px}
.card__icon svg{width:100%; height:100%; fill:var(--blue)}
.card__icon .stroke{
  fill:none; stroke:var(--blue); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.card h3{font-size:28px; text-transform:uppercase; margin-bottom:14px}
.card p{color:var(--ink-soft); font-size:16px}
.ticks{margin:22px 0 26px; display:grid; gap:9px}
.ticks li{position:relative; padding-left:26px; font-size:15.5px; color:var(--ink)}
.ticks li::before{
  content:""; position:absolute; left:0; top:9px;
  width:11px; height:6px; border-left:1.8px solid var(--blue); border-bottom:1.8px solid var(--blue);
  transform:rotate(-45deg);
}
.card__price{
  margin-top:auto; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink);
}

/* ── Pricing ───────────────────────────────────────────────── */
.pricing__inner{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,6vw,90px); align-items:start}
.rates{display:grid; gap:2px}
.rate{
  display:flex; align-items:baseline; gap:16px;
  padding:22px 0; border-bottom:1px solid var(--line-dark);
}
.rate:first-child{border-top:1px solid var(--line-dark)}
.rate__name h3{font-size:25px; text-transform:uppercase; margin-bottom:2px}
.rate__name p{font-size:14.5px; color:#8b9ab4; margin:0}
.rate__dots{flex:1 1 auto; height:1px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 2px, transparent 2px 7px); transform:translateY(-4px)}
.rate__price{
  margin:0; font-family:var(--display); font-size:34px; font-weight:700;
  color:#fff; letter-spacing:.01em;
}
.rate__price--sm{font-size:22px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-soft)}
.pricing__note{grid-column:1 / -1; font-size:14.5px; color:#8b9ab4 !important; max-width:640px; padding-top:8px}

/* ── Mobile service ────────────────────────────────────────── */
.mobile__grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,5vw,80px); align-items:center}
.mobile__copy p{color:var(--ink-soft); max-width:56ch}
.mobile__copy .btn{margin-top:14px}
.mobile__areas{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,3vw,40px);
}
.mobile__areas h3{
  font-size:15px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue);
  font-weight:600; margin-bottom:22px;
}
.areas{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px}
.areas li{
  font-family:var(--display); font-size:20px; font-weight:500; text-transform:uppercase;
  letter-spacing:.06em; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.areas__note{margin-top:22px; font-size:14.5px; color:var(--ink-soft)}

/* ── About ─────────────────────────────────────────────────── */
.about__grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(36px,6vw,80px); align-items:center}
.about__mark img{width:min(100%,360px); margin-inline:auto; filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))}
.about__lead{font-size:20px; color:#d5deed !important}
.creds{margin-top:30px; display:grid; gap:12px}
.creds li{
  position:relative; padding-left:24px; font-size:16px; color:#c2cddf;
}
.creds li::before{
  content:""; position:absolute; left:0; top:11px; width:9px; height:9px;
  border-radius:50%; background:var(--blue);
}

/* ── Process ───────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,34px); counter-reset:step}
.steps li{padding-top:26px; border-top:2px solid var(--ink)}
.steps li:nth-child(n+2){border-top-color:var(--line)}
.steps__no{
  display:block; font-family:var(--display); font-size:15px; font-weight:600;
  letter-spacing:.2em; color:var(--blue); margin-bottom:12px;
}
.steps h3{font-size:24px; text-transform:uppercase; margin-bottom:10px}
.steps p{font-size:15.5px; color:var(--ink-soft)}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq__inner{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(36px,5vw,80px); align-items:start}
.faq__list{border-top:1px solid var(--line-dark)}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-size:22px; font-weight:500; letter-spacing:.03em;
  color:#fff; text-transform:uppercase;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-soft)}
.faq summary::before,
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; background:var(--blue);
  transition:transform .25s ease, opacity .25s ease;
}
.faq summary::before{width:15px; height:1.5px; transform:translateY(-50%)}
.faq summary::after{width:1.5px; height:15px; right:12.75px; transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg); opacity:0}
.faq details p{padding:0 40px 26px 0; font-size:16px; max-width:66ch}

/* ── Booking ───────────────────────────────────────────────── */
.book{background:var(--paper-2); border-top:1px solid var(--line)}
.book__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,86px); align-items:start}
.book__intro p{color:var(--ink-soft); max-width:52ch}
.contact-list{margin-top:34px; border-top:1px solid var(--line)}
.contact-list li{
  display:flex; gap:20px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line); font-size:16px;
}
.contact-list__label{
  flex:0 0 96px; font-family:var(--display); font-size:14px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
}
.contact-list a{text-decoration:none; font-weight:500; border-bottom:1px solid transparent; transition:border-color .2s}
.contact-list a:hover{border-bottom-color:var(--blue)}

.book__form{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,3vw,40px);
}
.field{margin-bottom:20px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field label{
  display:block; margin-bottom:8px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#5b6779;
}
.field .opt{font-weight:400; letter-spacing:.04em; text-transform:none; color:#93a0b3}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 15px; transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{resize:vertical; min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,122,224,.14);
}
.field input.invalid{border-color:#c0392b}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234a5568' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px;
  padding-right:40px;
}
.form-note{margin-top:16px; font-size:13.5px; color:var(--ink-soft); text-align:center}
.form-note a{color:var(--blue); text-decoration:none; font-weight:600}

/* ── Footer ────────────────────────────────────────────────── */
.footer{background:var(--navy-900); color:#93a3bd; padding-top:clamp(52px,6vw,80px)}
.footer__inner{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.1fr); gap:clamp(32px,4vw,60px)}
.footer__brand img{height:62px; width:auto; margin-bottom:18px}
.footer__brand p{font-family:var(--display); font-size:19px; letter-spacing:.06em; text-transform:uppercase; color:#c3cee1}
.footer h3{
  font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  font-weight:600; margin-bottom:18px;
}
.footer__nav{display:flex; flex-direction:column; gap:10px}
.footer__nav a,.footer__contact a{color:#93a3bd; text-decoration:none; font-size:15.5px; transition:color .2s ease}
.footer__nav a:hover,.footer__contact a:hover{color:#fff}
.footer__contact{display:flex; flex-direction:column; gap:8px}
.footer__contact p{font-size:15px; margin:0; color:#7f8ea8}
.footer__base{
  margin-top:clamp(40px,5vw,64px); padding-block:22px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:13.5px; color:#6f7e97;
}
.footer__base p{margin:0}

/* ── Mobile call button ────────────────────────────────────── */
.call-fab{display:none}

/* ── Reveal on scroll ──────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(22px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1080px){
  .nav{gap:22px}
  .nav a{font-size:15.5px}
  .strip__grid{grid-template-columns:1fr 1fr}
  .strip__item{border-bottom:1px solid var(--line)}
  .strip__item:nth-child(2){border-right:0; padding-right:0}
  .strip__item:nth-child(3){padding-left:0}
  .strip__item:nth-child(n+3){border-bottom:0}
  .steps{grid-template-columns:1fr 1fr}
}

@media (max-width:960px){
  .topbar__item:nth-of-type(2),.topbar__sep{display:none}

  .burger{display:block}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,360px);
    background:var(--navy-800); border-left:1px solid var(--line-dark);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:100px 30px 40px;
    transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:-30px 0 60px rgba(0,0,0,.4);
  }
  .nav.is-open{transform:none}
  .nav a{padding:17px 0; border-bottom:1px solid var(--line-dark); font-size:19px}
  .nav__cta{margin-top:26px; border-bottom:0; text-align:center}
  body.nav-open{overflow:hidden}

  .cards{grid-template-columns:1fr; max-width:620px; margin-inline:auto}
  .pricing__inner,.mobile__grid,.about__grid,.faq__inner,.book__grid{grid-template-columns:1fr}
  .sec-head--left{max-width:none}
  .about__mark{order:-1}
  .about__mark img{width:min(60%,230px)}
  .mobile__copy p{max-width:none}
  .footer__inner{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}

@media (max-width:620px){
  body{font-size:16.5px}
  .topbar__item{display:none}
  .topbar__inner{justify-content:flex-end}
  .header__inner{height:84px}
  .brand img{height:52px}
  .header.is-stuck .brand img{height:44px}

  .hero{padding-block:56px 64px}
  .hero__mark{right:-90px; width:70vw; opacity:.07}
  .hero__actions .btn{flex:1 1 100%}
  .hero__facts{gap:22px 34px}
  .hero__facts dd{font-size:22px}

  .strip__grid{grid-template-columns:1fr}
  .strip__item{padding-inline:0; border-right:0; border-bottom:1px solid var(--line)}
  .strip__item:last-child{border-bottom:0}

  .steps{grid-template-columns:1fr}
  .steps li{padding-top:20px}

  .rate{flex-wrap:wrap; gap:6px}
  .rate__dots{display:none}
  .rate__name{flex:1 1 auto}
  .rate__price{font-size:28px}

  .areas{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr; gap:0}
  .contact-list li{flex-direction:column; gap:4px}
  .contact-list__label{flex:none}

  .footer{padding-bottom:86px}
  .footer__inner{grid-template-columns:1fr; gap:34px}
  .footer__base{flex-direction:column; gap:6px}

  /* Sticky call bar on phones */
  .call-fab{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:70;
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--blue); color:#fff; text-decoration:none;
    font-family:var(--display); font-size:18px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase;
    padding:15px; border-radius:var(--radius);
    box-shadow:0 14px 34px rgba(1,7,23,.45);
  }
  .call-fab svg{width:19px; height:19px; fill:currentColor}
}