/* service.css - shared template for individual service pages (Websites / Landing Pages / On-Demand) */
.svc-hero {
  position: relative; overflow: hidden; color: #fff;
  /* Bottom matches top: the curve eats into the lower edge, so without
     extra room the content sits almost on it. */
  padding-top: clamp(140px,16vw,200px); padding-bottom: clamp(140px,16vw,200px);
  /* rx well past the hero's own width keeps the arc shallow; ry at 100%
     puts the lowest point of the ellipse exactly on the bottom edge. */
  clip-path: ellipse(141% 100% at 50% 0);
  --au-cream: #2A0910; --au-pink: #8A1338; --au-coral: #B23A24; --au-peach: #D8935F; --au-blush: #B2593F; --au-red: #7C1A28;
}
.svc-hero .aurora { z-index: 0; }
.svc-hero .wrap { position: relative; z-index: 3; }
.svc-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px,4vw,56px); align-items: center; }
.svc-hero-copy .eyebrow { color: rgba(255,255,255,0.85); }
.svc-hero-copy h1 em { font-style: italic; color: #FFB98A; }
.svc-hero-copy h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(42px,5.6vw,76px); line-height: 1.03; letter-spacing: -0.02em; margin-top: 22px; color: #fff; text-shadow: 0 4px 32px rgba(20,4,4,0.35); }
.svc-hero-copy .standfirst { margin-top: 24px; max-width: 52ch; color: rgba(255,255,255,0.9); font-size: clamp(16px,1.4vw,19px); line-height: 1.65; }
.svc-hero-copy .cta-row { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.svc-hero-visual { border-radius: 24px; padding: 16px; aspect-ratio: 4/3; }
.svc-hero-visual image-slot { display: block; width: 100%; height: 100%; }
@media (max-width: 980px) {
  .svc-hero-grid { grid-template-columns: 1fr; }
  .svc-hero-visual { order: -1; }
  /* A taller-than-wide hero makes the same ellipse dip much further at the
     corners, so the arc is flattened on small screens. */
  .svc-hero { clip-path: ellipse(230% 100% at 50% 0); }
}

.svc-benefits { background: var(--cream); }
.svc-benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,28px); }
.svc-benefit { padding: clamp(26px,2.4vw,34px); border-radius: 20px; background: var(--cream-2); border: 1px solid var(--line-2); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.svc-benefit:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(52,36,42,0.10); }
.svc-benefit-ic { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--au-pink); margin-bottom: 14px; }
.svc-benefit h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px,2vw,28px); letter-spacing: -0.01em; }
.svc-benefit p { margin-top: 12px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }


.svc-stats-dark {
  position: relative; overflow: hidden; color: #fff;
  --au-cream: #2A0910; --au-pink: #7A1230; --au-coral: #A31E2A; --au-peach: #D9553D; --au-accent: #FFB98A; --au-blush: #A83248; --au-red: #A31E2A;
}
.svc-stats-dark .aurora { z-index: 0; }
.svc-stats-dark .wrap { position: relative; z-index: 3; }
/* Linked research stats: the whole box is the anchor, the labels are full
   sentences so they drop the mono uppercase treatment of the home page. */
.svc-stats-dark a.stat { display: flex; flex-direction: column; color: #fff; text-decoration: none; }
.svc-stats-dark .stat .n .unit { display: block; margin: 8px 0 0; font-size: 0.3em; }
.svc-stats-dark .stat .l { font-family: var(--sans); font-size: 15px; line-height: 1.55; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.8); max-width: 26ch; margin-top: 20px; }
.svc-stat-src { margin-top: auto; padding-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--au-accent); }
.svc-stat-src span { display: inline-block; transition: transform 0.3s var(--ease); }
.svc-stats-dark a.stat:hover .svc-stat-src span { transform: translate(2px,-2px); }

.svc-whofor { background: var(--cream); }
/* Italic accents by section, mirroring the per-section colours on the home page. */
.svc-whofor .sec-head h2 em, .svc-breakdown .sec-head h2 em, .svc-articles .sec-head h2 em { color: #FF2F75; }
.svc-work .sec-head h2 em { color: #E63C4D; }
/* Three research stats rather than four. */
.stat-grid.three { grid-template-columns: repeat(3,1fr); }
.svc-whofor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,2.5vw,32px); }

.svc-breakdown { position: relative; overflow: hidden; background: var(--cream-2); }
.svc-breakdown-decor { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 70% at 10% -5%, rgba(255,150,110,0.30), transparent 58%),
              radial-gradient(64% 78% at 102% 105%, rgba(255,70,135,0.22), transparent 60%); }
.svc-breakdown .wrap { position: relative; z-index: 3; }
.svc-breakdown-intro { max-width: 68ch; color: var(--ink-soft); font-size: clamp(15px,1.3vw,17px); line-height: 1.7; margin-bottom: clamp(32px,4vw,48px); }
.svc-breakdown-grid { grid-template-columns: repeat(3,1fr); }
.svc-breakdown-ic { width: 44px; height: 44px; color: var(--au-pink); }
.svc-breakdown-ic svg { width: 100%; height: 100%; }
.svc-breakdown-price { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-faint); white-space: pre-line; line-height: 1.6; transition: color 0.3s var(--ease); }
.proc-card:hover .svc-breakdown-price { color: var(--au-pink); }
.svc-breakdown-price a { color: var(--au-pink); text-decoration: none; }
.svc-breakdown-price a:hover { text-decoration: underline; text-underline-offset: 3px; }

.svc-work { background: var(--cream); }
.svc-work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.4vw,32px); }
.svc-work-card { }
.svc-work-shot { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1900/1080; background: var(--cream-2); }
.svc-work-shot image-slot { display: block; width: 100%; height: 100%; }
.svc-work-card h4 { margin-top: 16px; font-family: var(--serif); font-weight: 500; font-size: 19px; }
.svc-work-card .svc-work-svc { margin-top: 4px; color: var(--ink-soft); font-size: 13.5px; }

.svc-testimonial {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  --au-cream: #2A0910; --au-pink: #7A1230; --au-coral: #A31E2A; --au-peach: #D9553D; --au-blush: #A83248; --au-red: #A31E2A;
}
.svc-testimonial .aurora { z-index: 0; }
.svc-testimonial .wrap { position: relative; z-index: 3; max-width: 800px; }
.svc-testimonial .mark { font-family: var(--serif); font-size: 64px; line-height: 0.4; color: #FFB98A; }
.svc-testimonial blockquote { margin-top: 24px; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(22px,2.6vw,34px); line-height: 1.4; letter-spacing: -0.01em; }
.svc-testimonial .stars5 { margin-top: 30px; }
.svc-testimonial .stars5 + .by { margin-top: 30px; }
.svc-testimonial .by { margin-top: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(255,255,255,0.72); }
.svc-testimonial .by strong { color: #fff; }

.svc-articles { background: var(--cream-2); }
.svc-articles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,28px); }

.svc-pricing { background: var(--cream); }
.svc-pricing-note { margin-top: 18px; color: var(--ink-faint); font-size: 13px; }

@media (max-width: 980px) {
  .svc-benefits-grid, .svc-work-grid, .svc-articles-grid { grid-template-columns: 1fr; }
  .stat-grid.three { grid-template-columns: 1fr; }
  .svc-whofor-grid { grid-template-columns: 1fr; }
  .svc-breakdown-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .svc-breakdown-grid { grid-template-columns: 1fr; } }


/* ---------- ON-DEMAND PRICING ---------- */
.svc-pricing { background: var(--cream); }
.svc-pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; align-items: stretch; margin-top: 48px;
}
.price-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  border-radius: 22px; padding: clamp(28px, 2.8vw, 38px);
  border: 1px solid var(--line-2); background: #fff;
}
.price-card .pc-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); }
.price-card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; }
.price-card .pc-hours { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--au-coral); }
.price-card .pc-desc { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
/* Pushes the rate table to the bottom so all three align across the row,
   however long the descriptions run. */
.price-card .pc-rates { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 7px; }
.price-card .pc-rate { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12.5px; }
.price-card .pc-rate span:first-child { color: var(--ink-faint); letter-spacing: 0.08em; }
.price-card .pc-rate span:last-child { color: var(--ink); font-weight: 700; }

/* The half-day retainer is the one most businesses land on, so it reads as the
   default: dark, lifted, and standing slightly proud of the row. */
.price-card.pc-feature {
  background: var(--wine); border-color: var(--wine); color: #fff;
  box-shadow: 0 24px 60px rgba(58, 15, 22, 0.28);
}
.price-card.pc-feature .pc-num { color: rgba(255,255,255,0.55); }
.price-card.pc-feature .pc-desc { color: rgba(255,255,255,0.76); }
.price-card.pc-feature .pc-hours { color: var(--au-peach); }
.price-card.pc-feature .pc-rates { border-top-color: rgba(255,255,255,0.18); }
.price-card.pc-feature .pc-rate span:first-child { color: rgba(255,255,255,0.55); }
.price-card.pc-feature .pc-rate span:last-child { color: #fff; }
.pc-badge {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; background: var(--au-pink); color: #fff;
}
.svc-pricing-note { margin-top: 28px; font-size: 13.5px; color: var(--ink-faint); }

@media (min-width: 901px) {
  /* Bleeds past the row so the middle card is taller than its neighbours. */
  .price-card.pc-feature { margin-block: -22px; padding-top: calc(clamp(28px, 2.8vw, 38px) + 22px); }
  /* Clears the badge, which would otherwise sit on top of the number. */
  .price-card.pc-feature .pc-num { margin-top: 6px; }
}
@media (max-width: 900px) {
  .svc-pricing-grid { grid-template-columns: 1fr; }
}

/* ---------- CONTACT PAGE ---------- */
/* The hero is copy-only, so it drops the two-column grid the service heroes use. */
.ct-hero { clip-path: none; }
.ct-hero .svc-hero-copy h1 { max-width: 18ch; }
.ct-hero .svc-hero-copy h1 em { font-style: italic; }
.ct-hero .svc-hero-copy .standfirst { max-width: 54ch; }

.ct-main { background: var(--cream); }
.ct-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.ct-form-col h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.01em; }
.ct-form-intro { margin-top: 18px; max-width: 46ch; color: var(--ink-soft); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; }

.ct-form { margin-top: clamp(30px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 22px; }
.ct-field { display: flex; flex-direction: column; gap: 9px; }
.ct-field label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%; font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 14px;
  padding: 15px 18px; line-height: 1.5;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ct-field textarea { resize: vertical; min-height: 150px; }
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  outline: none; border-color: var(--au-pink);
  box-shadow: 0 0 0 3px rgba(196, 17, 107, 0.12);
}
/* The native arrow renders differently on every platform, so it's suppressed
   in favour of the caret used elsewhere in the design. */
.ct-select { position: relative; }
.ct-select select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer; }
.ct-select select:invalid { color: var(--ink-faint); }
.ct-select-caret { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-faint); font-size: 12px; }

.ct-submit { align-self: flex-start; margin-top: 4px; }
.ct-privacy { font-size: 13px; color: var(--ink-faint); line-height: 1.6; }
.ct-privacy a { text-decoration: underline; text-underline-offset: 2px; }

/* Netlify's honeypot: never shown, never announced, only ever filled by bots. */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ct-aside { display: flex; flex-direction: column; gap: 16px; }
.ct-card { padding: clamp(24px, 2.2vw, 30px); border-radius: 20px; background: var(--cream-2); border: 1px solid var(--line-2); }
.ct-card h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--au-pink); }
.ct-card p { margin-top: 12px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
.ct-card p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ct-email { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 12px; font-family: var(--serif); font-size: clamp(19px, 1.9vw, 24px); color: var(--ink); }
.ct-email span { font-size: 0.7em; color: var(--au-pink); transition: transform 0.3s var(--ease); display: inline-block; }
.ct-email:hover span { transform: translate(3px, -3px); }
.ct-hours { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.ct-hours li { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; }
.ct-hours li span:first-child { color: var(--ink-faint); }
.ct-hours li span:last-child { color: var(--ink); text-align: right; }

@media (max-width: 980px) {
  .ct-grid { grid-template-columns: 1fr; }
}

.ct-sent {
  margin-top: 26px; padding: 20px 22px; border-radius: 16px;
  background: var(--cream-2); border: 1px solid var(--au-pink);
  display: flex; flex-direction: column; gap: 6px;
}
.ct-sent strong { font-family: var(--serif); font-weight: 500; font-size: 19px; }
.ct-sent span { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.ct-sent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- SOLUTIONS PAGE RHYTHM ---------- */
/* The benefits row and the problem statement below it are both cream, so the
   two .pad blocks between them stack into a gap with nothing in it. Halving
   each brings the pair back to roughly one section's worth of space. */
.svc-benefits { padding-bottom: clamp(44px, 5.5vw, 84px); }
.problem.svc-problem { padding-top: clamp(44px, 5.5vw, 84px); }