/* artline.sa — company-site components on top of the shared design system (site.css). */

.eyebrow { display: block; margin-bottom: var(--s-3); font-size: var(--fs-14); font-weight: 600; color: var(--brand-strong); }

/* Header: link to the TV platform */
.nav-tv { gap: 8px; }
.nav-tv__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(239, 94, 29, .18); }

/* Hero photo (real work sample) */
.feature--photo { margin: 0; }
.feature--photo img { object-position: center 18%; }
.feature--photo .feature__scrim { background: linear-gradient(to top, rgba(10, 9, 8, .45), rgba(10, 9, 8, 0) 40%); }
.feature--wide { aspect-ratio: 21 / 8; display: grid; place-items: center; }
.feature--wide .feature__logo { width: 180px; margin: 0; }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.service { position: relative; padding: var(--s-7) var(--s-6) var(--s-6); border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
.service__num { position: absolute; top: var(--s-6); inset-inline-end: var(--s-6); font-family: var(--font-display); font-size: var(--fs-14); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.service__icon { width: 56px; height: 56px; border-radius: var(--r); display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-strong); margin-bottom: var(--s-6); transition: background-color var(--t), color var(--t); }
.service:hover .service__icon { background: var(--brand); color: #fff; }
.service__icon .ui-icon { width: 28px; height: 28px; }
.service h3 { font-size: var(--fs-20); font-weight: 600; }
.service p { margin-top: var(--s-2); color: var(--ink-2); line-height: 1.8; }

/* Why */
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.why li { padding-top: var(--s-5); border-top: 2px solid var(--brand); }
.why h3 { font-size: var(--fs-18); font-weight: 600; }
.why p { margin-top: var(--s-2); color: var(--ink-2); }

/* Contact + request form */
.contact-block { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.contact-stack { display: grid; gap: var(--s-3); margin-top: var(--s-7); }
.contact-block__form { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-xl); background: var(--bg-alt); border: 1px solid var(--line); }
.request-form { display: grid; gap: var(--s-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-field label { font-weight: 600; font-size: var(--fs-15); }
.form-field .muted { font-weight: 400; font-size: var(--fs-13); }
.req { color: var(--error); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg); font-size: var(--fs-16);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-field textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(239, 94, 29, .14); }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--error); }
.form-error { color: var(--error); font-weight: 600; font-size: var(--fs-13); }
.form-alert { padding: 12px 16px; border-radius: var(--r); background: var(--error-bg); border: 1px solid var(--error-line); color: #991b1b; font-weight: 500; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.form-consent { font-size: var(--fs-13); color: var(--muted); }
.form-consent a { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.form-success { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) 0; }
.form-success:focus { outline: none; }
.form-success__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); }
.form-success__icon svg { width: 26px; height: 26px; }
.form-success h3 { font-size: var(--fs-24); }
.form-success p { color: var(--ink-2); }
.form-success .btn { margin-top: var(--s-3); }

@media (max-width: 1024px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-block { grid-template-columns: 1fr; }
  .feature--photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .services, .why, .form-row { grid-template-columns: 1fr; }
  .feature--photo { aspect-ratio: 4 / 5; }
  .feature--wide { aspect-ratio: 16 / 10; }
  .form-actions .btn { width: 100%; }
}

/* The company headline is longer than the platform one; keep it to three lines on phones. */
.www .hero__title { font-size: clamp(2.125rem, 1.2rem + 3.4vw, 4.25rem); }

/* ---------- Cinematic hero (real production still, full bleed) ---------- */
.cine-hero { position: relative; isolation: isolate; min-height: min(92vh, 900px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.cine-hero__media, .cine-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.cine-hero__media img { object-fit: cover; object-position: 60% 50%; animation: kenburns 24s ease-in-out infinite alternate; }
[dir="rtl"] .cine-hero__media img { object-position: 40% 50%; }
.cine-hero__scrim { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, rgba(12, 8, 5, .88) 0%, rgba(12, 8, 5, .55) 38%, rgba(12, 8, 5, .1) 70%),
  linear-gradient(to var(--start), rgba(12, 8, 5, .55), rgba(12, 8, 5, 0) 60%); }
.cine-hero__inner { padding-block: 120px clamp(72px, 9vw, 120px); }
.cine-hero__title { margin-top: var(--s-6); max-width: 15ch; font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.cine-hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.cine-hero__title .line > span { display: inline-block; animation: line-up 1100ms cubic-bezier(.2, .8, .2, 1) both; }
.cine-hero__title .line:nth-child(2) > span { animation-delay: 140ms; }
@keyframes line-up { from { transform: translateY(105%); } }
.accent-light { color: var(--brand-light); }
.cine-hero__lead { margin-top: var(--s-6); max-width: 52ch; font-size: var(--fs-18); line-height: 1.8; color: rgba(255, 255, 255, .86); animation: rise 900ms 350ms var(--ease) both; }
.cine-hero .hero__actions { animation: rise 900ms 500ms var(--ease) both; }
.badge--glass { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; animation: rise 800ms var(--ease) both; }
.btn--glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--glass:hover { background: #fff; color: var(--ink); }
.btn--glass svg { fill: currentColor; }
.scroll-cue { position: absolute; bottom: 28px; inset-inline-end: var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255, 255, 255, .8); font-size: var(--fs-13); }
.scroll-cue i { width: 1px; height: 48px; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); transform-origin: top; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Work gallery (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: var(--s-4); }
.bento__item--wide { grid-column: span 2; }
.bento__item--tall { grid-row: span 2; }
.bento__btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--night-2); cursor: zoom-in; isolation: isolate; text-align: start; }
.bento__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--ease), filter 600ms var(--ease); }
.bento__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 8, 6, .75), rgba(10, 8, 6, 0) 55%); transition: opacity 400ms var(--ease); }
.bento__btn:hover img { transform: scale(1.06); }
.bento__label { position: absolute; inset-inline: 18px; bottom: 16px; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-16); transform: translateY(6px); opacity: .92; transition: transform 400ms var(--ease), opacity 400ms; }
.bento__btn:hover .bento__label { transform: none; opacity: 1; }
.bento__zoom { position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff; backdrop-filter: blur(8px); transform: scale(.7); opacity: 0; transition: transform 400ms var(--ease), opacity 300ms; }
.bento__btn:hover .bento__zoom, .bento__btn:focus-visible .bento__zoom { transform: none; opacity: 1; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1400px, 94vw); max-height: 90vh; overflow: visible; }
.lightbox::backdrop { background: rgba(10, 8, 6, .88); backdrop-filter: blur(4px); }
.lightbox[open] { animation: lb-in 380ms cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(.94); } }
.lightbox img { display: block; max-width: 100%; max-height: 90vh; border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox__close { position: absolute; top: -52px; inset-inline-end: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox__close:hover { background: #fff; color: var(--ink); }

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
}
@media (max-width: 560px) {
  .cine-hero { min-height: 88svh; }
  .cine-hero__inner { padding-bottom: 96px; }
  .scroll-cue { display: none; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .bento__item--wide { grid-column: span 2; }
  .bento__label { font-size: var(--fs-13); inset-inline: 12px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-hero__media img, .cine-hero__title .line > span, .cine-hero__lead, .cine-hero .hero__actions, .scroll-cue i { animation: none !important; }
}

/* Spacing rhythm (company site) */
.cine-hero__title { max-width: 20ch; line-height: 1.12; }
.cine-hero__lead { margin-top: var(--s-5); }
.cine-hero .hero__actions { margin-top: var(--s-7); }
.marquee + .section { padding-top: var(--section-y); }
.services { gap: var(--s-4); }
.service { padding: var(--s-6); }
.service__icon { margin-bottom: var(--s-5); }
.service p { line-height: 1.7; }
.why { gap: var(--s-5); }
.why li { padding-top: var(--s-4); }
.contact-stack { margin-top: var(--s-6); gap: 10px; }
.request-form { gap: var(--s-4); }
.form-row { gap: var(--s-4); }
.eyebrow { margin-bottom: var(--s-2); }

/* Identity 2.0 pattern behind the request-a-quote section */
#contact { position: relative; overflow: hidden; isolation: isolate; }
#contact::before { content: ""; position: absolute; z-index: -1; top: 0; inset-inline-end: 0; width: min(520px, 60vw); height: 420px; background: var(--pat-quarter); -webkit-mask: radial-gradient(farthest-side at 100% 0, #000 10%, transparent 100%); mask: radial-gradient(farthest-side at 100% 0, #000 10%, transparent 100%); pointer-events: none; }
[dir="rtl"] #contact::before { -webkit-mask-image: radial-gradient(farthest-side at 0 0, #000 10%, transparent 100%); mask-image: radial-gradient(farthest-side at 0 0, #000 10%, transparent 100%); }