/* ============================================================================
   Service category pages (/services/photography, /services/tapes, ...) on the
   clean foundation, rendered by static/services/category.blade.php from
   config/service_categories.php. One sheet for every category; the per-page
   differences (banners, hero colour, tile count) arrive as custom properties
   and a data attribute from the view. Scoped to .svc.
   ========================================================================== */

.svc {
    --svc-ink: var(--sc-navy, #052f56);
    --svc-red: var(--sc-red, #c61c40);
    --svc-cyan: var(--sc-light-blue, #1ab8e9);
    --svc-pale: #eef7fb;           /* pale-blue section canvas */
    --svc-cream: var(--sc-cream, #efebe3);
    --svc-tile: #f0ebe4;           /* format tile squares */
    --svc-text: #2b3640;
    --svc-radius: 24px;
    margin: 0;
    background: #fff;
    color: var(--svc-text);
    font-family: var(--sc-font, 'Circular Std', system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
}
.svc *, .svc *::before, .svc *::after { box-sizing: border-box; }

.svc-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.svc-center { text-align: center; }

/* Footer: match the inner-page footer exactly (1370px, 12px gutter). */
.svc .sc-footer { margin-top: 0; }
.svc .sc-footer .container { width: 100%; max-width: 1370px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }

/* ------------------------------- type ---------------------------------- */
.svc-h2 {
    font-family: var(--sc-font-heading, 'Lora', serif); font-weight: 500;
    font-size: clamp(32px, 3.4vw, 46px); line-height: 1.15; color: var(--svc-ink);
    margin: 0 0 40px;
}
.svc-h2-center { text-align: center; }
.svc-sub { font-size: 18px; line-height: 1.6; color: var(--svc-text); margin: -18px auto 48px; max-width: 900px; }
/* Logo in the Why Choose heading: the file is trimmed to the letters, so its
   height is the logo's cap height; .79em matches the board's logo-to-heading proportion and the
   image's bottom edge sits on the text baseline, as on the board. */
.svc-brand-logo { display: inline-block; height: .79em; width: auto; vertical-align: baseline; margin-left: .12em; }

/* ------------------------------ buttons -------------------------------- */
.svc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 34px; border-radius: 6px;
    font-size: 18px; font-weight: var(--sc-weight-semi, 600); line-height: 1;   /* primary CTA: 18/600 per the typography plan */
    text-decoration: none; border: 2px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.svc-btn-primary { background: var(--svc-red); color: #fff; box-shadow: 0 10px 24px rgba(198, 28, 64, .28); }
.svc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(198, 28, 64, .36); }
.svc-btn-primary:hover, .svc-btn-primary:focus, .svc-btn-primary:active { color: #fff; }

/* ----------------------------- review strip ---------------------------- */
.svc-reviewbar { background: var(--svc-ink); color: #fff; }
.svc-reviewbar-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
    min-height: 56px; padding-top: 10px; padding-bottom: 10px; font-size: 18px; text-align: center;
}
.svc-reviewbar img { display: block; width: 102px; height: 17px; }
.svc-reviewbar-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .8; }

/* -------------------------------- hero --------------------------------- */
/* The banner is the section's background: objects on the left, plain cream
   fading out on the right, with the title as live text over the plain side. */
.svc-hero {
    background: var(--svc-hero-bg) var(--svc-hero-desk) left center / cover no-repeat;
    min-height: 400px;
}
/* Full-width row, not the 1200px wrap: the text starts at 57% of the viewport
   (clear of the banner's objects at any width) and its right edge lines up
   with the wrap's right gutter. With the wrap's cap the two percentages
   fought and the text column collapsed to ~90px on wide screens. */
.svc-hero-inner {
    display: flex; flex-direction: column; justify-content: center; min-height: 400px;
    max-width: none; padding-left: var(--svc-hero-text-start, 57%); padding-right: max(24px, calc((100% - 1200px) / 2));
}
.svc-hero-title {
    font-family: var(--sc-font-heading, 'Lora', serif); font-weight: 500;
    font-size: clamp(40px, 3.7vw, 54px); line-height: 1.1; color: var(--svc-ink); margin: 0 0 18px;
}
.svc-hero-sub { font-size: 18px; line-height: 1.55; color: var(--svc-text); margin: 0; max-width: 460px; }

/* ------------------------------ formats -------------------------------- */
.svc-formats { background: var(--svc-pale); padding: 48px 0 56px; }
.svc-format-grid {
    list-style: none; margin: 0 0 36px; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 36px;
}
.svc-format-grid li { flex: 0 0 calc((100% - 4 * 36px) / 5); min-width: 0; }   /* min-width so a long label cannot widen its tile */
.svc-format-grid[data-cols="4"] { gap: 44px; }
.svc-format-grid[data-cols="4"] li { flex-basis: calc((100% - 3 * 44px) / 4); max-width: 260px; }
.svc-format-grid[data-cols="3"] { gap: 44px; }
.svc-format-grid[data-cols="3"] li { flex-basis: calc((100% - 2 * 44px) / 3); max-width: 280px; }
.svc-format { display: block; text-decoration: none; text-align: center; }
.svc-format-tile {
    display: block; overflow: hidden;
    aspect-ratio: 1 / 1; border-radius: var(--svc-radius); background: var(--svc-tile);
    transition: transform .18s ease, box-shadow .18s ease;
}
/* The supplied artwork is a complete cream tile with the object small in the
   middle; zooming it inside the clipped container fills the tile as drawn. */
.svc-format-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.3); }
.svc-format:hover .svc-format-tile { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(5, 47, 86, .12); }
.svc-format-label {
    display: block; margin-top: 22px;
    font-family: var(--sc-font-heading, 'Lora', serif); font-weight: 500; font-size: var(--sc-h3); color: var(--svc-ink); white-space: nowrap;
}
.svc-format:hover .svc-format-label { color: var(--svc-cyan); }

/* ---------------------------- how it works ----------------------------- */
.svc-how { background: #fff; padding: 88px 0 72px; }
.svc-how .svc-h2 { margin-bottom: 56px; }
.svc-step {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center;
    padding: 24px 0; margin-bottom: 20px;
}
.svc-step.is-panel {
    background: var(--svc-pale); border-radius: var(--svc-radius); padding: 44px 40px;
    grid-template-columns: .9fr 1.1fr;
}
.svc-step.is-panel .svc-step-img { order: -1; }
.svc-step-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.svc-step-num { font-family: var(--sc-font, 'Circular Std', sans-serif); font-weight: 700; font-size: 76px; line-height: .82; color: var(--svc-ink); }   /* Circular, not Lora (designer, 2026-10-14) */
.svc-step-title { font-family: var(--sc-font-heading, 'Lora', serif); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--svc-ink); margin: 0; max-width: 200px; }
.svc-step-copy p { font-size: var(--sc-body); line-height: 1.55; margin: 0; max-width: 500px; }
.svc-step-img { display: block; width: 100%; height: auto; border-radius: 20px; }

/* ------------------------------ why choose ----------------------------- */
.svc-why { background: var(--svc-cream); padding: 80px 0 88px; }
.svc-why .svc-h2 { margin-bottom: 56px; }
.svc-why-carousel { position: relative; padding: 0 70px; }
.svc-why-viewport { overflow: hidden; }
.svc-why-track {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 40px;
    transition: transform .45s ease; will-change: transform;
}
.svc-why-item { flex: 0 0 calc((100% - 80px) / 3); text-align: center; }
@media (prefers-reduced-motion: reduce) { .svc-why-track { transition: none; } }
/* The supplied icon artwork includes its pale circle, so it is the circle. */
.svc-why-icon { display: block; width: 144px; height: 144px; margin: 0 auto 26px; }
.svc-why-icon img { width: 144px; height: 144px; display: block; }
.svc-why-item h3 { font-family: var(--sc-font-heading, 'Lora', serif); font-weight: 500; font-size: 26px; color: var(--svc-ink); margin: 0 0 14px; }
.svc-why-item p { font-size: var(--sc-body); line-height: 1.5; margin: 0 auto; max-width: 300px; }
.svc-why-nav {
    position: absolute; top: 72px; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0;
    background: var(--svc-ink); cursor: pointer; transform: translateY(-50%);
}
.svc-why-nav::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.svc-why-prev { left: 0; } .svc-why-prev::before { transform: translate(-30%, -50%) rotate(135deg); }
.svc-why-next { right: 0; } .svc-why-next::before { transform: translate(-70%, -50%) rotate(-45deg); }
.svc-why-nav:hover { background: var(--svc-cyan); }

/* ------------------------------- safety -------------------------------- */
.svc-safety { background: var(--svc-pale); padding: 80px 0 88px; }
.svc-safety-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1180px; margin: 0 auto; }
.svc-safety-img { display: block; width: 100%; height: auto; border-radius: var(--svc-radius); }
.svc-safety-copy p { font-size: var(--sc-body); line-height: 1.55; margin: 0 0 26px; }
.svc-safety-copy ul { list-style: disc; margin: 0; padding-left: 20px; }
.svc-safety-copy li { font-size: var(--sc-body); line-height: 1.5; margin-bottom: 10px; }

/* ------------------------------- receive ------------------------------- */
.svc-receive { background: #fff; padding: 88px 0; }
.svc-receive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 64px; }
.svc-receive-item { display: block; text-align: center; text-decoration: none; color: inherit; }
.svc-receive-icon { display: flex; align-items: center; justify-content: center; height: 72px; margin-bottom: 20px; color: var(--svc-ink); }
.svc-receive-icon img { height: 52px; width: auto; display: block; }
.svc-receive-item h3 { font-family: var(--sc-font-heading, 'Lora', serif); font-weight: 500; font-size: 26px; color: var(--svc-ink); margin: 0 0 14px; }
.svc-receive-item p { font-size: var(--sc-body); line-height: 1.5; margin: 0 auto; max-width: 320px; color: var(--svc-text); }
a.svc-receive-item:hover h3 { color: var(--svc-cyan); }

.svc-contact {
    background: var(--svc-pale); border-radius: 12px; padding: 30px 28px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: center; max-width: 1040px; margin: 0 auto;
}
.svc-contact h3 { font-family: var(--sc-font-heading, 'Lora', serif); font-weight: 500; font-size: 20px; color: var(--svc-ink); margin: 0 0 8px; }
.svc-contact p { margin: 0; font-size: var(--sc-body); color: var(--svc-text); }
.svc-contact a { color: var(--svc-text); text-decoration: underline; text-underline-offset: 4px; }
.svc-contact a:hover { color: var(--svc-cyan); }

/* ------------------------------ responsive ----------------------------- */
@media (max-width: 1100px) {
    .svc-format-grid, .svc-format-grid[data-cols="4"] { gap: 28px; }
    .svc-format-grid li { flex-basis: calc((100% - 4 * 28px) / 5); }
    .svc-format-grid[data-cols="4"] li { flex-basis: calc((100% - 3 * 28px) / 4); }
    .svc-format-grid[data-cols="3"] li { flex-basis: calc((100% - 2 * 28px) / 3); }
    .svc-format-label { font-size: 20px; }
}
@media (max-width: 980px) {
    .svc-how, .svc-why, .svc-safety, .svc-receive { padding: 64px 0; }
    .svc-hero-inner { padding-left: 50%; }   /* tablets: objects scale down with the banner */
    .svc-format-grid li, .svc-format-grid[data-cols="4"] li, .svc-format-grid[data-cols="3"] li { flex-basis: calc((100% - 2 * 28px) / 3); max-width: none; }
    .svc-step, .svc-step.is-panel { grid-template-columns: 1fr; gap: 28px; }
    .svc-step.is-panel .svc-step-img { order: 0; }
    .svc-why-item { flex-basis: calc((100% - 40px) / 2); }
    .svc-safety-inner { grid-template-columns: 1fr; gap: 32px; }
    .svc-receive-grid { grid-template-columns: 1fr; gap: 44px; }
    .svc-contact { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    /* Portrait banner: objects sit in its lower two-thirds, the text in the
       plain space above them. */
    .svc-hero { background-image: var(--svc-hero-mob); background-position: center bottom; min-height: 0; }
    .svc-hero-inner { min-height: 145vw; justify-content: flex-start; padding: 44px 18px 0; text-align: center; align-items: center; }
    .svc-hero-sub { max-width: 420px; }
}
@media (max-width: 620px) {
    .svc-wrap { padding: 0 18px; }
    /* .svc-hero-inner is also a .svc-wrap; restate its top padding after the
       rule above so the title keeps clear of the reviews bar. */
    .svc-hero .svc-hero-inner { padding: 44px 18px 0; }
    .svc-how, .svc-why, .svc-safety, .svc-receive { padding: 52px 0; }
    .svc-reviewbar-inner { font-size: var(--sc-small); }
    .svc-format-grid, .svc-format-grid[data-cols="4"], .svc-format-grid[data-cols="3"] { gap: 18px; }
    .svc-format-grid li, .svc-format-grid[data-cols="4"] li, .svc-format-grid[data-cols="3"] li { flex-basis: calc((100% - 18px) / 2); }
    .svc-format-label { white-space: normal; overflow-wrap: anywhere; }   /* "16mm/Super 16" has no space to break at on the narrowest phones */
    .svc-format-label { font-size: 18px; margin-top: 14px; }
    .svc-step.is-panel { padding: 24px 18px; }
    .svc-step-num { font-size: 60px; }
    .svc-step-title { font-size: 22px; }
    .svc-why-carousel { padding: 0 44px; }
    .svc-why-item { flex-basis: 100%; }
    .svc-why-nav { width: 32px; height: 32px; }
    .svc-btn { width: 100%; }
}