/* Sunridge Dental — stylesheet */
:root{
  --cocoa:    #6B3A21;
  --cocoa-2:  #59301B;
  --lime:     #E4F163;
  --lime-2:   #D6E84A;
  --pale:     #F3F9DC;
  --lav:      #A99BEA;
  --cream:    #F7EEDA;
  --ink:      #3A2415;
  --tx:       #3A2E24;
  --tx-soft:  #7A6A5C;
  --hair:     rgba(58,36,21,.14);
  --sans:     "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --maxw:     1240px;
  --gutter:   clamp(20px, 4vw, 52px);
  --r:        22px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:clip; }
body{
  background:#F6EFE2;
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:10px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; background:none; border:0; }
::selection{ background:var(--cocoa); color:#fff; }

.shell{ border-radius:28px; overflow:clip; max-width:1560px; margin-inline:auto; }
.wrap{ width:min(var(--maxw), 100% - var(--gutter)*2); margin-inline:auto; }
h1,h2,h3{ font-weight:700; letter-spacing:-.02em; line-height:1.08; }
.h-hero{ font-size:clamp(40px, 5.4vw, 72px); color:#fff; }
.h-sec{ font-size:clamp(32px, 4.2vw, 54px); }
.rv{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.rv.in{ opacity:1; transform:none; }
html.noanim .rv{ opacity:1; transform:none; transition:none; }

/* pills */
.pill-lime{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--lime); color:var(--ink);
  font-weight:700; font-size:15.5px;
  padding:14px 28px; border-radius:999px;
  transition:transform .16s ease, background .16s ease;
}
.pill-lime:hover{ transform:translateY(-2px); background:var(--lime-2); }
.pill-out{
  display:inline-flex; align-items:center;
  border:1.5px solid rgba(228,241,99,.7); color:var(--lime);
  font-weight:600; font-size:14.5px;
  padding:11px 24px; border-radius:999px;
  transition:background .16s ease, color .16s ease;
  white-space:nowrap;
}
.pill-out:hover{ background:var(--lime); color:var(--ink); }

/* ------------- hero (cocoa) ------------- */
.hero{
  background:linear-gradient(160deg, #74412a 0%, var(--cocoa) 50%, #5A2F17 100%);
  color:#fff;
  position:relative; overflow:clip;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 0;
}
/* true page-centering of the nav links at desktop */
@media (min-width:901px){
  .nav{ display:grid; grid-template-columns:1fr auto 1fr; }
  .nav .brand{ justify-self:start; }
  .nav .nav-links{ justify-self:center; }
  .nav > .pill-out{ justify-self:end; }
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:22px; color:#fff; }
.brand img.brand-logo{ height:48px; width:auto; display:block; }
@media (max-width:520px){ .brand img.brand-logo{ height:42px; } }
.nav-links{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.nav-links a{
  font-size:13.5px; font-weight:600; color:#F2E5D8;
  border:1px solid rgba(247,238,218,.28);
  padding:8px 14px; border-radius:999px;
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.nav-links a:hover{ background:rgba(247,238,218,.14); color:#fff; }
@media (max-width:900px){ .nav-links{ display:none; } }

.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(24px, 4vw, 60px);
  align-items:center;
  padding:clamp(20px, 3vw, 40px) 0 0;
}
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-copy p.sub{ color:#EAD9C8; font-size:16.5px; max-width:44ch; margin:18px 0 30px; }
.trusted{
  display:flex; align-items:center; gap:14px; margin-top:clamp(34px, 5vw, 64px);
  padding-bottom:clamp(28px, 4vw, 48px);
}
.trusted .avs{ display:flex; align-items:center; }
.trusted .avs img{
  width:42px; height:42px; border-radius:50%;
  border:2.5px solid var(--cocoa); object-fit:cover; margin-left:-10px;
}
.trusted .avs img:first-child{ margin-left:0; }
.trusted .chip{
  background:#fff; color:var(--ink); font-weight:800; font-size:14px;
  border-radius:999px; padding:9px 14px; margin-left:-8px;
  border:2.5px solid var(--cocoa);
}
.trusted p{ font-size:13.5px; color:#EAD9C8; line-height:1.4; }
.trusted p b{ color:#fff; }
.hero-photo{ position:relative; align-self:end; }
.hero-photo img{
  width:100%; max-width:560px; margin-inline:auto;
  aspect-ratio:4/4.1; object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.4));
}

/* ------------- services (pale lime) ------------- */
.svc{ background:var(--pale); padding:clamp(64px, 9vw, 120px) 0; }
.svc h2{ text-align:center; color:#7A3A18; margin-bottom:clamp(40px, 6vw, 72px); }
.svc-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 3vw, 44px);
  align-items:start;
}
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr; } }
.svc-card img{
  border-radius:16px; aspect-ratio:4/3.6; object-fit:cover; width:100%;
  box-shadow:0 24px 44px -30px rgba(58,36,21,.45);
}
.svc-card:nth-child(2){ margin-top:clamp(0px, 5vw, 64px); }
.svc-card h3{ font-size:19px; margin:16px 0 4px; }
.svc-card p{ font-size:14px; color:var(--tx-soft); }
.svc-note{ text-align:center; margin-top:clamp(40px, 5vw, 64px); font-size:15px; }
.svc-note a{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ------------- stats band ------------- */
.stats{ background:var(--pale); padding-bottom:clamp(64px, 9vw, 110px); }
.stats-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 2vw, 26px);
}
@media (max-width:900px){ .stats-grid{ grid-template-columns:1fr 1fr; } }
.stat-card{
  background:#fff; border-radius:18px;
  padding:clamp(20px, 2.4vw, 30px);
  min-height:220px;
  display:flex; flex-direction:column; justify-content:space-between; gap:20px;
  box-shadow:0 18px 36px -28px rgba(58,36,21,.4);
}
.stat-card .big{ font-size:clamp(34px, 3.4vw, 46px); font-weight:800; color:#7A3A18; }
.stat-card .lbl{ font-size:13.5px; font-weight:700; margin-top:2px; }
.stat-card p{ font-size:13px; color:var(--tx-soft); }
.stat-card.photo{ padding:0; position:relative; overflow:clip; }
.stat-card.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stat-card.photo .float{
  position:absolute; left:14px; bottom:14px;
  background:rgba(255,255,255,.94); border-radius:14px;
  padding:12px 16px;
}
.stat-card.photo .float .big{ font-size:26px; }
.stat-card.photo .float .lbl{ font-size:12px; }

/* ------------- experts (lavender) ------------- */
.experts{ background:var(--lav); padding:clamp(64px, 9vw, 120px) 0; }
.experts h2{ text-align:center; color:#fff; margin-bottom:clamp(44px, 6vw, 80px); }
.exp-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(28px, 4vw, 60px) clamp(20px, 3vw, 44px);
  max-width:1000px; margin-inline:auto;
}
@media (max-width:820px){ .exp-grid{ grid-template-columns:1fr 1fr; } }
.exp{ text-align:center; }
.exp .disc{
  width:min(100%, 260px); aspect-ratio:1/1; border-radius:50%;
  margin-inline:auto; position:relative; overflow:clip;
  background:#EFF9A5;
  box-shadow:0 26px 44px -30px rgba(35,20,60,.55);
}
/* sunburst rays on a slowly-spinning layer behind each portrait */
.exp .disc::before{
  content:""; position:absolute; inset:-22%; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, var(--lime) 0deg 14deg, #EFF9A5 14deg 28deg);
  animation:sunspin 46s linear infinite;
}
@keyframes sunspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .exp .disc::before{ animation:none; } }
html.noanim .exp .disc::before{ animation:none; }
.exp .disc img{
  position:absolute; inset:auto 0 0 0; z-index:2;
  width:66%; margin-inline:auto;
  filter:drop-shadow(0 10px 16px rgba(35,20,60,.3));
}
.exp b{ display:block; color:#fff; font-size:clamp(17px, 1.7vw, 21px); font-weight:700; margin-top:18px; }
.exp span{ display:block; color:#EFEAFF; font-size:13.5px; margin-top:3px; }

/* ------------- specialized (cocoa) ------------- */
.special{ background:var(--cocoa-2); color:#F2E5D8; padding:clamp(64px, 9vw, 120px) 0; }
.special .wrap{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px, 5vw, 80px); align-items:center;
}
@media (max-width:860px){ .special .wrap{ grid-template-columns:1fr; } }
.special .oval{
  width:100%; aspect-ratio:3/4;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 34px 60px -34px rgba(0,0,0,.55);
}
.special h2{ color:var(--lime); margin-bottom:clamp(22px, 3vw, 36px); }
.feat{ margin-bottom:22px; }
.feat b{ display:block; color:#fff; font-size:17px; margin-bottom:5px; }
.feat p{ font-size:14px; color:#D9C4B2; max-width:52ch; }

/* ------------- testimonial (cream) ------------- */
.quote{ background:var(--cream); padding:clamp(64px, 9vw, 110px) 0; text-align:center; }
.quote .micro{ font-size:12.5px; color:var(--tx-soft); margin-bottom:10px; }
.quote h2{ color:#7A3A18; margin-bottom:clamp(26px, 4vw, 44px); }
.quote blockquote{
  font-size:clamp(16.5px, 1.9vw, 22px); line-height:1.6; font-weight:500;
  max-width:62ch; margin:0 auto 22px;
}
.quote .who{ font-size:13px; color:var(--tx-soft); }
.quote .who::before{ content:"—— "; letter-spacing:-.1em; }
.quote-foot{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  max-width:760px; margin:34px auto 0;
}
.quote-foot .avs{ display:flex; }
.quote-foot .avs img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--cream); margin-left:-9px; }
.quote-foot .avs img:first-child{ margin-left:0; }
.quote-foot .stars{ font-weight:800; font-size:15px; }
.quote-foot .stars i{ font-style:normal; color:#C98A2E; letter-spacing:2px; margin-right:8px; }
.quote-foot .stars span{ color:var(--tx-soft); font-weight:600; }
.qarrows{ display:flex; gap:8px; }
.qarrows button{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--hair);
  display:grid; place-items:center; color:var(--cocoa);
  transition:background .15s ease, color .15s ease;
}
.qarrows button:hover{ background:var(--cocoa); color:#fff; }
.qarrows svg{ width:16px; height:16px; }

/* ------------- footer (cocoa, giant wordmark) ------------- */
.foot{ background:var(--cocoa-2); color:#EAD9C8; padding:clamp(56px, 8vw, 90px) 0 0; overflow:clip; }
.foot-top{
  display:grid; grid-template-columns:1.2fr 1fr 1fr;
  gap:clamp(28px, 4vw, 64px);
  padding-bottom:clamp(36px, 5vw, 60px);
}
@media (max-width:860px){ .foot-top{ grid-template-columns:1fr; } }
.foot h3{ color:var(--lime); font-size:clamp(22px, 2.4vw, 30px); margin-bottom:20px; }
.callback{
  display:flex; align-items:center; gap:10px;
  border-bottom:1.5px solid rgba(234,217,200,.4);
  padding-bottom:10px; max-width:340px;
}
.callback input{
  flex:1; background:none; border:0; outline:none;
  color:#fff; font:inherit; font-size:14.5px; min-width:0;
}
.callback input::placeholder{ color:#B99C86; }
.callback button{ color:var(--lime); }
.callback svg{ width:18px; height:18px; }
.foot-info{ display:grid; grid-template-columns:1fr 1fr; gap:22px; font-size:13.5px; }
.foot-info b{ display:block; color:#fff; font-size:14px; margin-bottom:6px; }
.foot-links{
  border-top:1px solid rgba(234,217,200,.2);
  padding:clamp(26px, 3.4vw, 40px) 0;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(20px, 3vw, 44px);
}
@media (max-width:760px){ .foot-links{ grid-template-columns:1fr 1fr; } }
.foot-links h4{ color:#fff; font-size:14px; margin-bottom:12px; }
.foot-links ul{ display:grid; gap:8px; }
.foot-links a{ font-size:13.5px; color:#CBB09A; transition:color .15s ease; }
.foot-links a:hover{ color:var(--lime); }
.socials{ display:flex; gap:10px; }
.socials a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(234,217,200,.35);
  display:grid; place-items:center; color:var(--lime);
  transition:background .15s ease;
}
.socials a:hover{ background:rgba(228,241,99,.14); }
.socials svg{ width:16px; height:16px; }
.foot-legal{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12px; color:#B99C86;
  padding-bottom:8px;
}
.foot-disclose{ font-size:11.5px; color:#A98D77; line-height:1.7; max-width:92ch; margin-top:10px; }
.wordmark{
  font-size:clamp(70px, 14.5vw, 220px);
  font-weight:800; letter-spacing:-.04em; line-height:.78;
  color:var(--lime);
  text-align:center;
  margin-top:clamp(20px, 3vw, 40px);
  transform:translateY(.16em);
}
/* the wordmark reveals by rising into place (rv transform would fight
   the baseline translate, so give it its own end state) */
.wordmark.rv{ transform:translateY(.5em); }
.wordmark.rv.in{ transform:translateY(.16em); }

/* ------------------------------------------------------------
   Revision round 2026-08-14: gentle motion
   ------------------------------------------------------------ */
.svc-card img, .stat-card.photo img{ transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.svc-card:hover img{ transform:scale(1.03); }
.stat-card{ transition:transform .22s ease, box-shadow .22s ease; }
.stat-card:hover{ transform:translateY(-4px); box-shadow:0 26px 44px -30px rgba(58,36,21,.5); }
.trusted .avs img, .trusted .chip{ opacity:0; transform:scale(.4); transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.trusted.in .avs img, .trusted.in .chip{ opacity:1; transform:none; }
.trusted.in .avs img:nth-child(1){ transition-delay:.05s }
.trusted.in .avs img:nth-child(2){ transition-delay:.15s }
.trusted.in .avs img:nth-child(3){ transition-delay:.25s }
.trusted.in .chip{ transition-delay:.35s }
html.noanim .trusted .avs img, html.noanim .trusted .chip{ opacity:1; transform:none; transition:none; }
.special .oval{ animation:oval-float 7s ease-in-out infinite; }
@keyframes oval-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.exp .disc img{ transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.exp:hover .disc img{ transform:scale(1.06); }
@media (prefers-reduced-motion: reduce){
  .special .oval{ animation:none; }
  .trusted .avs img, .trusted .chip{ opacity:1; transform:none; transition:none; }
}
html.noanim .special .oval{ animation:none; }

/* text wordmark + photo portraits */
.brand-text{font-weight:800;font-size:21px;letter-spacing:-.02em;white-space:nowrap;color:inherit}.brand-text em{font-style:normal;font-weight:500;opacity:.75;margin-left:0}@media(max-width:520px){.brand-text{font-size:18px}}
.exp .disc img{position:absolute;inset:9%;width:82%;height:82%;margin:0;border-radius:50%;object-fit:cover;object-position:center 20%;filter:none;box-shadow:0 10px 20px rgba(35,20,60,.25)}