/* =================================================================
   Sundae Websites — Services page
   Page-specific styles. Reuses tokens from colors_and_type.css and
   shared components (.btn, .eyebrow, .offer, .footer) from home.css.
   ================================================================= */

/* Sticky nav + hamburger menu now live in the shared nav.css
   (linked from both index.html and Services.html). */

/* ============== SERVICES HERO ============== */
.shero {
  position: relative;
  background: var(--cream);
  border-bottom: 1px solid var(--ink-10);
  padding: 92px 56px 84px;
  overflow: hidden;
}
.shero__mark {
  position: absolute;
  top: -14%;
  right: -6%;
  width: clamp(300px, 36vw, 520px);
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
  transform: rotate(-12deg);
  opacity: 0.10;
}
.shero__mark img {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 600px) {
  /* Watermark now shows on phones too. */
}
.shero__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}
.shero__h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 18px 0 0;
  max-width: 16ch;
  text-wrap: balance;
}
.shero__lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  color: var(--ink-70);
  margin: 26px 0 0;
  max-width: 54ch;
  text-wrap: pretty;
}
.shero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 38px;
}
.shero__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink-10);
  border-radius: var(--r-pill);
  padding: 9px 16px 9px 14px;
  min-height: 44px; /* touch-safe tap target */
  box-shadow: var(--shadow-sm);
  transition: border-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.shero__chip::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--blue);
  transform: rotate(45deg);
  border-radius: 1px;
  flex-shrink: 0;
}
.shero__chip:hover {
  border-color: var(--ink-20);
  color: var(--blue-deep);
  transform: translateY(-1px);
}
.shero__diamond {
  position: absolute;
  background: var(--blue);
  transform: rotate(45deg);
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 680px) {
  .shero { padding: 40px 28px 56px; }
}

/* ============== SERVICE DETAIL SECTIONS ============== */
.svc {
  position: relative;
  background: var(--paper);
  padding: 104px 56px;
  scroll-margin-top: 96px;
  overflow: hidden;
}
.svc--cream { background: var(--cream); }
.svc__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.svc__copy { min-width: 0; }
.svc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.svc__num {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--blue);
}
.svc__num-sep {
  width: 7px; height: 7px;
  background: var(--blue);
  transform: rotate(45deg);
  border-radius: 1px;
}
.svc__kicker {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.svc__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 5.6vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.svc__sub {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.28;
  color: var(--ink-60);
  margin-top: 16px;
  max-width: 24ch;
}
.svc__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.66;
  color: var(--ink-70);
  margin: 26px 0 0;
  max-width: 48ch;
  text-wrap: pretty;
}
.svc__list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
}
.svc__list li {
  display: grid;
  grid-template-columns: 11px 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-70);
}
.svc__list strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
}
.svc__list .svc__bullet {
  width: 9px; height: 9px;
  margin-top: 6px;
  background: var(--blue);
  transform: rotate(45deg);
  border-radius: 2px;
  flex-shrink: 0;
}
.svc__cta {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.svc__cta-link {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.svc__cta-link .arrow { transition: transform var(--d-fast) var(--ease-out); }
.svc__cta-link:hover { color: var(--blue); border-color: var(--blue); }
.svc__cta-link:hover .arrow { transform: translateX(3px); }

/* Visual column — flip on alternating rows */
.svc__visual { min-width: 0; }
.svc--flip .svc__visual { order: -1; }

@media (max-width: 880px) {
  .svc { padding: 76px 28px; }
  .svc__inner { grid-template-columns: 1fr; gap: 44px; }
  .svc--flip .svc__visual { order: 0; }
  .svc__list { grid-template-columns: 1fr; }
}

/* ============== VISUAL PANELS (on-brand mock fragments) ============== */
.panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-10);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-md);
  padding: 22px;
  overflow: hidden;
}
.svc--cream .panel { box-shadow: var(--shadow-lg); }
.panel__label {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 14px;
}

/* --- Browser mock (Web design) --- */
.browser {
  border-radius: var(--r-3);
  border: 1px solid var(--ink-10);
  overflow: hidden;
  background: #fff;
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--cream);
  border-bottom: 1px solid var(--ink-10);
}
.browser__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-20);
  flex-shrink: 0;
}
.browser__url {
  margin-left: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-45);
  background: #fff;
  border: 1px solid var(--ink-10);
  border-radius: var(--r-pill);
  padding: 4px 14px;
}
.browser__body { padding: 22px; }
.browser__hero {
  height: 70px;
  border-radius: var(--r-2);
  background:
    var(--dot-pattern-blue),
    radial-gradient(ellipse at 78% 20%, rgba(34,141,249,0.30), transparent 62%),
    var(--ink);
  background-size: 13px 13px, 100% 100%, 100% 100%;
  margin-bottom: 16px;
}
.browser__line {
  height: 9px;
  border-radius: 4px;
  background: var(--ink-10);
  margin-bottom: 10px;
}
.browser__line--title { height: 13px; width: 62%; background: var(--ink-20); }
.browser__line--short { width: 84%; }
.browser__line--shorter { width: 48%; }
.browser__btn {
  margin-top: 16px;
  display: inline-block;
  height: 30px;
  width: 116px;
  border-radius: var(--r-2);
  background: var(--blue);
}

/* --- Status rows (Web hosting) --- */
.statlist {
  display: grid;
  gap: 12px;
}
.statrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border: 1px solid var(--ink-10);
  border-radius: var(--r-3);
  background: #fff;
}
.statrow__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
.statrow__icon {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-2);
  background: rgba(34, 141, 249, 0.10);
  color: var(--blue);
  flex-shrink: 0;
}
.statrow__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.statrow__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(31, 138, 91, 0.14);
  flex-shrink: 0;
}

/* --- Search result mocks (SEO + Ads) --- */
.serp {
  display: grid;
  gap: 14px;
}
.serp__row {
  border: 1px solid var(--ink-10);
  border-radius: var(--r-3);
  padding: 16px 18px;
  background: #fff;
}
.serp__row--lead {
  border-color: rgba(34, 141, 249, 0.35);
  box-shadow: 0 0 0 3px rgba(34, 141, 249, 0.07);
}
.serp__tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.serp__url {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-45);
  margin: 0 0 4px;
}
.serp__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--blue-deep);
  margin: 0 0 6px;
}
.serp__snippet {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-60);
  margin: 0;
}
.serp__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-70);
}
.serp__stars {
  color: var(--sticker);
  letter-spacing: 2px;
  font-size: 13px;
}

/* Business / map card for SEO */
.gbp__map {
  position: relative;
  height: 96px;
  border-radius: var(--r-3);
  margin-top: 14px;
  background:
    var(--dot-pattern-blue),
    var(--ink);
  background-size: 14px 14px, 100% 100%;
  overflow: hidden;
}
.gbp__pin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  color: var(--blue-light);
}

/* --- Analytics panel --- */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 132px;
  padding: 4px 2px 0;
  border-bottom: 1px solid var(--ink-10);
}
.chart__bar {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: var(--ink-10);
  min-width: 0;
}
.chart__bar--peak { background: var(--blue); }
.chart__legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
}
.chart__metric {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chart__metric span {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-60);
  margin-left: 6px;
}
.chart__caption {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-45);
  text-align: right;
  line-height: 1.4;
}
.chart__trend { color: var(--success); font-weight: 800; }

/* --- Realistic Google local pack (SEO) --- */
.panel--flush { padding: 0; }
.gmap {
  position: relative;
  height: 158px;
  overflow: hidden;
  background: #e7ecee;
}
.gmap::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(0deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%) 0 14px / 100% 64px,
    linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%) 18px 0 / 86px 100%,
    linear-gradient(38deg, transparent 48.6%, #fff 48.6%, #fff 51.4%, transparent 51.4%);
  opacity: 0.9;
}
.gmap::after {
  content: "";
  position: absolute;
  top: -8%; left: 58%;
  width: 52%; height: 56%;
  background: #d4e7d2;
  border-radius: 18px 40px 26px 30px;
  transform: rotate(-6deg);
}
.gmap__water {
  position: absolute;
  bottom: -14%; left: -10%;
  width: 46%; height: 50%;
  background: #cfe0ea;
  border-radius: 40% 50% 38% 46%;
  transform: rotate(8deg);
}
.gmap__pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--ink-45);
  color: #fff;
  box-shadow: 0 2px 5px rgba(27, 29, 43, 0.3);
  z-index: 2;
}
.gmap__pin span {
  transform: rotate(45deg);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
}
.gmap__pin--lead {
  width: 30px; height: 30px;
  background: var(--blue);
  z-index: 3;
}
.gmap__pin--lead span { font-size: 13px; }

.lpack { padding: 6px 20px 18px; }
.lpack__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid var(--ink-10);
}
.lpack__item:first-child { border-top: 0; }
.lpack__rank {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-45);
  padding-top: 1px;
}
.lpack__item--lead .lpack__rank { color: var(--blue); }
.lpack__name {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}
.lpack__item--lead .lpack__name { color: var(--blue-deep); }
.lpack__rate {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-70);
}
.lpack__rate b {
  font-weight: 800;
  color: var(--ink);
}
.lpack__rate .serp__stars { font-size: 12px; }
.lpack__cat {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-60);
  margin: 4px 0 0;
}
.lpack__open { color: var(--success); font-weight: 800; }
.lpack__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.lpack__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  color: var(--blue-deep);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}

/* --- Realistic Google Ad --- */
.gad__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.gad__sponsored {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.gad__dots { color: var(--ink-45); }
.gad__id {
  display: flex;
  align-items: center;
  gap: 11px;
}
.gad__fav {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  flex-shrink: 0;
}
.gad__biz {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
}
.gad__url {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-60);
}
.gad__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.18;
  color: var(--blue-deep);
  margin: 14px 0 6px;
}
.gad__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-70);
  margin: 0;
}
.gad__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-70);
}
.gad__rating b { color: var(--ink); font-weight: 800; }
.gad__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-10);
}
.gad__link {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  color: var(--blue-deep);
}
.gad__link span {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-45);
  margin-top: 2px;
}

/* --- Realistic analytics report --- */
.report__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.report__month {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-45);
}
.report__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.rstat {
  border: 1px solid var(--ink-10);
  border-radius: var(--r-3);
  padding: 13px 14px;
}
.rstat__label {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 8px;
}
.rstat__num {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rstat__delta {
  display: block;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  color: var(--success);
  margin-top: 6px;
}
.report__chart {
  margin-top: 18px;
}
.report__chart svg { display: block; width: 100%; height: auto; }
.report__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-45);
}
.report__src {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-10);
}
.report__src-label {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 10px;
}
.report__bar {
  display: flex;
  height: 12px;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.report__bar i { display: block; height: 100%; }
.report__seg--search { background: var(--blue); }
.report__seg--ads { background: var(--blue-deep); }
.report__seg--direct { background: var(--ink-20); }
.report__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}
.report__key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-70);
}
.report__key b { color: var(--ink); font-weight: 800; }
.report__dot {
  width: 9px; height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ============== PROCESS BAND (ink stage) ============== */
.process {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding: 108px 56px;
  overflow: hidden;
}
.process__diamond {
  position: absolute;
  top: 50%; right: -120px;
  width: 360px; height: 360px;
  transform: translateY(-50%) rotate(52deg);
  border: 1.5px solid var(--blue);
  border-radius: 12px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.process__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}
.process__head {
  max-width: 640px;
  margin-bottom: 56px;
}
.process__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 16px 0 0;
  text-wrap: balance;
}
.process__lede {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  color: var(--on-dark-78);
  margin: 18px 0 0;
  max-width: 50ch;
}
.process__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.process__step {
  border-top: 1px solid var(--on-dark-18);
  padding-top: 24px;
}
.process__step-num {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--blue-light);
  margin-bottom: 16px;
}
.process__step-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 10px;
}
.process__step-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-65);
  margin: 0;
}
.process__eyebrow .eyebrow { color: var(--on-dark-65); }

@media (max-width: 820px) {
  .process { padding: 80px 28px; }
  .process__steps { grid-template-columns: 1fr; gap: 0; }
  .process__step { padding: 24px 0; border-top: 1px solid var(--on-dark-18); }
}

/* Eyebrow color override when sitting on the ink band */
.eyebrow--on-dark { color: var(--on-dark-65); }