/* 04 OUR SERVICES — after film-flut.de's "Unsere Leistungen", set royal.
   Same structure as the reference: intro row (heading + lead left, four
   proof points right), eight full-bleed photo cards on a 12-column grid
   (the lead service 8 wide beside a 4, then two rows of three), and a
   closing strip.

   The register is the dark, warm end of the hero film rather than the
   page's daylight sections: a near-black ink ground, ivory type, and one
   metal — antique gold, taken from the brass lamps and diyas that light
   the hero's product shot, so it belongs to Easton's own footage rather
   than being a generic "luxury" gold. Serif display (Playfair, already
   loaded for the page) for the heading and card titles; everything else
   stays in the page's own sans.

   Every photo gets one shared grade — slightly desaturated, warmed,
   deepened — so frames from different shoots read as one campaign. On
   hover the grade lifts, the photo eases in, and a hairline gold frame
   draws in around the card: the one motion, gated to fine pointers. */

.svcs {
  --gold: #C9A45C;
  --gold-soft: rgb(201 164 92 / .38);
  --ivory: #F3EDE1;
  --night: #07130F;
  position: relative;
  padding: clamp(80px, 13svh, 140px) var(--pad);
  color: var(--ivory);
  background:
    radial-gradient(60% 50% at 85% 0%, rgb(201 164 92 / .10) 0%, transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgb(23 182 155 / .07) 0%, transparent 70%),
    var(--night);
}
.svcs__inner { max-width: min(1260px, 100%); margin-inline: auto; }

.svcs .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- intro ---------- */
.svcs__intro {
  display: grid; gap: clamp(28px, 4vw, 72px);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 900px) {
  .svcs__intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.svcs__head {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.02;
  letter-spacing: -.01em; color: var(--ivory);
}
/* A short gold rule under the heading — the section's signature line. */
.svcs__head::after {
  content: ""; display: block;
  width: 64px; height: 1px; margin-top: clamp(16px, 2.2svh, 24px);
  background: var(--gold);
}
.svcs__lead {
  margin-top: clamp(16px, 2.2svh, 24px);
  max-width: 54ch;
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65;
  color: rgb(243 237 225 / .7);
}
.svcs__proof {
  list-style: none; padding: 0;
  display: grid;
  border-top: 1px solid var(--gold-soft);
}
.svcs__proof li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgb(201 164 92 / .16);
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.4;
  color: var(--ivory);
}
.svcs__proof svg { flex: none; width: 16px; height: 16px; color: var(--gold); }

/* ---------- the cards ---------- */
.svcs__grid {
  list-style: none;
  padding: 0;   /* no default <ul> indent: the grid spans the same width as the heading above */
  margin-top: clamp(44px, 7svh, 72px);
  display: grid; gap: clamp(10px, 1.1vw, 16px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(250px, 23vw, 320px);
}
.svc-card { grid-column: span 4; }
.svc-card--wide { grid-column: span 8; }
/* The first row runs taller than the rest, as the reference's opening row
   does: it's the section's headline row. */
@media (min-width: 1000px) {
  .svcs__grid { grid-template-rows: clamp(320px, 30vw, 440px); }
}

/* Rounded rather than cut square: the clapperboard in the band above is
   already 10px, and these were the only hard-edged blocks left on the
   page. 14px is enough to read as softened at card size without turning
   the photographs into pill shapes. */
.svc-card {
  position: relative; overflow: hidden;
  border-radius: 14px;
  background: #0B1A16;
  isolation: isolate;
}
.svc-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.72) sepia(.14) contrast(1.06) brightness(.86);
  transition: filter .7s var(--ease), transform 1.2s var(--ease);
}
/* Ink from the bottom where the words sit, plus a faint warm cast over the
   whole frame — the second half of the shared grade. */
.svc-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgb(7 19 15 / .94) 0%, rgb(7 19 15 / .55) 40%, rgb(7 19 15 / .1) 75%, transparent 100%),
    linear-gradient(135deg, rgb(201 164 92 / .10), rgb(7 19 15 / .18));
}
/* The hairline frame, inset from the edge like a mount around a print.
   Invisible at rest; draws in on hover and on keyboard focus. */
.svc-card::before {
  content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  border: 1px solid var(--gold); border-radius: 6px;
  opacity: 0; transform: scale(1.015);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}

.svc-card__body {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(22px, 2.2vw, 32px);
}
/* Tracked capitals in gold: small print on a film's title card. */
.svc-card__tag {
  display: inline-block;
  font-family: var(--body); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
}
.svc-card h3 {
  margin-top: 8px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.08;
  color: var(--ivory);
  text-shadow: 0 1px 14px rgb(0 0 0 / .4);
}
.svc-card--wide h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.svc-card p {
  margin-top: 8px; max-width: 44ch;
  font-size: clamp(14px, 1vw, 15px); line-height: 1.5;
  color: rgb(243 237 225 / .78);
}
/* The link's own box is small, but its ::after stretches the hit area over
   the whole card, so the card is one click target without nesting a card
   inside an <a>. */
.svc-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; min-height: 24px;
  font-family: var(--body); font-weight: 600; font-size: 13px;
  letter-spacing: .06em;
  color: var(--ivory); text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 3px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.svc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.svc-card__link svg { width: 14px; height: 14px; color: var(--gold); transition: transform .3s var(--ease); }
.svc-card__link:focus-visible { outline: none; }

.svc-card:has(.svc-card__link:focus-visible)::before { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .svc-card:hover img { filter: saturate(.95) sepia(.06) contrast(1.06) brightness(.95); transform: scale(1.05); }
  .svc-card:hover::before { opacity: 1; transform: none; }
  .svc-card:hover .svc-card__link { border-color: var(--gold); color: #fff; }
  .svc-card:hover .svc-card__link svg { transform: translate(2px, -2px); }
}

/* Two across on a tablet (the lead card spanning both), one on a phone. */
@media (max-width: 999px) {
  .svcs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 40vw, 320px); }
  .svc-card, .svc-card--wide { grid-column: span 1; }
  .svc-card--wide { grid-column: span 2; }
  /* One wide card plus seven leaves the last one alone on its row; running
     it full width too bookends the grid instead of leaving a hole. */
  .svcs__grid > :last-child { grid-column: span 2; }
}
@media (max-width: 599px) {
  .svcs__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 250px; }
  .svc-card--wide, .svcs__grid > :last-child { grid-column: span 1; }
}

/* ---------- closing strip ----------
   Inverted against the section: an ivory panel on the dark ground, ink
   type, and the same gold kept as the one accent — a thin rule down its
   leading edge and the button's hover. After eight dark photo cards, the
   one light surface is where the eye lands, which is what a call to
   action is for. */
.svcs__cta {
  position: relative;
  margin-top: clamp(32px, 5svh, 56px);
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px clamp(32px, 4vw, 64px);
  padding: clamp(24px, 2.6vw, 38px) clamp(24px, 3.2vw, 48px);
  border-radius: 14px; overflow: hidden;   /* clips the gold edge bar to the corners */
  background:
    radial-gradient(80% 140% at 100% 0%, rgb(201 164 92 / .16) 0%, transparent 60%),
    var(--ivory);
  color: var(--night);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6);
}
.svcs__cta::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--gold);
}
@media (min-width: 900px) {
  .svcs__cta { grid-template-columns: minmax(0, .62fr) minmax(0, 1.6fr); }
}
.svcs__cta-head {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1.08;
  color: var(--night);
}
/* #5E5647 on ivory: 6.2:1 (measured). */
.svcs__cta-sub {
  margin-top: 8px; max-width: 40ch; line-height: 1.5;
  font-size: clamp(14px, 1.05vw, 16px); color: #5E5647;
}
/* Ink fill, ivory text: 16.2:1. Gold arrives on hover. */
.svcs__cta-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 0 30px; border-radius: 8px;
  background: var(--night); color: var(--ivory);
  font-family: var(--body); font-weight: 700; font-size: 15px;
  letter-spacing: .03em;
  text-decoration: none; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.svcs__cta-btn::after {
  content: ""; width: 18px; height: 1px; background: var(--gold);
  transition: width .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .svcs__cta-btn:hover { background: var(--gold); color: var(--night); transform: translateY(-1px); }
  .svcs__cta-btn:hover::after { width: 26px; background: var(--night); }
}
.svcs__cta-btn:active { background: var(--gold); color: var(--night); transform: none; }
.svcs__cta-btn:focus-visible { outline: 2px solid var(--night); outline-offset: 4px; }

/* ---------- the enquiry form ----------
   Underlined fields rather than boxes: on the ivory panel a row of white
   boxes would read as a generic web form; a ruled line reads as a form
   filled in by hand. The rule darkens and turns bronze on focus. Errors
   are written out under the field and wired with aria-describedby by
   enquiry-form.js, never shown by colour alone. */
.enquiry__alt {
  margin-top: 12px;
  font-size: 14px; color: #5E5647;
}
.enquiry__alt a {
  position: relative;
  color: var(--night); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--gold);
  font-variant-numeric: tabular-nums;
}
/* Compact by layout, not by shrinking type: three fields to a row on a
   desktop (name, email, phone / company, service / message + send), so
   the form is three short rows beside the intro instead of five tall ones.
   The markup is already in that order, so Tab order and visual order
   always agree. A phone gets two columns, with the fields that need width
   (name, email, service, message) running across both. */
/* One line of text, so the pseudo stretches its tap area to 44px. */
.enquiry__alt a::after { content: ""; position: absolute; inset: -13px -6px; }
.enquiry__form {
  display: grid; gap: 14px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.enquiry__form > :nth-child(1),
.enquiry__form > :nth-child(2),
.enquiry__form > :nth-child(5),
.enquiry__form > :nth-child(6),
.enquiry__form > :nth-child(7) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .enquiry__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .enquiry__form > :nth-child(1),
  .enquiry__form > :nth-child(2) { grid-column: auto; }
  .enquiry__form > :nth-child(5),
  .enquiry__form > :nth-child(6) { grid-column: span 2; }
  .enquiry__form > :nth-child(7) { grid-column: auto; align-self: end; }
}
.enquiry__field label {
  display: block; margin-bottom: 2px;
  font-family: var(--body); font-weight: 600; font-size: 12.5px;
  color: var(--night);
}
.enquiry__field label span { font-weight: 400; color: #6B6254; }
.enquiry__field input,
.enquiry__field select,
.enquiry__field textarea {
  width: 100%; min-height: 44px;   /* the touch minimum */
  padding: 8px 2px;
  font: inherit; font-size: 16px;   /* 16px keeps iOS from zooming on focus */
  color: var(--night);
  background: transparent;
  border: 0; border-bottom: 1px solid rgb(7 19 15 / .32);
  border-radius: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.enquiry__field textarea { resize: vertical; min-height: 44px; height: 44px; line-height: 1.5; }
.enquiry__field select {
  appearance: none; cursor: pointer; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5C22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center / 18px no-repeat;
}
.enquiry__field input:focus,
.enquiry__field select:focus,
.enquiry__field textarea:focus {
  outline: none;
  border-bottom: 2px solid #7A5C22;
  background: rgb(201 164 92 / .08);
}
.enquiry__field [aria-invalid="true"] { border-bottom: 2px solid #9B2C2C; }
.enquiry__error {
  margin-top: 4px;
  font-size: 13px; font-weight: 600; color: #9B2C2C;   /* 6.5:1 on ivory (measured) */
}
.enquiry__submit { display: flex; }
.enquiry__submit .svcs__cta-btn { border: 0; cursor: pointer; min-height: 44px; padding: 0 24px; }
@media (min-width: 900px) { .enquiry__submit .svcs__cta-btn { width: 100%; justify-content: center; } }

.enquiry__done { grid-column: 2; align-self: center; }
@media (max-width: 899px) { .enquiry__done { grid-column: 1; } }
.enquiry__done:focus { outline: none; }
.enquiry__done-head {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--night);
}

@media (prefers-reduced-motion: reduce) {
  .svc-card img, .svc-card::before, .svc-card__link svg { transition: none; }
}