/* =========================================================================
   SERVICE 1 TEMPLATE (template-service-1.php)

   Hero + the interactive treatments tab group. Colours/spacing/radii are
   all existing tokens — the "dark on active" tab treatment mirrors
   .tx-card in folds.css so a selected tab reads as the same brand gesture
   as the treatments grid on the homepage, not a new one. Every rule here
   is presentation only — the words it styles are copied verbatim from the
   live page into template-service-1.php, not invented by this stylesheet.
   ========================================================================= */

/* .fold gives equal top/bottom padding, but the hero only needs the top
   half of that (to clear the fixed header) — the bottom half was just
   adding dead white space before the next section's own padding kicks in.
   .svc-hero.fold (two classes) outranks .fold (one class) so this wins
   regardless of stylesheet load order. */
.svc-hero.fold { padding-top: calc(var(--fold) + var(--sp-2)); padding-bottom: var(--sp-7); }

.svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(1.75rem, 3.4vw, 3.6rem);
  align-items: center;
}
.svc-hero-shot { margin-top: 0.3rem; }
/* h1 inherits margin:0 from the reset, and --lh-display's 1.04 leaves
   almost no natural leading above its glyphs, so without this the eyebrow
   label and the heading render nearly flush against each other. */
.svc-hero-copy .eyebrow + h1 { margin-top: var(--sp-2); }
.svc-hero-copy .lead { margin-top: var(--sp-3); }
.svc-hero-actions {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: var(--sp-4);
}
.svc-hero-shot {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  height: 538px; /* ~130px taller than the plain 4:3 box this replaced */
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.svc-hero-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .svc-hero-shot:hover img { transform: scale(1.05); }
}

/* .cta carries no padding of its own (front-page.php relies on whatever
   precedes it for spacing) — on this template the gray treatments section
   comes right before it, so without this the panel photo starts flush
   against the gray with no white gap at all. Scoped to this template's own
   .svc1-cta class rather than editing the shared .cta rule in folds.css,
   which the homepage still uses as-is. */
.svc1-cta { padding-top: var(--sp-6); }

/* Half of .fold's default padding-block — the treatments section doesn't
   need the same generous top/bottom breathing room a full homepage fold
   does, scoped here rather than touching .fold globally. */
.svc1-treatments.fold { padding-block: calc(var(--fold) / 2); }

/* -------------------------------------------------------------------------
   TABS
   ------------------------------------------------------------------------- */
.svc1-tablist {
  display: flex; flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--sp-3);
  border-bottom: var(--hair) solid var(--rule);
  padding-bottom: var(--sp-4);
}
.svc1-tab {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--surface-quiet);
  color: var(--ink-mid);
  font-size: var(--fs-body); font-weight: 600; letter-spacing: var(--track-tight);
  cursor: pointer;
  transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease), transform var(--t-1) var(--ease);
}
.svc1-tab svg { width: 17px; height: 17px; flex: none; transition: transform var(--t-2) var(--ease); }
.svc1-tab:hover { color: var(--ink); box-shadow: inset 0 0 0 var(--hair) var(--rule); }
.svc1-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.svc1-tab.is-active {
  background: var(--deep); color: var(--on-deep);
  box-shadow: 0 14px 28px -16px rgba(var(--deep-rgb), 0.55);
}
.svc1-tab.is-active svg { transform: scale(1.15) rotate(-6deg); }
@media (hover: hover) {
  .svc1-tab:not(.is-active):hover { transform: translateY(-1px); }
  .svc1-tab:not(.is-active):hover svg { transform: scale(1.1); }
}

.svc1-panels { margin-top: var(--sp-5); position: relative; }
.svc1-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}
.svc1-panel[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .svc1-panel {
    animation: svc1-panel-in var(--t-3) var(--ease);
  }
  @keyframes svc1-panel-in {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
  }
}

/* Contained card rather than text floating on the quiet gray background —
   gives the copy a defined measure to read against instead of stretching
   edge-to-edge on a wide viewport. */
.svc1-panel-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  box-shadow: 0 26px 50px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
@media (hover: hover) {
  .svc1-panel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 60px -30px rgba(var(--deep-rgb), 0.38),
                inset 0 0 0 var(--hair) var(--rule-quiet);
  }
  .svc1-panel-card:hover .svc1-panel-icon { transform: scale(1.08) rotate(-4deg); }
}
.svc1-panel-icon {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  flex: none;
  transition: transform var(--t-2) var(--ease);
}
.svc1-panel-icon svg { width: 26px; height: 26px; }
.svc1-panel-t {
  margin-top: var(--sp-3);
  font-size: var(--fs-card-t); font-weight: 700;
  letter-spacing: var(--track-display); line-height: 1.2;
}
.svc1-panel-d { margin-top: var(--sp-3); font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-mid); }

/* No fixed aspect-ratio/height here on purpose — align-items:stretch on
   .svc1-panel means this box's height comes only from .svc1-panel-card
   next to it, so the photo always exactly matches the card regardless of
   how long that panel's copy is, on any service page using this
   template. */
.svc1-panel-fig {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  min-height: 260px;
}
.svc1-panel-fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-md);
  transition: transform var(--t-3) var(--ease);
}
.svc1-panel-fig--contain { background: none; box-shadow: none; }
.svc1-panel-fig--contain img { object-fit: cover; padding: 0; }
/* Zoom on hover for the two real photos only — the tooth graphic already
   has its own float animation below, and animating transform from two
   places at once would fight rather than combine. */
@media (hover: hover) {
  .svc1-panel-fig:not(.svc1-panel-fig--contain):hover img { transform: scale(1.06); }
}

/* Per-tab override — only the Dental bonding panel opts into this taller
   crop (it has more copy now, from the two closing paragraphs folded into
   it), the other two tabs stay at the 330px default above. A fixed height
   instead of raising max-height: aspect-ratio:4/3 was already resolving
   to a shorter height than the old 330px cap at this column's width, so
   the cap itself was never the binding constraint — max-height alone
   can't win against that without also loosening aspect-ratio. */
.svc1-panel-fig--tall { aspect-ratio: auto; height: 665px; max-height: none; }

/* Gentle float — same cta-callout-float keyframe front-page.php's CTA
   band already uses, reused here rather than a new one, on the decorative
   tooth graphic only (a real photograph floating would look like a bug,
   not a feature). Neutralised automatically for prefers-reduced-motion by
   the global rule in tokens.css. */
.svc1-panel-fig--contain img { animation: cta-callout-float 4.5s ease-in-out infinite; }

@media (max-width: 1024px) {
  .svc-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-hero-shot { order: -1; aspect-ratio: 16 / 9; height: auto; }

  .svc1-panel { grid-template-columns: minmax(0, 1fr); }
  .svc1-panel-fig { order: -1; aspect-ratio: auto; max-height: none; }

  /* Desktop's crop for this photo is correct as-is (default center) — only
     the mobile shape needs the subject re-centred. */
  .svc1-panel-fig--tall img { object-position: 80% 15%; }

  /* The tooth graphic is tall and narrow (680x1208) — forced into the same
     wide 16:9 box as the two real photos above left it shrunk small inside
     a lot of empty card, and that card's height put it right where the
     site-wide fixed "Book online" tab (vertically centred, right: 0) can
     land on top of it while scrolling. Auto sizing here, on the image
     itself rather than the box, means its real height comes from its own
     ratio at whatever width it's given — no oversized empty box, and a lot
     less of the page for a right-edge fixed element to ever overlap. */
  .svc1-panel-fig--contain {
    position: static;
    aspect-ratio: auto;
    min-height: 0;
    background: none;
    box-shadow: none;
  }
  .svc1-panel-fig--contain img {
    position: static;
    width: auto; height: auto;
    max-width: 45%;
    margin: 0 auto;
    padding: var(--sp-3) 0;
  }
}
@media (max-width: 640px) {
  .svc1-tablist { gap: 0.45rem; }
  .svc1-tab { padding: 0.6rem 0.9rem; font-size: var(--fs-sm); }
}

/* =========================================================================
   SVC2 — THE VISIBLE-FLOW SERVICE BLOCKS

   Why these exist alongside the .svc1-* tab group above.

   The tab group put roughly two thirds of every service page's body copy
   inside panels carrying `hidden`. It looks tidy, but on a site being
   rebuilt to hold its existing search rankings it is the wrong trade:
   copy that is display:none at load is consistently weighted below copy
   that renders, the panel <h2>s end up being labels for the WIDGET
   ("The procedure", "Our commitment") rather than for the SUBJECT, and a
   reader on a phone has to know a tab is a tab before they can find the
   half of the page that is behind it.

   These blocks render the same words with nothing hidden: every
   paragraph of the approved source copy is in the document, in the
   source's own order, under a heading lifted from that copy's own
   language. Nothing here summarises, truncates or rewrites — the
   stylesheet is presentation only and the copy is verbatim, exactly the
   same contract .svc1-* above holds itself to.

   .svc1-* is left in place untouched: it is still the right component for
   a page whose sub-topics really are parallel alternatives, and removing
   it would break any page still using it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   INTRO — the paragraph that follows the hero lead. Two columns so the
   section reads as a titled statement rather than another wall of body
   text: the heading holds the left rail (sticky on desktop, so it stays
   with its prose through a long read) and the copy sits at a comfortable
   measure on the right.
   ------------------------------------------------------------------------- */
.svc2-intro.fold { padding-block: calc(var(--fold) / 1.4); }

.svc2-split {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: start;
}
.svc2-split-head { position: sticky; top: calc(72px + var(--sp-4)); }
.svc2-split-head .eyebrow + h2 { margin-top: var(--sp-2); }

/* The one prose style every svc2 block shares, so a paragraph reads the
   same whether it sits in the intro, a flow row or a card. */
.svc2-prose { font-size: var(--fs-lead); line-height: 1.72; color: var(--ink-mid); }
.svc2-prose + .svc2-prose { margin-top: var(--sp-3); }

/* -------------------------------------------------------------------------
   FLOW ROWS — copy beside a photograph, alternating side per row. This is
   what replaces a tab panel: same card surface, same photo, but the row
   is simply the next thing down the page instead of something you have to
   click to reach.
   ------------------------------------------------------------------------- */
.svc2-flow.fold { padding-block: calc(var(--fold) / 1.4); }

.svc2-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(1.5rem, 3.4vw, 3.4rem);
  align-items: center;
}
.svc2-row + .svc2-row { margin-top: clamp(3rem, 6vw, 5.5rem); }

/* Reversed by painting the media into column one rather than by
   `direction`/`order` on the container, so the DOM order stays
   copy-then-photo on every row — which is the order a screen reader and a
   crawler should get regardless of which side the picture lands on. */
.svc2-row--flip .svc2-row-copy { grid-column: 2; grid-row: 1; }
.svc2-row--flip .svc2-row-fig  { grid-column: 1; grid-row: 1; }

.svc2-row-copy { max-width: 60ch; }
.svc2-row-icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  transition: transform var(--t-2) var(--ease);
}
.svc2-row-icon svg { width: 24px; height: 24px; }
.svc2-row-h {
  margin-top: var(--sp-3);
  font-size: var(--fs-card-t); font-weight: 700;
  letter-spacing: var(--track-display); line-height: 1.2;
}
.svc2-row-h + .svc2-prose { margin-top: var(--sp-3); }
/* In the note panel the heading is the first thing in its column, sitting
   beside the icon rather than under it, so it starts flush. */
.svc2-note-h { margin-top: 0; }

.svc2-row-fig {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.svc2-row-fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .svc2-row-fig:hover img { transform: scale(1.05); }
  .svc2-row:hover .svc2-row-icon { transform: scale(1.06) rotate(-4deg); }
}

/* -------------------------------------------------------------------------
   CARDS — for the pages whose source copy really is a list of named
   things (cosmetic dentistry's four treatments, gum disease's two stages,
   the office's three admin services). The <h3> in each card is the term
   the source itself uses, which is the whole reason these are cards and
   not prose: the structure was already in the words.
   ------------------------------------------------------------------------- */
.svc2-cards.fold { padding-block: calc(var(--fold) / 1.4); }

.svc2-cards-head { max-width: var(--measure); }
.svc2-cards-head .eyebrow + h2 { margin-top: var(--sp-2); }
.svc2-cards-head .svc2-prose { margin-top: var(--sp-3); }

/* Head beside a photograph, for a cards fold that has a portrait shot to
   place. The grid stays a grid underneath — this only splits the heading
   row, so the cards below still fill the full width. */
.svc2-cards-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  gap: clamp(1.5rem, 3.4vw, 3.4rem);
  align-items: center;
}
.svc2-cards-fig {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.svc2-cards-fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .svc2-cards-fig:hover img { transform: scale(1.05); }
}

.svc2-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: var(--sp-5);
}
.svc2-card {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
@media (hover: hover) {
  .svc2-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 60px -30px rgba(var(--deep-rgb), 0.38),
                inset 0 0 0 var(--hair) var(--rule-quiet);
  }
  .svc2-card:hover .svc2-card-icon { transform: scale(1.08) rotate(-4deg); }
}
.svc2-card-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  flex: none;
  transition: transform var(--t-2) var(--ease);
}
.svc2-card-icon svg { width: 23px; height: 23px; }

/* The numbered variant (office policies' 1/2/3). The source numbers those
   three services and then refers back to "no 3" by number in an earlier
   paragraph, so the numeral is not decoration — dropping it broke a
   cross-reference in the copy. */
.svc2-card-num {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--deep); color: var(--on-deep);
  flex: none;
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--track-tight);
  transition: transform var(--t-2) var(--ease);
}
@media (hover: hover) {
  .svc2-card:hover .svc2-card-num { transform: scale(1.08); }
}
.svc2-card h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: var(--track-tight); line-height: 1.25;
}
.svc2-card p {
  margin-top: 0.6rem;
  font-size: var(--fs-body); line-height: 1.68; color: var(--ink-mid);
}

/* -------------------------------------------------------------------------
   NOTE — a single paragraph the source sets apart from the run of copy
   (the holistic-approach line, the payment-responsibility notice). Same
   surface as a card, full width, no heading, because the source gives it
   none and one is not invented here.
   ------------------------------------------------------------------------- */
/* Only for a note that follows something inside the same section. When it
   is a section of its own (.svc2-note-fold) the section's own padding is
   already the gap, and adding this on top stacked three spacings where one
   was wanted. */
.svc2-note { margin-top: clamp(2rem, 4vw, 3.5rem); }
.svc2-note-fold .svc2-note { margin-top: 0; }
/* A single paragraph on a full-width panel runs to about 120 characters at
   --page, roughly double a comfortable measure. The panel stays full
   width; the line length inside it does not. */
.svc2-note-panel .svc2-prose { max-width: 78ch; }
.svc2-note-panel {
  display: flex; gap: 1.15rem;
  padding: clamp(1.5rem, 2.8vw, 2.3rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 var(--hair) var(--rule),
              0 22px 44px -34px rgba(var(--deep-rgb), 0.25);
}
.svc2-note-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  flex: none;
}
.svc2-note-icon svg { width: 22px; height: 22px; }
.svc2-note-panel .svc2-prose { font-size: var(--fs-body); }

/* -------------------------------------------------------------------------
   CLOSE — every one of these pages ends on an invitation to book. That
   paragraph used to be the tail of a tab panel, where it read as a
   footnote to whichever sub-topic happened to be last. Given its own
   band, with the action it is asking for sitting next to it, it does the
   job the words were written to do.
   ------------------------------------------------------------------------- */
.svc2-note-fold.fold { padding-block: calc(var(--fold) / 2.6); }

.svc2-close.fold { padding-block: calc(var(--fold) / 1.6); }
.svc2-close-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 3.4vw, 3rem);
  border-radius: var(--r-md);
  background: var(--surface-quiet);
  box-shadow: inset 0 0 0 var(--hair) var(--rule-quiet);
}
.svc2-close-panel .svc2-prose { max-width: 74ch; }
.svc2-close-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* .cta carries no padding of its own — it inherits its top space from
   whatever precedes it, exactly as .svc1-cta already documents. The close
   band above runs at reduced padding, so give it back here. */
.svc2-cta { padding-top: var(--sp-5); }

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .svc2-split { grid-template-columns: minmax(0, 1fr); }
  .svc2-split-head { position: static; }

  .svc2-row { grid-template-columns: minmax(0, 1fr); }
  /* Photo first on a narrow screen, on both row directions — the flip is a
     desktop-only rhythm and honouring it here would leave alternate rows
     leading with a wall of text. */
  .svc2-row-fig { order: -1; }
  .svc2-row--flip .svc2-row-copy,
  .svc2-row--flip .svc2-row-fig { grid-column: 1; grid-row: auto; }

  .svc2-cards-split { grid-template-columns: minmax(0, 1fr); }
  .svc2-cards-fig { order: -1; }

  .svc2-close-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .svc2-row-fig { aspect-ratio: 4 / 3; }
  .svc2-note-panel { flex-direction: column; }
  .svc2-cta { padding-top: var(--sp-4); }
}