﻿/* Scoped to the service pages and their forms; the shared shell owns navigation and footer. */
:is(.smiths-services, .smiths-service-form) { --bg:#25231e; --surface:#2e2b26; --cream:#f7f4ee; --ink-soft:#d4cdc2; --crema:#c08a3e; --font-body:'Inter',sans-serif; --font-heading:'Fraunces',serif; font-family:var(--font-body); color:var(--cream); background:var(--bg); margin:0; }
.smiths-services *, .smiths-services *::before, .smiths-services *::after { box-sizing:border-box; }
.smiths-services .bg-section { position:fixed; inset:0; z-index:-1; pointer-events:none; }
.smiths-services .bg-base { position:absolute; inset:0; background:url('../heropg/bg3.webp') center / cover; }
.smiths-services .spotlight { position:absolute; inset:0; background:url('../heropg/bg1.webp') center / cover; }
.smiths-services #services-main { margin-top:0; padding-top:160px; }
.smiths-services .svc-wrap { width:min(1200px,90%); margin-inline:auto; }
.smiths-services :where(main) :is(h1,h2,h3,p,figure) { margin:0; }
.smiths-services :where(main) :is(h1,h2,h3) { font-family:'Fraunces',serif; font-weight:500; text-wrap:balance; letter-spacing:-.025em; }
.smiths-services :where(main) h1 { max-width:20ch; font-size:clamp(38px,4.4vw,62px); line-height:1.1; }
.smiths-services h1.svc-services-title { font-family:'Tempting',cursive; font-weight:400; letter-spacing:normal; }
.smiths-services h3.svc-services-subtitle { color:#dfbd8b; margin-top:20px; max-width:38ch; font-family:'Fraunces',serif; font-size:clamp(23px,2.6vw,34px); line-height:1.25; }
.smiths-services :where(main) h2 { font-size:clamp(30px,3.3vw,44px); line-height:1.15; margin-bottom:28px; }
.smiths-services :where(main) h3 { font-size:25px; line-height:1.25; }
.smiths-services main p:not(.svc-label) { color:var(--ink-soft); font-size:15px; line-height:1.8; max-width:68ch; }
.smiths-services .svc-label { margin:0 0 18px; font-size:11px; font-weight:600; color:#d5a461; letter-spacing:.18em; text-transform:uppercase; line-height:1.5; }
.smiths-services .svc-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:center; padding-bottom:80px; }
.smiths-services .svc-hero:not(:has(.svc-image)) { display:block; }
.smiths-services .svc-hero p.svc-intro { margin-top:26px; max-width:58ch; font-size:16px; }
.smiths-services .svc-image { border:1px solid rgba(247,244,238,.2); border-radius:20px; padding:10px; background:linear-gradient(135deg,rgba(247,244,238,.09),rgba(247,244,238,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.15); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.smiths-services .svc-image img { display:block; width:100%; height:auto; border-radius:12px; }
.smiths-services .svc-hero .svc-image img { aspect-ratio:4/3; object-fit:cover; object-position:50% 50%; }
.smiths-services .svc-hero .svc-image-training img { object-position:65% 50%; }
.smiths-services .svc-hero .svc-image-rental img { object-position:50% 62%; }
.smiths-services figcaption { padding:14px 6px 4px; font-size:12px; color:var(--ink-soft); line-height:1.6; }
.smiths-services .svc-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.smiths-services .svc-button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:48px; padding:14px 22px; border:1px solid rgba(247,244,238,.25); border-radius:999px; color:var(--cream); font-size:13px; font-weight:600; text-decoration:none; }
.smiths-services .svc-primary { background:var(--crema); color:#1a1815; border-color:var(--crema); }
.smiths-services .svc-button:hover { border-color:#dfbd8b; }
.smiths-services .svc-primary:hover { background:#d5a461; }
.smiths-services .svc-block { border-top:1px solid rgba(247,244,238,.13); padding-block:clamp(44px,6vw,80px); }
.smiths-services .svc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.smiths-services .svc-grid-four, .smiths-services .svc-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.smiths-services .svc-card { display:flex; flex-direction:column; padding:28px; min-width:0; border:1px solid rgba(247,244,238,.16); border-radius:18px; background:linear-gradient(145deg,rgba(247,244,238,.065),rgba(247,244,238,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.09); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.smiths-services .svc-card p:not(.svc-label) { margin-block:18px; }
.smiths-services .svc-card .svc-subtitle { color:#dfbd8b; }
.smiths-services main:has(.svc-image-rental) .svc-card > h3 { color:#dfbd8b; }
.smiths-services .svc-link { display:inline-flex; align-items:center; align-self:flex-start; min-height:44px; margin-top:auto; color:var(--cream); font-size:13px; line-height:1.5; text-underline-offset:5px; }
.smiths-services .svc-link:hover { color:#dfbd8b; }
.smiths-services .svc-note { margin-block:0 28px; }
.smiths-services main p.svc-note { max-width:none; }
.smiths-services .svc-grid + .svc-note { margin-block:24px 0; }
.smiths-services .svc-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding:0; margin:0; counter-reset:steps; }
.smiths-services .svc-steps li { border-left:2px solid rgba(192,138,62,.45); padding-left:20px; counter-increment:steps; }
.smiths-services .svc-steps li::before { content:'0' counter(steps); display:block; margin-bottom:20px; color:#dfbd8b; font-size:12px; }
.smiths-services .svc-steps h3 { font-size:23px; }
.smiths-services .svc-steps p { margin-top:14px; }
.smiths-services .svc-periods { display:flex; gap:18px; list-style:none; padding:0; margin:0 0 24px; }
.smiths-services .svc-periods a { display:block; padding:20px 28px; border:1px solid rgba(247,244,238,.2); border-radius:12px; text-decoration:none; }
@font-face {
  font-family:'Switzer-Semibold';
  src:url('../fonts/WEB/Switzer-Semibold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
.smiths-services .svc-rental-period { border-top:0; }
.smiths-services .svc-period-panel {
  padding:clamp(24px,4vw,44px);
  border:1px solid rgba(223,189,139,.3);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(247,244,238,.12),rgba(247,244,238,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.04),0 16px 40px rgba(0,0,0,.15);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  font-family:'Switzer-Semibold',sans-serif;
  font-weight:600;
}
.smiths-services .svc-period-panel h2 { color:#dfbd8b; font-family:inherit; font-weight:600; }
.smiths-services .svc-period-panel .svc-periods { flex-wrap:wrap; }
.smiths-services .svc-period-panel .svc-periods a {
  color:var(--cream);
  font-weight:600;
  border-color:rgba(247,244,238,.32);
  background:linear-gradient(135deg,rgba(247,244,238,.18),rgba(247,244,238,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.12);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.smiths-services .svc-period-panel .svc-periods a:is(:hover,:focus-visible) {
  color:#dfbd8b;
  border-color:#dfbd8b;
  background:linear-gradient(135deg,rgba(223,189,139,.28),rgba(247,244,238,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 28px rgba(0,0,0,.2);
}
.smiths-services .svc-period-panel .svc-periods a:active {
  background:rgba(223,189,139,.3);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.16);
}
.smiths-services .svc-course dl { margin:24px 0 0; }
.smiths-services .svc-course dl div + div { margin-top:16px; }
.smiths-services dt { color:#dfbd8b; font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.smiths-services dd { margin:0; font-size:14px; line-height:1.7; }
.smiths-services .svc-course-actions { display:flex; flex-direction:column; margin-top:auto; gap:6px; }
.smiths-services .svc-curricula details { border:1px solid rgba(247,244,238,.18); background:rgba(46,43,38,.55); border-radius:14px; margin-bottom:14px; }
.smiths-services summary { padding:22px; cursor:pointer; font-size:18px; font-family:'Fraunces',serif; }
.smiths-services details[open] summary { border-bottom:1px solid rgba(247,244,238,.13); }
.smiths-services .svc-curriculum-body { padding:24px; }
/* Native disclosure markers cannot rotate smoothly; keep the triangle as an animatable equivalent. */
.smiths-services .svc-curricula details[data-curriculum-motion] > summary { list-style:none; }
.smiths-services .svc-curricula details[data-curriculum-motion] > summary::-webkit-details-marker { display:none; }
.smiths-services .svc-curricula details[data-curriculum-motion] > summary::before {
  content:''; display:inline-block; width:0; height:0; margin-right:10px; vertical-align:middle;
  border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor;
  transform:rotate(0); transform-origin:35% 50%; transition:transform 300ms var(--ease-enter);
}
.smiths-services .svc-curricula details[data-curriculum-motion] > summary[aria-expanded="true"]::before { transform:rotate(90deg); }
.smiths-services .svc-curriculum-panel[data-animating] { overflow:hidden; }
@media (prefers-reduced-motion:reduce) {
  .smiths-services .svc-curricula details[data-curriculum-motion] > summary::before { transition:none; }
}
.smiths-services .svc-curriculum-body ul { margin:20px 0 0; padding-left:22px; color:var(--ink-soft); font-size:15px; line-height:1.8; }
.smiths-services main :is(section,details) { scroll-margin-top:110px; }
.smiths-services .svc-skip { position:fixed; z-index:200; top:12px; left:16px; padding:12px 18px; border-radius:8px; background:var(--cream); color:var(--bg); transform:translateY(-160%); }
.smiths-services .svc-skip:focus { transform:none; }
.smiths-services #services-main:focus { outline:none; }
.smiths-services main :is(a,summary):focus-visible { outline:3px solid #dfbd8b; outline-offset:5px; }
/* Existing application structure and cream form surfaces retain their behaviour. */
.smiths-service-form .form-container { width:min(920px,90%); margin:48px auto 72px; padding:0; }
.smiths-service-form .form-page-title { font-family:'Fraunces',serif; font-size:clamp(32px,4vw,48px); line-height:1.2; text-align:left; }
.smiths-service-form .form-page-subtitle { text-align:left; line-height:1.8; color:var(--ink-soft); max-width:none; }
.smiths-service-form .form-card .form-page-subtitle { color:#515151; }
.smiths-service-form .form-card { padding:clamp(24px,4vw,48px); border-radius:20px; }
.smiths-service-form .section-header { text-align:left; }
.smiths-service-form .section-header :is(h2,h3) { margin:0 0 10px; font-family:'Fraunces',serif; font-weight:500; color:#424242; }
.smiths-service-form .section-header h2 { font-size:26px; }
.smiths-service-form .section-header p { font-size:14px; color:#515151; line-height:1.7; }
.smiths-service-form .section-header h3 { font-size:22px; }
.smiths-service-form .course-btn { min-width:0; border:1px solid #b3b3b3; }
.smiths-service-form .course-btn-time { line-height:1.6; }
.smiths-service-form .course-btn-title { overflow-wrap:break-word; }
.smiths-service-form .course-btn-selected { background:#d9bf98; }
.smiths-service-form .course-btn-selected :is(.course-btn-time,.course-btn-title,.course-btn-price,.course-btn-level) { color:#25231e; }
.smiths-service-form #courseSelectionHint { margin:18px 0; line-height:1.7; color:#515151; font-size:14px; }
.smiths-service-form .course-selection-summary { margin-top:24px; padding:20px; border:1px solid #b3b3b3; border-radius:12px; color:#424242; font-size:14px; line-height:1.7; }
.smiths-service-form .course-selection-summary ul { padding-left:20px; }
.smiths-service-form .course-selection-summary output { display:block; margin-top:14px; font-weight:600; }
.smiths-service-form .input-group > label { display:block; }
.smiths-service-form :is(input,select,textarea) { max-width:100%; }
.smiths-service-form .help-selection { border:1px solid #b3b3b3; border-radius:12px; padding:18px; margin:24px 0; color:#424242; line-height:1.7; }
.smiths-service-form .help-selection label { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.smiths-service-form .help-selection input { margin-top:7px; accent-color:#8a5b1f; }
.smiths-service-form fieldset { min-width:0; }
.smiths-service-form fieldset.rental-period { margin:24px 0; padding:0; border:0; }
.smiths-service-form .rental-period legend { margin-bottom:14px; color:#424242; font-size:16px; font-weight:600; }
.smiths-service-form .form-error { color:#8d0000; }
.smiths-service-form .checkbox-label:has(input:focus-visible) { outline:2px solid #8a5b1f; outline-offset:4px; }
.smiths-service-form .quota-success-step:focus { outline:none; }
@media (max-width:1024px) { .smiths-services .svc-grid { gap:14px; } .smiths-services .svc-card { padding:24px; } }
@media (max-width:820px) {
  .smiths-services #services-main { padding-top:120px; }
  .smiths-services .svc-hero { grid-template-columns:1fr; gap:32px; padding-bottom:48px; }
  .smiths-services .svc-hero h1 { max-width:22ch; font-size:clamp(36px,6.5vw,52px); }
  .smiths-services .svc-grid { grid-template-columns:1fr; }
  .smiths-services .svc-grid-four,.smiths-services .svc-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .smiths-service-form .course-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .smiths-services .svc-wrap { width:calc(100% - 40px); }
  .smiths-services .svc-grid,.smiths-services .svc-steps { grid-template-columns:1fr; gap:20px; }
  .smiths-services .svc-periods { flex-direction:column; gap:12px; }
  .smiths-services .svc-actions { flex-direction:column; }
  .smiths-services .svc-card { padding:24px; }
  .smiths-service-form .form-container { width:calc(100% - 32px); margin-block:24px 48px; }
  .smiths-service-form .form-card { padding:24px 18px; }
  .smiths-service-form .checkbox-group { flex-wrap:wrap; gap:18px; }
}

.smiths-service-form .progress-item { align-items:center; min-width:0; }
.smiths-service-form .progress-bar { align-items:flex-start; }
.smiths-service-form .progress-item:not(:last-child)::after {
  display:block; left:calc(50% + 24px); width:calc(100% - 48px); filter:none;
  transition:background-color 240ms var(--ease-enter), opacity 240ms var(--ease-enter);
}
.smiths-service-form .progress-item.is-complete:not(:last-child)::after { background:var(--crema); opacity:1; }
.smiths-service-form .progress-label { white-space:normal; text-align:center; letter-spacing:.03em; line-height:1.5; }
/* Cream form surfaces keep labels, hints and selection states legible. */
.smiths-service-form .form-card { background:#f7f4ee; }
.smiths-service-form .form-section { padding:28px; background:#f0ece6; }
.smiths-service-form .form-card p:not(.form-error) { color:#515151; font-size:14px; line-height:1.7; }
.smiths-service-form .course-section-header h2 { font-family:'Fraunces',serif; color:#424242; font-size:26px; line-height:1.25; margin:0 0 10px; }
.smiths-service-form .course-btn-time { color:#7b541f; }
.smiths-service-form .course-btn-selected .course-btn-time { color:#25231e; }
.smiths-service-form #equipmentModelHint { margin:10px 0 0; }
@media (max-width:560px) {
  .smiths-service-form .form-section { padding:24px 16px; }
  .smiths-service-form .course-section-header h2 { font-size:24px; }
}
