/* ==========================================================================
   alfred. — Services (Figma: Services - Desktop, 1440 × 4350)
   A vertical page, so it scales with the width: 1 Figma px = 1 --u.
   Figma colours used as-is, except the two off-palette ones noted below.
   ========================================================================== */

/* In the homepage's frame and unit, like About and Contact: 1 Figma px = 70% of a homepage unit
   (services.js sets --u/--hu from the window, without the scrollbar). Off White inside, Rich Black frame. */
.page-services {
  --hu: min(100vw / 1440, 100vh / 1024);
  --u: calc(var(--hu) * .7);
  --edge: calc(12 * var(--hu)); --edge-radius: calc(28 * var(--hu));
  --pad: calc(16 * var(--hu)); --navh: calc(52 * var(--hu));   /* compact (user, 2026-11-06) */ --radius: calc(24 * var(--hu));
  --frame: var(--black);
  --win-top: calc(var(--edge) + var(--navh) + var(--pad));
  background: var(--cream);
  color: var(--black);
  overflow-x: hidden;
}
html:has(.page-services) { background: var(--frame); }

/* ---------- The homepage's frame (same rules as the other pages) ---------- */
.page-services .site-mask {
  position: fixed;
  inset: var(--edge);
  z-index: 60;
  border-radius: var(--edge-radius);
  box-shadow: 0 0 0 100vmax var(--cream);
  pointer-events: none;
}
.svc-window {
  position: fixed;
  z-index: 40;
  top: var(--win-top);
  left: calc(var(--edge) + var(--pad));
  right: calc(var(--edge) + var(--pad));
  bottom: calc(var(--edge) + var(--pad));
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax var(--frame);
  pointer-events: none;
}
.page-services .nav { --u: var(--hu); top: var(--edge); height: calc(var(--navh) + var(--pad)); background: var(--frame); color: var(--cream); }
.page-services .nav__lang-menu { background: var(--frame); }

/* the page: the Figma frame's width, centred, starting under the window's top */
.svc { width: calc(1440 * var(--u)); margin: 0 auto; padding: var(--win-top) 0 calc(var(--edge) + var(--pad) + 38 * var(--u)); }

/* ---------- 01 - Header ---------- */
.svc-head { position: relative; height: calc(820 * var(--u)); }
.svc-head > * { position: absolute; }

.svc-quote {
  font-family: var(--font-wide);
  font-weight: 900;
  font-size: calc(64 * 1.2 * var(--u));   /* the quote 20% bigger (user) */
  line-height: calc(75 * 1.2 * var(--u));
  color: var(--red);
}
/* Figma boxes are 55 tall, bottom-aligned with a 75 line: text starts 20 above the box */
.svc-quote--open  { left: calc(344.4 * var(--u)); top: calc(190.8 * var(--u)); }
/* measured against the Figma render: the closing mark's ink starts 9 left of its box */
.svc-quote--close { left: calc(1012.8 * var(--u)); top: calc(352.8 * var(--u)); }

.svc-head__quote {
  /* the quote and its marks centred on the page, all 20% bigger (user) */
  left: calc(471.6 * var(--u));
  top: calc(228 * var(--u));
  width: calc(623 * var(--u));
  font-size: calc(48 * 1.2 * var(--u));
  line-height: calc(52 * 1.2 * var(--u));
  font-style: italic;
  /* Figma has #000000 here; Rich Black keeps it on the brand palette */
  color: var(--black);
}


.svc-head__title {
  left: calc(80 * var(--u));
  top: calc(511 * var(--u));   /* 30% more room under the quote than before (96 instead of 74) */
  width: calc(1280 * var(--u));
  text-align: center;
  font-family: var(--font-wide);
  font-weight: 900;
  font-size: calc(160 * var(--u));
  line-height: calc(148 * var(--u));
  text-transform: uppercase;
  color: var(--red);
}

/* ---------- Statement ---------- */
.svc-statement {
  margin: calc(219 * var(--u)) auto 0;
  width: calc(1280 * var(--u));
  text-align: center;
  white-space: nowrap;   /* Figma's lines are fixed with <br> */
  font-size: calc(64 * var(--u));
  line-height: calc(75 * var(--u));
}
/* heavy words keep the 75px line box instead of stretching it */
/* the key words start thin like the rest, and turn fat, capital and Alfred Red as you scroll past (user) */
.svc-kw { position: relative; display: inline-block; vertical-align: top; white-space: nowrap; }
.svc-kw__bold { position: absolute; left: 0; top: 0; font-family: var(--font-wide); font-weight: 900; text-transform: uppercase; color: var(--red); white-space: nowrap; opacity: 0; }
/* Figma's empty line between the two sentences */
.svc-statement p + p { margin-top: calc(75 * var(--u)); }

/* ---------- Service list (Figma component: Service / Item) ---------- */
.svc-list {
  position: relative;
  width: calc(988 * var(--u));
  margin: calc(220 * var(--u)) 0 calc(110 * var(--u)) calc(215 * var(--u));
}
/* Figma rows: title line 75, description centred 90 below the title's top; rows 122 apart (first 98) */
.svc-item { padding-bottom: calc(19 * var(--u)); }
.svc-item:first-child { padding-bottom: calc(.5 * var(--u)); }
.svc-item:first-child .svc-item__sub { margin-top: calc(-2.5 * var(--u)); }

.svc-item__head {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.svc-item__title {
  font-family: var(--font-wide);
  font-weight: 800;   /* Wide Black */
  font-size: calc(40 * var(--u));
  line-height: calc(75 * var(--u));
  text-transform: uppercase;
  transition: color .5s var(--ease-out), transform .6s var(--ease-pop);
}
.svc-item__plus {
  width: calc(47 * var(--u));
  text-align: right;
  font-weight: 500;
  font-size: calc(48 * var(--u));
  line-height: calc(75 * var(--u));
  position: relative; top: calc(3 * var(--u));   /* Figma: the + box sits 3 lower than the title */
  transition: transform .6s var(--ease-pop), color .5s var(--ease-out);
}
.svc-item__head:hover .svc-item__title { color: var(--red); transform: translateX(calc(10 * var(--u))); }
.svc-item__head:hover .svc-item__plus { color: var(--red); transform: scale(1.2); }
.svc-item.is-open .svc-item__plus { transform: rotate(45deg); color: var(--red); }
.svc-item.is-open .svc-item__head:hover .svc-item__plus { transform: rotate(45deg) scale(1.2); }

.svc-item__sub {
  margin-top: calc(3 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(25 * var(--u));
  font-style: italic;
}
/* longer description: height animated by JS */
.svc-item__more { height: 0; overflow: hidden; }
.svc-item__more p {
  width: calc(782 * var(--u));
  padding-top: calc(16 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(32 * var(--u));
}


/* ---------- Group 1: red growth-system panel (45, 3028 · 1350 × 934) ---------- */
.svc-panel {
  position: relative;
  margin: 0 calc(45 * var(--u));
  height: calc(934 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--red);
  color: var(--cream);
}
.svc-panel > * { position: absolute; }

.svc-panel__title {
  left: 0; right: 0; top: calc(82 * var(--u));
  text-align: center;
  font-family: var(--font-wide);
  font-weight: 900;
  font-size: calc(48 * var(--u));
  line-height: calc(50 * var(--u));
  text-transform: uppercase;
}
.svc-panel__sub {
  left: 0; right: 0; top: calc(133 * var(--u));
  text-align: center;
  font-size: calc(40 * var(--u));
  line-height: calc(50 * var(--u));
}

.svc-bracket { width: calc(28 * var(--u)); top: calc(336 * var(--u)); }
.svc-bracket--left { left: calc(144 * var(--u)); }
.svc-bracket--right { left: calc(1178 * var(--u)); transform: scaleX(-1); }

.svc-system {
  left: calc(234 * var(--u));
  top: calc(247 * var(--u));
  width: calc(888 * var(--u));
  height: calc(405 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--cream);
  color: var(--black);
}
.svc-system > * { position: absolute; }
.svc-system__label {
  left: 0; right: 0; text-align: center;   /* centred (user) */
  top: calc(12 * var(--u));
  font-weight: 500;
  font-size: calc(20 * var(--u));
  line-height: calc(27 * var(--u));
  /* Figma has pure #FF0000 here; Alfred Red keeps it on the brand palette */
  color: var(--red);
}
.svc-step { left: calc(18 * var(--u)); width: calc(846 * var(--u)); text-align: center; display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.svc-step:nth-of-type(1) { top: calc(61 * var(--u)); }
.svc-step:nth-of-type(2) { top: calc(148 * var(--u)); }
.svc-step:nth-of-type(3) { top: calc(236 * var(--u)); }
.svc-step:nth-of-type(4) { top: calc(323 * var(--u)); }
.svc-step strong {
  font-family: var(--font-wide);
  font-weight: 700;   /* Wide Bold */
  font-size: calc(32 * var(--u));
  line-height: calc(25 * var(--u));
}
.svc-step em {
  font-weight: 300;   /* Light Italic */
  font-size: calc(24 * var(--u));
  line-height: calc(25 * var(--u));
}

/* Figma places each word in its own right-aligned box */
.svc-panel__services {
  left: 0; right: 0; top: calc(697 * var(--u));
  list-style: none;
  font-weight: 500;
  font-size: calc(24 * var(--u));
  line-height: calc(27 * var(--u));
  text-transform: none;   /* thin: small letters */
}
.svc-panel__services li { position: absolute; left: calc(var(--x) * var(--u)); width: calc(var(--w) * var(--u)); text-align: right; }

.svc-ai { left: calc(252 * var(--u)); top: calc(736 * var(--u)); width: calc(846 * var(--u)); height: calc(85 * var(--u)); }
.svc-ai__line { position: absolute; left: 0; right: 0; top: calc(40 * var(--u)); height: calc(4 * var(--u)); background: var(--black); }
/* Figma rotates the whole pill, text included, by -7°; sizes below are the unrotated shapes */
.svc-ai__pill {
  position: absolute;
  left: calc(353.5 * var(--u));
  top: calc(8.5 * var(--u));
  width: calc(140 * var(--u));
  height: calc(68 * var(--u));
  transform: rotate(-7deg);
  transition: transform .6s var(--ease-pop);
}
.svc-ai__shadow { position: absolute; left: 0; top: 0; width: calc(140 * var(--u)); height: calc(68 * var(--u)); }
.svc-ai__face { position: absolute; left: calc(9 * var(--u)); top: calc(.6 * var(--u)); width: calc(129.5 * var(--u)); height: calc(60.8 * var(--u)); }
.svc-ai__text {
  text-transform: uppercase;
  position: absolute;
  left: calc(30 * var(--u)); top: calc(16.5 * var(--u));
  width: calc(78 * var(--u));
  text-align: center;
  font-weight: 800;   /* Black */
  font-size: calc(48 * var(--u));
  line-height: calc(25 * var(--u));   /* Figma: 25 */
  color: var(--black);
}
.svc-ai__pill:hover { transform: rotate(-13deg) scale(1.08); }

.svc-panel__foot {
  left: calc(241 * var(--u)); width: calc(846 * var(--u)); top: calc(832 * var(--u));
  text-align: center;
  font-size: calc(24 * var(--u));
  line-height: calc(25 * var(--u));
}

/* ---------- Closing ---------- */
.svc-close {
  width: calc(909 * var(--u));
  margin: calc(82 * var(--u)) 0 0 calc(283 * var(--u));   /* Figma box at x 283, not page-centred */
  text-align: center;
  font-size: calc(48 * var(--u));
  line-height: calc(52 * var(--u));
  font-style: italic;
  color: var(--black);   /* Figma #000000 → Rich Black */
}
.svc-cta { margin-top: calc(82 * var(--u)); display: flex; justify-content: center; }
.svc-cta .btn { width: calc(497 * var(--u)); border-width: calc(2 * var(--u)); }

/* ---------- Portrait (phones, upright tablets): same pieces, stacked, sized from the width (1 --u = a 600th) ---------- */
@media (orientation: portrait) {
  .page-services { --u: calc(100vw / 600); }
  .svc { width: auto; padding-left: calc(30 * var(--u)); padding-right: calc(30 * var(--u)); }

  /* header: quote, then title, one under the other, centred */
  .svc-head { height: auto; display: grid; justify-items: center; padding-top: calc(60 * var(--u)); }
  .svc-head > * { position: relative; left: auto; top: auto; }
  .svc-head__quote { width: auto; text-align: center; font-size: calc(36 * .84 * var(--u)); line-height: calc(40 * .84 * var(--u)); }   /* 30% smaller, under OUR SERVICES (user) */
  .svc-quote { font-size: calc(48 * .84 * var(--u)); line-height: calc(40 * .84 * var(--u)); }
  .svc-quote--open { justify-self: start; margin-left: calc(60 * var(--u)); }
  .svc-quote--close { justify-self: end; margin-right: calc(60 * var(--u)); margin-top: calc(-30 * var(--u)); }
  .svc-head__title { width: auto; text-align: center; font-size: calc(64 * var(--u)); line-height: calc(60 * var(--u)); margin-top: calc(52 * var(--u)); }

  .svc-statement { width: auto; margin-top: calc(100 * var(--u)); white-space: normal; font-size: calc(34 * var(--u)); line-height: calc(40 * var(--u)); }
  .svc-statement p + p { margin-top: calc(40 * var(--u)); }
  .svc-statement br, .svc-close br { display: none; }   /* let the lines wrap to the phone's width */

  .svc-list { width: auto; margin: calc(100 * var(--u)) calc(10 * var(--u)) calc(80 * var(--u)); }
  .svc-item__title { font-size: calc(34 * var(--u)); line-height: calc(60 * var(--u)); }
  .svc-item__plus { line-height: calc(60 * var(--u)); }
  .svc-item__sub { font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }
  .svc-item__more p { width: auto; font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }

  /* the red panel: stacked, as tall as its content */
  .svc-panel { height: auto; margin: 0; padding: calc(56 * var(--u)) calc(24 * var(--u)) calc(48 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(28 * var(--u)); }
  .svc-panel > * { position: relative; left: auto; right: auto; top: auto; }
  .svc-panel__title { font-size: calc(40 * var(--u)); line-height: calc(44 * var(--u)); }
  .svc-panel__sub { margin-top: calc(-20 * var(--u)); font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); }
  .svc-bracket { display: none; }
  .svc-system { width: 100%; height: auto; padding: calc(52 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; gap: calc(26 * var(--u)); }
  .svc-system__label { position: absolute; left: 0; right: 0; }
  .svc-system .svc-step { position: relative; left: auto; top: auto; width: auto; }
  .svc-step strong { font-size: calc(26 * var(--u)); line-height: calc(28 * var(--u)); }
  .svc-step em { font-size: calc(20 * var(--u)); }
  .svc-panel__services { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--u)) calc(20 * var(--u)); font-size: calc(20 * var(--u)); }
  .svc-panel__services li { position: static; width: auto; }
  .svc-ai { width: 100%; }
  .svc-ai__pill { left: calc(50% - 70 * var(--u)); }
  .svc-panel__foot { width: auto; font-size: calc(20 * var(--u)); }

  .svc-close { width: auto; margin: calc(80 * var(--u)) 0 0; font-size: calc(32 * var(--u)); line-height: calc(38 * var(--u)); }
  .svc-cta { margin-top: calc(48 * var(--u)); }
  .svc-cta .btn { width: calc(400 * var(--u)); height: calc(70 * var(--u)); font-size: calc(30 * var(--u)); }
}

/* ---------- Phones and upright tablets: premium polish (user, 2026-11-04) ----------
   More air, one rhythm: the title as wide as the screen, the services as a clean list with hairlines,
   each row a big tap target, the red panel with rounded inner cards. */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .svc-head { padding-top: calc(80 * var(--u)); }
  .svc-head__title { font-size: min(9vw, 76px); line-height: .92; margin-top: calc(70 * var(--u)); }
  .svc-statement { margin-top: calc(120 * var(--u)); text-align: center; }
  .svc-list { margin: calc(120 * var(--u)) 0 calc(100 * var(--u)); border-bottom: 1.5px solid rgba(35, 35, 35, .14); }
  .svc-item, .svc-item:first-child { padding: calc(22 * var(--u)) calc(6 * var(--u)) calc(24 * var(--u)); border-top: 1.5px solid rgba(35, 35, 35, .14); }
  .svc-item:first-child .svc-item__sub { margin-top: 0; }
  .svc-item__title { font-size: calc(38 * var(--u)); line-height: calc(48 * var(--u)); }
  .svc-item__plus { line-height: calc(48 * var(--u)); font-size: calc(40 * var(--u)); }
  .svc-item__sub { margin-top: calc(6 * var(--u)); font-size: calc(22 * var(--u)); line-height: calc(28 * var(--u)); }
  .svc-item__head:hover .svc-item__title { transform: none; }
  .svc-panel { border-radius: 22px; padding: calc(70 * var(--u)) calc(28 * var(--u)) calc(56 * var(--u)); gap: calc(34 * var(--u)); }
  .svc-system { border-radius: 18px; }
  .svc-close { margin-top: calc(110 * var(--u)); text-align: center; }
  .svc-cta { display: flex; justify-content: center; margin-bottom: calc(80 * var(--u)); }
  .svc-cta .btn { width: auto; height: 54px; padding: 0 28px .25em; font-size: min(5vw, 22px); border-radius: 54px; }
}

@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .svc { padding-left: calc(var(--edge) + var(--pad) + 26px); padding-right: calc(var(--edge) + var(--pad) + 26px); }
  .svc-panel { margin: 0 -8px; }
}
/* phones: the quote marks centred above and below the quote, everything on one centre line */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .svc-head { justify-items: center; text-align: center; }
  .svc-quote--open, .svc-quote--close { justify-self: center; margin: 0; }
  .svc-quote--open { margin-bottom: calc(14 * var(--u)); }
  .svc-quote--close { margin-top: calc(18 * var(--u)); }
  .svc-head__quote { margin: 0 auto; }
}

/* ---------- services, new (user, 2026-11-09): the + opens the service into a salmon card, the
   longer text on the left and a picture on the right; the red happy-business panel is gone ---------- */
.svc-item { position: relative; border-radius: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(30 * var(--u)) calc(26 * var(--u)); margin: 0 calc(-30 * var(--u)) calc(8 * var(--u)); transition: background-color .45s var(--ease-out); }
.svc-item:first-child { padding-bottom: calc(26 * var(--u)); }
.svc-item.is-open { background: var(--red); }
.svc-item.is-open .svc-item__title { color: var(--cream); }
.svc-item.is-open .svc-item__plus { color: var(--black); }
.svc-item.is-open .svc-item__head:hover .svc-item__title { color: var(--cream); }
.svc-item__body { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(40 * var(--u)); padding-top: calc(16 * var(--u)); }
.svc-item__more p.svc-item__text { flex: 1; width: auto; max-width: calc(560 * var(--u)); padding: 0; margin: 0; font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); }
.svc-item__img { flex: none; width: calc(300 * var(--u)); aspect-ratio: 5 / 4; object-fit: cover; border-radius: calc(12 * var(--u)); }
.svc-item__img:not([src]), .svc-item__img[src=""] { display: none; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .svc-item, .svc-item:first-child { margin: 0 calc(-6 * var(--u)); padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u)); border-radius: 16px; }
  .svc-item.is-open { border-top-color: transparent; }
  .svc-item.is-open + .svc-item { border-top-color: transparent; }
  .svc-item__body { flex-direction: column; gap: 16px; padding-top: 12px; }
  .svc-item__more p.svc-item__text { max-width: none; font-size: calc(22 * var(--u)); line-height: 1.35; }
  .svc-item__img { width: 100%; aspect-ratio: 16 / 9; }
}

/* ---------- services = the Figma component "Service" (default / expanded), user 2026-11-09 ----------
   closed: TITLE ........ +, the short line in italic under it. Open: a salmon card (radius 16, padding 24/25),
   the title in white, and under the title row two columns: on the left the short line and the text
   (Regular 24/25, at most 469 wide), on the right the picture (216 x 172, radius 12), with clear room
   between them. Everything is in --u, so it scales with the window and never collides. */
.svc-list { width: calc(988 * var(--u)); }
.svc-item, .svc-item:first-child {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(48 * var(--u)); align-items: start;
  margin: 0 0 calc(8 * var(--u)); padding: calc(25 * var(--u)) calc(32 * var(--u)); border-radius: calc(16 * var(--u));
}
.svc-item__head { grid-column: 1 / -1; }
.svc-item__sub { grid-column: 1; margin: calc(4 * var(--u)) 0 0; }
.svc-item__more { grid-column: 1; }
.svc-item__body { display: block; padding-top: calc(16 * var(--u)); }
.svc-item__more p.svc-item__text { max-width: calc(469 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(25 * var(--u)); }
.svc-item > .svc-item__img { grid-column: 2; grid-row: 2 / span 2; width: calc(216 * var(--u)); height: calc(172 * var(--u)); aspect-ratio: auto; object-fit: cover; border-radius: calc(12 * var(--u)); margin-top: calc(4 * var(--u)); opacity: 0; transform: scale(.9); transition: opacity .4s var(--ease-out), transform .5s var(--ease-pop); display: none; }
.svc-item.is-open > .svc-item__img { display: block; opacity: 1; transform: none; }
.svc-item__title { line-height: calc(75 * var(--u)); }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .svc-list { width: auto; }
  .svc-item, .svc-item:first-child { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 20px; margin: 0 0 6px; border-radius: 16px; border-top: 0; }
  .svc-item__title { line-height: 1.2; }
  .svc-item__more p.svc-item__text { max-width: none; font-size: 16px; line-height: 1.35; }
  .svc-item > .svc-item__img { grid-column: 1; grid-row: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 14px; border-radius: 12px; }
}

/* the picture beside the X, never under it (user): it stands at the top of the open card, to the left of
   the X; the title, the short line and the text keep clear of it, with room to breathe */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1101px) {   /* desktop only: the opposite of the phone rule */
  .svc-item, .svc-item:first-child { display: block; position: relative; }
  .svc-item > .svc-item__img { position: absolute; top: calc(25 * var(--u)); right: calc(32 * var(--u) + 47 * var(--u) + 28 * var(--u)); margin: 0; }
  .svc-item.is-open { min-height: calc(25 * var(--u) * 2 + 172 * var(--u)); }
  .svc-item.is-open .svc-item__sub, .svc-item.is-open .svc-item__more { max-width: calc(100% - 216 * var(--u) - 107 * var(--u) - 48 * var(--u)); }
  .svc-item__sub { margin-top: calc(6 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.3; }
  .svc-item__more p.svc-item__text { max-width: calc(469 * var(--u)); line-height: 1.35; }
  .svc-item__body { padding-top: calc(18 * var(--u)); }
}

/* drop-down, no fade; the picture portrait, filling the card's height beside the X (user, 2026-11-09) */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1101px) {
  .svc-item { overflow: hidden; }
  .svc-item.is-open { min-height: 0; }
  .svc-item > .svc-item__img { display: block; opacity: 1; transform: none; transition: none; top: calc(25 * var(--u)); bottom: calc(25 * var(--u)); height: auto; width: calc(216 * var(--u)); visibility: hidden; }
  .svc-item.is-open > .svc-item__img { visibility: visible; }
  .svc-item__body { min-height: calc(200 * var(--u)); }
}
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .svc-item { overflow: hidden; }
  .svc-item > .svc-item__img { display: block; opacity: 1; transform: none; transition: none; aspect-ratio: 4 / 5; visibility: hidden; height: 0; margin: 0; }
  .svc-item.is-open > .svc-item__img { visibility: visible; height: auto; margin-top: 14px; }
}

@media (min-width: 768px) and (orientation: landscape), (min-width: 1101px) { .svc-item > .svc-item__img { height: calc(100% - 50 * var(--u)); } }
/* the list (and every card that drops open in it) dead centre in the page (user, 2026-11-10) */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1101px) { .svc-list { margin-left: auto; margin-right: auto; } }

/* the top (user, 2026-11-10): no quote, no statement; OUR SERVICES 15% smaller and higher, the list right under it */
.svc-head, .svc-head:is(*) { height: auto; padding-top: calc(70 * var(--u)); display: block; }
.svc-head > .svc-head__title { position: static; width: auto; margin: 0; font-size: calc(160 * .85 * var(--u)); line-height: calc(148 * .85 * var(--u)); }
.svc-list, .svc-list:is(*) { margin-top: calc(80 * var(--u)); }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .svc-head, .svc-head:is(*) { padding-top: calc(50 * var(--u)); }
  .svc-head > .svc-head__title { font-size: min(9vw * .85, 65px); line-height: .92; margin: 0; }
  .svc-list, .svc-list:is(*) { margin-top: calc(60 * var(--u)); }
}

/* the deck: three portrait cards in the picture's place (user, 2026-11-10) */
.svc-item > .svc-deck { position: absolute; top: calc(25 * var(--u)); right: calc(32 * var(--u) + 47 * var(--u) + 28 * var(--u)); width: calc(216 * var(--u)); height: calc(100% - 50 * var(--u)); visibility: hidden; cursor: pointer; z-index: 3; }
.svc-item.is-open > .svc-deck { visibility: visible; }
.svc-deck .svc-deck__card, .svc-item .svc-deck > img.svc-item__img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: calc(12 * var(--u)); visibility: inherit; opacity: 1; transform-origin: 50% 90%; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(35, 35, 35, .18); animation: none; }
.svc-item.is-spread { overflow: visible; z-index: 5; position: relative; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  /* the deck keeps its size whether open or not, so the card glides open and shut in one smooth move (user, 2026-11-10) */
  .svc-item .svc-deck { position: relative; inset: auto; width: 52%; height: auto; aspect-ratio: 2 / 3; margin: 26px auto 18px; visibility: visible; }
  .svc-deck .svc-deck__card, .svc-item .svc-deck > img.svc-item__img { border-radius: 10px; }
  .svc-item.is-spread .svc-item__more { overflow: visible !important; }
}

/* (working at alfred moved to the About page, user 2026-11-11) */
/* the deck is always exactly 2:3, so a 2:3 photo shows whole (user, 2026-11-11): as tall as the open service allows, at most 324 high (216 wide) */
.svc-item > .svc-deck { height: min(calc(100% - 50 * var(--u)), calc(324 * var(--u))); width: auto; aspect-ratio: 2 / 3; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) { .svc-item > .svc-deck, .svc-item .svc-deck { height: auto; width: 52%; aspect-ratio: 2 / 3; } }