/* MH Photo and Video
   Layout: teal ground throughout; one bold gesture (the logo's amber blades sweeping
   from the bottom-left) drives the intro and the hero; everything after stays quiet. */
:root {
  --teal: #158088;        /* brand ground */
  --teal-deep: #0c5158;   /* reading panels */
  --teal-ink: #06292d;    /* footer, lightbox, text on amber */
  --teal-line: rgba(255, 255, 255, .22);
  --amber: #faaf40;       /* the swoosh */
  --amber-hi: #ffc267;
  --white: #ffffff;
  --mist: rgba(255, 255, 255, .86);

  --f-body: "Alexandria", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
  --f-display: "El Messiri", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --display-style: normal;
  --display-weight: 700;
  --display-lh: 1.34;
  --display-track: 0;
  --w-soft: 400;          /* Arabic stays at regular weight: light strokes are hard to read on teal */

  --swoosh: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 227.8 340.6%22 fill=%22%23000%22%3E%3Cpath d=%22M191.62,0.38 L191.34,3.38 L191.09,6.38 L190.92,9.38 L190.83,12.38 L190.78,15.38 L190.76,18.38 L190.75,21.38 L190.74,24.38 L190.73,27.38 L190.70,30.37 L190.64,33.38 L190.53,36.38 L190.37,39.38 L190.17,42.38 L189.95,45.38 L189.70,48.38 L189.43,51.38 L189.14,54.38 L188.82,57.38 L188.48,60.38 L188.10,63.38 L187.69,66.38 L187.26,69.37 L186.80,72.38 L186.32,75.38 L185.82,78.38 L185.30,81.38 L184.76,84.38 L184.18,87.38 L183.58,90.38 L182.95,93.38 L182.29,96.38 L181.61,99.38 L180.91,102.38 L180.17,105.38 L179.42,108.38 L178.63,111.38 L177.83,114.38 L176.99,117.38 L176.13,120.38 L175.25,123.38 L174.33,126.38 L173.38,129.38 L172.40,132.38 L171.40,135.38 L170.37,138.38 L169.32,141.38 L168.22,144.38 L167.09,147.38 L165.93,150.38 L164.74,153.38 L163.52,156.38 L162.27,159.38 L161.00,162.38 L159.70,165.38 L158.38,168.38 L157.02,171.38 L155.65,174.38 L154.24,177.38 L152.78,180.38 L151.27,183.38 L149.71,186.38 L148.11,189.38 L146.48,192.38 L144.83,195.38 L143.14,198.38 L141.42,201.38 L139.66,204.38 L137.87,207.38 L136.04,210.38 L134.17,213.38 L132.26,216.38 L130.30,219.38 L128.30,222.38 L126.25,225.38 L124.15,228.38 L122.00,231.38 L119.82,234.38 L117.59,237.38 L115.33,240.38 L113.02,243.38 L110.66,246.37 L108.25,249.37 L105.79,252.37 L103.29,255.35 L100.75,258.31 L98.19,261.24 L95.59,264.13 L92.97,266.95 L90.34,269.72 L87.69,272.45 L85.02,275.15 L82.35,277.83 L79.67,280.49 L76.96,283.15 L74.22,285.80 L71.43,288.43 L68.59,291.04 L65.70,293.64 L62.78,296.20 L59.82,298.74 L56.85,301.24 L53.86,303.70 L50.87,306.10 L47.87,308.46 L44.87,310.77 L41.88,313.03 L38.88,315.25 L35.88,317.42 L32.88,319.56 L29.88,321.64 L26.88,323.67 L23.88,325.65 L20.88,327.59 L17.88,329.47 L14.88,331.32 L11.89,333.13 L8.90,334.90 L5.92,336.65 L2.96,338.39 L0.00,340.12 L2.92,339.21 L5.85,338.25 L8.80,337.21 L11.77,336.08 L14.76,334.86 L17.75,333.56 L20.75,332.18 L23.75,330.75 L26.75,329.25 L29.75,327.71 L32.75,326.13 L35.75,324.51 L38.75,322.85 L41.75,321.15 L44.75,319.42 L47.75,317.64 L50.75,315.83 L53.75,313.96 L56.75,312.05 L59.75,310.10 L62.75,308.12 L65.75,306.10 L68.75,304.04 L71.75,301.95 L74.75,299.81 L77.75,297.62 L80.75,295.38 L83.75,293.09 L86.75,290.75 L89.74,288.37 L92.73,285.95 L95.71,283.49 L98.67,280.99 L101.61,278.45 L104.51,275.88 L107.36,273.29 L110.17,270.66 L112.92,268.02 L115.64,265.37 L118.33,262.70 L121.01,260.02 L123.67,257.33 L126.32,254.60 L128.96,251.84 L131.58,249.02 L134.18,246.16 L136.76,243.25 L139.31,240.31 L141.83,237.34 L144.30,234.36 L146.73,231.37 L149.11,228.37 L151.43,225.37 L153.70,222.37 L155.92,219.38 L158.08,216.38 L160.19,213.38 L162.26,210.38 L164.29,207.38 L166.30,204.38 L168.27,201.38 L170.21,198.38 L172.11,195.38 L173.97,192.38 L175.78,189.38 L177.56,186.38 L179.30,183.38 L181.00,180.38 L182.65,177.38 L184.26,174.38 L185.84,171.38 L187.37,168.38 L188.88,165.38 L190.37,162.38 L191.84,159.37 L193.27,156.38 L194.68,153.38 L196.04,150.38 L197.38,147.38 L198.68,144.38 L199.94,141.38 L201.17,138.38 L202.37,135.38 L203.53,132.38 L204.67,129.38 L205.77,126.38 L206.85,123.38 L207.90,120.38 L208.91,117.38 L209.89,114.38 L210.84,111.38 L211.76,108.38 L212.66,105.38 L213.53,102.38 L214.37,99.38 L215.19,96.38 L215.97,93.38 L216.72,90.38 L217.45,87.38 L218.15,84.38 L218.83,81.38 L219.49,78.38 L220.12,75.38 L220.73,72.38 L221.30,69.38 L221.84,66.38 L222.36,63.38 L222.86,60.38 L223.34,57.38 L223.80,54.38 L224.23,51.38 L224.63,48.38 L225.00,45.38 L225.34,42.38 L225.65,39.38 L225.94,36.38 L226.21,33.38 L226.46,30.38 L226.70,27.38 L226.92,24.38 L227.13,21.38 L227.31,18.38 L227.43,15.38 L227.50,12.38 L227.50,9.38 L227.45,6.38 L227.35,3.38 L227.25,0.88 L224.25,0.58 L221.25,0.34 L218.25,0.17 L215.25,0.07 L212.25,0.02 L209.25,0.00 L206.25,0.01 L203.25,0.03 L200.25,0.08 L197.25,0.16 L194.25,0.26Z%22/%3E%3Cpath d=%22M5.62,333.88 L8.62,331.79 L11.62,329.63 L14.62,327.36 L17.60,324.98 L20.57,322.49 L23.52,319.93 L26.44,317.31 L29.34,314.65 L32.20,311.97 L35.02,309.27 L37.80,306.54 L40.53,303.77 L43.22,300.98 L45.88,298.17 L48.51,295.32 L51.11,292.44 L53.68,289.53 L56.20,286.58 L58.68,283.61 L61.10,280.62 L63.46,277.62 L65.76,274.62 L68.00,271.62 L70.18,268.62 L72.32,265.62 L74.40,262.62 L76.44,259.63 L78.44,256.62 L80.40,253.62 L82.32,250.63 L84.19,247.62 L86.01,244.62 L87.78,241.62 L89.49,238.63 L91.16,235.62 L92.78,232.62 L94.37,229.62 L95.92,226.63 L97.43,223.62 L98.90,220.62 L100.33,217.62 L101.72,214.63 L103.08,211.62 L104.39,208.63 L105.66,205.63 L106.90,202.62 L108.10,199.63 L109.26,196.62 L110.39,193.62 L111.49,190.62 L112.56,187.62 L113.58,184.62 L114.58,181.63 L115.54,178.62 L116.47,175.63 L117.36,172.62 L118.23,169.63 L119.06,166.62 L119.86,163.63 L120.63,160.62 L121.36,157.62 L122.05,154.62 L122.71,151.63 L123.35,148.63 L123.95,145.63 L124.53,142.63 L125.08,139.63 L125.59,136.62 L126.08,133.62 L126.53,130.63 L126.94,127.63 L127.32,124.62 L127.67,121.62 L128.00,118.63 L128.30,115.63 L128.59,112.63 L128.85,109.62 L129.09,106.63 L129.29,103.62 L129.43,100.63 L129.53,97.63 L129.59,94.63 L129.61,91.63 L129.62,88.62 L129.62,85.62 L129.62,82.62 L129.62,79.62 L129.61,76.62 L129.58,73.62 L129.51,70.62 L129.41,67.63 L129.24,64.63 L129.03,61.63 L128.75,58.64 L128.42,55.66 L128.01,52.70 L127.53,49.76 L126.99,46.84 L126.75,45.62 L124.57,48.50 L122.41,51.40 L120.28,54.32 L118.19,57.28 L116.11,60.26 L114.04,63.25 L111.99,66.25 L109.97,69.25 L108.01,72.25 L106.18,75.25 L104.54,78.25 L103.17,81.25 L102.15,84.25 L101.46,87.25 L101.06,90.25 L100.86,93.25 L100.78,96.25 L100.75,99.25 L100.75,102.25 L100.75,105.25 L100.75,108.25 L100.75,111.25 L100.73,114.25 L100.70,117.25 L100.64,120.25 L100.54,123.25 L100.38,126.25 L100.18,129.25 L99.95,132.25 L99.70,135.25 L99.42,138.25 L99.12,141.25 L98.78,144.25 L98.41,147.25 L98.00,150.25 L97.57,153.25 L97.11,156.25 L96.61,159.25 L96.09,162.25 L95.53,165.25 L94.95,168.25 L94.34,171.25 L93.70,174.25 L93.04,177.25 L92.33,180.25 L91.60,183.25 L90.82,186.25 L90.01,189.25 L89.16,192.25 L88.28,195.25 L87.37,198.25 L86.42,201.25 L85.45,204.25 L84.46,207.25 L83.45,210.25 L82.42,213.25 L81.35,216.25 L80.24,219.25 L79.08,222.25 L77.88,225.25 L76.64,228.25 L75.37,231.25 L74.07,234.25 L72.74,237.25 L71.37,240.25 L69.96,243.25 L68.51,246.25 L67.00,249.25 L65.45,252.25 L63.84,255.25 L62.19,258.25 L60.50,261.25 L58.76,264.25 L56.98,267.25 L55.17,270.25 L53.31,273.25 L51.40,276.25 L49.45,279.25 L47.45,282.25 L45.40,285.25 L43.29,288.25 L41.13,291.25 L38.92,294.25 L36.65,297.25 L34.33,300.25 L31.95,303.25 L29.51,306.25 L27.02,309.25 L24.46,312.25 L21.86,315.25 L19.22,318.25 L16.56,321.25 L13.91,324.25 L11.28,327.25 L8.70,330.25 L6.15,333.25Z%22/%3E%3C/svg%3E"); /* the blade shapes, inlined so the logo never depends on a second request */
  --gutter: clamp(18px, 4.5vw, 56px);
  --max: 1280px;
  --top-h: 72px;
  --ease: cubic-bezier(.7, 0, .2, 1);
  color-scheme: dark;
}
html[lang="ku"] {
  --f-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --display-style: italic;
  --display-weight: 500;
  --display-lh: 1.08;
  --display-track: -.015em;
  --w-soft: 300;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--teal);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
html[lang="ku"] body { line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
body.is-locked { overflow: hidden; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .7em 1.5em;
  border: 1.5px solid transparent; border-radius: 6px;
  font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn--amber { background: var(--amber); color: var(--teal-ink); }
.btn--amber:hover { background: var(--amber-hi); }
.btn--line { background: transparent; border-color: rgba(255, 255, 255, .6); color: var(--white); }
.btn--line:hover { background: var(--white); border-color: var(--white); color: var(--teal-ink); }

/* ---------- intro: the blades sweep the page open from the bottom-left ---------- */
.intro { position: fixed; inset: 0; z-index: 200; overflow: hidden; pointer-events: none; display: none; }
.intro.is-on { display: block; }
.intro__disc, .intro__ring {
  position: absolute; top: 0; right: 0;
  width: 300vmax; height: 300vmax; margin: -150vmax -150vmax 0 0;
  border-radius: 50%;
}
.intro__disc { background: var(--teal-ink); }
.intro__ring { border: 1.1vmax solid var(--amber); transform: scale(1.012); }
.intro__ring--2 { border-width: .5vmax; transform: scale(1.04); }
.intro.is-on .intro__disc { animation: introSweep 1s var(--ease) 1.15s both; }
.intro.is-on .intro__ring { animation: introSweepRing 1s var(--ease) 1.19s both; }
.intro.is-on .intro__ring--2 { animation: introSweepRing2 1s var(--ease) 1.25s both; }
@keyframes introSweep { to { transform: scale(0); } }
@keyframes introSweepRing { from { transform: scale(1.012); } to { transform: scale(0); } }
@keyframes introSweepRing2 { from { transform: scale(1.04); } to { transform: scale(0); } }

/* ---------- the logo's amber blades, as a layer of their own so they can move ---------- */
.mark { position: relative; display: block; }
.mark__swoosh {
  position: absolute; left: 32.82%; top: 1.38%; width: 31.76%; height: 78.73%;
  background: var(--amber); overflow: hidden;
  -webkit-mask: var(--swoosh) center / 100% 100% no-repeat;
  mask: var(--swoosh) center / 100% 100% no-repeat;
}
.mark__swoosh::after { /* a glint that travels up the blades now and then */
  content: ""; position: absolute; inset: -30% -80%;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 56%);
  transform: translate(-60%, 40%);
}
.mark.is-live .mark__swoosh::after { animation: swooshGlint 2.8s ease-in-out infinite; }
.mark.is-draw .mark__swoosh { animation: swooshDraw .9s var(--ease) both; }
@keyframes swooshDraw { from { clip-path: circle(0% at 0% 100%); } to { clip-path: circle(150% at 0% 100%); } }
@keyframes swooshGlint { 0% { transform: translate(-60%, 40%); } 62%, 100% { transform: translate(60%, -40%); } }

/* page open: the header logo sits large in the middle of the screen, then travels up to its place */
.mark.is-center { transform: translate(var(--ix, 0px), var(--iy, 0px)) scale(var(--is, 1)); }
.mark.is-center img { animation: markIn .45s ease both; }
.mark.is-fly { transition: transform 1s var(--ease); }
@keyframes markIn { from { opacity: 0; } to { opacity: 1; } }
.top > * { transition: opacity .5s; }
body.intro-top .top { z-index: 210; background: transparent; box-shadow: none; }
body.intro-top .top::before { opacity: 0; }
body.intro-hold .top > :not(.top__brand) { opacity: 0; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--top-h); padding-inline: var(--gutter);
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; gap: 24px;
  transition: background-color .3s, box-shadow .3s;
}
.top::before { /* keeps the logo readable over a photo before the bar turns solid */
  content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 41, 45, .62), rgba(6, 41, 45, 0));
  transition: opacity .3s;
}
.top.is-solid { background: var(--teal); box-shadow: 0 1px 0 var(--teal-line); }
.top.is-solid::before { opacity: 0; }
.top__brand { display: block; flex: none; }
.top__brand img { height: 40px; width: auto; }
.top__nav { display: none; margin-inline-start: auto; gap: clamp(16px, 2.2vw, 34px); }
.top__nav a, .foot__nav a {
  text-decoration: none; font-size: .95rem; font-weight: 400; padding-block: 6px;
  background: linear-gradient(var(--amber), var(--amber)) no-repeat 100% 100% / 0 2px;
  transition: background-size .25s;
}
html[dir="ltr"] .top__nav a, html[dir="ltr"] .foot__nav a { background-position: 0 100%; }
.top__nav a:hover, .foot__nav a:hover { background-size: 100% 2px; }
.top__tools { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.lang { display: flex; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 6px; overflow: hidden; }
.lang__btn { background: none; border: 0; padding: 7px 12px; font-size: .86rem; line-height: 1.3; font-family: "Alexandria", "Segoe UI", sans-serif; }
.lang__btn[aria-pressed="true"] { background: var(--white); color: var(--teal-ink); font-weight: 500; }
.top__menu { width: 46px; height: 46px; border: 0; background: none; display: grid; place-items: center; margin-inline-end: -10px; }
.top__menu-bars, .top__menu-bars::before {
  display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px;
  transition: transform .25s;
}
.top__menu-bars { transform: translateY(-4px); position: relative; }
.top__menu-bars::before { content: ""; position: absolute; inset: 0; transform: translateY(8px); }
.top__menu[aria-expanded="true"] .top__menu-bars { transform: rotate(45deg); }
.top__menu[aria-expanded="true"] .top__menu-bars::before { transform: rotate(-90deg); }

.drawer {
  position: fixed; inset: 0; z-index: 55; background: var(--teal-ink);
  padding: calc(var(--top-h) + 28px) var(--gutter) 32px;
  display: flex; flex-direction: column; gap: 28px; overflow-y: auto;
}
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  font-family: var(--f-display); font-style: var(--display-style); font-weight: var(--display-weight);
  font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1.5; text-decoration: none;
  border-bottom: 1px solid var(--teal-line); padding-block: 6px;
}
.drawer__cta { align-self: stretch; margin-top: auto; }

@media (min-width: 960px) {
  .top__nav { display: flex; }
  .top__tools { margin-inline-start: 0; }
  .top__menu { display: none; }
  .top__brand img { height: 46px; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero__stage { position: absolute; inset: 0; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; background: var(--teal-deep); }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero__slide.is-in { animation: bladeWipe 1.25s var(--ease) both; z-index: 2; }
.hero__blade {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  width: 300vmax; height: 300vmax; margin: 0 0 -150vmax -150vmax;
  border-radius: 50%; border: 1vmax solid var(--amber);
  transform: scale(0); pointer-events: none;
}
.hero__blade.is-in { animation: bladeRing 1.25s var(--ease) both; }
@keyframes bladeWipe { from { clip-path: circle(0vmax at 0 100%); } to { clip-path: circle(150vmax at 0 100%); } }
@keyframes bladeRing { from { transform: scale(0); } to { transform: scale(1); } }
.hero__stage::after { /* teal rises from the bottom so the copy sits on the brand colour */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to top, var(--teal) 0%, var(--teal) 24%, rgba(21, 128, 136, .82) 40%, rgba(21, 128, 136, 0) 66%);
}
.hero__next, .hero__swoosh { display: none; }
.hero__copy {
  position: relative; z-index: 5;
  padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px; max-width: 760px;
}
.hero__title {
  margin: 0; text-wrap: balance;
  font-family: var(--f-display); font-style: var(--display-style); font-weight: var(--display-weight);
  font-size: clamp(2.7rem, 12.5vw, 6.4rem); line-height: var(--display-lh); letter-spacing: var(--display-track);
}
html[lang="ku"] .hero__title { font-size: clamp(2.5rem, 11vw, 5.6rem); }
.hero__sub { margin: 0; max-width: 34em; font-weight: var(--w-soft); font-size: 1.02rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero__actions .btn { flex: 1 1 auto; }
.hero__ticks { display: flex; gap: 8px; margin-top: 14px; }
.hero__tick { width: 34px; height: 22px; padding: 0; border: 0; background: none; position: relative; }
.hero__tick::after { content: ""; position: absolute; inset: 10px 0; background: rgba(255, 255, 255, .4); border-radius: 2px; transition: background-color .3s; }
.hero__tick[aria-current="true"]::after { background: var(--amber); }

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(24px, 4vw, 72px);
    padding: calc(var(--top-h) + 28px) var(--gutter) 56px; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
    overflow: visible;
  }
  .hero__copy { grid-column: 1; grid-row: 1; padding: 0; gap: 20px; }
  .hero__sub { font-size: 1.15rem; }
  .hero__actions .btn { flex: none; }
  .hero__stage { position: relative; inset: auto; grid-column: 2; grid-row: 1; justify-self: center; width: min(100%, calc((100svh - var(--top-h) - 110px) * .75)); max-width: 540px; }
  .hero__stage::after { display: none; }
  .hero__frame {
    position: relative; inset: auto; aspect-ratio: 3 / 4; z-index: 2;
    border-radius: 50% 50% 4px 4px / 37.5% 37.5% 4px 4px; /* a wedding arch: exact half-circle on a 3:4 frame */
  }
  .hero__slide { object-position: 50% 30%; }
  .hero__next {
    display: block; position: absolute; z-index: 3; inset-inline-start: -19%; bottom: -5%;
    width: 36%; aspect-ratio: 3 / 4; padding: 0; overflow: hidden;
    border: 6px solid var(--teal); border-radius: 3px; background: var(--teal-deep);
  }
  .hero__next img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform .6s; }
  .hero__next:hover img { transform: scale(1.05); }
  .hero__swoosh {
    display: block; position: absolute; z-index: 1; height: 54%; width: auto; max-width: none;
    inset-inline-end: -15%; top: -3%;
  }
  html[dir="rtl"] .hero__swoosh { transform: scaleX(-1); }
}

/* ---------- sections ---------- */
.sec { padding-block: clamp(64px, 10vw, 128px); position: relative; scroll-margin-top: 24px; }
.sec__title {
  margin: 0 0 .5em; text-wrap: balance;
  font-family: var(--f-display); font-style: var(--display-style); font-weight: var(--display-weight);
  font-size: clamp(2.2rem, 6.4vw, 3.9rem); line-height: var(--display-lh); letter-spacing: var(--display-track);
}
.sec__lead { margin: -.4em 0 2em; max-width: 36em; font-weight: var(--w-soft); font-size: 1.08rem; }

/* services: three tall photographs, staggered like prints laid on a table */
.services { padding-bottom: clamp(48px, 7vw, 96px); }
.services__rail {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.services__rail::-webkit-scrollbar { display: none; }
.svc {
  position: relative; flex: 0 0 min(74vw, 340px); aspect-ratio: 3 / 4.25; scroll-snap-align: start;
  overflow: hidden; border: 0; padding: 0; border-radius: 3px; background: var(--teal-deep);
  text-align: start; color: var(--white); display: block;
}
.svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.svc:hover img { transform: scale(1.045); }
.svc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 41, 45, .92), rgba(6, 41, 45, .28) 46%, rgba(6, 41, 45, 0) 68%); }
.svc__txt { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 22px 20px; display: grid; gap: 4px; }
.svc__name { font-family: var(--f-display); font-style: var(--display-style); font-weight: var(--display-weight); font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.25; letter-spacing: var(--display-track); }
.svc__desc { font-size: .93rem; font-weight: var(--w-soft); line-height: 1.6; }
.svc__count { font-size: .84rem; color: var(--amber); margin-top: 6px; }
@media (min-width: 960px) {
  .services__rail {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2.2vw, 30px);
    max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; overflow: visible; padding-bottom: 64px;
  }
  .svc { flex: none; width: auto; }
  .svc:nth-child(3n + 2) { transform: translateY(64px); }
  .svc:nth-child(3n) { transform: translateY(24px); }
}

/* gallery */
.gallery__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.gallery__head .sec__title { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid rgba(255, 255, 255, .5); background: none; border-radius: 999px;
  padding: 8px 18px; font-size: .92rem; line-height: 1.3; min-height: 42px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--white); }
.chip[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--teal-ink); font-weight: 500; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; grid-auto-flow: dense; }
.tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; padding: 0; border: 0; border-radius: 2px; background: var(--teal-deep); cursor: zoom-in; display: block; }
.tile--wide { grid-column: span 2; aspect-ratio: 3 / 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .4s; }
.tile:hover img { transform: scale(1.04); }
.gallery__more { display: flex; justify-content: center; margin-top: 32px; }
.grid__empty { grid-column: 1 / -1; padding: 40px 0; font-weight: var(--w-soft); }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

/* offers */
.offers { background: var(--teal-deep); }
.offers__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.offer { background: var(--teal); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; max-width: 460px; }
.offer__img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.offer__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.offer__title { margin: 0; font-family: var(--f-display); font-style: var(--display-style); font-weight: var(--display-weight); font-size: 1.9rem; line-height: 1.3; letter-spacing: var(--display-track); }
.offer__desc { margin: 0; font-weight: var(--w-soft); white-space: pre-line; }
.offer__price { margin: 0; color: var(--amber); font-weight: 600; font-size: 1.3rem; }
.offer .btn { margin-top: auto; }

/* video */
.video__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.vid { margin: 0; display: grid; gap: 10px; }
.vid__box { position: relative; aspect-ratio: 16 / 9; background: var(--teal-ink); border-radius: 3px; overflow: hidden; border: 0; padding: 0; width: 100%; display: block; }
.vid__box img, .vid__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vid__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: var(--amber); color: var(--teal-ink); display: grid; place-items: center; transition: transform .2s; }
.vid__play .ic { width: 30px; height: 30px; }
.vid__box:hover .vid__play { transform: scale(1.08); }
.vid__title { font-size: 1rem; }
.video__channel { margin-top: 28px; }

/* about */
.about { background: var(--teal-deep); }
.about__in { display: grid; gap: 32px; align-items: center; }
.about__photo { margin: 0; aspect-ratio: 3 / 4; max-width: 440px; width: 100%; overflow: hidden; border-radius: 3px; background: var(--teal-ink); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__body { margin: 0; max-width: 34em; font-size: 1.1rem; font-weight: var(--w-soft); white-space: pre-line; }
@media (min-width: 860px) { .about__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); } }

/* team */
.team__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.member { margin: 0; display: grid; gap: 10px; align-content: start; }
.member__photo { aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: var(--teal-deep); display: grid; place-items: center; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__initial { font-family: var(--f-display); font-weight: 700; font-size: 3.4rem; color: rgba(255, 255, 255, .55); }
.member__name { display: block; font-weight: 600; font-size: 1.08rem; line-height: 1.4; }
.member__role { display: block; font-size: .92rem; font-weight: var(--w-soft); color: var(--amber); }
@media (min-width: 700px) { .team__list { grid-template-columns: repeat(auto-fill, minmax(190px, 230px)); gap: 36px 22px; } }

/* contact */
.contact { overflow: hidden; }
.contact__title {
  margin: 0 0 .35em; text-wrap: balance; max-width: 12em;
  font-family: var(--f-display); font-style: var(--display-style); font-weight: var(--display-weight);
  font-size: clamp(2.8rem, 9.5vw, 6.2rem); line-height: var(--display-lh); letter-spacing: var(--display-track);
}
.contact .sec__lead { margin-top: 0; }
.contact__ways { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.contact__ways .btn--amber { min-height: 64px; font-size: 1.08rem; padding-inline: 1.7em; flex: 1 1 100%; }
.way {
  flex: 1 1 200px; display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 9px; padding-inline-end: 20px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 6px;
  text-decoration: none; transition: background-color .2s, color .2s, border-color .2s;
}
.way__ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--teal-ink); display: grid; place-items: center; transition: background-color .2s; }
.way__ic .ic { width: 24px; height: 24px; }
.way__txt { display: grid; min-width: 0; line-height: 1.35; text-align: start; }
.way__name { font-weight: 500; }
.way__handle { font-size: .84rem; font-weight: var(--w-soft); overflow-wrap: anywhere; }
.way:hover { background: var(--white); border-color: var(--white); color: var(--teal-ink); }
.way:hover .way__ic { background: var(--amber); }
@media (min-width: 700px) {
  .contact__ways .btn--amber { flex: 0 0 auto; }
  .way { flex: 0 0 auto; }
}
.contact__addr { margin: 26px 0 0; display: flex; align-items: flex-start; gap: 10px; font-size: 1.02rem; max-width: 34em; }
.contact__addr .ic { margin-top: .32em; color: var(--amber); }
.contact__addr a { text-underline-offset: 4px; }
.contact__swoosh {
  position: absolute; z-index: 0; height: 118%; width: auto; max-width: none; top: -9%;
  inset-inline-end: -4%; opacity: .16; pointer-events: none;
}
html[dir="rtl"] .contact__swoosh { transform: scaleX(-1); }
.contact .wrap { position: relative; z-index: 1; }
@media (min-width: 960px) { .contact__swoosh { opacity: .9; inset-inline-end: 6%; height: 104%; top: -2%; } }

/* footer */
.foot { background: var(--teal-ink); padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px)); }
.foot__in { display: grid; gap: 26px; justify-items: start; }
.foot__logo { width: 150px; height: auto; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.foot__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: .84rem; font-weight: var(--w-soft); color: var(--mist); }
.foot__meta a { text-underline-offset: 3px; }
.foot__admin { opacity: .75; }

/* floating WhatsApp (phones) */
.fab {
  position: fixed; z-index: 50; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%; background: var(--amber); color: var(--teal-ink);
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(6, 41, 45, .4);
  transform: translateY(140%); transition: transform .35s var(--ease);
}
.fab .ic { width: 30px; height: 30px; }
.fab.is-on { transform: none; }
@media (min-width: 960px) { .fab { display: none; } }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 120; background: #041c1f; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.lb__fig { margin: 0; grid-column: 1 / -1; grid-row: 1; height: 100dvh; display: grid; place-items: center; padding: 56px 8px; touch-action: pan-y; }
.lb__fig img { max-width: 100%; max-height: calc(100dvh - 112px); width: auto; height: auto; object-fit: contain; border-radius: 2px; transition: opacity .25s; }
.lb__fig img.is-loading { opacity: .35; }
.lb__close, .lb__nav { border: 0; background: rgba(6, 41, 45, .55); color: var(--white); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.lb__close:hover, .lb__nav:hover { background: var(--amber); color: var(--teal-ink); }
.lb__close { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px; }
.lb__nav { grid-row: 1; margin-inline: 8px; }
.lb__nav--prev { grid-column: 1; }
.lb__nav--next { grid-column: 3; }
html[dir="ltr"] .lb__nav--prev .ic, html[dir="rtl"] .lb__nav--next .ic { transform: scaleX(-1); }
.lb__count { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); inset-inline: 0; margin: 0; text-align: center; font-size: .86rem; color: var(--mist); font-variant-numeric: tabular-nums; }

.demo-note {
  position: fixed; z-index: 90; inset: auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px; margin-inline: auto; max-width: 560px;
  background: var(--teal-ink); border: 1.5px solid var(--amber); border-radius: 6px; padding: 10px 14px; font-size: .86rem;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
}
.demo-note button { background: none; border: 0; text-decoration: underline; color: var(--amber); padding: 6px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}