:root{
  --bg:#ffffff;
  --text:#0a0a0a;
  --text-soft:#4a4a4a;
  --card:#ffffff;
  --edge:0; 
  --shadow: 0 8px 24px rgba(0,0,0,0.06);
  --maxw: 1100px;
  --gap: 28px;
  --hero-w: 75vw;              
  --hero-h: min(86vh, 900px);  

  /* layout */
  --header-h: 0px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 16px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: var(--bg);

  /* native snap between full sections */
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }


h2, h3 {
  font-family: "Barlow Semi Condensed", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.2px;
}


.site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px;
  border-top: 1px solid rgba(0,0,0,0.06);

  display: flex;
  align-items: center;
  justify-content: space-between; /* left ↔ right */
  gap: 16px;
}

/* Left text stays simple */
.footer-left { white-space: nowrap; }

/* Right-side brand link */
.cf-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* Industrial / modern, bold */
.cf-powered {
  font-family: "Barlow Semi Condensed", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Keep logo crisp but compact */
.cf-logo {
  display: block;
  height: 22px;        /* tweak if needed */
  width: auto;
  object-fit: contain;
}

/* If space gets tight on small screens, let text wrap but keep logo visible */
@media (max-width: 420px) {
  .site-footer { flex-wrap: wrap; }
  .cf-brand { order: 2; }
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }
.lead { font-size: 1.125rem; color: var(--text-soft); }
.stack-lg > * + * { margin-top: 24px; }
.stack-md > * + * { margin-top: 16px; }

.card {
  background: var(--card);
  border-radius: var(--edge);
  box-shadow: var(--shadow);
  padding: 28px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.prose p { margin: 0 0 1em; }
.prose .muted, .muted { color: var(--text-soft); }

/* === Fullpage snap sections === */
.snap-section {
  /* keep snaps perfect under sticky header */
  scroll-margin-top: var(--header-h);
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-block: 24px;
}

/* First section: exact-fit below sticky header, no hanging */
.snap-section.hero {
  min-height: calc(100svh - var(--header-h));
  padding-block: 0;
}

.site-footer { scroll-snap-align: none; }

/* === Hero with right-side translucent pane === */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden; /* prevent image spill */
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill without distortion */
}
/* === New hero layout: 75vw image centered, right-side gray ribbon === */
.hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: visible; /* let the frame sit naturally with white gutters */
}

/* The frame that constrains the image to 75% viewport width */
.hero-frame {
  position: relative;
  width: 75vw;          /* 3/4 of the screen width */
  height: min(86vh, 900px);
  margin: 0 auto;       /* centers the whole block */
}

/* Image fills the frame */
.hero-frame .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     
}

/* Right-side ribbon (2/5 of the image width), full height */
.hero-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;                             
  background: rgba(240, 240, 240, 0.92); 
  color: var(--text);
}

/* Tablet: give the ribbon more guaranteed room */
@media (max-width: 900px){
  .hero-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 60%;                              
    background: rgba(240, 240, 240, 0.92); 
    color: var(--text);
  }
}

/* Phone: make ribbon span the full image width (no chance of overflow) */
@media (max-width: 640px){
  .hero-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 60%;                              
    background: rgba(240, 240, 240, 0.92); 
    color: var(--text);
  }
}

/* Typography in Cinzel */
.hero-title,
.hero-subtitle {
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  margin: 0;
  text-align: right;
  font-family: "Cinzel", serif;
  letter-spacing: 0.2px;
  color: var(--text);
}

/* Title at 2/5 down (40%), bold */
.hero-title {
  top: 40%;
  transform: translateY(-50%);
  font-weight: 500;  /* bold */
  font-size: clamp(2rem, 3.8vw + 0.2rem, 3.2rem);
  line-height: 1.05;
}

/* Subtitle at 3/5 down (80%), regular */
.hero-subtitle {
  top: 60%;
  transform: translateY(-50%);
  font-weight: 400;  /* regular */
  font-size: clamp(1.2rem, 1.6vw + 0.4rem, 1.8rem);
  line-height: 1.15;
}


.hero-phone { margin: 0; font-family: "Inter", sans-serif; }
.phone { color: #000000; text-decoration: underline; text-underline-offset: 3px; }

/* Contact summary */
.contact-summary { display: grid; gap: 8px; }
.spacer-line { height: 12px; }

/* Contact section: 2-column layout with logo on the right */
.contact-row {
  display: grid;
  gap: 24px;
  align-items: center;
}

/* Stack on small screens, two columns on medium+ */
@media (min-width: 768px) {
  .contact-row {
    grid-template-columns: 1fr minmax(200px, 320px);
  }
  .contact-left { text-align: left; }
  /* If any residual .center classes remain inside contact-left, force left-align */
  .contact-left .center { text-align: left; }
  .contact-logo { justify-self: end; }
}

.contact-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 320px;  
  filter: none;       
}

/* Contact typography tweaks */
.contact-left .lead { margin: 0.2em 0; }
.contact-name { margin-bottom: 0.15em; }                /* tiny gap below name */
.contact-tagline { margin-top: 0; font-style: italic; } /* sits right under name */

/* One full line gap before labeled contact lines */
.contact-details { margin-top: 1em;
  font-family: "Cinzel", serif; }

/* No gap between Email and Phone lines */
.contact-line { margin: 0; }
.contact-line + .contact-line { margin-top: 0; }


/* === Fade/slide reveal animations === */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Forms (kept minimal) */
.form { display: grid; gap: 14px; max-width: 640px; }
.form label { display: grid; gap: 6px; }
.form input, .form textarea {
  border: 1px solid rgba(0,0,0,0.08);
  padding: 12px 14px; border-radius: var(--edge); background: #fff;
}
.form button {
  appearance: none; border: 0; padding: 12px 16px;
  background: #f2f2f2; border-radius: var(--edge); cursor: pointer;
}

/* === Portfolio grid & sliders === */
.portfolio-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.tile.card { padding: 0; display: grid; grid-template-rows: auto 1fr; }
.tile.card figcaption {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-family: "Barlow Semi Condensed", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.2px;
}

.slider { position: relative; overflow: hidden; }
.slider-viewport { position: relative; height: clamp(180px, 26vw, 320px); }
.slider-viewport img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.02);
  transition: opacity 400ms ease, transform 400ms ease; will-change: opacity, transform;
}
.slider-viewport img.active { opacity: 1; transform: scale(1); }

.slider .slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); cursor: pointer;
  opacity: 0; transition: opacity 160ms ease;
}
.slider .slider-arrow.prev { left: 8px; }
.slider .slider-arrow.next { right: 8px; }
.slider:hover .slider-arrow, .slider:focus-within .slider-arrow { opacity: 1; }

/* Only the visible slide should receive pointer events */
.slider-viewport img { pointer-events: none; z-index: 0; }
.slider-viewport img.active { pointer-events: auto; z-index: 2; }

/* === Lightbox (click-to-expand portfolio page) === */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  animation: lb-fade 160ms ease forwards;
}

.lightbox-img {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;                 /* subtle white edge to feel crisp */
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  border-radius: 0;                  /* 90° corners per spec */
  animation: lb-zoom 180ms ease forwards;
  cursor: zoom-out;
}

@keyframes lb-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes lb-zoom {
  from { transform: scale(0.975); opacity: 0.6; }
  to   { transform: scale(1);     opacity: 1;   }
}

/* === Lightbox (click-to-expand) + arrows === */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr; place-items: center; gap: 0;
}

.lightbox-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.82);
  animation: lb-fade 160ms ease forwards;
}

.lightbox-img {
  position: relative; z-index: 1;
  max-width: min(92vw, 1400px); max-height: 92vh;
  object-fit: contain; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  border-radius: 0; animation: lb-zoom 180ms ease forwards;
  cursor: zoom-out;
}

/* Lightbox arrows */
.lightbox-arrow {
  position: relative; z-index: 2;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  cursor: pointer; opacity: 0.9; transition: transform 120ms ease, opacity 120ms ease;
}
.lightbox-arrow:hover { opacity: 1; transform: scale(1.02); }
.lightbox-arrow.prev { justify-self: end; margin-right: 12px; }
.lightbox-arrow.next { justify-self: start; margin-left: 12px; }

@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-zoom { from { transform: scale(0.975); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }


/* Stack footer on small screens: copyright on top, CoraForge below */
@media (max-width: 520px) {
  .site-footer {
    flex-direction: column;
    align-items: flex-start;   /* left align both rows */
    justify-content: flex-start; /* override the desktop space-between */
    gap: 6px;                  /* tighter vertical rhythm */
  }
  .cf-brand {
    order: 2;                  /* ensure it appears below */
    margin-top: 4px;           /* small breathing room */
  }
}

/* === Homepage hero gallery (large slider) === */
.hero-gallery {
  display: block;
  width: 100%;
}

/* Homepage hero gallery should match hero banner frame */
.hero-gallery .slider-viewport {
  width: var(--hero-w);
  height: var(--hero-h);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}


/* Only active slide clickable (prevents wrong image opening) */
.slider-viewport img { pointer-events: none; z-index: 0; }
.slider-viewport img.active { pointer-events: auto; z-index: 2; }

/* === Slider images: fit entire image (no crop) === */
.slider-viewport {
  position: relative;
  overflow: hidden;
}

/* Stack all slides, but only the active one is visible & clickable */
.slider-viewport img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* Key lines: keep the whole image in frame */
  object-fit: contain;
  object-position: center;

  /* Clean presentation */
  background: #fff;             /* gives classy “letterbox” on mismatch */
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;          /* prevent clicks on hidden slides */
  z-index: 0;
}

.slider-viewport img.active {
  opacity: 1;
  pointer-events: auto;          /* only active slide is clickable */
  z-index: 2;
}


/* === Portfolio video section === */
.portfolio-video-section {
  padding-block: 28px;
}

.video-frame {
  padding: 0; /* card chrome, but no inner padding around the video */
  overflow: hidden;
}

.video-el {
  display: block;
  width: auto;
  height: auto;
  max-width: min(96vw, 1400px);
  max-height: 78vh;
  object-fit: contain;
  object-position: center;
  background: #fff;
  margin: 0 auto;
}

/* Custom controls */
.video-controls {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}

.vbtn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.08);
  background: #f6f6f6;
  padding: 6px 10px;
  border-radius: 0; /* 90° */
  cursor: pointer;
}
.vbtn:active { transform: translateY(1px); }

.vseek {
  width: 100%;
  appearance: none;
  height: 4px;
  background: #e8e8e8;
  border-radius: 0;
  outline: none;
}
.vseek::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px;
  background: #111; border: 0; border-radius: 0;
  margin-top: -4px; /* centers the thumb */
}
.vseek::-moz-range-thumb {
  width: 12px; height: 12px; background: #111; border: 0; border-radius: 0;
}

.vtime { font-variant-numeric: tabular-nums; color: var(--text-soft); }

.video-frame :is(button, input[type="range"]):focus { outline: 2px solid rgba(0,0,0,0.2); outline-offset: 2px; }

/* === Homepage About === */
.home-about .card.prose {
  margin-inline: auto;
}

.home-about .prose p {
  line-height: 1.2;          
  letter-spacing: 0.1px;      
  margin: 0 0 0.75em;         
}

/* === Page-top (logo + inline links, not sticky) === */
.page-top {
  padding: 18px 20px 10px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.top-logo {
  display: block;
  height: 250px;            
  width: auto;
  margin: 0 auto 10px;     /* center logo with small gap below */
  object-fit: contain;
}

.top-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  font-family: "Cinzel", serif;
  font-weight: 2;             /* “Medium” */
  letter-spacing: 0.3px;  
  flex-wrap: wrap;         /* wraps nicely on narrow screens */
}

.top-links a {
  text-decoration: none;
  color: inherit;
  opacity: 0.9;
  font-weight: 600;
  padding: 4px 2px;
}

.top-links a:hover,
.top-links a:focus {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* “Active” underline for current page */
.top-links a.active {
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
}

/* === Services hero: 75vw image centered, left-side gray panel === */
.services-hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}

/* Same frame sizing as homepage hero */
.services-hero .hero-frame {
  position: relative;
  width: 75vw;                     /* 3/4 of screen width */
  height: min(86vh, 900px);
  margin: 0 auto;
}

/* Backdrop image fills the frame */
.services-hero .hero-frame .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Left panel: 1/3 width, full height */
.services-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(240, 240, 240, 0.92);
  color: var(--text);
  display: flex;
  padding: clamp(12px, 2.2vw, 20px);
}

/* Even vertical spacing of items */
.services-list {
  margin: 0;
  padding: 0;
  list-style: none;

  /* take full panel height and distribute items evenly */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0;

  width: 100%;
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: left;
}

/* Typography scale for items — TOP-LEVEL CATEGORIES ONLY */
.services-list > li {
  font-size: clamp(0.95rem, 1.1vw + 0.4rem, 1.4rem);
  line-height: 1.15;
  font-family: "Cinzel", serif;
  font-weight: 700;            /* bold categories */
  letter-spacing: 0.2px;
  color: var(--text);
  opacity: 0.95;
}

/* Nested bullets */
.services-list > li > ul {
  margin: 6px 0 0 1.25rem;
  padding: 0;
  list-style: disc;
}

.services-list > li > ul > li {
  font-size: clamp(0.9rem, 0.9vw + 0.35rem, 1.1rem);
  line-height: 1.35;
  font-family: "Inter", sans-serif;  /* lighter look for bullets */
  font-weight: 400;                  /* not bold */
  letter-spacing: 0.1px;
  color: var(--text);
  opacity: 0.9;
}

/* Hover: only underline the top-level category labels */
.services-list > li:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ensure nested bullets don't get the underline-on-hover */
.services-list > li > ul > li:hover {
  text-decoration: none;
}

/* Portfolio: neutralize earlier inset so 50%/50% centering works */
.portfolio-grid .slider-viewport img{
  inset: auto !important;   /* clears top/right/bottom/left from earlier rules */
  right: auto !important;
  bottom: auto !important;
}

/* === Services trio — exactly 3 tiles at 25vw each, single row, centered === */
.services-trio {
  padding-block: 24px; /* clean gap above/below */
}

.services-trio .trio {
  display: flex;
  justify-content: center;  
  align-items: stretch;
  gap: min(24px, 2vw);      
  margin: 0 auto;
  flex-wrap: nowrap;        
}

.services-trio .trio-box {
  flex: 0 0 25vw;           
  width: 25vw;              
  aspect-ratio: 4 / 3;      
  margin: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--edge);
  border: 1px solid rgba(0,0,0,0.06);
}

.services-trio .trio-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        
}

/* === Home About: 1/5 | 1/10 | 1/2 | 1/5 full-bleed grid, bio vertically centered === */
.home-about .vw-grid-10ths{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: grid;
  grid-template-columns: 1fr 0.5fr 2.5fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;                       
  padding-block: clamp(12px, 3vw, 36px);
}

/* Photo (1/10 column) */
.home-about .about-photo{
  margin: 0;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow);
  border-radius: var(--edge);
  overflow: hidden;
}
.home-about .about-photo img{
  display: block;
  width: 100%;   /* fills the 1/10 column (~10vw) */
  height: auto;  /* keep aspect ratio */
}

/* Bio (1/2 column) — ensure it can use its full column */
.home-about .about-card{
  max-width: none;
  width: 100%;
  margin: 0;
}

/* Keep the about typography tight but not constrained */
.home-about .about-card .prose p{ max-width: none; }

/* Mobile / narrow: stack cleanly */
@media (max-width: 900px){
  .home-about .vw-grid-10ths{
    grid-template-columns: 1fr;  /* single column */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-inline: 20px;        /* match site container padding */
    align-items: start;
  }
  .home-about .about-photo{
    max-width: 66vw;
    justify-self: center;
  }
  .home-about .about-card{
    margin-top: 12px;
  }
}

/* === Portfolio loading overlay === */
.slider { position: relative; }

.slider[data-loading] .slider-viewport {
  visibility: hidden; /* hide partials until ready */
}

.slider .loading-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(230,230,230,0.7) 0%,
    rgba(245,245,245,0.7) 20%,
    rgba(230,230,230,0.7) 40%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* === Fix lightbox arrows to viewport edges (override) === */
.lightbox-arrow {
  position: fixed;              /* ignore grid; pin to viewport */
  top: 50%;
  transform: translateY(-50%);  /* center vertically */
  left: auto;                   /* reset any grid alignment */
  right: auto;
  margin: 0;                    /* kill prior margins */
  z-index: 1001;                /* above image and backdrop */
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  cursor: pointer;
  opacity: 0.9;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
}

.lightbox-arrow.prev { left: 1.5vw; }   /* pin to left edge */
.lightbox-arrow.next { right: 1.5vw; }  /* pin to right edge */

.lightbox-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.02);
}

/* === Lightbox: recenter image now that arrows are fixed === */
.lightbox {
  grid-template-columns: 1fr;     /* single centered column */
}

.lightbox-img {
  justify-self: center;           /* ensure centering within the grid */
}