/* ============================================================
   RESTORE CREATIVE — BRAND OVERRIDES + LAYOUT
   Loads after /shared/css/base.css and /shared/css/components.css.

   Restore Creative is the production arm of Restore. Register:
   light-canvas, photography-forward, more negative space than
   either sibling. The work is the product on this site, so the
   stylesheet keeps surface treatment quiet and lets the images
   do the loud talking.

   Ground palette (deliberately on Marketing's cooler #F9F8F3
   half of the family, not Consulting's warm ivory, and nothing
   near AI's near-black — this site sits between Marketing and
   Consulting in family position, closest to Marketing):

     --rcr-off-white  #F9F8F3  primary ground (hero, header,
                               full-bleed photo moments)
     --rcr-subtle     #F1F0EB  secondary ground, alternating
                               section rhythm so successive
                               sections breathe
     --rcr-ink        #0A0A0A  near-black type on light grounds

   Interactive accent is Electric #054FF0 (shared across every
   Restore site). Deep Navy and Teal from the parent palette are
   intentionally unused here — they muddy a photography-forward
   canvas that reads cleanest in neutral + a single accent.
   ============================================================ */

:root {
  --rcr-off-white: #F9F8F3;
  --rcr-subtle:    #F1F0EB;
  --rcr-ink:       #0A0A0A;
  --rcr-ink-70:    rgba(10, 10, 10, 0.70);
  --rcr-ink-55:    rgba(10, 10, 10, 0.55);
  --rcr-ink-15:    rgba(10, 10, 10, 0.15);
  --rcr-ink-08:    rgba(10, 10, 10, 0.08);
  --rcr-electric:  #054FF0;
  --rcr-electric-hover: #003fbf;
  --rcr-electric-active: #002d99;
  --site-header-height: 60px;
}
@media (min-width: 640px) {
  :root { --site-header-height: 68px; }
}

/* Shared base.css defaults html + body to the dark parent-brand
   ground. Override to the light off-white so short pages don't
   show dark bleed below the body/main. */
html, body {
  background: var(--rcr-off-white);
  color: var(--rcr-ink);
}

body {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
}

*, *::before, *::after { box-sizing: border-box; }

/* Shared cursor.js injects .cursor-tinted with Teal #00FFFF
   `!important`. On an off-white ground Teal is unreadable
   (~1.08:1); override to Electric (5.37:1 AA). Same selector +
   !important + later cascade order wins. */
.cursor-tinted { color: var(--rcr-electric) !important; }

/* ============================================================
   PERSISTENT SITE HEADER
   Frosted off-white band. Low-contrast bottom hairline so it
   reads as a stationary edge, not a drop shadow — photography-
   forward sites look cleanest without a hovering bar.
   ============================================================ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(249, 248, 243, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rcr-ink-08);
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  #site-header { background: rgba(249, 248, 243, 0.96); }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 3vw, 32px);
  max-width: 1400px;
  margin: 0 auto;
}

#brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rcr-ink);
  text-decoration: none;
}
#brand-lockup .brand-lockup__mark {
  height: 22px;
  width: auto;
  display: block;
  /* Invert white PNG → near-black ink. */
  filter: brightness(0) saturate(100%) invert(3%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(90%);
}
#brand-lockup .brand-lockup__text {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.22em;
  line-height: 1;
  white-space: nowrap;
  color: var(--rcr-ink);
}
@media (min-width: 640px) {
  #brand-lockup .brand-lockup__mark { height: 26px; }
  #brand-lockup .brand-lockup__text { font-size: 11px; }
}
@media (max-width: 479px) {
  #brand-lockup .brand-lockup__text { display: none; }
  #brand-lockup .brand-lockup__mark { height: 24px; }
}

/* Header CTA — matches the Electric pill treatment used across
   every Restore sister site. Do not restyle for this brand. */
#floating-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rcr-electric);
  color: var(--rcr-off-white);
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  border-radius: 9999px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.005em;
  box-shadow: 0 6px 20px rgba(5, 79, 240, 0.22), 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: background 200ms ease, transform 200ms ease;
  white-space: nowrap;
  text-decoration: none;
}
#floating-cta:hover { background: var(--rcr-electric-hover); transform: translateY(-1px); }
#floating-cta:active { background: var(--rcr-electric-active); }
@media (min-width: 640px) {
  #floating-cta { padding: 11px 22px; font-size: 14px; }
}
@media (max-width: 479px) {
  #floating-cta { padding: 7px 12px; font-size: 11px; }
}

/* ============================================================
   LAYOUT CONTAINERS
   One container token used by every section so section-to-
   section rhythm stays consistent at every breakpoint.
   ============================================================ */
.section {
  padding: clamp(80px, 10vw, 160px) clamp(20px, 4vw, 48px);
}
.section--tight {
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px);
}
.section--off-white { background: var(--rcr-off-white); }
.section--subtle    { background: var(--rcr-subtle); }
.container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.container--narrow {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

/* Smooth-scroll for the hero's two in-page anchor jumps.
   `scroll-padding-top` offsets the sticky header so anchored
   section titles don't land under it. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-height) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   TYPOGRAPHY
   Briller for the single hero wordmark. TT Norms Bold for
   display headlines. TT Norms Regular / Medium for body.
   Deliberately quieter weight-contrast than the sibling sites
   so copy never competes with a photo for the eye's first beat.
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.28em;
  color: var(--rcr-ink);
  margin: 0 0 clamp(28px, 3vw, 40px);
}
.eyebrow__rule {
  display: block;
  height: 1px;
  width: clamp(32px, 4vw, 56px);
  background: var(--rcr-ink-15);
}

.wordmark {
  font-family: 'Briller', 'TT Norms', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--rcr-ink);
  /* Briller is a wide display face — "CREATIVE" (8 chars) renders at
     roughly 1.22x font-size per character width. The two constraints
     this clamp has to satisfy:
       • At the 320 viewport the usable width is 280px (320 - 2x20px
         padding on #hero); a floor of 26px gives scrollWidth ≈ 280.
       • At the 1920 viewport the wordmark parent (.hero-content) is
         max-width 1200px; a cap of 120px keeps "CREATIVE" at
         120*8*1.22 ≈ 1171px, inside 1200px with air to spare.
     Scales linearly between via 9vw. */
  font-size: clamp(26px, 9vw, 120px);
  margin: 0;
  word-break: keep-all;
}

.display-h1 {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rcr-ink);
  line-height: 1.03;
  letter-spacing: -0.028em;
  font-size: clamp(30px, 5.2vw, 72px);
  margin: 0;
  max-width: 22ch;
}

.section-headline {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rcr-ink);
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 22ch;
}

.lede {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: var(--rcr-ink-70);
  font-size: clamp(1.05rem, 1.4vw, 1.3125rem);
  line-height: 1.55;
  max-width: 56ch;
  margin: clamp(20px, 2vw, 28px) 0 0;
}

.body-copy {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: var(--rcr-ink-70);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.65;
  max-width: 60ch;
}
.body-copy + .body-copy { margin-top: 1em; }

/* ============================================================
   BUTTONS / LINKS
   Primary pill = Electric fill, used sparingly for the single
   contact moment. Hero entry points are flat labelled links,
   not pill buttons, so the entry choices don't out-shout the
   photography below them.
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--rcr-electric);
  color: var(--rcr-off-white);
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 30px;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
  box-shadow: 0 10px 30px rgba(5, 79, 240, 0.20);
}
.btn-primary:hover { background: var(--rcr-electric-hover); transform: translateY(-1px); }
.btn-primary:active { background: var(--rcr-electric-active); }

/* Entry-point links in the hero. Underline builds in on hover.
   Chevron sits beside the label and nudges on hover. */
.entry-link {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rcr-ink);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  letter-spacing: -0.008em;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rcr-ink-15);
  transition: color 200ms ease, border-color 200ms ease;
}
.entry-link__chev {
  display: inline-block;
  transition: transform 220ms ease;
  color: var(--rcr-electric);
  font-weight: 700;
}
.entry-link:hover {
  color: var(--rcr-electric);
  border-bottom-color: var(--rcr-electric);
}
.entry-link:hover .entry-link__chev { transform: translateX(4px); }

/* ============================================================
   HERO
   Light off-white ground, generous top padding to clear the
   fixed header, single large headline, short subhead, two
   entry-point links stacked (narrow) or side-by-side (wide).
   ============================================================ */
#hero {
  padding: clamp(120px, 14vw, 180px) clamp(20px, 4vw, 48px) clamp(72px, 8vw, 112px);
  background: var(--rcr-off-white);
  min-height: 92svh;
  display: flex;
  align-items: center;
}
.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.hero-wordmark {
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.hero-lede {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 400;
  color: var(--rcr-ink-70);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  max-width: 60ch;
  margin: clamp(24px, 3vw, 36px) 0 0;
}
.hero-entries {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .hero-entries {
    flex-direction: row;
    gap: 48px;
    align-items: baseline;
    flex-wrap: wrap;
  }
}

/* ============================================================
   EARLY PORTFOLIO MOMENT — full-bleed single photo + caption
   First thing below the hero: the work. No eyebrow, no
   headline, no copy. The photo *is* the statement.
   ============================================================ */
.featured-photo {
  display: block;
  width: 100%;
  margin: 0;
  background: var(--rcr-off-white);
}
.featured-photo__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--rcr-subtle);
}
.featured-photo__frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.featured-photo__caption {
  display: block;
  padding: 20px clamp(20px, 4vw, 48px) 0;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rcr-ink-55);
  text-align: center;
}

/* ============================================================
   TWO-COLUMN SECTIONS (ONGOING / EVENTS)
   Headline + body in one column, supporting image in the
   other. Alternates image-left / image-right between sections.
   Below 900px the image stacks above the text.
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  /* Push image to the right column by giving the text (second in DOM order)
     a lower `order` than image — image renders in the second grid cell. */
  .split--reverse .split__text  { order: 1; }
  .split--reverse .split__image { order: 2; }
}
.split__image {
  margin: 0;
  width: 100%;
  background: var(--rcr-subtle);
  overflow: hidden;
}
.split__image img {
  display: block;
  width: 100%;
  height: auto;
}
.split__text .lede { margin-top: clamp(20px, 2vw, 28px); }
.split__text .section-headline + .body-copy { margin-top: clamp(20px, 2vw, 28px); }

.offer-points {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 3vw, 40px) 0 0;
  display: grid;
  gap: 10px;
}
.offer-points li {
  position: relative;
  padding-left: 22px;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  color: var(--rcr-ink);
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.5;
}
.offer-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--rcr-electric);
}

/* ============================================================
   GALLERY GRID
   Three-up on wide screens, two-up on tablet, one-up on
   phones. Real photos and placeholder tiles share the same
   aspect-ratio frame so the grid reads as a living portfolio.
   Placeholders are a deliberate quiet pattern — subtle border
   on the secondary ground, centered label — not an "empty
   box" look.
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--rcr-subtle);
  overflow: hidden;
}
.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile--placeholder {
  background: var(--rcr-off-white);
  border: 1px dashed var(--rcr-ink-15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.tile--placeholder .tile__mark {
  display: block;
  font-family: 'Briller', 'TT Norms', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rcr-ink-15);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}
.tile--placeholder .tile__label {
  display: block;
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rcr-ink-55);
}

/* ============================================================
   CTA BLOCK
   Single Electric headline + one pill button. Centered on
   the subtle ground. No form, no fields, no funnel — matches
   the "no-friction" decision locked in across the brand.
   ============================================================ */
.cta-block {
  text-align: center;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 48px);
}
.cta-block__headline {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  color: var(--rcr-ink);
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 auto;
  max-width: 20ch;
}
.cta-block__body {
  color: var(--rcr-ink-70);
  margin: clamp(20px, 2vw, 28px) auto 0;
  max-width: 48ch;
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
}
.cta-block__actions {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

/* ============================================================
   FOOTER
   Four-column pattern shared across every Restore site:
   lockup + tagline / Sister sites / Contact / Call to action.
   Collapses to two columns ≤ 900px and single-column ≤ 560px.
   ============================================================ */
#site-footer {
  background: var(--rcr-ink);
  color: var(--rcr-off-white);
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px) clamp(32px, 4vw, 48px);
}
.footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px);
}
@media (min-width: 560px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.footer-col h4 {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: rgba(249, 248, 243, 0.60);
  margin: 0 0 16px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer-col a {
  color: var(--rcr-off-white);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 200ms ease;
}
.footer-col a:hover { color: var(--rcr-electric); }
.footer-col p {
  margin: 0 0 10px;
  color: rgba(249, 248, 243, 0.70);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-brand__lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rcr-off-white);
  text-decoration: none;
}
.footer-brand__lockup img {
  height: 26px;
  width: auto;
  display: block;
}
.footer-brand__lockup span {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
}
.footer-brand__tag {
  font-family: 'TT Norms', system-ui, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: rgba(249, 248, 243, 0.55);
  margin: 0;
}
.footer-cta a.btn-primary {
  box-shadow: 0 10px 30px rgba(5, 79, 240, 0.35);
}
.footer-bottom {
  max-width: 1400px;
  margin: clamp(40px, 5vw, 72px) auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(249, 248, 243, 0.10);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(249, 248, 243, 0.55);
  letter-spacing: 0.04em;
}

/* ============================================================
   REVEAL PRE-STATES
   Piggybacks on the shared `animations-pending` class so the
   headline/body/image blocks don't flash their final state
   before scroll-reveals.js wires in the entrance tweens. The
   shared base.css already covers [data-reveal="headline"] /
   [data-reveal="body"]; this adds a photo-specific gate for
   the full-bleed and tile reveals used on this site.
   ============================================================ */
html.animations-pending [data-reveal="photo"] {
  opacity: 0;
  transform: translateY(16px);
}
html.animations-pending [data-reveal="tile-grid"] > * {
  opacity: 0;
  transform: translateY(24px);
}

/* Reduced-motion override: never animate chevrons or hover
   lifts for users who've asked the system to calm down. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, #floating-cta, .entry-link, .entry-link__chev {
    transition: none;
  }
}