/* Fonts: Newsreader and Jost (SIL Open Font License), served from this site rather than Google Fonts so pages appear sooner.
   The files are trimmed to the weights used here (Newsreader 300–400, Jost 400–500) to keep them small. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("/fonts/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("/fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Colours and spacing live here so they are easy to change */
:root {
  --bg: #000;
  --bg-soft: #111;
  --line: #2a2a2a;
  --text: #f2f2f2;
  --muted: #a6a6a6;
  --accent: #d9b27c;
  --whatsapp: #25d366;
  --gap: 6px;
  --side: 16px;
  --font: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.7 var(--font); letter-spacing: .015em; font-variant-numeric: oldstyle-nums; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; letter-spacing: .005em; line-height: 1.2; margin: 0 0 .9em; }
h1, h2 { font-size: clamp(30px, 5vw, 46px); }
h3 { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
/* Buttons use a plain sans; everything else is the serif */
.more, .button { font-family: var(--sans); }
/* Small spaced capitals for labels ("eyebrows") above headings */
.eyebrow, .hero-eyebrow, .process-eyebrow { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #a6a6a6; }
p { margin: 0 0 1em; }

/* Header */
/* Slim bar: logo in the middle, menu button on the right (on every screen size) */
.site-header {
  --header-h: 72px;
  position: absolute; top: 0; left: 0; right: 0; z-index: 20; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--side);
}
/* Dark frosted glass: the photo behind shows through, heavily blurred.
   It sits on its own layer: blur on the header itself would trap the
   full-screen menu inside the bar. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(rgba(20, 28, 40, .62), rgba(20, 28, 40, .48));
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .25);
}
.brand { grid-column: 2; display: flex; align-items: center; text-decoration: none; }
/* Logo – custom drawn ABDULLAH (src/_includes/logo.njk) with a small "PHOTOGRAPHY" underneath */
.logo { display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--text); }
.logo-mark { display: block; width: 150px; height: auto; }
.logo-sub { margin-top: 7px; font-family: var(--sans); font-weight: 500; font-size: 7.5px; letter-spacing: .55em; margin-right: -.55em; text-transform: uppercase; color: #cfcfcf; }
@media (min-width: 900px) { .brand .logo-mark { width: 172px; } .brand .logo-sub { font-size: 8px; } }
.menu-toggle { grid-column: 3; justify-self: end; background: none; border: 0; padding: 10px; cursor: pointer; display: grid; gap: 6px; }
.menu-toggle span { display: block; width: 26px; height: 1.5px; background: var(--text); transition: transform .3s, opacity .3s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Full-screen menu, also frosted glass */
.site-nav {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(12, 16, 24, .82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.site-nav.is-open { opacity: 1; visibility: visible; }
.site-nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .25em; font-size: 16px; }
.site-nav a[aria-current="page"], .site-nav a:hover { color: var(--accent); }
@media (min-width: 900px) {
  .site-header { padding: 0 32px; }
  .site-nav a { font-size: 20px; }
}

/* Hero slideshow
   Wide screens: the photo fills the screen, but never taller than a 3:2 photo,
   so only a sliver is ever cropped.
   Phones and portrait tablets: the whole photo is shown uncropped at full width,
   with the heading underneath it. */
.hero { position: relative; background: var(--bg); }
.hero-media { position: relative; overflow: hidden; background: var(--bg-soft); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-caption h1 { font-size: clamp(32px, 5.6vw, 58px); margin: 0; }
.hero-caption .hero-eyebrow { margin: 0 0 14px; color: #e6e6e6; font-size: 12px; }
.hero-caption p { color: #ddd; margin: 0; }
.hero-dots { display: flex; gap: 10px; }
.hero-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid #fff; background: transparent; cursor: pointer; }
.hero-dots button.is-active { background: #fff; }
/* Animated "scroll" mouse: the little wheel slides down and fades, over and over */
.hero-down { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.hero-mouse { position: relative; width: 26px; height: 42px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 14px; }
.hero-wheel { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: scroll-wheel 1.8s ease-in-out infinite; }
.hero-down-label { font-size: 11px; letter-spacing: .35em; padding-left: .35em; text-transform: uppercase; }
@keyframes scroll-wheel {
  0% { opacity: 0; transform: translateY(0); }
  25% { opacity: 1; }
  75% { opacity: 0; transform: translateY(13px); }
  100% { opacity: 0; transform: translateY(13px); }
}
@media (prefers-reduced-motion: reduce) { .hero-wheel { animation: none; } }

@media (max-aspect-ratio: 1/1) {
  .hero { padding-top: 72px; }
  .hero-media { aspect-ratio: 3 / 2; }
  .hero-caption { padding: 22px var(--side) 0; }
  .hero-dots { padding: 16px var(--side) 0; }
  .hero-down { display: none; }
}

@media (min-aspect-ratio: 1/1) {
  /* Photo fills the whole screen behind the glass menu bar; any trimming comes off the bottom, never the top */
  .hero-media { height: 100vh; height: 100svh; min-height: 420px; }
  .hero-slide img { object-position: center top; }
  /* Darkens the bottom of bright photos so the white heading stays readable */
  .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 45%, transparent 70%); }
  .hero-caption, .hero-dots, .hero-down { position: absolute; z-index: 1; }
  .hero-caption { left: var(--side); right: var(--side); bottom: 128px; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
  .hero-dots { left: var(--side); bottom: 100px; }
  .hero-down { left: 50%; bottom: 26px; transform: translateX(-50%); }
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .hero-caption { left: 32px; bottom: 140px; }
  .hero-dots { left: 32px; bottom: 110px; }
}

/* Inner page banner */
.page-banner { height: 42vh; min-height: 260px; overflow: hidden; }
.page-banner img { width: 100%; height: 100%; object-fit: cover; }

/* Text sections */
.section { padding: 56px var(--side); }
.page-top { padding-top: 120px; }
.text-block { max-width: 820px; margin: 0 auto; text-align: center; }
.text-block p { color: #ddd; font-size: 17px; text-align: left; }
.text-block.cta p, .text-block .small { text-align: center; }
.split { display: grid; gap: 8px; max-width: 1200px; margin: 0 auto; }
.split p { color: #ddd; font-size: 17px; }
@media (min-width: 900px) {
  .section { padding: 72px 24px; }
  .page-top { padding-top: 160px; }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split h1 { text-align: center; }
}
/* Solid dark grey button, sentence case */
.more { display: inline-block; margin-top: 4px; padding: 15px 52px; background: #3d3d3d; color: #f2f2f2; font-size: 16px; font-weight: 400; letter-spacing: .04em; text-decoration: none; transition: background .3s; }
.more:hover { background: #575757; }
.center { text-align: center; margin: 56px 0 0; }

/* Quiet text: short, centred, lots of room around it */
.section.quiet { padding-top: 96px; padding-bottom: 96px; }
/* The last section on a page sits close to the footer */
main > .section:last-child { padding-bottom: 40px; }
.text-block.quiet { max-width: 620px; }
.text-block.quiet p { text-align: center; color: #d0d0d0; font-size: 18px; line-height: 1.75; }
.text-block.quiet.bio { max-width: 920px; text-align: center; }
.bio p.eyebrow { margin: 0 0 16px; font-size: 12px; line-height: 1.6; color: #a6a6a6; }
.bio h1 { margin-bottom: .8em; }
.bio p { margin-bottom: 1.4em; }
.bio .bio-cta { margin: 48px 0 0; }
.closing { padding-top: 120px; }
@media (min-width: 900px) {
  .section.quiet { padding-top: 140px; padding-bottom: 140px; }
  .page-top.quiet { padding-top: 200px; }
  .text-block.quiet p { font-size: 20px; }
}
.small { font-size: 13px; color: var(--muted); }

/* Buttons */
.button {
  display: inline-block; margin: 6px 4px; padding: 13px 26px; min-height: 44px;
  border: 1px solid var(--text); color: var(--text); text-decoration: none;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; transition: background .2s, color .2s;
}
.button:hover { background: var(--text); color: #000; }
.button-solid { background: var(--text); color: #000; }
.button-solid:hover { background: var(--accent); border-color: var(--accent); }

/* Photo grid */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); padding: 0 var(--gap); }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 32px; } }
.tile { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-soft); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; }
.tile:hover img { transform: scale(1.04); }
.tile.is-hidden { display: none; }
.tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; text-align: center;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
}

/* Filters */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 var(--side) 28px; }
.filters button {
  background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer; min-height: 40px;
  padding: 8px 18px; font: inherit; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}
.filters button.is-active, .filters button:hover { border-color: var(--text); color: var(--text); }

/* How It Works – glass cards with a light that travels around each rounded border */
@property --glow-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.process { max-width: 1400px; margin: 0 auto; padding: 72px var(--side); }
.process-eyebrow { margin: 0 0 14px; }
.process-title { margin: 0 0 18px; line-height: 1.15; }
.process-title { margin-bottom: 56px; font-size: clamp(30px, 4.4vw, 46px); }
@media (min-width: 1100px) { .process-title { margin-bottom: 80px; } }
.process-subtitle { margin: 0 0 48px; max-width: 640px; color: #9a9a9a; font-size: 16px; }

.process-steps { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.process-step { position: relative; }

.process-card {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column;
  padding: 32px 28px 30px; border-radius: 22px;
  background: linear-gradient(165deg, #191919 0%, #0e0e0e 55%, #0a0a0a 100%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px rgba(0,0,0,.55);
}
/* The travelling light, drawn only on the 1px border */
.process-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--glow-angle), transparent 0deg 250deg, rgba(217,178,124,.35) 290deg, #fff 330deg, rgba(217,178,124,.35) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: glow-travel 7s linear infinite; animation-delay: calc(var(--i) * -1.75s);
}
/* A soft blurred halo behind the card that follows the same light */
.process-glow {
  position: absolute; inset: 0; border-radius: 22px; pointer-events: none; opacity: .45; filter: blur(14px);
  background: conic-gradient(from var(--glow-angle), transparent 0deg 260deg, rgba(217,178,124,.55) 320deg, transparent 360deg);
  animation: glow-travel 7s linear infinite; animation-delay: calc(var(--i) * -1.75s);
}
@keyframes glow-travel { to { --glow-angle: 360deg; } }
/* Each card's light runs a quarter turn behind the one before */
.process-step { --i: 0; }
.process-step:nth-child(4n+2) { --i: 1; }
.process-step:nth-child(4n+3) { --i: 2; }
.process-step:nth-child(4n+4) { --i: 3; }

.process-num { font-size: 13px; letter-spacing: .2em; color: #6f6f6f; margin-bottom: 26px; }
.process-card h3 { margin: 0 0 16px; font-size: 13px; letter-spacing: .2em; }
.process-card p { margin: 0 0 32px; color: #b8b8b8; font-size: 17px; line-height: 1.7; }
.process-icon {
  width: 34px; height: 34px; margin-top: auto; fill: none; stroke: #8a8a8a;
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
.process-step:hover .process-icon { stroke: var(--accent); }

.process-tagline {
  margin: 56px 0 0; text-align: center; color: #b5b5b5;
  font-style: italic; font-size: clamp(22px, 3.6vw, 30px);
}

@media (min-width: 640px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .process { padding: 110px 48px 90px; }
  .process-subtitle { margin-bottom: 110px; font-size: 18px; }
  .process-steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  /* Thin line linking the cards */
  .process-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.06); }
  .process-card { min-height: 460px; padding: 56px 44px 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-card::before, .process-glow { animation: none; --glow-angle: 30deg; }
}

/* Contact: plain text links, nothing else */
.contact h1 { margin-bottom: 2.4em; }
.contact-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.contact-links li { display: grid; gap: 4px; }
.contact-links span { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.contact-links a { font-size: 19px; text-decoration: none; overflow-wrap: anywhere; border-bottom: 1px solid transparent; justify-self: center; transition: border-color .2s; }
.contact-links a:hover { border-bottom-color: currentColor; }
.text-block .contact-place { margin-top: 56px; text-align: center; color: var(--muted); font-size: 13px; }

/* Footer: same layout on phone and desktop, contact on the left, menu on the right */
.site-footer {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px 24px; text-align: left;
  margin: 24px 10px 10px; padding: 110px 24px 36px; font-size: 12px; border-radius: 10px; overflow: hidden;
  /* Marina photo kept dark and quiet behind the text, as a soft backdrop.
     It is added (.show-photo) only when the footer is close, so it doesn't slow down the top of the page */
  background: linear-gradient(rgba(10,10,10,.72), rgba(10,10,10,.86)) center 60% / cover no-repeat #141414;
}
.site-footer.show-photo { background-image: linear-gradient(rgba(10,10,10,.72), rgba(10,10,10,.86)), url("/assets/footer-marina.jpg"); }
.footer-contact { display: grid; gap: 8px; line-height: 1.4; justify-self: start; min-width: 0; overflow-wrap: anywhere; }
.footer-contact a, .footer-nav a, .footer-bottom a { text-decoration: none; color: #ccc; }
.footer-contact a:hover, .footer-nav a:hover { color: var(--text); }
.footer-nav { display: grid; gap: 10px; justify-self: end; text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; }
.footer-bottom { grid-column: 1 / -1; font-size: 10px; display: flex; gap: 16px; justify-content: space-between; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-logo { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: 12px; }
.footer-logo .logo { color: #7a7a7a; }
.footer-logo .logo-mark { width: 150px; }
.footer-logo .logo-sub { font-size: 8px; color: #6a6a6a; }
@media (min-width: 900px) {
  .site-footer { gap: 28px; padding: 120px 40px 32px; margin: 32px 16px 16px; font-size: 14px; }
  .footer-contact { gap: 2px; line-height: inherit; }
  .footer-nav { font-size: 12px; gap: 4px; }
  .footer-bottom { padding-top: 16px; }
  .footer-logo { padding-top: 4px; }
  .footer-bottom { font-size: 11px; }
  .footer-logo .logo-mark { width: 190px; }
  .footer-logo .logo-sub { font-size: 9px; }
}

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--whatsapp); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.45);
  transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.07); }
.whatsapp-float svg { width: 32px; height: 32px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94vw; max-height: 86vh; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; width: 56px; height: 56px; cursor: pointer; }
.lb-close { top: 8px; right: 8px; }
.lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 4px; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Photo protection: no long-press save menu on phones, no dragging or selecting photos */
img, .tile, .lightbox, .hero-slide, .page-banner {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}