:root{
  --bg:#ffffff; --ink:#0d1320; --muted:#616d86;
  --gold:#d4af37; --gold-deep:#8a6d08; --line:rgba(191,161,57,.55);
  --card:rgba(255,255,255,.66); --shadow:0 12px 32px rgba(16,24,40,.08);
  --btn-bg:linear-gradient(#fff,#f8f8f8);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65;overflow-x:hidden;display:flex;min-height:100vh;flex-direction:column}
main{flex:1} .wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* Promo */
.promo{position:sticky;top:0;left:0;right:0;width:100vw;margin-left:calc(50% - 50vw);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));z-index:50;color:#111;
  transition:opacity .25s ease,transform .25s ease}
.promo.hidden{opacity:0;transform:translateY(-100%)}
.promo-bar{display:flex;align-items:center;gap:24px;padding:8px 24px}
.promo-msg{flex:1;text-align:center;}
.promo .cta{margin-left:auto;background:#111;color:#fff;border-radius:999px;padding:8px 18px;text-decoration:none;font-weight:700}

/* Header */
.top{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);background:rgba(255,255,255,.85);border-bottom:1px solid var(--line)}
.top-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-logo{width:42px;height:auto;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.btext{display:grid;line-height:1.1}.btext em{font-style:normal;color:var(--muted);font-size:12px}
.nav{display:flex;gap:18px;align-items:center}.nav a{color:var(--gold-deep);text-decoration:none}.nav a:hover{color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:12px;border:2px solid rgba(191,161,57,.8);
  background:var(--btn-bg);text-decoration:none;color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.btn.small{padding:8px 12px}

/* Hero (1) smaller logo & closer to top */
.hero{padding:12px 0 8px}
.logo-center{display:block;margin:0 auto 8px;width:min(380px,50vw);filter:drop-shadow(0 6px 16px rgba(0,0,0,.08))}
.headline{font-family:Fraunces,Georgia,serif;font-weight:800;letter-spacing:-.3px;line-height:1.06;font-size:clamp(32px,5vw,58px);margin:4px 0 6px}
.key{background-image:linear-gradient(90deg,rgba(205,179,74,.85),rgba(185,149,28,.85),rgba(205,179,74,.85));background-size:300% 2px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px}
.shine{background:linear-gradient(90deg,#cdb34a,#b9951c,#cdb34a);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.96}
@media (prefers-reduced-motion:no-preference){body.scrolled .shine{animation:shineMove 6s linear infinite}@keyframes shineMove{0%{background-position:0% 0}100%{background-position:300% 0}}}

/* Divider */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:24px 0}

/* Sections & grids */
.section{padding:14px 0}
.grid{display:grid;gap:14px}
@media(min-width:980px){.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:979px){.g3,.g2{grid-template-columns:1fr}}

/* Thinner tiles */
.tile{background:var(--card);border:4px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow);text-decoration:none;color:inherit}
.tile:hover{transform:translateY(-2px)}
.shot{display:none}

/* Anchor offset: 2) ensure section is not hidden under sticky header */
/* Reviews viewport: 3) centered card + peeks + working arrows */
.reviews{position:relative}
.rev-viewport{position:relative;overflow:hidden;padding:0 60px}
.rev-track{display:flex;gap:24px;transition:transform .5s ease}
.rev{flex:0 0 72%;background:var(--card);border:4px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);opacity:.55;transform:scale(.96);transition:opacity .3s,transform .3s}
.rev.active{opacity:1;transform:scale(1)}
.stars{letter-spacing:4px;color:#d4af37;font-size:22px;margin:10px 0}
.rev-ctrl{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:4px solid var(--line);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);z-index:2}
.rev-prev{left:8px} .rev-next{right:8px}

/* Forms (7 unified borders already 4px elsewhere) */
.form input,.form textarea{width:100%;border-radius:12px;border:4px solid var(--line);background:rgba(255,255,255,.75);padding:12px 14px;font-size:16px;outline:none}
.or-sep{display:flex;gap:12px;align-items:center;justify-content:center;margin:18px 0}.or-sep::before,.or-sep::after{content:'';height:1px;background:var(--line);flex:1}

/* Footer */
.site-foot{border-top:1px solid var(--line);background:rgba(255,255,255,.7)}
.foot-grid{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px 40px}
.icons{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:4px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;background:#fff}

/* Hide any preview artifacts */
.hero-preview,.aside-hero,.right-preview,.preview{display:none!important}



/* ==== PORTFOLIO CARDS + LIGHTBOX (injected) ==== */
.portfolio-grid { margin-top: 10px; }

.portfolio-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:var(--card); border:4px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.portfolio-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(16,24,40,.12);
  border-color:rgba(191,161,57,.9);
}
.pc-thumb{ width:100%; aspect-ratio:16/9; background:#000 center/cover no-repeat; }
.pc-body{ padding:14px 14px 16px; }
.pc-body h4{ margin:0 0 6px 0; font-size:1.05rem; }
.pc-body p{ margin:0; color:var(--muted); }

.lb-backdrop{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(13,19,32,.65); padding:20px; z-index:60; }
.lb-backdrop.is-open{ display:flex; }
.lb-shell{ background:var(--bg); border-radius:16px; width:min(980px,92vw); padding:16px; position:relative;
  box-shadow:0 20px 60px rgba(16,24,40,.24); border:4px solid var(--line);  overflow: visible; }
.lb-stage{ width:100%; aspect-ratio:16/9; background:#000 center/contain no-repeat;
  border-radius:12px; position:relative; overflow:hidden; }
.lb-btn{ z-index:2; position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:12px;
  border:4px solid var(--line); background:var(--btn-bg); box-shadow:var(--shadow); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:22px; user-select:none; }
.lb-prev{left:-56px; left:8px; }
.lb-next{right:-56px; right:8px; }
.lb-close{ position:absolute; top:-56px; right:-56px; width:40px; height:40px; border-radius:12px; border:4px solid var(--line);
  background:var(--btn-bg); display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; }


/* two-up centered layout for service portfolios */
.portfolio-grid.two-up{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  align-items: stretch;
}

/* responsive lb controls */
@media (max-width: 640px){
  .lb-prev{ left:-8px; }
  .lb-next{ right:-8px; }
  .lb-close{ top:-8px; right:-8px; }
}


/* === Lightbox Control Refinement === */
.lb-btn,
.lb-close {
  width: 46px;
  height: 46px;
  border-radius: 10px; /* square corners */
  border: 3px solid var(--gold);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  box-shadow: none;
  display: grid;
  place-items: center;
  transition: all .2s ease;
}
.lb-btn:hover,
.lb-close:hover {
  background: var(--gold);
  color: #fff;
}

/* Move them outside the lightbox border */
.lb-prev { left: -70px; }
.lb-next { right: -70px; }
.lb-close { top: -60px; right: -60px; }

/* Keep layout safe on smaller screens */
@media (max-width: 900px) {
  .lb-prev { left: -10px; }
  .lb-next { right: -10px; }
  .lb-close { top: -10px; right: -10px; }
}


/* === Force controls fully outside and match review style === */
.lb-backdrop .lb-shell .lb-btn,
.lb-backdrop .lb-shell .lb-close{
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 3px solid var(--gold);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  box-shadow: none;
  display: grid;
  place-items: center;
  z-index: 3;
}

.lb-backdrop .lb-shell .lb-prev{ left: calc(-46px - 20px); }   /* width + gap */
.lb-backdrop .lb-shell .lb-next{ right: calc(-46px - 20px); }
.lb-backdrop .lb-shell .lb-close{ top: calc(-46px - 20px); right: calc(-46px - 20px); }

@media (max-width: 900px){
  .lb-backdrop .lb-shell .lb-prev{ left: -12px; }
  .lb-backdrop .lb-shell .lb-next{ right: -12px; }
  .lb-backdrop .lb-shell .lb-close{ top: -12px; right: -12px; }
}

/* hide close button */
.lb-close{display:none!important;}

/* Anchor offset so Services jumps to exact spot under sticky bars */


/* === Global Frosted overlay for portfolio thumbs (crisp text + gold divider + inner frame) === */
.portfolio-card{ overflow: hidden; border-radius: 14px; }
.portfolio-card .pc-thumb{
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  filter: none;
  transform: none;
  border-bottom: 3px solid #E6D28A;
}
.portfolio-card .pc-thumb::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px #E6D28A;
}
.portfolio-card .pc-thumb::before{
  content: "Click to view";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; letter-spacing: .3px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  background: rgba(14, 24, 32, 0.28);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: inherit;
  pointer-events: none;
  transition: background .2s ease;
}
.portfolio-card:hover .pc-thumb::before{ background: rgba(14, 24, 32, 0.22); }

/* === Corner clip fix === */
.portfolio-card{
  border-radius: 14px;
  overflow: hidden;
  background-clip: padding-box;
}
.portfolio-card .pc-thumb{
  isolation: isolate;
  -webkit-clip-path: inset(0 round 12px 12px 0 0);
  clip-path: inset(0 round 12px 12px 0 0);
}
.portfolio-card .pc-thumb::before,
.portfolio-card .pc-thumb::after{
  -webkit-clip-path: inset(0 round 12px 12px 0 0);
  clip-path: inset(0 round 12px 12px 0 0);
}
.portfolio-card .pc-thumb::after{ z-index: 1; }
.portfolio-card .pc-thumb::before{ z-index: 2; }


/* === Tuck thumbnail under gold border (applies to all portfolio cards) === */
.portfolio-card{ border-radius: 14px; overflow: hidden; }
.portfolio-card .pc-thumb{
  position: relative;
  margin-top: -3px;                 /* slide image up slightly under the gold frame */
  /* keep corners perfectly clipped */
  border-radius: 14px 14px 0 0;
  -webkit-clip-path: inset(0 round 14px 14px 0 0);
  clip-path: inset(0 round 14px 14px 0 0);
  overflow: hidden;
  isolation: isolate;
}
.portfolio-card .pc-thumb::before,
.portfolio-card .pc-thumb::after{
  border-radius: 14px 14px 0 0;
  -webkit-clip-path: inset(0 round 14px 14px 0 0);
  clip-path: inset(0 round 14px 14px 0 0);
}



/* === Added: Content-side padding for readability (excludes header/nav/footer) === */
@media (max-width: 1024px){
  main.wrap { 
    padding-left: clamp(14px, 4vw, 28px);
    padding-right: clamp(14px, 4vw, 28px);
    box-sizing: border-box;
  }
}

/* === Added: Review cards – keep aspect and spacing on small screens === */
@media (max-width: 720px){
  .reviews .rev-viewport{ padding-left: 16px; padding-right: 16px; }
  .reviews .rev-track{ gap: 16px; }
  .reviews .rev{ 
    flex: 0 0 92%;
    max-width: 92%;
  }
  .reviews .rev-ctrl{ 
    top: auto; bottom: 8px; transform: none; 
    width: 40px; height: 40px; font-size: 20px;
  }
}

/* Micro-tweak for ultra-narrow devices */
@media (max-width: 380px){
  .reviews .rev{ flex-basis: 96%; max-width: 96%; }
  main.wrap { padding-left: 12px; padding-right: 12px; }
}