/* ===========================================================
   SIENNA BODYWORK — pages.css
   Additional components for the multi-page build: sub-page
   headers, gallery, reviews, contact icons, legal pages and
   the home-page teaser strips. Shares tokens from styles.css.
   =========================================================== */

/* ============================= PAGE HERO (sub-pages) ============================= */
.page-hero{
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(8rem, 16vw, 11rem) 0 clamp(3.5rem, 7vw, 5rem);
  overflow: hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 85% 0%, rgba(181,96,47,.28), transparent 55%);
  pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom:.4em; }
.page-hero p.lead{ color: rgba(251,246,238,.78); max-width: 56ch; font-size: 1.05rem; margin:0; }
.page-hero .crumb{
  display:flex; align-items:center; gap:.5em;
  font-size:.78rem; color: rgba(251,246,238,.55);
  text-transform: uppercase; letter-spacing:.12em; margin-top: 1.4rem;
}
.page-hero .crumb a{ color: rgba(251,246,238,.75); text-decoration:none; border-bottom:1px solid rgba(251,246,238,.3); }
.page-hero .crumb a:hover{ color: var(--clay-soft); border-color: var(--clay-soft); }

/* ============================= HOME LOGO SHOWCASE ============================= */
.brand-mark{
  display:flex;
  justify-content:center;
  margin: 0 auto 1.4rem;
}
.brand-mark img{
  width: min(210px, 46vw);
  height:auto;
  filter: drop-shadow(0 10px 26px rgba(42,26,16,.35));
}
.hero-copy .brand-mark{ justify-content:flex-start; margin: 0 0 1.6rem; }
.hero-copy .brand-mark img{ width: 96px; }

/* ============================= HOME TEASER STRIPS ============================= */
.teaser-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.teaser-head h2{ margin-bottom:.3em; }
.teaser-more{
  display:inline-flex; align-items:center; gap:.5em;
  text-decoration:none; font-weight:700; font-size:.9rem;
  color: var(--clay-deep);
  border-bottom: 1px solid rgba(122,62,29,.4);
  padding-bottom: 2px;
  white-space:nowrap;
  transition: color .3s, border-color .3s;
}
.teaser-more:hover{ color: var(--clay); border-color: var(--clay); }

/* Services teaser cards */
.services-teaser{ background: var(--cream); }
.svc-teaser-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.svc-teaser-card{
  background: var(--paper);
  border: 1px solid rgba(90,54,32,.16);
  padding: 2rem 1.7rem;
  display:flex; flex-direction:column;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.svc-teaser-card:hover{ transform: translateY(-6px); border-color: var(--clay); }
.svc-teaser-card .ic{ width: 40px; height:40px; margin-bottom:1.1rem; color: var(--clay); }
.svc-teaser-card h3{ font-size: 1.2rem; margin-bottom:.4rem; }
.svc-teaser-card p{ font-size:.92rem; color: var(--walnut); opacity:.82; margin-bottom: 1.2rem; flex:1; }
.svc-teaser-card .from{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: var(--clay-deep); font-weight:800; }
@media (max-width: 900px){ .svc-teaser-grid{ grid-template-columns: 1fr; } }

/* Gallery teaser on home */
.gallery-teaser{ background: var(--sand); }
.gt-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
}
.gt-grid a{ text-decoration:none; }
@media (max-width: 900px){ .gt-grid{ grid-template-columns: repeat(2, 1fr); } }

/* Reviews teaser on home */
.reviews-teaser{ background: var(--paper); }
.rt-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
@media (max-width: 900px){ .rt-grid{ grid-template-columns: 1fr; } }

/* CTA band (used on home before footer, and top of contact) */
.cta-band{
  background: var(--walnut);
  color: var(--cream);
  position:relative; overflow:hidden;
  padding: clamp(3.5rem, 8vw, 5.5rem) 0;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 15% 20%, rgba(181,96,47,.3), transparent 55%);
}
.cta-band .wrap{ position:relative; z-index:1; text-align:center; max-width: 720px; }
.cta-band h2{ color: var(--cream); }
.cta-band p{ color: rgba(251,246,238,.78); }
.cta-band .btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }

/* ============================= GALLERY PAGE ============================= */
.gallery-section{ background: var(--cream); }
.gallery-intro{ max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gallery-filter{
  display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom: 2.4rem;
}
.gallery-filter button{
  font-family: var(--font-body); font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.6em 1.2em; border-radius: 999px;
  border: 1px solid rgba(90,54,32,.3);
  background: transparent; color: var(--walnut);
  cursor:pointer; transition: all .3s var(--ease);
}
.gallery-filter button.active, .gallery-filter button:hover{
  background: var(--walnut); color: var(--cream); border-color: var(--walnut);
}
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: .6rem;
}
.gallery-grid .tall{ grid-row: span 2; }
.gallery-grid .wide{ grid-column: span 2; }
@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .gallery-grid .wide{ grid-column: span 2; }
}
@media (max-width: 560px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-grid .wide, .gallery-grid .tall{ grid-column: span 1; grid-row: span 1; }
}

.g-tile{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius: var(--radius);
  cursor: default;
}
.g-tile .g-surface{
  position:absolute; inset:0;
  transition: transform .6s var(--ease);
}
.g-tile:hover .g-surface{ transform: scale(1.06); }
.g-tile .g-pattern{
  position:absolute; inset:0;
  opacity:.5;
  background-image: radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 14px 14px;
  mix-blend-mode: overlay;
}
.g-tile .g-mark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.g-tile .g-mark svg{ width: 34%; opacity:.55; }
.g-tile .g-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: .9rem 1.1rem;
  background: linear-gradient(to top, rgba(42,26,16,.72), transparent);
  color: var(--cream);
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  transform: translateY(6px);
  opacity:.92;
}
.g-note{
  margin-top: 2.4rem;
  font-size: .85rem;
  color: var(--walnut);
  opacity:.65;
  max-width: 60ch;
}

/* ============================= REVIEWS PAGE ============================= */
.reviews-section{ background: var(--sand); }
.reviews-summary{
  display:flex; align-items:center; gap: 2.2rem; flex-wrap:wrap;
  background: var(--paper);
  border: 1px solid rgba(90,54,32,.16);
  padding: 2rem clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.reviews-summary .score{
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--clay-deep);
  line-height:1;
}
.reviews-summary .score-meta{ display:flex; flex-direction:column; gap:.3rem; }
.stars{ display:inline-flex; gap:.15em; color: var(--clay); }
.stars svg{ width:16px; height:16px; }
.reviews-summary .score-meta .count{ font-size:.85rem; color: var(--walnut); opacity:.75; }
.reviews-summary .bars{ flex:1; min-width: 220px; display:grid; gap:.4rem; }
.reviews-summary .bar-row{ display:grid; grid-template-columns: 3.4em 1fr 2.6em; align-items:center; gap:.6rem; font-size:.78rem; color:var(--walnut); }
.reviews-summary .bar-track{ height:6px; background: rgba(90,54,32,.12); border-radius:99px; overflow:hidden; }
.reviews-summary .bar-fill{ height:100%; background: var(--clay); border-radius:99px; }

.review-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 980px){ .review-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .review-grid{ grid-template-columns: 1fr; } }

.review-card{
  background: var(--paper);
  border: 1px solid rgba(90,54,32,.16);
  padding: 1.9rem 1.7rem;
  display:flex; flex-direction:column;
}
.review-card .stars{ margin-bottom:.9rem; }
.review-card p.quote{ font-size:.95rem; color: var(--walnut); opacity:.9; flex:1; }
.review-card .who{
  display:flex; align-items:center; gap:.8rem;
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(90,54,32,.14);
}
.review-card .avatar{
  width: 38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--sand-deep); color: var(--clay-deep);
  font-family: var(--font-display); font-weight:600; font-size:.95rem;
  flex: none;
}
.review-card .who-name{ font-weight:700; color: var(--walnut); font-size:.88rem; }
.review-card .who-meta{ font-size:.76rem; color: var(--walnut); opacity:.6; }

.reviews-cta{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align:center;
}
.reviews-cta p{ max-width: 52ch; margin: .6rem auto 1.4rem; color: var(--walnut); opacity:.8; }

/* ============================= CONTACT PAGE ============================= */
.contact-section{ background: var(--cream); }
.contact-grid{
  display:grid;
  grid-template-columns: .95fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
.contact-grid > *{ min-width: 0; }
.contact-cards{ display:grid; gap: 1rem; }
.contact-cards > *{ min-width: 0; }
.contact-card{
  display:flex; align-items:flex-start; gap: 1rem;
  background: var(--paper);
  border: 1px solid rgba(90,54,32,.16);
  padding: 1.4rem 1.5rem;
  text-decoration:none;
  color: inherit;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.contact-card:hover{ border-color: var(--clay); transform: translateX(4px); }
.contact-card .cico{
  flex:none;
  width: 46px; height:46px;
  border-radius: 50%;
  background: var(--sand);
  display:flex; align-items:center; justify-content:center;
  color: var(--clay-deep);
}
.contact-card .cico svg{ width:22px; height:22px; }
.contact-card > span:last-child{ flex: 1 1 0%; min-width: 0; }
.contact-card h3{ font-size:1rem; margin-bottom:.2rem; }
.contact-card p{ margin:0; font-size:.88rem; color: var(--walnut); opacity:.78; overflow-wrap: break-word; }
.contact-card .value{ font-weight:700; opacity:1; color: var(--walnut); }

.contact-note{
  margin-top: 1.4rem;
  font-size: .85rem;
  color: var(--walnut);
  opacity:.7;
  border-top: 1px solid rgba(90,54,32,.16);
  padding-top: 1.2rem;
}

.map-frame{
  margin-top: 1.6rem;
  border: 1px solid rgba(90,54,32,.16);
  aspect-ratio: 16/9;
  overflow:hidden;
}
.map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(.25) sepia(.12); }

.contact-form-wrap{
  background: var(--walnut);
  color: var(--cream);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  position: relative;
  overflow:hidden;
}
.contact-form-wrap::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 85% 0%, rgba(181,96,47,.28), transparent 55%);
  pointer-events:none;
}
.contact-form-wrap > *{ position:relative; z-index:1; }
.contact-form-wrap h2{ color: var(--cream); font-size:1.5rem; }
.contact-form-wrap > p{ color: rgba(251,246,238,.75); font-size:.92rem; margin-bottom:1.6rem; }

/* ============================= LEGAL PAGES ============================= */
.legal-section{ background: var(--cream); }
.legal-wrap{ max-width: 780px; }
.legal-updated{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
  color: var(--clay-deep); font-weight:700; margin-bottom:2rem;
}
.legal-wrap h2{ font-size:1.4rem; margin-top:2.2rem; }
.legal-wrap h3{ font-size:1.1rem; margin-top:1.6rem; color: var(--clay-deep); }
.legal-wrap p, .legal-wrap li{ color: var(--walnut); font-size:.97rem; opacity:.9; }
.legal-wrap ul, .legal-wrap ol{ padding-left: 1.3rem; }
.legal-wrap li{ margin-bottom:.5rem; }
.legal-toc{
  background: var(--sand);
  border: 1px solid rgba(90,54,32,.16);
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.legal-toc p{ font-weight:800; text-transform:uppercase; font-size:.75rem; letter-spacing:.1em; color: var(--clay-deep); margin-bottom:.7rem; opacity:1; }
.legal-toc ol{ margin:0; padding-left:1.2rem; columns: 2; gap: 1.5rem; }
.legal-toc a{ color: var(--walnut); text-decoration:none; font-size:.88rem; opacity:.85; }
.legal-toc a:hover{ color: var(--clay-deep); text-decoration:underline; }
@media (max-width: 640px){ .legal-toc ol{ columns:1; } }
.legal-callout{
  border-left: 3px solid var(--clay);
  background: var(--sand);
  padding: 1.1rem 1.4rem;
  margin: 1.6rem 0;
  font-size: .92rem;
}
.legal-callout strong{ color: var(--clay-deep); }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}


/* Photo replacement slots */
.photo-slot .g-surface{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}


.owner-reply{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(90,54,32,.14);font-size:.92rem;line-height:1.55;}
.owner-reply strong{display:block;margin-bottom:.25rem;color:var(--clay-deep);}
.owner-reply p{margin:0;}


/* Fixed gallery image display */
.photo-slot .g-surface{
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width:100%;
  height:100%;
}
.photo-slot .g-cap{ z-index:2; }


/* Full-size photo display across gallery tiles */
.g-tile .g-surface{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}