/* Eethal Corporate: page CSS (what the kit lacks: inside visuals, the service sections' fit per width). */
/* the wide marketing photograph: a letterbox across the wrap under the head, the two lists under it */
#digital-marketing .svc-band { flex: none; aspect-ratio: 1280 / 260; margin-top: var(--s-6); }
#digital-marketing .svc-under { margin-top: var(--s-6); }
.svc-group .t-label { margin: 0 0 var(--s-3); }
@media (min-width: 640px) and (max-width: 1023px) { #digital-marketing .svc-band { aspect-ratio: 16 / 9; } }
/* phone: two screens, the head and the photograph filling the first, the two lists the second */
@media (max-width: 639px) {
  #digital-marketing .svc-top { display: flex; flex-direction: column; align-self: stretch; height: 100%; }
  #digital-marketing .svc-band { flex: 1 1 0; aspect-ratio: auto; min-height: 200px; }
  #digital-marketing .svc-under { margin-top: 0; align-self: stretch; height: 100%; align-content: space-between; }
}
/* 1024 to 1279: the product split's words outgrow one screen, so it stacks as on a tablet over two */
@media (min-width: 1024px) and (max-width: 1279px) {
  #product-development { --h: 2; }
  #product-development .grid > * { grid-column: 1 / -1; }
}
/* a photograph with a phone crop sits in a <picture>: it fills the frame like a bare .frame__img */
.frame > picture.frame__img > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ly-pos, 50% 50%); }
/* a service page: on a phone the other services' tiles keep their photograph and name, their lines go */
@media (max-width: 639px) { #more .tile > p { display: none; } }
/* the overview's comparison: one column a service, its links stacked at the foot */
.svc-col > .stack-2 { display: grid; justify-items: start; }
/* the comparison: one screen from 1024 (its rows a little closer on a small laptop), two on a tablet,
   where the three columns stack */
@media (min-width: 1024px) and (max-width: 1279px) { #compare .rows > li { padding-block: var(--s-3); } }
@media (min-width: 640px) and (max-width: 1023px) { #compare { --h: 2; } }
/* the overview's chapters rest stacked on a phone: two whole screens, the three services spread down them */
@media (max-width: 639px) {
  main > [data-moment="pinned-chapters"]:not(.is-live) { min-height: calc(2 * 100lvh); }
  main > [data-moment="pinned-chapters"]:not(.is-live) > .mo-pc__grid { align-content: stretch; }
  [data-moment="pinned-chapters"]:not(.is-live) .mo-pc__text { display: flex; flex-direction: column; }
  [data-moment="pinned-chapters"]:not(.is-live) .mo-pc__steps { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
}
/* the comparison's photographs: a 16:9 band over each column, lower on a phone where the columns stack */
#compare .tile__media { --tile-ratio: 2 / 1; }
#compare .grid > .svc-col { align-self: stretch; }
/* under 1024 the columns stack: each keeps its photograph, name and links (the full list is on its page) */
@media (max-width: 1023px) { #compare .svc-col__work { display: none; } }
#compare .tile__media > img { display: block; }
/* on a tablet the columns stack, a full gap between them; a phone leaves the comparison out (the chapters
   above list the three services with their links), and the chapters carry the candidate registration */
@media (max-width: 1023px) { #compare .grid { row-gap: var(--s-8); } }
@media (max-width: 639px) { #compare.desk-only { display: none; } }
@media (min-width: 640px) { #services .svc-register { display: none; } }
/* the contact page: the enquiry form on its own surface card beside the photograph; the details under the hero's button */
.enq-card { border-radius: var(--r-lg); padding: clamp(var(--s-5), 4vw, var(--s-7)); align-self: stretch; }
.contact-rows { margin-top: var(--s-6); }
.contact-rows .rows__value { white-space: normal; }
@media (max-width: 1023px) { #enquiry .enq-photo { display: none; } #enquiry .enq-card { grid-column: 1 / -1; } }
/* home: the statement's three first steps, one photograph each, under the words */
.first-steps { margin-top: var(--s-7); }
.first-steps .tile__media { --tile-ratio: 16 / 9; }
@media (max-width: 639px) { .first-steps .tile > p { display: none; } }
@media (max-width: 639px) { #what-we-do .tile > p { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) { .first-steps { margin-top: var(--s-5); } }