/*
  PhotoFolio: black, gallery-first design with Cardo serif headings and a green accent (website standard).
  Live parts (.rb-*) come from public/assets/css/rb-site.css; this file gives them the PhotoFolio look.
  Customize changes var(--rb-brand) / var(--rb-font-heading) / var(--rb-font-body).
*/
:root {
  --rb-brand: #27a776;
  --rb-on-brand: #ffffff;
  --rb-font-heading: 'Cardo', Georgia, serif;
  --rb-font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --rb-text: #fafafa;
  --rb-muted: #a3a3a3;
  --rb-line: rgba(255, 255, 255, .12);
  --rb-surface: #000000;
  --rb-soft: #1a1a1a;
  --rb-card: #1a1a1a;
  --rb-radius: 10px;
  --rb-sticky-top: 76px;
  --pf-nav-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --pf-wrap: 1200px;
}

html { background: var(--rb-surface); }
body.pf { margin: 0; background: var(--rb-surface); color: var(--rb-text); font-family: var(--rb-font-body); font-size: 16px; line-height: 1.7; }
.pf h1, .pf h2, .pf h3 { font-family: var(--rb-font-heading); font-weight: 400; line-height: 1.2; margin: 0; color: #fff; }
.pf main a:not([class]) { color: var(--rb-brand); }
.pf-wrap { width: 100%; max-width: var(--pf-wrap); margin: 0 auto; padding: 0 24px; }
.pf-section { padding: 72px 0; }
.pf-section-tight { padding-top: 24px; }
.pf-section-soft { background: #0b0b0b; border-top: 1px solid var(--rb-line); border-bottom: 1px solid var(--rb-line); }
.pf-heading { text-align: center; margin-bottom: 34px; }
.pf-heading.pf-left { text-align: left; margin-bottom: 18px; }
.pf-heading h2 { font-size: 40px; }
.pf-heading p { margin: 6px 0 0; color: var(--rb-muted); font-family: var(--pf-nav-font); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.pf-link { display: inline-flex; align-items: center; gap: 8px; color: var(--rb-brand); text-decoration: none; font-family: var(--pf-nav-font); font-weight: 500; font-size: 14px; letter-spacing: .04em; }
.pf-link:hover { color: #fff; }
.pf-more { text-align: center; margin-top: 34px; }

/* Buttons: square-ish brand buttons with uppercase Inter text */
.pf .rb-btn { border-radius: 4px; font-family: var(--pf-nav-font); font-weight: 500; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 12px 34px; color: var(--rb-on-brand); }
.pf .rb-btn:hover { filter: none; background: color-mix(in srgb, var(--rb-brand) 88%, #fff); }
.pf .rb-btn.rb-btn-outline { background: transparent; color: var(--rb-brand); }
.pf .rb-btn.rb-btn-outline:hover { background: var(--rb-brand); color: var(--rb-on-brand); }
.pf .pf-btn-sm { padding: 8px 18px; font-size: 12px; }

/* Header */
.pf-header { position: sticky; top: 0; z-index: 40; background: rgba(0, 0, 0, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pf-header-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; padding: 0 24px; }
.pf-brand .rb-logo-name { font-family: var(--rb-font-heading); font-weight: 400; font-size: 28px; color: #fff; }
.pf-brand .rb-logo-mark, .pf-footer-brand .rb-logo-mark { background: transparent; color: var(--rb-brand); border: 1px solid var(--rb-brand); }
.pf-brand .rb-logo-img { height: 40px; }
.pf-nav { display: flex; align-items: center; justify-content: center; flex: 1; }
.pf-header .rb-menu { gap: 30px; }
.pf-header .rb-menu a { font-family: var(--pf-nav-font); font-size: 14px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); border-bottom: 0; padding: 6px 0; }
.pf-header .rb-menu a:hover, .pf-header .rb-menu a.is-active { color: #fff; }
.pf-header .rb-menu-toggle { color: #fff; }
.pf-header-actions { display: flex; align-items: center; gap: 16px; }
.pf-social .rb-social { gap: 4px; }
.pf-social .rb-social a, .pf-footer-social .rb-social a { width: 30px; height: 30px; border: 0; color: rgba(255, 255, 255, .6); font-size: 15px; opacity: 1; }
.pf-social .rb-social a:hover, .pf-footer-social .rb-social a:hover { background: transparent; color: #fff; }
.pf-header .rb-account-login, .pf-header .rb-account-btn { color: rgba(255, 255, 255, .7); font-family: var(--pf-nav-font); font-size: 14px; }
.pf-header .rb-account-login:hover { color: #fff; }

/* Home hero: centred serif headline with the green highlighter stroke */
.pf-hero { position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center; text-align: center; background: #000 center / cover no-repeat; }
.pf-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }
.pf-hero-inner { position: relative; max-width: 860px; padding-top: 80px; padding-bottom: 80px; }
.pf-hero h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.25; margin-bottom: 18px; }
/* a highlighter stripe under each line of the headline (also when it wraps onto two lines) */
.pf-underlight { padding: 0 6px; background: linear-gradient(transparent 56%, var(--rb-brand) 56%, var(--rb-brand) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pf-hero p { color: rgba(255, 255, 255, .78); font-size: 18px; margin: 0 auto 34px; max-width: 640px; }
.pf-hero-actions { display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* Inner page title band */
.pf-title { border-top: 1px solid var(--rb-line); }
.pf-title-inner { padding-top: 72px; padding-bottom: 56px; text-align: center; }
.pf-title h1 { font-size: clamp(40px, 6vw, 64px); }
.pf-title p { color: var(--rb-muted); max-width: 640px; margin: 12px auto 0; font-size: 17px; }
.pf-title .rb-btn { margin-top: 26px; }

/* Gallery: full-width grid of rounded photos, every tile the same size */
.pf-gallery { padding: 8px 24px 72px; }
.pf .rb-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 24px; }
.pf .rb-portfolio-featured .rb-grid { grid-template-columns: repeat(4, 1fr); }
.pf .rb-portfolio-featured .rb-grid .rb-tile.is-lead { grid-column: auto; grid-row: auto; }
.pf .rb-tile { border-radius: var(--rb-radius); aspect-ratio: 16 / 10; background: #111; }
.pf .rb-tile::after { content: "\f065"; font: 900 20px/1 "Font Awesome 6 Free"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s; pointer-events: none; }
.pf .rb-tile:hover::after { opacity: 1; }
.pf .rb-tile-video::after { content: none; }
.pf .rb-tile:hover img { transform: scale(1.1); }
.pf .rb-tile-caption { z-index: 1; }
.pf .rb-tabs { justify-content: center; gap: 6px 26px; margin-bottom: 30px; }
.pf .rb-tab { border: 0; border-radius: 0; background: transparent; padding: 4px 0; font-family: var(--pf-nav-font); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.pf .rb-tab:hover { color: #fff; }
.pf .rb-tab.is-active { background: transparent; color: #fff; box-shadow: inset 0 -2px 0 var(--rb-brand); }
.pf .rb-count { color: rgba(255, 255, 255, .4); opacity: 1; }
.pf .rb-tabs-sticky { background: var(--rb-surface); }

/* Live parts, dark */
.pf .rb-cat-title { font-weight: 400; color: #fff; }
.pf .rb-service-title, .pf .rb-service-card-title { font-family: var(--rb-font-heading); font-weight: 700; color: #fff; }
.pf .rb-option-name { color: #fff; font-weight: 500; }
.pf .rb-service, .pf .rb-service-card, .pf .rb-review, .pf .rb-option { border-color: var(--rb-line); }
.pf .rb-service-card:hover, .pf a.rb-option:hover { border-color: var(--rb-brand); }
.pf .rb-price { color: var(--rb-brand); }
.pf .rb-review blockquote { color: #d4d4d4; font-family: var(--rb-font-heading); font-size: 17px; font-style: italic; }
.pf .rb-stars { color: var(--rb-brand); }
.pf .rb-contact-form input, .pf .rb-contact-form textarea { background: #0d0d0d; color: #fff; border-color: var(--rb-line); }
.pf .rb-contact-form label { color: #d4d4d4; font-weight: 400; }
.pf .rb-account-menu a { color: var(--rb-text); }
.pf .rb-account-menu a:hover { background: rgba(255, 255, 255, .06); }
.pf .rb-chooser-box h3, .pf .rb-chooser-close, .pf .rb-quote-close { color: #fff; }
.pf .rb-chooser-list a { color: var(--rb-text); }
.pf .rb-chooser-list a:hover, .pf .rb-chooser-list a:focus { background: rgba(255, 255, 255, .04); }

/* About + details */
.pf-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.pf-split > .pf-card:only-child { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pf-split .rb-about p { color: #d4d4d4; font-size: 17px; }
.pf-card { background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: var(--rb-radius); padding: 26px; display: grid; gap: 22px; }
.pf-card h3 { font-family: var(--pf-nav-font); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--rb-muted); font-weight: 500; margin-bottom: 8px; }
.pf .rb-hours li { border-bottom-color: var(--rb-line); }

/* Call to action */
.pf-cta { border-top: 1px solid var(--rb-line); background: radial-gradient(700px 260px at 15% 0%, color-mix(in srgb, var(--rb-brand) 22%, transparent), transparent 70%), #050505; }
.pf-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 60px; padding-bottom: 60px; }
.pf-cta h2 { font-size: 36px; }
.pf-cta p { margin: 6px 0 0; color: var(--rb-muted); }

/* Footer: centred, like the original */
.pf-footer { border-top: 1px solid var(--rb-line); padding: 40px 0 30px; text-align: center; color: var(--rb-muted); font-size: 14px; }
.pf-footer .pf-wrap { display: grid; justify-items: center; gap: 14px; }
.pf-footer-brand .rb-logo-name { font-family: var(--rb-font-heading); font-size: 24px; color: #fff; font-weight: 400; }
.pf-footer-social .rb-social { justify-content: center; }
.pf-footer-contact .rb-contact-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.pf-copy { margin: 0; }
.pf-footer .rb-powered { color: var(--rb-muted); margin-left: 6px; }

@media (max-width: 1199px) {
  .pf .rb-grid, .pf .rb-portfolio-featured .rb-grid { grid-template-columns: repeat(3, 1fr); }
  .pf-header .rb-menu { gap: 20px; }
  .pf-social { display: none; }
}
@media (max-width: 991px) {
  .pf .rb-grid, .pf .rb-portfolio-featured .rb-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pf-split { grid-template-columns: 1fr; gap: 32px; }
  .pf-header-actions .rb-account-login { font-size: 0; }
  .pf-header-actions .rb-account-login i { font-size: 18px; }
}
@media (max-width: 767px) {
  :root { --rb-sticky-top: 64px; }
  .pf-wrap { padding: 0 16px; }
  .pf-header-row { height: 64px; padding: 0 16px; gap: 8px; }
  .pf-brand .rb-logo-name { font-size: 22px; max-width: 52vw; }
  .pf-nav { order: 3; flex: 0 0 auto; }
  .pf-header-actions { gap: 2px; margin-left: auto; }
  .pf-header-actions .rb-btn { display: none; }
  .pf-header .rb-account-login i { padding: 8px; }
  .pf-header .rb-menu { background: #0b0b0b; border-bottom: 1px solid var(--rb-line); padding: 4px 16px 12px; }
  .pf-header .rb-menu a { color: #fff; border-bottom: 1px solid var(--rb-line); padding: 12px 0; }
  .pf-hero { min-height: 52vh; }
  .pf-hero-inner { padding-top: 56px; padding-bottom: 56px; }
  .pf-hero p { font-size: 16px; margin-bottom: 26px; }
  .pf-title-inner { padding-top: 44px; padding-bottom: 34px; }
  .pf-section { padding: 48px 0; }
  .pf-section-tight { padding-top: 12px; }
  .pf-heading h2 { font-size: 32px; }
  .pf-gallery { padding: 4px 12px 48px; }
  .pf .rb-grid, .pf .rb-portfolio-featured .rb-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pf .rb-tile { border-radius: 6px; }
  .pf .rb-tabs { gap: 6px 18px; margin-bottom: 20px; }
  .pf-cta-row { flex-direction: column; align-items: flex-start; padding-top: 40px; padding-bottom: 40px; }
  .pf-cta h2 { font-size: 28px; }
  .pf .rb-mobile-bar { background: #0b0b0b; border-top-color: var(--rb-line); }
  .pf .rb-bar-btn { background: transparent; color: #fff; border-color: var(--rb-line); }
  .pf .rb-bar-btn.rb-bar-primary { background: var(--rb-brand); border-color: var(--rb-brand); color: var(--rb-on-brand); }
}
.pf-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, .12); }
.pf .rb-service-cta .rb-btn { padding: 7px 18px; font-size: 12px; }

/* Category pages (/services/<category>) */
.pf-cp-hero { padding: 64px 0 72px; border-top: 1px solid var(--rb-line); }
.pf-cp-hero h1 { font-size: clamp(40px, 5.6vw, 64px); line-height: 1.12; }
.pf-cp-eyebrow { margin: 0 0 12px; font-family: var(--pf-nav-font); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--rb-brand); }
.pf .rb-cp-wrap { max-width: var(--pf-wrap); }
.pf .rb-cp-title { color: #fff; }
.pf .rb-cp-section + .rb-cp-section { border-top-color: var(--rb-line); }
.pf .rb-cp-contact { background: #0b0b0b; }
@media (max-width: 767px) {
  .pf-cp-hero { padding: 32px 0 40px; }
}