:root{
  --steel:#2C3B4D;
  --apricot:#FFB162;
  --copper:#A35139;
  --taupe:#C9C1B1;
  --cream:#EEE9DF;
  --charcoal:#1B2632;
  --bg:var(--cream);
  --text:var(--charcoal);
  --muted:#6F6A60;
  --radius:18px;
  --max:1100px;
}

/* =========================
   1) BASE
   ========================= */
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:22px;
}

h2,h3,h4{
  margin:0 0 12px;
  color:var(--steel);
  font-family:"Playfair Display", Georgia, serif;
  font-weight:400;
}

.small{
  font-size:13px;
  color:rgba(27,38,50,0.65);
  margin-top:12px;
}

.muted{
  color:rgba(27,38,50,0.65);
  margin-top:0;
}

:focus-visible{
  outline:3px solid rgba(255,177,98,0.55);
  outline-offset:3px;
  border-radius:10px;
}

.no-scroll{ overflow:hidden; }

/* =========================
   2) HEADER & NAV
   ========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(180deg,rgba(238,233,223,0.96),rgba(201,193,177,0.85));
  border-bottom:1px solid rgba(27,38,50,0.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform 220ms ease;
  overflow: visible; /* IMPORTANT: don't block horizontal scroll inside */
}

.header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 0 8px; /* tightened */
}

.title-block{ text-align:center; }

.site-title{
  margin:0;
  font-family:"Alex Brush", cursive;
  font-weight:400;               /* Alex Brush is single-weight */
  color:var(--steel);
  font-size:clamp(54px,6vw,96px); /* tightened */
  line-height:0.95;
  text-align:center;
  text-shadow:
    0 0 14px rgba(255,177,98,0.35),
    0 0 26px rgba(163,81,57,0.16);
  white-space:nowrap;
}

.site-tagline{
  text-align:center;
  margin:6px 0 0; /* tightened */
  color:rgba(44,59,77,0.72);
  font-weight:600;
  letter-spacing:0.6px;
}

/* NAV: swipeable tabs on mobile, normal row on desktop */
.header-menu{
  display:flex;
  gap:14px;
  flex-wrap: nowrap;
  margin-top: 8px;

  width: 100%;
  max-width: var(--max);
  justify-content: center;         /* desktop */
  align-items: center;

  /* Mobile sliding behavior */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;

  padding: 0 16px 6px;             /* space + prevents underline clipping */
}

.header-menu::-webkit-scrollbar{ display:none; }

.header-menu a{
  padding:6px 6px;                 /* tightened */
  letter-spacing:0.2px;            /* tightened */
  font-weight:600;
  position:relative;
  color:rgba(44,59,77,0.92);
  transition:color 180ms ease, transform 180ms ease;

  /* keep each tab "tab-sized" so it scrolls */
  flex: 0 0 auto;
  white-space: nowrap;

  /* reserve space so the active underline never changes layout */
  border-bottom:2px solid transparent;
}

.header-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:100%;
  background:linear-gradient(90deg,var(--apricot),var(--copper));
  transform:scaleX(0);
  transition:transform 220ms ease;
}

.header-menu a:hover{
  color:rgba(27,38,50,0.98);
  transform:translateY(-1px);
}

.header-menu a:hover::after,
.header-menu a[aria-current="page"]::after{
  transform:scaleX(1);
}

/* also mark current page without changing size */
.header-menu a[aria-current="page"]{
  border-bottom-color: transparent;
}

/* When collapsed/hidden */
.site-header.is-collapsed .header-inner{ padding:10px 0; }
.site-header.is-collapsed .site-tagline,
.site-header.is-collapsed .header-menu{ display:none; }
.site-header.is-hidden{ transform:translateY(-110%); }

/* =========================
   3) CARDS & HOME LAYOUT
   ========================= */
.card{
  background:rgba(201,193,177,0.16);
  padding:26px;
  border-radius:var(--radius);
  border:1px solid rgba(27,38,50,0.10);
  box-shadow:0 10px 30px rgba(27,38,50,0.04);
  transition:transform 220ms ease;
  margin-bottom:22px;
}

.card:hover{ transform:translateY(-2px); }

.home-about,
.home-hero{
  display:grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(260px, 0.95fr);
  gap:22px;
  align-items:center;
}

.home-about-media img,
.home-hero-media img{
  width:100%;
  display:block;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid rgba(44,59,77,0.10);
  filter:contrast(1.03) saturate(1.05);
}

.home-hero-media img{ height:380px; }
.home-about-media img{ height:auto; }

/* ✅ FIX: show hero portrait fully (the one with class="portrait-fix") */
.home-hero-media img.portrait-fix{
  height: auto;              /* removes forced crop */
  max-height: 520px;         /* keeps it tall but controlled */
  object-fit: contain;       /* shows full portrait */
  object-position: 60% 50%;  /* shift slightly right */
  background: transparent;   /* no fill */
}

/* ✅ In case any wrapper ever clips */
.home-hero-media{ overflow: visible; }

@media (max-width: 560px){
  .home-about,
  .home-hero{
    grid-template-columns: 1fr;
    gap:16px;
  }

  /* mobile: give it more room while still showing full image */
  .home-hero-media img.portrait-fix{
    max-height: 70vh;
  }
}

.home-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(240px, 1fr));
  gap:16px;
  width:100%;
  max-width:var(--max);
  margin:32px auto 0;
  justify-content:center;
  counter-reset:shoot;
}

.home-tile{
  text-align:center;
  padding:26px;
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;

  position:relative;
  overflow:hidden;
  border:1px solid rgba(27,38,50,0.10);
  border-radius:var(--radius);

  background:
    radial-gradient(120% 80% at 20% 15%, rgba(255,177,98,0.22), transparent 60%),
    linear-gradient(180deg, rgba(238,233,223,0.92), rgba(201,193,177,0.18));

  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.home-tile::before{
  counter-increment:shoot;
  content:"0" counter(shoot);
  position:absolute;
  top:14px;
  left:14px;

  width:42px;
  height:42px;
  display:grid;
  place-items:center;

  border-radius:999px;
  border:1px solid rgba(44,59,77,0.14);
  background:rgba(238,233,223,0.70);
  color:rgba(44,59,77,0.70);

  font-weight:700;
  font-size:13px;
  letter-spacing:0.6px;
}

.home-tile::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 35% 25%, rgba(255,177,98,0.16), transparent 55%);
  transform:rotate(10deg);
  opacity:0.9;
  pointer-events:none;
}

.home-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(27,38,50,0.10);
  border-color:rgba(27,38,50,0.12);
}

.home-tile h3{
  margin-top:6px;
  letter-spacing:0.2px;
}

/* =========================
   4) PORTFOLIO GRID + CHIPS
   ========================= */
.portfolio-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}

.chip{
  appearance:none;
  border:1px solid rgba(44,59,77,0.18);
  background:linear-gradient(180deg, rgba(238,233,223,0.95), rgba(201,193,177,0.35));
  color:var(--steel);
  padding:10px 14px;
  border-radius:999px;
  font-weight:650;
  cursor:pointer;
  transition:transform 180ms ease, box-shadow 180ms ease, background 220ms ease, border-color 220ms ease;
}

.chip:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(27,38,50,0.08);
}

.chip.is-active{
  background:linear-gradient(90deg, var(--apricot), var(--copper));
  border-color:var(--copper);
  color:#fff;
  box-shadow:0 0 15px rgba(255,177,98,0.40);
}

.tile{
  grid-column: span 4;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(27,38,50,0.10);
  aspect-ratio: 4 / 5;
  background: rgba(201,193,177,0.16);
}

.tile img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms ease;
  filter: contrast(1.03) saturate(1.05);
}

.tile::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 320ms ease;
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(255,177,98,0.18), transparent 60%),
    linear-gradient(180deg, rgba(27,38,50,0.05), rgba(27,38,50,0.55));
}

.tile:hover img{ transform:scale(1.05); }
.tile:hover::after{ opacity:1; }

.focus-top { object-position: center top; }
.focus-bottom { object-position: center bottom; }
.focus-left { object-position: left center; }
.focus-right { object-position: right center; }

.tile-label{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  color:#fff;
  font-size:.9rem;
  letter-spacing:.02em;
  font-family: "Alex Brush", cursive;
  font-weight:400;
}

/* =========================
   5) LIGHTBOX
   ========================= */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(27,38,50,0.72);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.lightbox.open{ display:flex; }

.lb-img{
  max-width:92vw;
  max-height:92vh;
  border-radius:var(--radius);
}

.lb-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(27,38,50,0.45);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  user-select:none;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.lb-btn:hover{
  background:rgba(27,38,50,0.60);
  border-color:rgba(255,255,255,0.34);
  transform:translateY(-50%) scale(1.04);
}

.lb-btn:active{ transform:translateY(-50%) scale(0.98); }

.lb-prev{ left:16px; }
.lb-next{ right:16px; }

/* Close button (X) — top-right, not centered */
.lb-close{
  top: 14px;
  right: 14px;
  left: auto;
  transform: none;
  border-radius: 999px;
  font-size: 26px;
  line-height: 1;
  padding: 8px 12px;
}

.lb-close:hover{ transform:none; }
.lb-close:active{ transform:none; }

.lb-count{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(27,38,50,0.45);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  font-size:13px;
  letter-spacing:0.2px;
}

@media (max-width:420px){
  .lb-btn{ font-size:20px; padding:9px 11px; }
  .lb-prev{ left:10px; }
  .lb-next{ right:10px; }
  .lb-count{ bottom:14px; font-size:12px; }
  .lb-close{ top: 10px; right: 10px; font-size: 24px; }
}

/* =========================
   6) FOOTER
   ========================= */
.site-footer{
  margin-top:26px;
  padding:22px 0 18px;
  background:linear-gradient(180deg, rgba(201,193,177,0.35), rgba(238,233,223,0.85));
  border-top:1px solid rgba(27,38,50,0.10);
}

.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.footer-name{
  margin:0 0 6px;
  font-family:"Alex Brush", cursive;
  font-weight:400;
  color:var(--steel);
  font-size:20px;
}

.footer-tagline{
  margin:0;
  color:rgba(27,38,50,0.65);
  font-weight:600;
  letter-spacing:0.5px;
  font-size:13px;
}

.footer-bottom{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(27,38,50,0.08);
}

@media (max-width:740px){
  .footer-inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}

/* =========================
   7) RESPONSIVE LAYOUT
   ========================= */
@media (max-width:980px){
  .home-grid{ grid-template-columns:repeat(2, minmax(240px, 1fr)); }
  .tile{ grid-column:span 6; }
}

@media (max-width:560px){
  .home-grid{ grid-template-columns:1fr; }
  .tile{ grid-column:span 12; }
}

/* =========================
   8) MOBILE HEADER (ONE VERSION ONLY)
   ========================= */
@media (max-width:720px){
  .site-header{
    position:fixed;
    top:0; left:0; right:0;
  }

  body{
    padding-top: var(--header-offset, 140px);
  }

  .header-menu{
    justify-content:flex-start; /* make swipe obvious */
  }
}

/* =========================
   9) SOCIALS PAGE
   ========================= */
.page-socials{
  padding-top:50px;
  text-align:center;
}

.socials-card{
  max-width:720px;
  margin:0 auto 22px;
}

.socials-icons{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px;
}

.social-icon{
  display:grid;
  place-items:center;
  gap:10px;
  width:150px;
  padding:18px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(27,38,50,0.10);
  background:
    radial-gradient(120% 80% at 20% 15%, rgba(255,177,98,0.20), transparent 60%),
    linear-gradient(180deg, rgba(238,233,223,0.92), rgba(201,193,177,0.18));
  box-shadow:0 10px 30px rgba(27,38,50,0.04);
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.social-icon svg{
  width:40px;
  height:40px;
  fill:rgba(27,38,50,0.88);
}

.social-label{
  font-weight:700;
  letter-spacing:0.2px;
}

.social-icon:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(27,38,50,0.10);
  border-color:rgba(27,38,50,0.12);
}

.socials-handle{ margin-top:16px; }

.direct-contact{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-link{
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--steel);
  transition: color 180ms ease, transform 180ms ease;
}

.contact-link:hover{
  color: var(--copper);
  transform: translateX(2px);
}

/* =========================
   PACKAGES / PRICING FIXES
   ========================= */
.page-packages .tile{
  aspect-ratio: auto;
  overflow: visible;
  height: auto;
}

.page-pricing .tile{
  aspect-ratio: auto;
  overflow: visible;
  height: auto;
}

.page-pricing .home-tile,
.page-packages .home-tile{
  overflow: visible;
}

.page-packages .portfolio-grid{
  align-items: stretch;
}

@media (max-width: 980px){
  .page-packages .portfolio-grid > .tile{
    grid-column: span 6 !important;
  }
}

@media (max-width: 560px){
  .page-packages .portfolio-grid{
    grid-template-columns: 1fr;
  }

  .page-packages .portfolio-grid > .tile{
    grid-column: span 12 !important;
    padding: 18px !important;
  }
}

.pricing .card,
.pricing-card,
.pricing-tier,
.pricing-box{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 560px){
  #birthday ul{ columns: 1 !important; column-gap: 0 !important; }
  #birthday ul li{ margin-bottom: 6px; }
}

/* =========================
   CLIENT GALLERY PAGE
   ========================= */
.actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.actions .chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
  padding: 12px 16px;
  height: auto;

  flex: 0 1 260px;
  min-width: 0;
}

@media (max-width: 520px){
  .actions{
    flex-direction: column;
    align-items: stretch;
  }
  .actions .chip{
    width: 100%;
    flex: 1 1 auto;
    white-space: normal;
  }
}

/* =========================
   BUTTON SYSTEM (ONE VERSION ONLY)
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:active{ transform:scale(0.98); }

:root{
  --steel:#2C3B4D;
  --apricot:#FFB162;
  --copper:#A35139;
  --taupe:#C9C1B1;
  --cream:#EEE9DF;
  --charcoal:#1B2632;
  --bg:var(--cream);
  --text:var(--charcoal);
  --muted:#6F6A60;
  --radius:18px;
  --max:1100px;
}

/* =========================
   1) BASE
   ========================= */
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:22px;
}

h2,h3,h4{
  margin:0 0 12px;
  color:var(--steel);
  font-family:"Playfair Display", Georgia, serif;
  font-weight:400;
}

.small{
  font-size:13px;
  color:rgba(27,38,50,0.65);
  margin-top:12px;
}

.muted{
  color:rgba(27,38,50,0.65);
  margin-top:0;
}

:focus-visible{
  outline:3px solid rgba(255,177,98,0.55);
  outline-offset:3px;
  border-radius:10px;
}

.no-scroll{ overflow:hidden; }

/* =========================
   2) HEADER & NAV
   ========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(180deg,rgba(238,233,223,0.96),rgba(201,193,177,0.85));
  border-bottom:1px solid rgba(27,38,50,0.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform 220ms ease;
  overflow: visible; /* IMPORTANT: don't block horizontal scroll inside */
}

.header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 0 8px; /* tightened */
}

.title-block{ text-align:center; }

.site-title{
  margin:0;
  font-family:"Alex Brush", cursive;
  font-weight:400;               /* Alex Brush is single-weight */
  color:var(--steel);
  font-size:clamp(54px,6vw,96px); /* tightened */
  line-height:0.95;
  text-align:center;
  text-shadow:
    0 0 14px rgba(255,177,98,0.35),
    0 0 26px rgba(163,81,57,0.16);
  white-space:nowrap;
}

.site-tagline{
  text-align:center;
  margin:6px 0 0; /* tightened */
  color:rgba(44,59,77,0.72);
  font-weight:600;
  letter-spacing:0.6px;
}

/* NAV: swipeable tabs on mobile, normal row on desktop */
.header-menu{
  display:flex;
  gap:14px;
  flex-wrap: nowrap;
  margin-top: 8px;

  width: 100%;
  max-width: var(--max);
  justify-content: center;         /* desktop */
  align-items: center;

  /* Mobile sliding behavior */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;

  padding: 0 16px 6px;             /* space + prevents underline clipping */
}

.header-menu::-webkit-scrollbar{ display:none; }

.header-menu a{
  padding:6px 6px;                 /* tightened */
  letter-spacing:0.2px;            /* tightened */
  font-weight:600;
  position:relative;
  color:rgba(44,59,77,0.92);
  transition:color 180ms ease, transform 180ms ease;

  /* keep each tab "tab-sized" so it scrolls */
  flex: 0 0 auto;
  white-space: nowrap;

  /* reserve space so the active underline never changes layout */
  border-bottom:2px solid transparent;
}

.header-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:100%;
  background:linear-gradient(90deg,var(--apricot),var(--copper));
  transform:scaleX(0);
  transition:transform 220ms ease;
}

.header-menu a:hover{
  color:rgba(27,38,50,0.98);
  transform:translateY(-1px);
}

.header-menu a:hover::after,
.header-menu a[aria-current="page"]::after{
  transform:scaleX(1);
}

/* also mark current page without changing size */
.header-menu a[aria-current="page"]{
  border-bottom-color: transparent;
}

/* When collapsed/hidden */
.site-header.is-collapsed .header-inner{ padding:10px 0; }
.site-header.is-collapsed .site-tagline,
.site-header.is-collapsed .header-menu{ display:none; }
.site-header.is-hidden{ transform:translateY(-110%); }

/* =========================
   3) CARDS & HOME LAYOUT
   ========================= */
.card{
  background:rgba(201,193,177,0.16);
  padding:26px;
  border-radius:var(--radius);
  border:1px solid rgba(27,38,50,0.10);
  box-shadow:0 10px 30px rgba(27,38,50,0.04);
  transition:transform 220ms ease;
  margin-bottom:22px;
}

.card:hover{ transform:translateY(-2px); }

.home-about,
.home-hero{
  display:grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(260px, 0.95fr);
  gap:22px;
  align-items:center;
}

.home-about-media img,
.home-hero-media img{
  width:100%;
  display:block;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid rgba(44,59,77,0.10);
  filter:contrast(1.03) saturate(1.05);
}

.home-hero-media img{ height:380px; }
.home-about-media img{ height:auto; }

/* ✅ FIX: show hero portrait fully (the one with class="portrait-fix") */
.home-hero-media img.portrait-fix{
  height: auto;              /* removes forced crop */
  max-height: 520px;         /* keeps it tall but controlled */
  object-fit: contain;       /* shows full portrait */
  object-position: 60% 50%;  /* shift slightly right */
  background: transparent;   /* no fill */
}

/* ✅ In case any wrapper ever clips */
.home-hero-media{ overflow: visible; }

@media (max-width: 560px){
  .home-about,
  .home-hero{
    grid-template-columns: 1fr;
    gap:16px;
  }

  /* mobile: give it more room while still showing full image */
  .home-hero-media img.portrait-fix{
    max-height: 70vh;
  }
}

.home-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(240px, 1fr));
  gap:16px;
  width:100%;
  max-width:var(--max);
  margin:32px auto 0;
  justify-content:center;
  counter-reset:shoot;
}

.home-tile{
  text-align:center;
  padding:26px;
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;

  position:relative;
  overflow:hidden;
  border:1px solid rgba(27,38,50,0.10);
  border-radius:var(--radius);

  background:
    radial-gradient(120% 80% at 20% 15%, rgba(255,177,98,0.22), transparent 60%),
    linear-gradient(180deg, rgba(238,233,223,0.92), rgba(201,193,177,0.18));

  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.home-tile::before{
  counter-increment:shoot;
  content:"0" counter(shoot);
  position:absolute;
  top:14px;
  left:14px;

  width:42px;
  height:42px;
  display:grid;
  place-items:center;

  border-radius:999px;
  border:1px solid rgba(44,59,77,0.14);
  background:rgba(238,233,223,0.70);
  color:rgba(44,59,77,0.70);

  font-weight:700;
  font-size:13px;
  letter-spacing:0.6px;
}

.home-tile::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 35% 25%, rgba(255,177,98,0.16), transparent 55%);
  transform:rotate(10deg);
  opacity:0.9;
  pointer-events:none;
}

.home-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(27,38,50,0.10);
  border-color:rgba(27,38,50,0.12);
}

.home-tile h3{
  margin-top:6px;
  letter-spacing:0.2px;
}

/* =========================
   4) PORTFOLIO GRID + CHIPS
   ========================= */
.portfolio-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}

.chip{
  appearance:none;
  border:1px solid rgba(44,59,77,0.18);
  background:linear-gradient(180deg, rgba(238,233,223,0.95), rgba(201,193,177,0.35));
  color:var(--steel);
  padding:10px 14px;
  border-radius:999px;
  font-weight:650;
  cursor:pointer;
  transition:transform 180ms ease, box-shadow 180ms ease, background 220ms ease, border-color 220ms ease;
}

.chip:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(27,38,50,0.08);
}

.chip.is-active{
  background:linear-gradient(90deg, var(--apricot), var(--copper));
  border-color:var(--copper);
  color:#fff;
  box-shadow:0 0 15px rgba(255,177,98,0.40);
}

.tile{
  grid-column: span 4;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(27,38,50,0.10);
  aspect-ratio: 4 / 5;
  background: rgba(201,193,177,0.16);
}

.tile img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms ease;
  filter: contrast(1.03) saturate(1.05);
}

.tile::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 320ms ease;
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(255,177,98,0.18), transparent 60%),
    linear-gradient(180deg, rgba(27,38,50,0.05), rgba(27,38,50,0.55));
}

.tile:hover img{ transform:scale(1.05); }
.tile:hover::after{ opacity:1; }

.focus-top { object-position: center top; }
.focus-bottom { object-position: center bottom; }
.focus-left { object-position: left center; }
.focus-right { object-position: right center; }

.tile-label{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  color:#fff;
  font-size:.9rem;
  letter-spacing:.02em;
  font-family: "Alex Brush", cursive;
  font-weight:400;
}

/* =========================
   5) LIGHTBOX
   ========================= */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(27,38,50,0.72);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.lightbox.open{ display:flex; }

.lb-img{
  max-width:92vw;
  max-height:92vh;
  border-radius:var(--radius);
}

.lb-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(27,38,50,0.45);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  user-select:none;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.lb-btn:hover{
  background:rgba(27,38,50,0.60);
  border-color:rgba(255,255,255,0.34);
  transform:translateY(-50%) scale(1.04);
}

.lb-btn:active{ transform:translateY(-50%) scale(0.98); }

.lb-prev{ left:16px; }
.lb-next{ right:16px; }

/* Close button (X) — top-right, not centered */
.lb-close{
  top: 14px;
  right: 14px;
  left: auto;
  transform: none;
  border-radius: 999px;
  font-size: 26px;
  line-height: 1;
  padding: 8px 12px;
}

.lb-close:hover{ transform:none; }
.lb-close:active{ transform:none; }

.lb-count{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(27,38,50,0.45);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  font-size:13px;
  letter-spacing:0.2px;
}

@media (max-width:420px){
  .lb-btn{ font-size:20px; padding:9px 11px; }
  .lb-prev{ left:10px; }
  .lb-next{ right:10px; }
  .lb-count{ bottom:14px; font-size:12px; }
  .lb-close{ top: 10px; right: 10px; font-size: 24px; }
}

/* =========================
   6) FOOTER
   ========================= */
.site-footer{
  margin-top:26px;
  padding:22px 0 18px;
  background:linear-gradient(180deg, rgba(201,193,177,0.35), rgba(238,233,223,0.85));
  border-top:1px solid rgba(27,38,50,0.10);
}

.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.footer-name{
  margin:0 0 6px;
  font-family:"Alex Brush", cursive;
  font-weight:400;
  color:var(--steel);
  font-size:20px;
}

.footer-tagline{
  margin:0;
  color:rgba(27,38,50,0.65);
  font-weight:600;
  letter-spacing:0.5px;
  font-size:13px;
}

.footer-bottom{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(27,38,50,0.08);
}

@media (max-width:740px){
  .footer-inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}

/* =========================
   7) RESPONSIVE LAYOUT
   ========================= */
@media (max-width:980px){
  .home-grid{ grid-template-columns:repeat(2, minmax(240px, 1fr)); }
  .tile{ grid-column:span 6; }
}

@media (max-width:560px){
  .home-grid{ grid-template-columns:1fr; }
  .tile{ grid-column:span 12; }
}

/* =========================
   8) MOBILE HEADER (ONE VERSION ONLY)
   ========================= */
@media (max-width:720px){
  .site-header{
    position:fixed;
    top:0; left:0; right:0;
  }

  body{
    padding-top: var(--header-offset, 140px);
  }

  .header-menu{
    justify-content:flex-start; /* make swipe obvious */
  }
}

/* =========================
   9) SOCIALS PAGE
   ========================= */
.page-socials{
  padding-top:50px;
  text-align:center;
}

.socials-card{
  max-width:720px;
  margin:0 auto 22px;
}

.socials-icons{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px;
}

.social-icon{
  display:grid;
  place-items:center;
  gap:10px;
  width:150px;
  padding:18px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(27,38,50,0.10);
  background:
    radial-gradient(120% 80% at 20% 15%, rgba(255,177,98,0.20), transparent 60%),
    linear-gradient(180deg, rgba(238,233,223,0.92), rgba(201,193,177,0.18));
  box-shadow:0 10px 30px rgba(27,38,50,0.04);
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.social-icon svg{
  width:40px;
  height:40px;
  fill:rgba(27,38,50,0.88);
}

.social-label{
  font-weight:700;
  letter-spacing:0.2px;
}

.social-icon:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(27,38,50,0.10);
  border-color:rgba(27,38,50,0.12);
}

.socials-handle{ margin-top:16px; }

.direct-contact{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-link{
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--steel);
  transition: color 180ms ease, transform 180ms ease;
}

.contact-link:hover{
  color: var(--copper);
  transform: translateX(2px);
}

/* =========================
   PACKAGES / PRICING FIXES
   ========================= */
.page-packages .tile{
  aspect-ratio: auto;
  overflow: visible;
  height: auto;
}

.page-pricing .tile{
  aspect-ratio: auto;
  overflow: visible;
  height: auto;
}

.page-pricing .home-tile,
.page-packages .home-tile{
  overflow: visible;
}

.page-packages .portfolio-grid{
  align-items: stretch;
}

@media (max-width: 980px){
  .page-packages .portfolio-grid > .tile{
    grid-column: span 6 !important;
  }
}

@media (max-width: 560px){
  .page-packages .portfolio-grid{
    grid-template-columns: 1fr;
  }

  .page-packages .portfolio-grid > .tile{
    grid-column: span 12 !important;
    padding: 18px !important;
  }
}

.pricing .card,
.pricing-card,
.pricing-tier,
.pricing-box{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 560px){
  #birthday ul{ columns: 1 !important; column-gap: 0 !important; }
  #birthday ul li{ margin-bottom: 6px; }
}

/* =========================
   CLIENT GALLERY PAGE
   ========================= */
.actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.actions .chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
  padding: 12px 16px;
  height: auto;

  flex: 0 1 260px;
  min-width: 0;
}

@media (max-width: 520px){
  .actions{
    flex-direction: column;
    align-items: stretch;
  }
  .actions .chip{
    width: 100%;
    flex: 1 1 auto;
    white-space: normal;
  }
}

/* =========================
   BUTTON SYSTEM (ONE VERSION ONLY)
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:active{ transform:scale(0.98); }

/* Primary = orange gradient (GLOBAL CTA) */
.btn-primary{
  background:linear-gradient(90deg, var(--apricot), var(--copper));
  color:var(--charcoal);
  border:1px solid rgba(163,81,57,0.35);
  box-shadow:
    0 8px 20px rgba(255,177,98,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.35);
}

.btn-primary:hover{
  background:linear-gradient(90deg,
    rgba(255,177,98,0.95),
    rgba(163,81,57,0.95)
  );
  transform:translateY(-1px);
}

.btn-primary:active{
  transform:scale(0.98);
}

/* Ensure Contact Me matches primary button text color */
.actions .btn-primary,
.contact .btn-primary,
.page-contact .btn-primary{
  color:var(--charcoal);
}

/* Secondary = outline */
.btn-outline{
  background:transparent;
  color:var(--steel);
  border-color:rgba(44,59,77,0.28);
}

.btn-outline:hover{
  background:rgba(201,193,177,0.22);
  border-color:rgba(44,59,77,0.36);
}

/* Force Book Now CTA on booking page to use primary gradient */
.book-cta .btn-primary{
  background:linear-gradient(90deg, var(--apricot), var(--copper));
  color:var(--charcoal);
}