/* Freehand service pages only. Reuse the approved process-page visual system. */
.freehand-page {
  --fh-shell: #1a1917;
  --fh-dark: #020504;
  --fh-ivory: #efe8da;
  --fh-bright: #f06b27;
  color-scheme: light;
  font-size: 16px;
  -webkit-tap-highlight-color: #b94a2033;
}
.freehand-page .document { width: min(1120px, calc(100% - 40px)); }
.freehand-page .doc-inner { padding: clamp(28px, 5.5vw, 64px); }
.freehand-page main { scroll-margin-top: 16px; }
.freehand-page [id] { scroll-margin-top: 24px; }
.freehand-page h1,
.freehand-page h2,
.freehand-page h3 { text-wrap: balance; }
.freehand-page h1 {
  margin: 0;
  font: 700 clamp(38px, 4.5vw, 58px)/1.05 Georgia, serif;
  letter-spacing: -.035em;
}
.freehand-page h2 { margin: 0 0 22px; font: 700 clamp(27px, 3vw, 37px)/1.14 Georgia, serif; letter-spacing: -.025em; }
.freehand-page h3 { margin: 0 0 12px; font: 700 21px/1.25 Georgia, serif; }
.freehand-page p { margin: 0 0 18px; }
.freehand-page .doc-kicker { margin: 0 0 14px; font-size: 12px; }
.freehand-page a,
.freehand-page summary { touch-action: manipulation; }
.freehand-page a:focus-visible,
.freehand-page summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.freehand-page .skip-link { color: #fff; }
.freehand-page .process-top { padding: 10px 0; }
.freehand-page .process-top a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.freehand-page .process-top .process-lang { min-width: 44px; }
.freehand-page .process-top a:focus-visible { outline-color: var(--fh-bright); }
.freehand-page .process-top nav a { font-size: 11px; }

.freehand-page .fh-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 48px; padding-bottom: 48px; }
.freehand-page .fh-hero-copy { min-width: 0; }
.freehand-page .fh-statement { margin: 24px 0 18px; color: var(--accent); font: 400 clamp(23px, 2.2vw, 29px)/1.3 Georgia, serif; }
.freehand-page .fh-lead { max-width: 50ch; color: var(--soft); }
.freehand-page .fh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 24px; }
.freehand-page .fh-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: 12px 20px; background: var(--text); border: 1px solid var(--text); color: var(--paper); font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; transition: background-color .18s, border-color .18s; }
.freehand-page .fh-button:hover { background: var(--accent); border-color: var(--accent); }
.freehand-page .fh-text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; transition: color .18s; }
.freehand-page .fh-text-link:hover { color: var(--accent); }
.freehand-page .fh-caption { margin: 14px 0 0; color: var(--soft); font-size: 12px; line-height: 1.6; }
.freehand-page figure { min-width: 0; margin: 0; }
.freehand-page .fh-hero-work img { display: block; width: 100%; height: auto; background: var(--fh-dark); }
.freehand-page figcaption { margin-top: 12px; color: var(--soft); font-size: 12px; line-height: 1.6; }

.freehand-page .fh-section { padding: 48px 0; border-top: 1px solid var(--rule); }
.freehand-page .fh-section p { color: var(--soft); }
.freehand-page .fh-section .doc-kicker { color: var(--accent); }
.freehand-page .fh-intro,
.freehand-page .fh-comparison,
.freehand-page .fh-enquiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; }
.freehand-page .fh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: freehand-step; }
.freehand-page .fh-steps li { counter-increment: freehand-step; }
.freehand-page .fh-steps li::before { content: counter(freehand-step, decimal-leading-zero); display: block; margin-bottom: 20px; color: var(--accent); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.freehand-page .fh-steps p { margin-bottom: 0; font-size: 15px; }
.freehand-page .fh-next { margin: 24px 0 0; }
.freehand-page .fh-section-lead { max-width: 68ch; }
.freehand-page .fh-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 28px 0 20px; }
.freehand-page .fh-gallery img { display: block; width: 100%; height: 380px; object-fit: contain; background: var(--fh-dark); }
.freehand-page .fh-brief { padding: 26px; background: var(--paper-2); }
.freehand-page .fh-brief ul { margin: 0; padding-left: 20px; color: var(--soft); }
.freehand-page .fh-brief li + li { margin-top: 10px; }
.freehand-page .fh-brief .fh-actions { align-items: flex-start; flex-direction: column; }
.freehand-page .fh-faq { max-width: none; margin: 0; padding: 48px 0; border-top: 1px solid var(--rule); }
.freehand-page .fh-faq h2 { font-family: Georgia, serif; font-size: clamp(27px, 3vw, 37px); line-height: 1.14; }
.freehand-page .fh-faq summary { padding: 18px 0; }
.freehand-page .fh-faq summary:hover { color: var(--accent); }
.freehand-page .fh-faq p { max-width: 74ch; color: var(--soft); }
.freehand-page .fh-faq a { text-underline-offset: 4px; }
.freehand-page .fh-faq a:hover { color: var(--accent); }
.freehand-page .fh-footer .contact-line { display: flex; gap: 8px 24px; }
.freehand-page .fh-footer .contact-line a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.freehand-page .fh-footer .contact-line a:hover { color: var(--accent); }
/* The parent's generated dark location footer keeps its own contrast. */
.freehand-page .safo-location a:focus-visible { outline-color: #ffad78; }

@media (max-width: 900px) {
  .freehand-page .fh-hero { gap: 28px; }
  .freehand-page .fh-intro,
  .freehand-page .fh-comparison,
  .freehand-page .fh-enquiry { gap: 28px; }
  .freehand-page .fh-gallery img { height: 310px; }
}
@media (max-width: 700px) {
  .freehand-page .document { width: 100%; margin: 0; box-shadow: none; }
  .freehand-page .doc-inner { padding: 28px max(22px, env(safe-area-inset-right)) 40px max(22px, env(safe-area-inset-left)); }
  .freehand-page .fh-hero { grid-template-columns: 1fr; gap: 28px; padding-bottom: 34px; }
  .freehand-page h1 { max-width: 13ch; font-size: clamp(36px, 8vw, 48px); }
  .freehand-page .fh-statement { margin-top: 18px; }
  .freehand-page .fh-hero .fh-actions { margin-top: 20px; gap: 6px; flex-direction: column; align-items: flex-start; }
  .freehand-page .fh-hero .fh-button { width: 100%; }
  .freehand-page .fh-hero-work { max-width: 400px; width: 100%; margin: 0 auto; }
  .freehand-page .fh-hero-work img { max-height: 420px; object-fit: contain; }
  .freehand-page .fh-section,
  .freehand-page .fh-faq { padding: 34px 0; }
  .freehand-page .fh-intro,
  .freehand-page .fh-comparison,
  .freehand-page .fh-enquiry { grid-template-columns: 1fr; gap: 6px; }
  .freehand-page .fh-steps { grid-template-columns: 1fr; gap: 26px; }
  .freehand-page .fh-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; }
  .freehand-page .fh-steps li::before { grid-row: 1 / 3; margin-top: 2px; }
  .freehand-page .fh-steps h3,
  .freehand-page .fh-steps p { grid-column: 2; }
  .freehand-page .fh-gallery { grid-template-columns: 1fr; gap: 28px; }
  .freehand-page .fh-gallery img { height: auto; max-height: 420px; }
  .freehand-page .fh-brief { padding: 22px; }
  .freehand-page .fh-brief .fh-button { width: 100%; }
}
@media (max-width: 560px) {
  .freehand-page .process-top-inner { width: calc(100% - 28px); gap: 10px; }
  .freehand-page .process-top nav { gap: 8px; }
  .freehand-page .process-top nav a { min-width: 44px; font-size: 10px; }
  .freehand-page .process-top nav a:nth-child(2) { display: none; }
  .freehand-page .process-brand { font-size: 11px; letter-spacing: .07em; }
}
@media (prefers-reduced-motion: reduce) {
  .freehand-page { scroll-behavior: auto; }
  .freehand-page .fh-button,
  .freehand-page .fh-text-link,
  .freehand-page .process-top nav a { transition: none; }
}