/* NOUS Photography & Production Solutions — hub theme.
   Art-directed like a working photographer's site: editorial serif display
   type, dark cinematic hero, per-product "light study" scenes rendered in
   pure CSS (sun glow + lens flare / moon glow / starfield), film grain. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&display=swap');

:root {
  --accent: #2B2420;
  --accent-soft: rgba(43, 36, 32, 0.08);
  --accent-sun: #C68A3E;
  --accent-moon: #6F8FB8;
  --accent-star: #9CB2C4;
  --accent-aec: #5E8C7C;
  --font-display: 'Fraunces', Georgia, serif;
}

body[data-slug="photography"] h1,
body[data-slug="photography"] h2,
body[data-slug="photography"] .section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

body[data-slug="photography"] .pillar h3,
body[data-slug="photography"] .usecase h4 {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---------- Hero: cinematic, layered sky, film grain ---------- */
body[data-slug="photography"] .hero {
  padding: 128px 0 96px;
  background: #0B0A08;
}
body[data-slug="photography"] .hero .motif {
  opacity: 1;
  background:
    /* starfield */
    radial-gradient(2px 2px at 33.1% 10.0%, rgba(242,241,238,0.32), transparent 100%),
    radial-gradient(2px 2px at 80.8% 7.0%, rgba(242,241,238,0.33), transparent 100%),
    radial-gradient(1px 1px at 50.7% 4.0%, rgba(242,241,238,0.51), transparent 100%),
    radial-gradient(1px 1px at 25.1% 31.2%, rgba(242,241,238,0.71), transparent 100%),
    radial-gradient(2px 2px at 13.9% 13.8%, rgba(242,241,238,0.59), transparent 100%),
    radial-gradient(1px 1px at 7.9% 33.0%, rgba(242,241,238,0.79), transparent 100%),
    radial-gradient(1px 1px at 6.5% 47.5%, rgba(242,241,238,0.51), transparent 100%),
    radial-gradient(2px 2px at 53.9% 32.3%, rgba(242,241,238,0.71), transparent 100%),
    radial-gradient(2px 2px at 19.3% 32.8%, rgba(242,241,238,0.39), transparent 100%),
    radial-gradient(2px 2px at 11.4% 39.7%, rgba(242,241,238,0.33), transparent 100%),
    radial-gradient(1px 1px at 21.8% 38.1%, rgba(242,241,238,0.69), transparent 100%),
    radial-gradient(1px 1px at 46.7% 50.9%, rgba(242,241,238,0.45), transparent 100%),
    radial-gradient(1px 1px at 78.3% 39.0%, rgba(242,241,238,0.34), transparent 100%),
    radial-gradient(1px 1px at 30.8% 28.2%, rgba(242,241,238,0.66), transparent 100%),
    radial-gradient(1px 1px at 29.6% 53.9%, rgba(242,241,238,0.56), transparent 100%),
    radial-gradient(1px 1px at 17.8% 20.1%, rgba(242,241,238,0.51), transparent 100%),
    radial-gradient(2px 2px at 94.4% 6.1%, rgba(242,241,238,0.59), transparent 100%),
    radial-gradient(2px 2px at 86.0% 18.6%, rgba(242,241,238,0.48), transparent 100%),
    radial-gradient(1px 1px at 49.7% 44.2%, rgba(242,241,238,0.72), transparent 100%),
    radial-gradient(2px 2px at 92.7% 27.1%, rgba(242,241,238,0.33), transparent 100%),
    radial-gradient(2px 2px at 72.2% 18.4%, rgba(242,241,238,0.8), transparent 100%),
    radial-gradient(1px 1px at 80.9% 17.1%, rgba(242,241,238,0.74), transparent 100%),
    /* moon glow, left */
    radial-gradient(circle at 12% 28%, rgba(111,143,184,0.30), transparent 34%),
    /* sun glow, right, warm */
    radial-gradient(circle at 88% 62%, rgba(198,138,62,0.28), transparent 38%),
    /* base night gradient */
    linear-gradient(180deg, #0B0A08 0%, #14110D 60%, #1A140F 100%);
  background-repeat: no-repeat;
}
body[data-slug="photography"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body[data-slug="photography"] .hero .wrap { position: relative; z-index: 2; }
body[data-slug="photography"] .hero .kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(242,241,238,0.65);
  font-family: var(--font-body);
}
body[data-slug="photography"] .hero .kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent-sun);
}
body[data-slug="photography"] .hero h1 {
  font-size: 54px;
  line-height: 1.12;
  max-width: 820px;
  font-style: normal;
}
body[data-slug="photography"] .hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-sun);
}
body[data-slug="photography"] .hero .pitch { font-size: 18px; max-width: 640px; }
body[data-slug="photography"] .hero .btn-primary { background: var(--accent-sun); color: #0B0A08; }
body[data-slug="photography"] .hero .btn-ghost { border-color: rgba(242,241,238,0.3); }

/* ---------- Trust bar ---------- */
body[data-slug="photography"] .trustbar { background: #16130F; border-bottom: 1px solid rgba(242,241,238,0.06); color: rgba(242,241,238,0.6); }
body[data-slug="photography"] .trustbar .wrap { color: rgba(242,241,238,0.6); }
body[data-slug="photography"] .trustbar b { color: #F2F1EE; }

/* ---------- Tool gallery: three "light study" scenes ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20,17,13,0.14); }
.tool-card .scene {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0B0A08;
}
.tool-card .scene .exposure {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(242,241,238,0.65);
  z-index: 2;
}
.tool-card .scene .frame-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(242,241,238,0.55);
  z-index: 2;
}
.tool-card .scene .fc-tl { top: 10px; left: 10px; border-top: 1.5px solid; border-left: 1.5px solid; }
.tool-card .scene .fc-br { bottom: 10px; right: 10px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

.tool-card .scene-sun {
  background:
    radial-gradient(1.5px 1.5px at 15% 68%, rgba(255,255,255,0.55), transparent 100%),
    radial-gradient(80px 80px at 74% 30%, rgba(255,231,180,0.95), transparent 70%),
    radial-gradient(circle at 74% 30%, #F4D9A0 0%, #E7B25E 10%, transparent 11%),
    radial-gradient(6px 6px at 62% 42%, rgba(244,217,160,0.55), transparent 100%),
    radial-gradient(4px 4px at 53% 51%, rgba(244,217,160,0.45), transparent 100%),
    radial-gradient(3px 3px at 45% 59%, rgba(244,217,160,0.4), transparent 100%),
    linear-gradient(180deg, #7A4E2C 0%, #A9713C 42%, #C68A3E 52%, #4B3220 53%, #1C140D 100%);
}
.tool-card .scene-moon {
  background:
    radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,0.7), transparent 100%),
    radial-gradient(1px 1px at 30% 12%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(2px 2px at 70% 15%, rgba(255,255,255,0.6), transparent 100%),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.7), transparent 100%),
    radial-gradient(1px 1px at 55% 8%, rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(1px 1px at 20% 45%, rgba(255,255,255,0.45), transparent 100%),
    radial-gradient(1px 1px at 92% 55%, rgba(255,255,255,0.55), transparent 100%),
    radial-gradient(60px 60px at 68% 38%, rgba(214,225,240,0.75), transparent 70%),
    radial-gradient(circle at 68% 38%, #EDEAE0 0%, #D7DCE4 22%, transparent 23%),
    linear-gradient(180deg, #0E1420 0%, #16233A 55%, #1B2C46 100%);
}
.tool-card .scene-star {
  background:
    radial-gradient(1px 1px at 63.4% 4.4%, rgba(255,255,255,0.55), transparent 100%),
    radial-gradient(1px 1px at 15.4% 11.8%, rgba(255,255,255,0.75), transparent 100%),
    radial-gradient(1px 1px at 5.1% 11.0%, rgba(255,255,255,0.7), transparent 100%),
    radial-gradient(2px 2px at 4.5% 21.1%, rgba(255,255,255,0.53), transparent 100%),
    radial-gradient(1px 1px at 58.6% 79.7%, rgba(255,255,255,0.86), transparent 100%),
    radial-gradient(1px 1px at 17.3% 42.6%, rgba(255,255,255,0.49), transparent 100%),
    radial-gradient(1px 1px at 93.9% 34.3%, rgba(255,255,255,0.63), transparent 100%),
    radial-gradient(1px 1px at 36.5% 35.0%, rgba(255,255,255,0.88), transparent 100%),
    radial-gradient(2px 2px at 72.1% 53.5%, rgba(255,255,255,0.45), transparent 100%),
    radial-gradient(1px 1px at 30.1% 62.3%, rgba(255,255,255,0.75), transparent 100%),
    radial-gradient(1px 1px at 69.6% 6.4%, rgba(255,255,255,0.86), transparent 100%),
    radial-gradient(1px 1px at 96.6% 84.1%, rgba(255,255,255,0.63), transparent 100%),
    radial-gradient(1px 1px at 45.5% 82.1%, rgba(255,255,255,0.62), transparent 100%),
    radial-gradient(1px 1px at 22.1% 27.6%, rgba(255,255,255,0.77), transparent 100%),
    radial-gradient(1px 1px at 18.4% 72.0%, rgba(255,255,255,0.68), transparent 100%),
    radial-gradient(1px 1px at 27.9% 90.8%, rgba(255,255,255,0.81), transparent 100%),
    radial-gradient(1px 1px at 82.9% 76.5%, rgba(255,255,255,0.89), transparent 100%),
    radial-gradient(1px 1px at 79.3% 40.5%, rgba(255,255,255,0.53), transparent 100%),
    radial-gradient(1px 1px at 92.5% 86.1%, rgba(255,255,255,0.53), transparent 100%),
    radial-gradient(2px 2px at 49.9% 86.9%, rgba(255,255,255,0.49), transparent 100%),
    radial-gradient(1px 1px at 15.4% 73.5%, rgba(255,255,255,0.85), transparent 100%),
    radial-gradient(1px 1px at 43.1% 58.0%, rgba(255,255,255,0.53), transparent 100%),
    radial-gradient(1px 1px at 97.8% 50.9%, rgba(255,255,255,0.85), transparent 100%),
    radial-gradient(1px 1px at 84.7% 16.7%, rgba(255,255,255,0.88), transparent 100%),
    radial-gradient(2px 2px at 42.5% 8.1%, rgba(255,255,255,0.76), transparent 100%),
    radial-gradient(1px 1px at 46.9% 26.1%, rgba(255,255,255,0.81), transparent 100%),
    radial-gradient(1px 1px at 13.0% 86.9%, rgba(255,255,255,0.86), transparent 100%),
    radial-gradient(1px 1px at 34.7% 30.2%, rgba(255,255,255,0.67), transparent 100%),
    radial-gradient(1px 1px at 93.6% 86.1%, rgba(255,255,255,0.98), transparent 100%),
    radial-gradient(1px 1px at 75.1% 50.7%, rgba(255,255,255,0.92), transparent 100%),
    radial-gradient(1px 1px at 30.7% 63.3%, rgba(255,255,255,0.49), transparent 100%),
    radial-gradient(1px 1px at 75.2% 53.8%, rgba(255,255,255,0.76), transparent 100%),
    radial-gradient(1px 1px at 48.9% 12.7%, rgba(255,255,255,0.93), transparent 100%),
    radial-gradient(1px 1px at 81.8% 31.5%, rgba(255,255,255,0.54), transparent 100%),
    radial-gradient(160px 90px at 50% 60%, rgba(140,150,190,0.10), transparent 70%),
    linear-gradient(180deg, #05070C 0%, #0A0E18 100%);
}
.tool-card .scene-aec {
  background:
    /* daylight wash from upper-right, as if sun on a facade */
    radial-gradient(120px 90px at 82% 8%, rgba(232,238,224,0.45), transparent 70%),
    /* window mullion grid, like a curtain-wall facade elevation */
    repeating-linear-gradient(90deg, rgba(232,238,224,0.16) 0 1.5px, transparent 1.5px 17%),
    repeating-linear-gradient(0deg, rgba(232,238,224,0.14) 0 1.5px, transparent 1.5px 20%),
    linear-gradient(180deg, #17241E 0%, #1E2E26 45%, #263A2F 62%, #0F1712 100%);
}

.tool-card .caption {
  padding: 20px 22px 24px;
  position: relative;
}
.tool-card .caption .dot { display: none; }
.tool-card .caption h3 { font-family: var(--font-display); font-size: 21px; margin-bottom: 8px; }
.tool-card .caption p { font-size: 13.5px; margin: 0 0 14px; }
.tool-card .caption .verbs-count {
  font-size: 11.5px;
  color: var(--card-accent, var(--accent));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  display: block;
}

/* ---------- Pillars: editorial two-up with a rule accent ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar {
  background: #fff;
  border-top: 2px solid var(--accent-sun);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 30px 28px;
}
.pillar .tag { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-sun); margin-bottom: 10px; display: block; }
.pillar h3 { font-size: 22px; margin-bottom: 12px; }
.pillar p { margin: 0 0 10px; }
.pillar p:last-child { margin-bottom: 0; }
.pillar code { background: var(--panel); }