/* ==========================================================================
 Content pages
 The service, areas and 404 pages. Builds on base, services, gallery and about-contact styles.
 ========================================================================== */

/* Page hero: sits below the fixed header. A calm light floor, pale blue-grey at the top easing into the cream page,
   with a faint diagonal reflection like light across paint and a soft blue light behind the photo. The title is blue */
.page-hero {
  padding-block: 104px 56px;
}
.page-hero.tint-bg {
  background:
    var(--grain), linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 52%, transparent 66%),
    radial-gradient(48% 70% at 82% 46%, rgba(90, 160, 230, 0.16), transparent 66%),
    linear-gradient(180deg, #f1f5fa 0%, #f6f7f8 55%, var(--cream) 100%);
}
/* Every page top sets its words in a deep sapphire panel with a white title (owner, 2026-11-07: "the title in white
   in a beautiful blue box"). Two soft lights and fine grain give the blue depth, a short pale line runs along the top
   edge and a blue-tinted shadow lifts it off the page. White is 5:1 or more on every part of the blue */
.hero-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 34px 32px;
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    var(--grain-dark), radial-gradient(80% 60% at 100% 0%, rgba(120, 190, 255, 0.32), transparent 65%),
    radial-gradient(70% 60% at 0% 100%, rgba(10, 30, 70, 0.45), transparent 70%), var(--panel-deep);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 34px rgba(22, 61, 117, 0.22),
    0 40px 70px -36px rgba(16, 47, 92, 0.6);
}
.hero-panel::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 34px;
  width: 72px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #9fd0ff, rgba(159, 208, 255, 0));
}
[dir='rtl'] .hero-panel::before {
  background: linear-gradient(270deg, #9fd0ff, rgba(159, 208, 255, 0));
}
.hero-panel h1 {
  color: #fff;
}
.hero-panel .lead {
  color: rgba(255, 255, 255, 0.9);
}
.hero-panel .lead a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}
.hero-panel .kicker {
  color: #cfe5ff;
}
/* The breadcrumb on the blue */
.hero-panel .breadcrumb li {
  color: rgba(255, 255, 255, 0.78);
}
.hero-panel .breadcrumb li + li::before {
  color: rgba(255, 255, 255, 0.45);
}
.hero-panel .breadcrumb a {
  color: #d9eaff;
}
.hero-panel .breadcrumb a:hover {
  color: #fff;
}
.hero-panel .breadcrumb a:active {
  color: #b9d6f7;
}
.hero-panel :is(.breadcrumb a, .btn):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .hero-panel {
    margin-inline: -8px;
    padding: 26px 20px 24px;
  }
  .hero-panel::before {
    inset-inline-start: 20px;
  }
}
/* The fact boxes (About): frosted glass tiles on the blue, each with its icon in a white badge. Two by two from 520px */
.hero-highlights {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 520px) {
  .hero-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.hero-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 6px 16px rgba(8, 24, 52, 0.18);
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s var(--ease-spring);
}
@media (hover: hover) {
  .hero-highlights li:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.28),
      0 14px 28px rgba(8, 24, 52, 0.28);
  }
}
.hero-highlights small {
  display: block;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bcdcff;
}
.hero-highlight-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--heading-blue);
  background: linear-gradient(160deg, #ffffff 0%, #e3efff 100%);
  box-shadow:
    inset 0 -1px 0 rgba(22, 61, 117, 0.12),
    0 6px 14px rgba(8, 24, 52, 0.25);
}
.hero-highlight-icon svg {
  width: 19px;
  height: 19px;
}
/* About keeps the soft light-blue panel it had first, with a blue title, dark text and white fact boxes (owner,
   2026-11-07: the white title in the deep blue box is for the other pages only). templates/page.mjs adds is-light */
.hero-panel.is-light {
  color: var(--ink);
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(90, 160, 230, 0.16), transparent 70%), var(--panel-blue);
  box-shadow:
    inset 0 0 0 1px var(--panel-blue-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 30px rgba(31, 71, 118, 0.1),
    0 34px 64px -34px rgba(31, 71, 118, 0.4);
}
.hero-panel.is-light::before {
  background: linear-gradient(90deg, var(--heading-blue-accent), rgba(44, 105, 176, 0));
}
[dir='rtl'] .hero-panel.is-light::before {
  background: linear-gradient(270deg, var(--heading-blue-accent), rgba(44, 105, 176, 0));
}
.hero-panel.is-light h1 {
  color: var(--heading-blue);
}
.hero-panel.is-light .lead {
  color: var(--ink-2);
}
.hero-panel.is-light .lead a {
  color: var(--accent-ink);
  text-decoration-color: currentColor;
}
.hero-panel.is-light .breadcrumb li {
  color: var(--muted);
}
.hero-panel.is-light .breadcrumb li + li::before {
  color: var(--accent-ink-dark);
}
.hero-panel.is-light .breadcrumb a {
  color: var(--accent-ink);
}
.hero-panel.is-light .breadcrumb a:hover {
  color: var(--link-hover);
}
.hero-panel.is-light .breadcrumb a:active {
  color: var(--ink);
}
.hero-panel.is-light :is(.breadcrumb a, .btn):focus-visible {
  outline-color: var(--accent-ink);
}
.hero-panel.is-light .hero-highlights li {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 0 0 1px rgba(42, 93, 154, 0.12),
    0 4px 14px rgba(31, 71, 118, 0.07);
}
@media (hover: hover) {
  .hero-panel.is-light .hero-highlights li:hover {
    box-shadow:
      inset 0 0 0 1px rgba(42, 93, 154, 0.2),
      0 12px 26px rgba(31, 71, 118, 0.14);
  }
}
.hero-panel.is-light .hero-highlights small {
  color: var(--heading-blue-accent);
}
.hero-panel.is-light .hero-highlight-icon {
  color: #fff;
  background: linear-gradient(150deg, var(--blue-bright) 0%, var(--blue) 55%, var(--blue-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 14px rgba(42, 93, 154, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .hero-highlights li {
    transition: none;
  }
}
@media (min-width: 768px) {
  .page-hero {
    padding-block: 132px 72px;
  }
}
/* Below 1024px the header has a second row of links (css/header.css), so the page starts lower */
@media (max-width: 767px) {
  .page-hero {
    padding-top: 128px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .page-hero {
    padding-top: 152px;
  }
}
.page-hero-grid {
  display: grid;
  gap: 36px;
}
@media (min-width: 900px) {
  .page-hero-grid {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: 64px;
  }
}
.page-hero h1 {
  margin-top: 16px;
  font-size: clamp(42px, 6vw, 72px);
}
.page-hero .kicker + h1 {
  margin-top: 12px;
}
.page-hero .lead {
  margin-top: 20px;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
/* The photo sits in a white mount with a fine chrome edge, floating over the blue light */
.page-hero-media {
  aspect-ratio: 1;
  max-width: 520px;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow:
    var(--photo-mount),
    var(--shadow-3);
}
/* The photo drifts closer on hover, as on the cards */
@media (hover: hover) {
  .page-hero-media:hover img {
    transform: scale(1.04);
  }
}
@media (min-width: 900px) {
  .page-hero-media {
    justify-self: end;
  }
}
/* Tall photos sit whole inside the frame instead of being cropped */
.img-wrap.is-contained {
  background: radial-gradient(80% 60% at 50% 100%, rgba(90, 160, 230, 0.14), transparent 70%), var(--pearl);
}
.img-wrap.is-contained::after {
  display: none;
}
.img-wrap.is-contained img {
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
}
/* Wide photos keep their own shape, whole and uncropped, instead of a square frame */
.page-hero-media.is-natural {
  aspect-ratio: auto;
  align-self: center;
}
.page-hero-media.is-natural img {
  position: static;
  height: auto;
}
.btn-outline {
  background: var(--white);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(27, 74, 130, 0.22),
    var(--shadow-1);
}
.btn-outline:hover {
  color: var(--link-hover);
  box-shadow:
    inset 0 0 0 1px var(--accent-ink),
    var(--shadow-2);
}
.btn-outline:active {
  box-shadow: inset 0 0 0 1px var(--link-hover);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--accent-ink-dark);
}
.breadcrumb a {
  font-weight: 600;
  color: var(--accent-ink);
  border-radius: 4px;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: var(--link-hover);
}
.breadcrumb a:active {
  color: var(--ink);
}
.breadcrumb a:focus-visible,
.faq summary:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

/* Article beside the contact panel */
.page-layout {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 72px;
    align-items: start;
  }
}
.page-article {
  display: grid;
  gap: 44px;
  min-width: 0;
  max-width: 44em;
}
.page-article h2 {
  font-size: clamp(32px, 4vw, 44px);
  color: var(--heading-ink);
}
/* The plain light sections (the article beside the contact panel, the Gallery groups) carry faint layered blue
   light, so no long stretch of page reads as flat colour (2026-11-08 design upgrade) */
.section[class='section'],
.photo-section {
  background: var(--section-light);
}
/* Section titles without a label above them carry the signature red line instead. languages.css turns it round
   for Arabic */
.page-article h2::before,
.page-section-title::before,
.page-cta h2::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 3px;
  background: var(--accent-line);
}
.page-cta h2::before {
  background: var(--accent-line-dark);
}
.page-article p,
.page-article li {
  color: var(--ink-2);
  font-size: 17px;
}
.page-article p,
.page-article ul,
.page-article ol {
  margin: 14px 0 0;
}
.page-article ul,
.page-article ol {
  display: grid;
  gap: 8px;
  padding-left: 22px;
}
.page-article li::marker {
  color: var(--accent-ink);
}
/* Numbered steps ("How does it work…?"): each number in a lit sapphire badge, joined to the next by a fading line,
   so the visit reads as a short route. The list keeps role="list", which Safari needs once the numbers are custom */
.page-article ol {
  gap: 0;
  margin-top: 22px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.page-article ol li {
  position: relative;
  min-height: 40px;
  padding-block: 4px 22px;
  padding-inline-start: 56px;
  counter-increment: step;
}
.page-article ol li:last-child {
  padding-bottom: 0;
}
.page-article ol li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(150deg, #c8443a 0%, var(--crimson) 50%, var(--wine) 100%);
  box-shadow:
    0 0 0 4px var(--white),
    0 0 0 5px rgba(163, 38, 31, 0.14),
    0 8px 18px rgba(163, 38, 31, 0.28);
}
/* From under this number down to the next one, which sits on top of it */
.page-article ol li::after {
  content: '';
  position: absolute;
  inset-inline-start: 17px;
  top: 40px;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(rgba(163, 38, 31, 0.35), rgba(163, 38, 31, 0.06));
}
.page-article ol li:last-child::after {
  display: none;
}
.page-article strong {
  color: var(--ink);
  font-weight: 600;
}
/* The date the page last changed, as a small chip with a blue point */
.page-article .page-updated {
  width: fit-content;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--cream-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
}
.page-article .page-updated::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-inline-end: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 0 3px rgba(163, 38, 31, 0.16);
}
@media (min-width: 1024px) {
  .page-panel {
    position: sticky;
    top: 96px;
  }
}
.page-panel-address {
  padding: 16px 16px 8px;
  font-style: normal;
  color: var(--ink-2);
  line-height: 1.6;
}
.page-panel-address strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
}

/* Section headings used on their own, without the homepage's two-column head */
.page-section-title {
  margin-bottom: 32px;
  font-size: clamp(36px, 5vw, 56px);
  color: var(--heading-ink);
}
.page-gallery {
  padding-top: 0;
}
/* The "Related services" and "Our services" card grids: white fading to pearl, with a pale blue light in one corner */
.page-cards {
  background: radial-gradient(50% 50% at 100% 0%, rgba(90, 190, 235, 0.16), transparent 62%), var(--surface-card);
}

/* FAQs: native <details>, so the answers are in the HTML and open without JavaScript. Each question is a white
   card with a chrome edge and a round + button; the open one takes a blue edge and a deeper shadow */
.faq-list {
  display: grid;
  gap: 12px;
  max-width: 860px;
}
.faq {
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow:
    inset 0 0 0 1px rgba(20, 40, 70, 0.07),
    var(--shadow-1);
  transition:
    box-shadow 0.3s var(--ease-spring),
    transform 0.3s var(--ease-spring);
}
@media (hover: hover) {
  .faq:not([open]):hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 1px rgba(27, 74, 130, 0.16),
      var(--shadow-2);
  }
}
.faq[open] {
  box-shadow:
    inset 0 0 0 1px rgba(27, 74, 130, 0.22),
    var(--shadow-2);
}
.faq summary {
  position: relative;
  padding: 18px 64px 18px 22px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--heading-blue);
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(27, 74, 130, 0.16);
  transition: transform 0.3s var(--ease-spring);
}
.faq[open] summary::after {
  transform: rotate(45deg);
  color: #fff;
  background: linear-gradient(150deg, #c8443a 0%, var(--crimson) 50%, var(--wine) 100%);
  box-shadow: 0 6px 14px rgba(163, 38, 31, 0.28);
}
.faq summary:hover {
  color: var(--accent-ink);
}
.faq summary:active {
  color: var(--link-hover);
}
.faq p {
  padding: 0 22px 20px;
  color: var(--ink-2);
}

/* Closing call to action: the carbon of the footer and the Working hours band, with a sapphire light rising from one
   corner and a faint red glow in the other */
.page-cta {
  color: #fff;
  background:
    var(--grain-dark), radial-gradient(70% 90% at 0% 100%, rgba(179, 48, 42, 0.34), transparent 60%),
    radial-gradient(40% 70% at 100% 0%, rgba(200, 50, 43, 0.08), transparent 58%),
    linear-gradient(180deg, var(--carbon-2) 0%, var(--carbon) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* where it meets the footer */
}
.page-cta h2 {
  font-size: clamp(38px, 5vw, 60px);
}
.page-cta p {
  max-width: 34em;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after {
    transition: none;
  }
}

/* Gallery page photos (templates/page.mjs renderPhotoGroups): an even grid of cards. Every photo fills the same
   square frame and the cards in a row share one height, so the rows line up. Two columns on phones, three from 960px */
/* Each group's title ("Inside our shop", "Our works") in the same deep blue box as the page tops, with a white title
   and a pale line along its leading edge (owner, 2026-11-07) */
.photo-section-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 32px;
  padding: 26px 30px 24px;
  padding-inline-start: 34px;
  border-radius: var(--radius-md);
  color: #fff;
  background:
    var(--grain-dark), radial-gradient(70% 90% at 100% 0%, rgba(120, 190, 255, 0.3), transparent 65%), var(--panel-deep);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 10px 26px rgba(22, 61, 117, 0.18),
    0 30px 56px -32px rgba(16, 47, 92, 0.55);
}
.photo-section-head::before {
  content: '';
  position: absolute;
  inset-block: 18px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #bfe0ff, #6fb0f0);
}
[dir='rtl'] .photo-section-head::before {
  border-radius: 4px 0 0 4px;
}
.photo-section-head .page-section-title {
  margin-bottom: 8px;
  color: #fff;
}
/* The red line other section titles carry would sit oddly inside the box */
.photo-section-head .page-section-title::before {
  display: none;
}
.photo-section-head p {
  max-width: 36em;
  color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 480px) {
  .photo-section-head {
    padding: 22px 20px 20px;
    padding-inline-start: 24px;
  }
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 560px) {
  .photo-grid {
    gap: 24px;
  }
}
@media (min-width: 960px) {
  .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* A group of two (the shop) stays two wide, not two thirds of a row */
  .photo-grid.is-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.photo-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s var(--ease-spring);
}
.photo-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.photo-card-media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--champagne);
}
.photo-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 18, 28, 0.22), transparent 38%);
  pointer-events: none;
}
.photo-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-spring);
}
.photo-card:hover .photo-card-media img {
  transform: scale(1.04);
}
/* The caption fills the rest of the card, with the service link at its foot, so links line up across a row */
/* The signature red line opens each caption, as on the service cards */
.photo-card figcaption {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: var(--accent-line) no-repeat left 20px top 0 / 44px 3px;
}
.photo-card figcaption strong {
  display: block;
  color: var(--ink);
  font:
    400 25px/1.12 'Instrument Serif',
    serif;
  letter-spacing: -0.01em;
}
.photo-card figcaption > span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.photo-card-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 10px;
  border-radius: 4px;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  transition: color 0.2s ease;
}
.photo-card-link span {
  display: inline-block;
  transition: transform 0.3s var(--ease-spring);
}
.photo-card-link:hover {
  color: var(--link-hover);
}
.photo-card-link:hover span {
  transform: translateX(4px);
}
.photo-card-link:active {
  color: var(--ink);
}
.photo-card-link:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}
/* Phones: half-width cards, so smaller corners and captions */
@media (max-width: 559px) {
  .photo-card {
    border-radius: var(--radius-sm);
  }
  .photo-card figcaption {
    padding: 16px 12px 14px;
    background-position: left 12px top 0;
    background-size: 32px 3px;
  }
  .photo-card figcaption strong {
    font-size: 19px;
  }
  .photo-card figcaption > span {
    font-size: 13px;
    line-height: 1.5;
  }
  .photo-card-link {
    font-size: 13px;
  }
}
.photo-section .instagram-link {
  margin-top: 16px;
}
.photo-section .instagram-link svg {
  width: 20px;
  height: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .photo-card,
  .photo-card-media img,
  .photo-card-link span {
    transition: none;
  }
}

/* ==========================================================================
 About: the opening photo (owner, 2026-11-07)
 The owner's dark car photo with the title, words and WhatsApp button on the left. The photo is only 640px wide, so
 on wide screens it sits on the right at a moderate height and fades into a background built from its own colours
 (the deep red at its top left, black on its right) instead of being stretched soft. A sapphire light under the
 words and a gentle lift on the photo keep the section from reading as flat black. Phones show the photo whole on
 top, at about its own size, with the words below
 ========================================================================== */
.about-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding-block: 104px 56px;
  background:
    var(--grain-dark), radial-gradient(60% 55% at 0% 0%, rgba(150, 18, 22, 0.5), transparent 68%),
    radial-gradient(60% 70% at 16% 100%, rgba(44, 105, 176, 0.42), transparent 70%),
    radial-gradient(45% 60% at 70% 55%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(165deg, #1c0707 0%, #0b0809 42%, #050608 100%);
}
.about-cover-photo {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto 8px;
  filter: brightness(1.18) contrast(1.06) saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.about-cover-inner {
  position: relative;
  z-index: 1;
}
/* A short pale-red line above the breadcrumb, like the lines beside "CAR ACCESSORIES" in the logo */
.about-cover-inner::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: var(--accent-line-dark);
}
.about-cover h1 {
  margin-top: 14px;
  max-width: 12em;
  font-size: clamp(42px, 6vw, 76px);
  color: #fff;
}
/* The shop's name as the title, set like the logo: "Al Nujoom" large, "Car Accessories" in spaced capitals beneath
   it between two short pale-red lines. Both lines stay whole (no wrapping inside the name) */
.about-cover h1.about-cover-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: none;
  margin-top: 20px;
  font-size: clamp(64px, 7.4vw, 104px);
  line-height: 0.95;
}
.about-cover-name-main {
  font-family: 'Instrument Serif', Georgia, serif;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.about-cover-name-sub {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(13px, 1.25vw, 17px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
}
/* letter-spacing leaves a space after the last letter; the right margin trims it so the lines sit evenly */
.about-cover-name-sub::before,
.about-cover-name-sub::after {
  content: '';
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-line-dark);
}
.about-cover-name-sub::after {
  margin-inline-start: -0.32em;
}
/* The name is in English letters on every language's page, so it keeps its spacing on the Arabic and Hindi pages
   too (css/languages.css removes letter spacing there for those scripts) */
.about-cover h1.about-cover-name .about-cover-name-main {
  letter-spacing: -0.035em !important;
}
.about-cover h1.about-cover-name .about-cover-name-sub {
  letter-spacing: 0.32em !important;
}
.about-cover .lead {
  margin-top: 28px;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.86);
}
.about-cover .lead a {
  color: #fff;
}
.about-cover .breadcrumb li {
  color: rgba(255, 255, 255, 0.72);
}
.about-cover .breadcrumb li + li::before {
  color: rgba(255, 255, 255, 0.4);
}
.about-cover .breadcrumb a {
  color: #f2c5c0;
}
.about-cover .breadcrumb a:hover {
  color: #fff;
}
.about-cover .breadcrumb a:active {
  color: #e9a9a1;
}
.about-cover :is(.breadcrumb a, .btn):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
/* Below 1024px the header has a second row of links, so the page starts lower */
@media (max-width: 767px) {
  .about-cover {
    padding-top: 112px;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .about-cover {
    padding-top: 140px;
  }
}
/* Wide screens: the photo on the right, the words on the left */
@media (min-width: 900px) {
  .about-cover {
    display: flex;
    align-items: center;
    min-height: 620px;
    padding-block: 132px 88px;
  }
  .about-cover-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: auto;
    max-width: 66%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  }
  .about-cover-inner {
    width: 100%;
  }
  .about-cover-inner > * {
    max-width: 560px;
  }
  /* Arabic reads from the right: the photo moves to the left, mirrored, so it never sits under the words */
  [dir='rtl'] .about-cover-photo {
    right: auto;
    left: 0;
    transform: scaleX(-1);
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .about-cover-inner > * {
    max-width: 500px;
  }
}

/* About: the shop's facts in the light-blue panel beside the shop photo, straight after the opening photo */
.about-facts {
  padding-block: 64px 16px;
}
@media (min-width: 900px) {
  .about-facts {
    padding-block: 96px 24px;
  }
}
.about-facts .hero-panel h2 {
  font-size: clamp(32px, 4vw, 48px);
  color: var(--heading-blue);
}
.about-facts .hero-highlights {
  margin-top: 22px;
}

/* ==========================================================================
 About: the shop photo and the shop video (owner, 2026-11-07)
 Both sit in the same frame: a light-blue mat with a fine blue edge and a soft blue-tinted shadow, matching the
 "Our shop at a glance" panel. The photo's caption card floats over the frame's lower edge; the portrait video keeps a
 narrow frame with its caption beside it on wide screens and below it on phones
 ========================================================================== */
.shop-showcase,
.shop-video {
  --frame-shadow:
    0 2px 6px rgba(27, 74, 130, 0.06), 0 18px 40px rgba(27, 74, 130, 0.12), 0 40px 80px rgba(16, 26, 41, 0.08);
}
.shop-showcase {
  position: relative;
  max-width: 860px; /* about one screen tall on a laptop, and never wider than the photo's own 954px */
  margin: 0 auto 64px;
}
.shop-showcase-frame,
.shop-video-frame {
  position: relative;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--panel-blue);
  box-shadow:
    inset 0 0 0 1px var(--panel-blue-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    var(--frame-shadow);
}
.shop-showcase-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 954 / 764;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 10px);
  background: var(--mist-2);
  box-shadow: 0 0 0 1px rgba(16, 26, 41, 0.08);
}
/* The caption card: the floating layer above the frame. It is small and only overlaps the frame's lower edge, so the
   whole photo stays in view (owner, 2026-11-07) */
.shop-showcase-caption {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 380px;
  margin: -14px 16px 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 0 0 1px var(--panel-blue-edge),
    0 10px 30px rgba(27, 74, 130, 0.16),
    0 2px 6px rgba(16, 26, 41, 0.06);
  backdrop-filter: blur(10px);
}
.shop-showcase-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(150deg, var(--blue-bright) 0%, var(--blue) 55%, var(--blue-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 14px rgba(42, 93, 154, 0.28);
}
.shop-showcase-icon svg {
  width: 18px;
  height: 18px;
}
.shop-showcase-caption small,
.shop-video figcaption small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--heading-blue-accent);
}
.shop-showcase-caption strong,
.shop-video figcaption strong {
  display: block;
  margin-top: 4px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--heading-blue);
}
.shop-showcase-caption strong + span,
.shop-video figcaption strong + span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* The photo's caption card is smaller than the video's caption */
.shop-showcase-caption small {
  font-size: 11px;
}
.shop-showcase-caption strong {
  font-size: clamp(21px, 2vw, 25px);
}
.shop-showcase-caption strong + span {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .shop-showcase {
    margin-bottom: 88px;
  }
  .shop-showcase-frame {
    padding: 12px;
  }
  .shop-showcase-frame img {
    border-radius: calc(var(--radius-lg) - 12px);
  }
  .shop-showcase-caption {
    margin: -18px 0 0 32px;
  }
  [dir='rtl'] .shop-showcase-caption {
    margin: -18px 32px 0 0;
  }
}

/* The shop video: a portrait clip, so the frame stays narrow */
.shop-video {
  display: grid;
  gap: 20px;
  justify-items: center;
  margin: 28px 0 0;
  text-align: center;
}
.shop-video-frame {
  width: min(100%, 260px);
}
.shop-video-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 478 / 850;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 10px);
  background: var(--carbon);
  box-shadow: 0 0 0 1px rgba(16, 26, 41, 0.08);
}
.shop-video-player:focus-visible {
  outline: 2px solid var(--heading-blue-accent);
  outline-offset: 3px;
}
.shop-video .video-play {
  width: 72px;
  height: 72px;
  color: var(--heading-blue);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 10px 30px rgba(8, 20, 40, 0.35),
    0 0 0 6px rgba(255, 255, 255, 0.28);
}
.shop-video .video-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.shop-video .video-play::after {
  border-color: rgba(27, 74, 130, 0.2);
  border-top-color: var(--heading-blue);
}
/* Once pressed, the browser's own controls take over; the button only stays while the clip loads */
.shop-video-frame.has-started .video-play {
  pointer-events: none;
}
.shop-video-frame.has-started:not(.is-loading) .video-play {
  opacity: 0;
}
.shop-video-time {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(11, 17, 25, 0.62);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-exit);
}
[dir='rtl'] .shop-video-time {
  right: auto;
  left: 22px;
}
.has-started .shop-video-time {
  opacity: 0;
}
.shop-video figcaption {
  max-width: 26em;
}
@media (min-width: 640px) {
  .shop-video {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    justify-items: start;
    text-align: start;
  }
  .shop-video-frame {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shop-video-time {
    transition: none;
  }
}

/* About on phones and tablets (owner, 2026-11-07, with a reference picture): the photo fills the top of the section
   with the car on the right, and the breadcrumb and a big title sit on its dark-red left side, directly opposite the
   car. The description and the WhatsApp button follow just below the photo */
@media (max-width: 899px) {
  .about-cover {
    --cover-top: 88px; /* the header with its row of links */
    --cover-photo-h: clamp(300px, 84vw, 420px);
    padding-top: 0;
  }
  .about-cover-photo {
    position: absolute;
    top: var(--cover-top);
    left: 0;
    width: 100%;
    max-width: none;
    height: var(--cover-photo-h);
    margin: 0;
    object-fit: cover;
    object-position: right center;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .about-cover-inner {
    padding-top: calc(var(--cover-top) + 26px);
  }
  .about-cover-inner::before {
    margin-bottom: 14px;
  }
  /* The title block takes the photo's height, so the words below start just under it */
  .about-cover-title {
    max-width: 55%;
    min-height: calc(var(--cover-photo-h) - 64px);
  }
  .about-cover h1 {
    margin-top: 12px;
    font-size: clamp(36px, 10vw, 56px);
    line-height: 1.02;
  }
  .about-cover h1.about-cover-name {
    gap: 12px;
    margin-top: 16px;
    font-size: clamp(48px, 13.4vw, 76px);
    line-height: 0.95;
  }
  .about-cover-name-sub {
    gap: 10px;
    font-size: clamp(11px, 3vw, 14px);
  }
  .about-cover h1.about-cover-name .about-cover-name-sub {
    letter-spacing: 0.26em !important;
  }
  .about-cover-name-sub::before,
  .about-cover-name-sub::after {
    width: 18px;
  }
  .about-cover-name-sub::after {
    margin-inline-start: -0.26em;
  }
  .about-cover .lead {
    margin-top: 0;
  }
  .about-cover .page-actions {
    margin-top: 22px;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .about-cover {
    --cover-top: 104px;
  }
}
/* Arabic reads from the right: the photo is mirrored on every screen, so the car is always opposite the words */
[dir='rtl'] .about-cover-photo {
  transform: scaleX(-1);
}

/* About after the opening photo (owner, 2026-11-07): a very light version of the owner's "dark gradient" picture,
   soft diagonal beams of teal-blue light and a faint grid of dots on an almost white floor */
.light-beams {
  background:
    radial-gradient(circle at 1px 1px, rgba(20, 70, 95, 0.12) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(
      118deg,
      transparent 8%,
      rgba(40, 150, 180, 0.08) 22%,
      rgba(40, 150, 180, 0.11) 28%,
      transparent 44%,
      transparent 56%,
      rgba(40, 150, 180, 0.07) 68%,
      transparent 82%
    ),
    radial-gradient(60% 50% at 0% 0%, rgba(40, 160, 190, 0.14), transparent 70%),
    linear-gradient(180deg, #f5f9fb 0%, #f8fafb 100%);
}