/* ==========================================================
   UNIDENT — DESIGN TOKENS
   Derived directly from the logo mark: warm paper background,
   near-black wordmark ink, and a gold triangle/sunburst accent.
   Type: Cinzel (display, wide tracking, triangular apex on "A")
         + Jost (body, quiet geometric sans)
   Motif: the triangle repeats as a bullet, divider and section
          marker; thin gold rays echo the logo's sunburst.
   ========================================================== */

:root{
  --paper:      #faf8f3;
  --paper-alt:  #f2ece1;
  --paper-deep: #ece4d4;
  --ink:        #16140f;
  --ink-70:     rgba(22,20,15,.72);
  --ink-45:     rgba(22,20,15,.45);
  --line:       rgba(22,20,15,.12);
  --gold-300:   #e9cd93;
  --gold-500:   #c38a21;
  --gold-600:   #a86f1c;
  --gold-700:   #7c5314;

  --display: 'Cinzel', serif;
  --body: 'Jost', sans-serif;

  --container: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font-family:inherit;}

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

h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:.01em; color:var(--ink);}

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-600); font-weight:500; margin-bottom:18px;
}
.eyebrow .rule{width:26px; height:1px; background:var(--gold-500);}
.center{text-align:center;}
.center .eyebrow{justify-content:center;}

/* ---------- triangle mark (inline svg symbol reused everywhere) --- */
.mark{width:1em; height:1em; display:inline-block;}
.mark svg{width:100%; height:100%; display:block;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  border:1px solid var(--ink);
  color:var(--ink);
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  border-radius:2px;
  transition:all .3s;
  white-space:nowrap;
  background:transparent;
}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn.gold{
  background:var(--gold-500); border-color:var(--gold-500); color:var(--paper);
}
.btn.gold:hover{background:var(--gold-600); border-color:var(--gold-600);}
.btn.ghost{border-color:var(--line); color:var(--ink-70);}
.btn.ghost:hover{border-color:var(--ink); background:transparent; color:var(--ink);}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,243,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top-strip{
  background:var(--ink); color:var(--paper-alt);
  font-size:.76rem; letter-spacing:.03em;
}
.top-strip .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 32px; flex-wrap:wrap; gap:8px;
}
.top-strip a{opacity:.9; transition:opacity .2s;}
.top-strip a:hover{opacity:1; color:var(--gold-300);}
.top-strip .tstrip-locations{display:flex; gap:22px; flex-wrap:wrap;}

nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; max-width:var(--container); margin:0 auto; gap:24px;
}
.logo img{height:46px; width:auto;}
.navlinks{display:flex; gap:34px; align-items:center;}
.navlinks a{
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-70); transition:color .25s; position:relative;
}
.navlinks a:hover, .navlinks a.active{color:var(--ink);}
.navlinks a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:var(--gold-500);
}
.nav-cta{display:flex; align-items:center; gap:16px;}
.menu-toggle{display:none; background:none; border:0; color:var(--ink); font-size:1.5rem; cursor:pointer;}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:86px 0 0;
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(195,138,33,.10), transparent 65%),
    var(--paper);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
  padding:70px 0 90px;
}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.16; margin-bottom:24px;}
.hero h1 em{font-style:normal; color:var(--gold-600);}
.hero > .wrap > .hero-grid p{color:var(--ink-70); font-size:1.05rem; max-width:480px; margin-bottom:36px;}
.hero-copy p{color:var(--ink-70); font-size:1.05rem; max-width:480px; margin-bottom:36px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.hero-visual{position:relative;}
.hero-visual .frame{
  border:1px solid var(--line); padding:22px;
  position:relative;
}
.hero-visual .frame::before{
  content:''; position:absolute; inset:10px; border:1px solid var(--gold-300); pointer-events:none;
}
.hero-visual img{width:100%; aspect-ratio:4/3.1; object-fit:cover;}
.hero-visual .badge{
  position:absolute; bottom:-26px; left:-26px;
  background:var(--paper); border:1px solid var(--line);
  padding:18px 22px; display:flex; align-items:center; gap:14px;
  box-shadow:0 18px 40px -18px rgba(22,20,15,.25);
}
.hero-visual .badge .mark{width:30px; height:30px; color:var(--gold-500);}
.hero-visual .badge b{display:block; font-family:var(--display); font-size:1.05rem;}
.hero-visual .badge span{font-size:.76rem; color:var(--ink-45); letter-spacing:.04em;}

.info-row{
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.info-item{
  padding:34px 8px; text-align:center;
  border-left:1px solid var(--line);
}
.info-item:first-child{border-left:none;}
.info-item .mark{width:24px; height:24px; color:var(--gold-500); margin-bottom:14px;}
.info-item h4{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45); font-family:var(--body); font-weight:500; margin-bottom:10px;}
.info-item p{font-size:.98rem; color:var(--ink); font-weight:400;}
.info-item a{display:block;}
.info-item a:hover{color:var(--gold-600);}

/* ---------- section shells ---------- */
section{padding:110px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto;}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem);}
.section-alt{background:var(--paper-alt);}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center;}
.about-visual{position:relative;}
.about-visual img{aspect-ratio:3/3.6; object-fit:cover; border:1px solid var(--line);}
.about-visual .ring{
  position:absolute; top:-24px; right:-24px; width:110px; height:110px;
  color:var(--gold-500); opacity:.9;
}
.about-copy p{color:var(--ink-70); margin-bottom:18px;}
.about-copy .founder{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; gap:16px; align-items:center;
}
.about-copy .founder .mark{width:26px; height:26px; color:var(--gold-500); flex-shrink:0;}
.about-copy .founder b{display:block; font-family:var(--display); font-size:1rem;}
.about-copy .founder span{font-size:.84rem; color:var(--ink-45);}

/* care icon row */
.care-grid{
  margin-top:70px; padding-top:56px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(6,1fr); gap:28px;
}
.care-item{text-align:center;}
.care-item img{width:46px; height:46px; object-fit:contain; margin:0 auto 16px; filter:grayscale(1) contrast(1.15) brightness(.4);}
.care-item p{font-size:.82rem; color:var(--ink-70); letter-spacing:.01em;}

/* ---------- services ---------- */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.service{background:var(--paper); padding:42px 34px; transition:background .3s;}
.service:hover{background:var(--paper-alt);}
.service .mark{width:26px; height:26px; color:var(--gold-500); margin-bottom:22px;}
.service h3{font-size:1.1rem; margin-bottom:12px; font-weight:600;}
.service p{font-size:.9rem; color:var(--ink-70);}

/* ---------- team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.team-card{text-align:center;}
.team-card .photo{
  aspect-ratio:3/3.4; overflow:hidden; margin-bottom:22px; border:1px solid var(--line);
  background:var(--paper-alt);
}
.team-card .photo img{width:100%; height:100%; object-fit:cover; object-position:top;}
.team-card h3{font-size:1.05rem; margin-bottom:6px;}
.team-card .role{font-size:.82rem; color:var(--ink-45); letter-spacing:.03em; margin-bottom:4px;}
.team-card .tag{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600);}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; text-align:center; overflow:hidden;
  background:var(--ink); color:var(--paper);
}
.cta-band .rays{position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:1100px; opacity:.5; pointer-events:none;}
.cta-band-inner{position:relative; z-index:2; max-width:620px; margin:0 auto;}
.cta-band h2{color:var(--paper); font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:20px;}
.cta-band p{color:rgba(250,248,243,.68); margin-bottom:34px;}
.cta-band .eyebrow{color:var(--gold-300);}
.cta-band .eyebrow .rule{background:var(--gold-300);}
.cta-band .btn{border-color:var(--paper); color:var(--paper);}
.cta-band .btn:hover{background:var(--paper); color:var(--ink);}
.cta-band .btn.gold{border-color:var(--gold-500);}

/* ---------- footer ---------- */
footer{background:var(--paper-alt); padding-top:80px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; padding-bottom:64px;}
.footer-brand img{height:44px; margin-bottom:20px;}
.footer-brand p{color:var(--ink-70); font-size:.92rem; max-width:280px;}
.footer-social{display:flex; gap:14px; margin-top:22px;}
.footer-social a{
  width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.78rem;
  transition:all .25s;
}
.footer-social a:hover{border-color:var(--gold-500); color:var(--gold-600);}
.fcol h4{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); margin-bottom:20px; font-weight:500; font-family:var(--body);}
.fcol li{margin-bottom:12px; font-size:.9rem; color:var(--ink-70);}
.fcol a:hover{color:var(--ink);}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 0; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-45); flex-wrap:wrap; gap:12px;
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  padding:74px 0 60px; text-align:center;
  background:
    radial-gradient(ellipse 700px 380px at 50% 0%, rgba(195,138,33,.12), transparent 65%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:clamp(2rem,4vw,2.9rem); margin-bottom:16px;}
.page-hero p{color:var(--ink-70); max-width:560px; margin:0 auto;}
.breadcrumb{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); margin-bottom:18px;}
.breadcrumb a:hover{color:var(--gold-600);}

/* ---------- gallery ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.gallery-item{
  aspect-ratio:1/1; overflow:hidden; position:relative; cursor:pointer;
  border:1px solid var(--line);
}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(22,20,15,.35));
  opacity:0; transition:opacity .3s;
}
.gallery-item:hover::after{opacity:1;}
.gallery-item .zoom{
  position:absolute; bottom:14px; left:14px; z-index:2;
  color:#fff; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transition:opacity .3s;
}
.gallery-item:hover .zoom{opacity:1;}

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(15,13,10,.94); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:85vh; object-fit:contain; border:1px solid rgba(255,255,255,.15);}
.lightbox .close, .lightbox .prev, .lightbox .next{
  position:absolute; color:#fff; background:none; border:1px solid rgba(255,255,255,.3);
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; transition:all .25s;
}
.lightbox .close:hover, .lightbox .prev:hover, .lightbox .next:hover{border-color:var(--gold-500); color:var(--gold-300);}
.lightbox .close{top:28px; right:28px;}
.lightbox .prev{left:28px; top:50%; transform:translateY(-50%);}
.lightbox .next{right:28px; top:50%; transform:translateY(-50%);}

/* ---------- contact page ---------- */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px;}
.contact-cards{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:36px;}
.contact-card{background:var(--paper); padding:26px 28px; display:flex; gap:18px; align-items:flex-start;}
.contact-card .mark{width:24px; height:24px; color:var(--gold-500); margin-top:3px; flex-shrink:0;}
.contact-card h4{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45); font-family:var(--body); font-weight:500; margin-bottom:8px;}
.contact-card p, .contact-card a{display:block; font-size:.98rem; color:var(--ink);}
.contact-card a:hover{color:var(--gold-600);}
.hours-table{width:100%; border-collapse:collapse; font-size:.92rem;}
.hours-table td{padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-70);}
.hours-table td:last-child{text-align:right; color:var(--ink); font-weight:400;}
.hours-table tr:last-child td{border-bottom:none;}

.form-panel{border:1px solid var(--line); padding:44px;}
.form-panel h3{font-size:1.3rem; margin-bottom:8px;}
.form-panel > p{color:var(--ink-70); font-size:.92rem; margin-bottom:30px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45);}
.field input, .field select, .field textarea{
  border:none; border-bottom:1px solid var(--line); background:transparent;
  padding:10px 2px; font-family:var(--body); font-size:.96rem; color:var(--ink);
  transition:border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold-500);}
.form-panel .btn{margin-top:8px; width:100%; justify-content:center;}
.form-note{font-size:.76rem; color:var(--ink-45); margin-top:16px;}

.map-frame{border:1px solid var(--line); overflow:hidden; margin-top:44px;}
.map-frame iframe{width:100%; height:380px; border:0; display:block; filter:grayscale(.15) contrast(1.05);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero-visual .badge{position:static; margin-top:20px; width:fit-content;}
  .about-grid{grid-template-columns:1fr; gap:40px;}
  .care-grid{grid-template-columns:repeat(3,1fr); gap:30px;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr); gap:32px;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .contact-grid{grid-template-columns:1fr; gap:48px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px;}
}
@media (max-width:720px){
  .top-strip .wrap{justify-content:center; text-align:center;}
  .navlinks{
    position:fixed; top:0; right:0; height:100vh; width:78vw; max-width:320px;
    background:var(--paper); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:26px; transform:translateX(100%); transition:transform .35s ease;
    border-left:1px solid var(--line); z-index:200;
  }
  .navlinks.open{transform:translateX(0);}
  .menu-toggle{display:block; z-index:210;}
  .nav-cta .btn span{display:none;}
  .info-row{grid-template-columns:1fr; }
  .info-item{border-left:none; border-top:1px solid var(--line);}
  .info-item:first-child{border-top:none;}
  .care-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr; max-width:320px; margin:0 auto;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:76px 0;}
}


/* ==========================================================
   UNIDENT — refinement pass
   Cleaner mobile header, calmer decorative language, better
   touch targets and spacing on narrow screens.
   ========================================================== */

/* Reduce repeated triangle motif: use a restrained gold dot instead. */
.mark{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold-500);
  flex:0 0 auto;
}
.mark svg{display:none;}
.about-visual .ring{display:none;}

/* Keep the actual brand logo intact and prevent flexbox from squeezing it. */
.logo{display:flex; align-items:center; flex:0 0 auto; min-width:0;}
.logo img{display:block; width:auto; height:46px; max-width:210px; object-fit:contain;}

/* Softer, less busy CTA decoration. */
.cta-band .rays{opacity:.18;}

@media (max-width:980px){
  nav{padding-left:24px; padding-right:24px;}
  .navlinks{gap:24px;}
  .hero{padding-top:64px;}
}

@media (max-width:720px){
  .wrap{padding-left:18px; padding-right:18px;}

  .top-strip{font-size:.68rem;}
  .top-strip .wrap{
    padding:7px 18px;
    gap:2px;
    justify-content:center;
  }
  .top-strip .tstrip-locations{
    width:100%;
    justify-content:center;
    gap:5px 12px;
    line-height:1.35;
  }
  .top-strip .tstrip-locations span{white-space:nowrap;}
  .top-strip > .wrap > a{display:none;}

  header{background:rgba(250,248,243,.96);}
  nav{
    min-height:64px;
    padding:10px 16px;
    gap:10px;
  }
  .logo img{
    height:38px;
    max-width:154px;
  }
  .navlinks{z-index:200;}
  .nav-cta{margin-left:auto; gap:8px;}
  .nav-cta .ghost{display:none;}
  .nav-cta .btn.gold{
    padding:10px 12px;
    font-size:.66rem;
    letter-spacing:.08em;
  }
  .menu-toggle{
    display:flex;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    font-size:1.35rem;
    line-height:1;
    padding:0;
  }

  .hero{padding-top:48px;}
  .hero-grid{gap:34px;}
  .hero h1{font-size:clamp(1.9rem,9vw,2.65rem); line-height:1.12;}
  .hero > .wrap > .hero-grid p,
  .hero-copy p{font-size:.98rem; margin-bottom:28px;}
  .hero-ctas{gap:10px;}
  .hero-ctas .btn{padding:12px 16px; font-size:.68rem; letter-spacing:.10em;}

  .info-row{margin-top:28px;}
  .info-item{padding:24px 0;}
  .info-item .mark{margin-bottom:10px;}

  section{padding:64px 0;}
  .section-head h2,
  .about-copy h2{font-size:clamp(1.65rem,7.5vw,2.15rem); line-height:1.2;}

  .care-grid{gap:24px 14px; margin-top:48px; padding-top:40px;}
  .care-item p{font-size:.76rem; line-height:1.45;}
  .care-item img{width:40px; height:40px; margin-bottom:11px;}

  .services-grid{border-left:0; border-right:0;}
  .service{padding:30px 22px;}
  .service .mark{margin-bottom:16px;}

  .team-grid{max-width:360px;}

  .cta-band .rays{display:none;}

  footer{padding-top:58px;}
  .footer-grid{gap:30px; padding-bottom:42px;}
  .footer-brand img{height:38px;}
  .foot-bottom{font-size:.7rem;}
}

@media (max-width:380px){
  .logo img{height:35px; max-width:142px;}
  .nav-cta .btn.gold{font-size:.60rem; padding:9px 9px;}
  .menu-toggle{width:40px; height:40px;}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .hero-ctas .btn{justify-content:center;}
}

.maps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px;}
.map-card{border:1px solid var(--line);background:#fff;overflow:hidden;}
.map-label{padding:18px 20px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;}
.map-label .eyebrow{margin:0;font-size:.72rem;}
.map-label strong{font-family:var(--serif, Cinzel, serif);font-size:1.05rem;font-weight:500;color:var(--ink);}
.maps-grid .map-frame{margin-top:0;border:0;}
.maps-grid .map-frame iframe{height:330px;}
@media(max-width:800px){.maps-grid{grid-template-columns:1fr;gap:18px;margin-top:30px;}.maps-grid .map-frame iframe{height:300px;}}

/* Phone contacts */
.phone-entry{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:14px;}
.phone-entry a{font-weight:600;}
.phone-entry span{display:block;margin-top:3px;}
.phone-entry em{display:block;font-style:normal;color:var(--ink-45);font-size:.9rem;margin-top:2px;}