/* ---------- Base Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* New 88 Spa and Massage Color Scheme */
  --color-bg: #FFFFFF;           /* pure soft white */
  --color-surface: #E8EBED;      /* warm light grey */
  --color-text: #3C4856;         /* cozy deep grey */
  --color-accent: #1D84B5;       /* ocean mid-blue */
  --color-accent-light: #B3E5FC; /* soft watery blue */
  --color-contrast-accent: #E07A8C; /* coral pink accent */
  
  /* Legacy variable mappings for compatibility */
  --primary-color: var(--color-accent);
  --secondary-color: var(--color-text);
  --accent-color: var(--color-accent-light);
  --text-dark: var(--color-text);
  --text-light: #7A8B9A;         /* slightly lighter than main text */
  --white: var(--color-bg);
  --cream: var(--color-surface);
  --rose-gold: var(--color-contrast-accent);

  /* header sizing */
  --header-h:72px;

  /* === Option A hero tokens === */
  --hero-bg-start:#162535;      /* darker, cooler navy for strong contrast */
  --hero-bg-end:#E3E8EB;        /* soft light end */
  --hero-text:#FFFFFF;          /* bright heading */
  --hero-text-sub:rgba(255,255,255,.9); /* readable paragraph */
  --hero-shadow:0 2px 24px rgba(0,0,0,.25);
}

@media (max-width:768px){
  :root{ --header-h:88px; }
}

body{
  font-family:'Inter',sans-serif;
  line-height:1.6;
  color:var(--text-dark);
  overflow-x:hidden;

  /* reserve space for fixed header + iOS safe area */
  padding-top:calc(var(--header-h) + env(safe-area-inset-top, 0px));
}
body.menu-open{ overflow:hidden; }

.serif{ font-family:'Playfair Display',serif; }

/* ---------- Header / Nav ---------- */
.header{
  background:var(--white);
  height:var(--header-h);
  display:flex;
  align-items:center;
  /* FIX: make it fixed and above everything */
  position:fixed; top:0; left:0; right:0;
  z-index:1100;
  box-shadow:0 2px 20px rgba(0,0,0,.05);
}

.nav-container{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%;
}

.logo{ font-size:28px; font-weight:600; color:var(--primary-color); }
.nav-menu{ list-style:none; display:flex; gap:40px; }
.nav-menu a{ text-decoration:none; color:var(--text-dark); font-weight:500; transition:color .3s; }
.nav-menu a:hover{ color:var(--primary-color); }

.book-btn{
  background:var(--primary-color); color:var(--white);
  padding:12px 24px; border:none; border-radius:25px; font-weight:600;
  cursor:pointer; transition:all .3s; text-decoration:none; display:inline-block;
}
.book-btn:hover{ background:var(--secondary-color); transform:translateY(-2px); }

/* ---------- Mobile Toggle & Drawer ---------- */
.mobile-menu-toggle{
  display:none; flex-direction:column; justify-content:space-between;
  width:30px; height:21px; cursor:pointer; z-index:1200;
}
.mobile-menu-toggle span{
  display:block; height:3px; width:100%; background:var(--primary-color);
  border-radius:3px; transition:all .3s;
}
.mobile-menu-toggle.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2){ opacity:0; }
mobile-menu-toggle.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* Drawer layer */
.mobile-nav{
  position:fixed; inset:0; background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 20px 40px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  z-index:1050;               /* below header by default */
  pointer-events:none;        /* <<< important: don’t block header when hidden */
}
.mobile-nav.active{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease;
  z-index:1300;               /* above header when open */
  pointer-events:auto;
}
.mobile-nav ul{ list-style:none; text-align:center; }
.mobile-nav li{ margin-bottom:20px; }
.mobile-nav a{ font-size:1.2rem; color:var(--text-dark); text-decoration:none; font-weight:500; }
.mobile-nav a:hover{ color:var(--primary-color); }
/* readable Book button inside drawer */
.mobile-nav .book-btn,
.mobile-nav a.book-btn:link,
.mobile-nav a.book-btn:visited{
  background:var(--primary-color);
  color:var(--white) !important; -webkit-text-fill-color:var(--white);
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 24px; border-radius:28px; font-weight:700; font-size:1.1rem; line-height:1;
  text-decoration:none; margin-top:24px; min-width:200px;
}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  /* Option A stronger gradient */
  background:linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
  display:flex; align-items:center; position:relative; overflow:hidden;
}

.hero-container{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}

/* Option A: light text on darker left */
.hero-content h1{
  font-size:3.5rem; font-weight:600; color:var(--hero-text);
  margin-bottom:20px; line-height:1.2;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.hero-content .subtitle{
  font-size:1.2rem; color:var(--hero-text-sub); margin-bottom:30px; font-weight:400;
}

/* Make phone link look like secondary CTA */
.btn-secondary{
  background:transparent; color:#FFFFFF;
  border:2px solid #FFFFFF; border-radius:25px; padding:12px 24px;
  font-weight:600; text-decoration:none; display:inline-block; transition:all .3s;
  box-shadow: var(--hero-shadow);
}
.btn-secondary:hover{ background:rgba(255,255,255,.12); }

.hero-content a[href^="tel:"]{ composes: btn-secondary; } /* harmless in plain CSS */
.hero-content a[href^="tel:"]{
  background:transparent; color:#FFFFFF;
  border:2px solid #FFFFFF; border-radius:25px; padding:12px 24px;
  font-weight:600; text-decoration:none; display:inline-block; transition:all .3s;
  box-shadow: var(--hero-shadow);
}
.hero-content a[href^="tel:"]:hover{ background:rgba(255,255,255,.12); }

/* add subtle elevation to main CTA on hero */
.hero .book-btn{ box-shadow: var(--hero-shadow); }

.hero-carousel{
  height:500px; border-radius:20px; position:relative; overflow:hidden;
}

.carousel-container{
  position:relative; width:100%; height:100%;
}

.carousel-slides{
  position:relative; width:100%; height:100%;
}

.carousel-slide{
  position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; transition:opacity 0.5s ease-in-out;
}

.carousel-slide.active{
  opacity:1;
}

.carousel-slide img{
  width:100%; height:100%; object-fit:cover; border-radius:20px;
}

.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,0.9); border:none; border-radius:50%;
  width:50px; height:50px; font-size:24px; font-weight:bold;
  color:var(--primary-color); cursor:pointer; transition:all 0.3s ease;
  display:flex; align-items:center; justify-content:center;
  z-index:10;
}

.carousel-btn:hover{
  background:var(--white); transform:translateY(-50%) scale(1.1);
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
}

.carousel-prev{ left:20px; }
.carousel-next{ right:20px; }

.carousel-indicators{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:10;
}

.indicator{
  width:12px; height:12px; border-radius:50%;
  border:2px solid rgba(255,255,255,.95); /* stronger visibility */
  background:transparent; cursor:pointer; transition:all 0.3s ease;
}

.indicator.active{ background:var(--white); }
.indicator:hover{ transform:scale(1.2); }

/* ---------- Sections (services, gallery, tables, etc.) ---------- */
.service-images{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px; margin:60px 0;
}
.service-img{
  height:200px; border-radius:15px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--primary-color), var(--accent-color));
  display:flex; align-items:center; justify-content:center; color:var(--white);
  font-weight:600; font-size:1.1rem; text-align:center; transition:transform .3s;
}
.service-img:hover{ transform:scale(1.05); }

.scalp-gallery{ background:var(--secondary-color); padding:60px 0; }
.scalp-images{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:30px; margin-top:40px; }
.scalp-img{
  height:250px; border-radius:20px; position:relative; overflow:hidden;
  background:linear-gradient(45deg, var(--color-accent), var(--color-text), var(--color-surface));
  display:flex; align-items:center; justify-content:center; color:var(--white);
  font-weight:600; font-size:1.2rem; text-align:center; transition:all .3s; box-shadow:0 10px 30px rgba(0,0,0,.1);
}
.scalp-img:hover{ transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,.15); }

.detailed-services{ padding:100px 0; background:var(--white); }
.service-category{ margin-bottom:60px; padding:40px; background:var(--cream); border-radius:20px; }
.category-title{ font-size:2rem; font-weight:600; color:var(--primary-color); margin-bottom:30px; text-align:center; }
.services-table{ display:grid; gap:20px; }
.service-row{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:20px;
  padding:20px; background:var(--white); border-radius:15px; align-items:center;
  box-shadow:0 5px 20px rgba(0,0,0,.05); transition:transform .3s;
}
.service-row:hover{ transform:translateX(10px); }
.service-name{ font-weight:600; color:var(--text-dark); }
.service-name small{ display:block; color:var(--text-light); font-weight:400; font-size:.9rem; margin-top:5px; }
.service-duration{ color:var(--text-light); font-weight:500; }
.service-price{ font-weight:600; color:var(--primary-color); font-size:1.1rem; }
.service-package{ color:var(--secondary-color); font-weight:500; }
.table-header{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:20px;
  padding:15px 20px; background:var(--primary-color); color:var(--white);
  border-radius:15px; font-weight:600; margin-bottom:15px;
}

@media (max-width:768px){
  .service-row, .table-header{ grid-template-columns:1fr; text-align:center; }
  .scalp-images{ grid-template-columns:1fr; }
}

/* ---------- Generic sections ---------- */
.services{ padding:100px 0; background:var(--white); }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.section-header{ text-align:center; margin-bottom:60px; }
.section-title{ font-size:2.5rem; font-weight:600; color:var(--text-dark); margin-bottom:15px; }
.section-title.serif{ color:#0F1E2E; } /* deepened for contrast on light areas */
.section-subtitle{ font-size:1.1rem; color:var(--text-light); max-width:600px; margin:0 auto; }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:40px; }
.service-card{
  background:var(--white); border-radius:20px; padding:40px; box-shadow:0 10px 40px rgba(0,0,0,.08);
  transition:transform .3s, box-shadow .3s; border:1px solid var(--secondary-color);
}
.service-card:hover{ transform:translateY(-10px); box-shadow:0 20px 60px rgba(0,0,0,.12); }
.service-icon{
  width:60px; height:60px; background:var(--primary-color); border-radius:15px;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:24px; color:var(--white);
}
.service-card h3{ font-size:1.4rem; font-weight:600; margin-bottom:15px; color:var(--text-dark); }
.service-card p{ color:var(--text-light); margin-bottom:20px; }
.service-link{ color:var(--primary-color); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:gap .3s; }
.service-link:hover{ gap:12px; }

/* ---------- Coupons ---------- */
.coupons{ padding:80px 0; background:var(--secondary-color); }
.coupons-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px; margin-top:40px; }
.coupon-card{
  background:linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color:var(--white); padding:30px; border-radius:20px; text-align:center; position:relative; overflow:hidden;
}
.coupon-card::before{ content:''; position:absolute; top:-50px; right:-50px; width:100px; height:100px; background:rgba(255,255,255,.1); border-radius:50%; }
.coupon-amount{ font-size:2.5rem; font-weight:700; margin-bottom:10px; }
.coupon-condition{ font-size:1.1rem; opacity:.9; }

/* ---------- Testimonials ---------- */
.testimonials{ padding:100px 0; background:var(--white); }
.testimonials-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:40px; margin-top:40px; }
.testimonial-card{ background:var(--cream); padding:40px; border-radius:20px; position:relative; }
.testimonial-card::before{ content:'"'; font-size:4rem; color:var(--primary-color); position:absolute; top:10px; left:20px; }
.testimonial-text{ font-style:italic; margin-bottom:20px; padding-left:30px; }
.testimonial-author{ font-weight:600; color:var(--primary-color); padding-left:30px; }

/* ---------- Contact ---------- */
.contact{ padding:100px 0; background:var(--text-dark); color:var(--white); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.contact-info h2{ font-size:2.5rem; margin-bottom:30px; color:var(--primary-color); }
.contact-item{ display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.contact-icon{ width:40px; height:40px; background:var(--primary-color); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--white); }
.map-container{ height:450px; border-radius:15px; overflow:hidden; }
.map-container iframe{ width:100%; height:100%; border:none; }

/* ---------- Footer ---------- */
.footer{ background:var(--text-dark); color:var(--white); text-align:center; padding:40px 0; border-top:1px solid rgba(255,255,255,.1); }
.footer-links{ margin-bottom:15px; }
.footer-links a{ color:var(--white); text-decoration:none; margin:0 10px; transition:color .3s; }
.footer-links a:hover{ color:var(--accent-color); text-decoration:underline; }

/* ---------- Forms (SMS/Contact) ---------- */
.sms-registration{ margin-top:80px; padding:40px; background:var(--cream); border-radius:20px; }
.form-container{ max-width:800px; margin:0 auto; }
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group{ margin-bottom:20px; }
.form-group.consent-group{ grid-column:span 2; display:flex; align-items:flex-start; gap:10px; }
.form-group label{ display:block; margin-bottom:8px; font-weight:500; color:var(--text-dark); }
.consent-label{ font-size:.9rem; line-height:1.5; }
.consent-label a{ color:var(--primary-color); text-decoration:none; font-weight:600; }
.consent-label a:hover{ text-decoration:underline; }
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"]{
  width:100%; padding:12px 15px; border:1px solid rgba(0,0,0,.1); border-radius:8px; font-family:'Inter',sans-serif; font-size:1rem; transition:border-color .3s;
}
.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="email"]:focus{ border-color:var(--primary-color); outline:none; }
.form-group input[type="checkbox"]{ width:20px; height:20px; margin-top:3px; }
.submit-btn{
  background:var(--primary-color); color:var(--white); padding:12px 24px; border:none; border-radius:25px;
  font-weight:600; cursor:pointer; transition:all .3s; font-family:'Inter',sans-serif; font-size:1rem;
  grid-column:span 2; width:200px; justify-self:center;
}
.submit-btn:hover{ background:var(--secondary-color); transform:translateY(-2px); }
.compliance-notice{ grid-column:span 2; margin-top:20px; padding:15px; background:rgba(0,0,0,.05); border-radius:8px; }
.compliance-notice p{ font-size:.85rem; color:var(--text-light); margin-bottom:10px; }
.compliance-notice p:last-child{ margin-bottom:0; }
.success-message{ text-align:center; padding:40px 20px; background:var(--cream); border-radius:15px; border:2px solid var(--primary-color); }
.success-message h3{ color:var(--primary-color); font-size:1.8rem; margin-bottom:20px; font-family:'Playfair Display',serif; }
.success-message p{ color:var(--text-dark); margin-bottom:15px; font-size:1.1rem; }

/* ---------- Breadcrumb / FAQ / Privacy ---------- */
.breadcrumb{ background:var(--cream); padding:12px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.breadcrumb ol{ list-style:none; display:flex; align-items:center; gap:8px; font-size:.9rem; }
.breadcrumb li{ display:flex; align-items:center; }
.breadcrumb li:not(:last-child)::after{ content:'›'; margin-left:8px; color:var(--text-light); font-weight:500; }
.breadcrumb a{ color:var(--primary-color); text-decoration:none; transition:color .3s; }
.breadcrumb a:hover{ color:var(--secondary-color); text-decoration:underline; }
.breadcrumb span{ color:var(--text-light); }

.faq-section{ padding:80px 0; background:var(--white); }
.faq-grid{ display:grid; gap:20px; margin-top:40px; max-width:800px; margin-left:auto; margin-right:auto; }
.faq-item{ background:var(--cream); border-radius:12px; padding:30px; transition:transform .3s, box-shadow .3s; }
.faq-item:hover{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,.1); }
.faq-question{ font-size:1.2rem; font-weight:600; color:var(--primary-color); margin-bottom:15px; cursor:pointer; position:relative; padding-right:30px; }
.faq-question::after{ content:'+'; position:absolute; right:0; top:0; font-size:1.5rem; font-weight:300; color:var(--secondary-color); transition:transform .3s; }
.faq-item.active .faq-question::after{ transform:rotate(45deg); }
.faq-answer{ color:var(--text-dark); line-height:1.7; opacity:.9; }
.faq-answer p{ margin:0; }

.privacy-content{ background:var(--white); color:var(--text-dark); padding:40px; border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,.08); margin-bottom:40px; max-width:800px; margin-left:auto; margin-right:auto; }
.privacy-section{ margin-bottom:40px; padding:30px; background:var(--cream); border-radius:12px; }
.privacy-section h3{ color:var(--primary-color); margin-bottom:20px; font-size:1.3rem; }
.privacy-section p{ margin-bottom:15px; line-height:1.7; color:var(--text-dark); }
.privacy-section ul{ margin:15px 0; padding-left:25px; }
.privacy-section li{ margin-bottom:8px; line-height:1.6; color:var(--text-dark); }
.privacy-section strong{ color:var(--primary-color); font-weight:600; }

/* ---------- Links / Accessibility ---------- */
.service-card p a, .testimonial-text a, .section-subtitle a, .faq-answer a{
  color:var(--primary-color); text-decoration:underline; text-decoration-color:var(--secondary-color);
  text-underline-offset:2px; transition:color .3s;
}
.service-card p a:hover, .testimonial-text a:hover, .section-subtitle a:hover, .faq-answer a:hover{
  color:var(--secondary-color); text-decoration-color:var(--primary-color);
}

.contact-item a[href^="tel:"]{ color:var(--white); text-decoration:none; transition:color .3s; font-weight:400; }
.contact-item a[href^="tel:"]:hover{ color:var(--accent-color); text-decoration:underline; }

a:focus, button:focus, .faq-question:focus{ outline:2px solid var(--primary-color); outline-offset:2px; }
@media (prefers-contrast: high){
  :root{ --text-light:#5A6B7A; --accent-color:var(--color-surface); }
}
@media (prefers-reduced-motion: reduce){
  .fade-in, .faq-item, .breadcrumb a{ animation:none; transition:none; }
}

/* ---------- Animations ---------- */
.fade-in{ opacity:0; transform:translateY(20px); animation:fadeInUp .6s ease forwards; }
.animate-delay-1{ animation-delay:.2s; }
.animate-delay-2{ animation-delay:.4s; }
.animate-delay-3{ animation-delay:.6s; }
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0); } }

/* ---------- Responsive tweaks ---------- */
@media (max-width:768px){
  .nav-menu{ display:none; }
  .mobile-menu-toggle{ display:flex; order:3; }
  .nav-container{ gap:10px; flex-wrap:wrap; }
  .logo{ flex:1 1 auto; font-size:22px; }
  .header .book-btn{ order:2; padding:8px 12px; border-radius:18px; font-size:.95rem; }

  .hero-container{ grid-template-columns:1fr; text-align:center; }
  .hero-content h1{ font-size:2.1rem; line-height:1.18; max-width:16ch; margin:0 auto 20px; text-shadow:0 2px 8px rgba(0,0,0,.4); }
  .hero-content .subtitle{ max-width:36ch; margin:0 auto 30px; color:rgba(255,255,255,.92); }

  .hero-content .book-btn,
  .hero-content .btn-secondary,
  .hero-content a[href^="tel:"]{
    display:block; width:100%; max-width:340px; margin:10px auto 0; text-align:center;
  }

  .contact-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }

  .breadcrumb{ padding:8px 0; }
  .breadcrumb ol{ font-size:.8rem; gap:6px; }

  .faq-section{ padding:60px 0; }
  .faq-item{ padding:20px; }
  .faq-question{ font-size:1.1rem; padding-right:25px; }

  .contact-form{ grid-template-columns:1fr; }
  .form-group.consent-group, .submit-btn, .compliance-notice{ grid-column:span 1; }

  /* Carousel mobile styles */
  .hero-carousel{ height:300px; }
  .carousel-btn{ width:40px; height:40px; font-size:18px; }
  .carousel-prev{ left:10px; }
  .carousel-next{ right:10px; }
  .carousel-indicators{ bottom:15px; }
  .indicator{ width:10px; height:10px; }
}

/* ---------- Services list/table alignment fix ---------- */
/* These selectors are for the list used on services.html (head/foot/body/combos).
   They right-align numbers, use tabular numerals (monospaced digits),
   lock predictable column widths, and allow the last column to wrap. */

.list-header,
.list-row{
  /* name | duration | price | includes */
  grid-template-columns: minmax(22rem, 1fr) minmax(7ch, 8ch) minmax(6ch, 7ch) 1fr !important;
}

.list-header > :nth-child(2),
.list-header > :nth-child(3),
.list-row .dur,
.list-row .price{
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

/* Let the last column wrap so it doesn't push numeric columns out of line */
.list-row .pkg{ white-space: normal !important; }

/* Slightly heavier numeric header labels while staying right-aligned */
.list-header > :nth-child(2),
.list-header > :nth-child(3){ opacity:.95; }

/* Mobile: stack cards; keep price slightly larger but still aligned within the card */
@media (max-width: 720px) {
  .list-header{ grid-template-columns: 1fr !important; }
  .list-row{ grid-template-columns: 1fr !important; }
  .list-row .price{ font-size:1.05rem; }
}

/* Mobile: stack + left-align all cells */
@media (max-width: 720px) {
  /* make sure headers/values don’t inherit the desktop right-align */
  .list-header > :nth-child(2),
  .list-header > :nth-child(3),
  .list-row .name,
  .list-row .dur,
  .list-row .price,
  .list-row .pkg {
    text-align: left !important;
  }

  /* optional: nicer label/value layout on one line */
  .list-row .cell[data-label]::before {
    display: inline-block;
    min-width: 7.5rem;   /* tweak to taste */
    opacity: .6;
  }
}

.hero .hero-content h1 {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero .hero-content .subtitle,
.hero .hero-content p {
  color: rgba(240,245,248,0.85);
}