/* ========= REGAL PAWS — royal-heritage luxury ========= */
:root{
  --ink:#151a2e;          /* deep royal navy-ink */
  --ink-soft:#232a44;
  --burgundy:#5e1b2e;
  --burgundy-lt:#7a2438;
  --gold:#c8a24a;
  --gold-lt:#e0c67e;
  --gold-deep:#a07c2c;
  --green:#20402f;        /* renaissance robe green */
  --cream:#f6efe0;
  --parchment:#faf5e9;
  --paper:#fffdf7;
  --muted:#6c6455;
  --line:rgba(200,162,74,.32);
  --shadow:0 30px 70px -30px rgba(21,26,46,.45);
  --serif:"Cormorant Garamond",Georgia,serif;
  --roman:"Marcellus","Cormorant Garamond",serif;
  --maxw:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--parchment);
  font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.roman{font-family:var(--roman)}
.eyebrow{
  font-family:var(--roman);text-transform:uppercase;letter-spacing:.32em;
  font-size:12.5px;color:var(--gold-deep);
}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.01em}
h1{font-size:clamp(48px,7.4vw,104px)}
h2{font-size:clamp(34px,4.8vw,60px)}
h3{font-size:clamp(22px,2.6vw,30px)}
.serif-i{font-style:italic}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--roman);letter-spacing:.12em;text-transform:uppercase;
  font-size:13px;padding:17px 34px;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:.35s cubic-bezier(.2,.8,.2,1);
}
.btn-gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold) 60%,var(--gold-deep));color:var(--ink);box-shadow:0 12px 30px -12px rgba(160,124,44,.7)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(160,124,44,.85)}
.btn-outline{border-color:var(--gold);color:var(--gold-deep);background:transparent}
.btn-outline:hover{background:var(--gold);color:var(--ink)}
.btn-ghost-light{border-color:rgba(224,198,126,.55);color:var(--gold-lt)}
.btn-ghost-light:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---- crest / divider ---- */
.crest{font-family:var(--serif);font-size:26px;color:var(--gold)}
.rule{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold);margin:0 auto}
.rule::before,.rule::after{content:"";height:1px;width:120px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule::after{background:linear-gradient(270deg,transparent,var(--gold))}

/* ---- NAV ---- */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(250,245,233,.82);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:26px;letter-spacing:.02em}
.brand .mono{width:38px;height:38px;border:1.5px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);font-size:19px}
.brand b{font-weight:600}
.nav-links{display:flex;gap:34px;font-family:var(--roman);font-size:14px;letter-spacing:.06em}
.nav-links a{color:var(--ink);opacity:.8;transition:.2s}
.nav-links a:hover{opacity:1;color:var(--gold-deep)}
.nav .btn{padding:12px 24px}
.burger{display:none}
.sm-only{display:none}

/* ---- HERO ---- */
.hero{position:relative;padding:70px 0 40px;background:
  radial-gradient(1200px 600px at 80% -10%,rgba(200,162,74,.14),transparent 60%),
  linear-gradient(180deg,var(--parchment),var(--cream))}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{margin:14px 0 10px}
.hero h1 em{font-style:italic;color:var(--burgundy)}
.hero p.lead{font-size:22px;color:#4a4536;max-width:30ch;margin-bottom:30px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--roman);font-size:13px;letter-spacing:.08em;color:var(--muted);margin-top:22px}
.hero-art{position:relative}
.hero-art .frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;display:block}
.hero-art .frame{border:12px solid transparent;border-image:linear-gradient(135deg,var(--gold-lt),var(--gold-deep)) 1;
  box-shadow:var(--shadow);background:#000}
.hero-art .tag{position:absolute;left:-14px;bottom:26px;background:var(--ink);color:var(--gold-lt);
  font-family:var(--roman);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;box-shadow:var(--shadow)}
.hero-art .swatch{position:absolute;top:-18px;right:-18px;width:96px;height:120px;object-fit:cover;
  border:5px solid var(--paper);box-shadow:var(--shadow);transform:rotate(4deg)}

/* marquee of trust */
.marquee{background:var(--ink);color:var(--gold-lt);font-family:var(--roman);
  letter-spacing:.22em;text-transform:uppercase;font-size:12px;padding:15px 0;overflow:hidden;white-space:nowrap}
.marquee span{display:inline-block;padding:0 34px;opacity:.85}
.marquee .dot{color:var(--gold)}

/* ---- SECTION scaffold ---- */
section{padding:96px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 54px}
.sec-head h2{margin:16px 0 12px}
.sec-head p{color:var(--muted);font-size:20px}

/* ---- BEFORE/AFTER ---- */
.ba{background:var(--paper)}
.ba-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center;max-width:900px;margin:0 auto}
.ba-card{text-align:center}
.ba-card img{border:8px solid var(--paper);box-shadow:var(--shadow);width:100%;aspect-ratio:4/5;object-fit:cover}
.ba-card.after img{border-image:linear-gradient(135deg,var(--gold-lt),var(--gold-deep)) 1;border-width:8px;border-style:solid}
.ba-card small{display:block;margin-top:14px;font-family:var(--roman);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--muted)}
.ba-arrow{font-size:34px;color:var(--gold)}

/* ---- GALLERY ---- */
.gallery{background:linear-gradient(180deg,var(--cream),var(--parchment))}
.gal-grid{columns:4;column-gap:18px}
.gal-grid figure{break-inside:avoid;margin:0 0 18px;position:relative;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(21,26,46,.5);background:#000}
.gal-grid img{transition:transform .8s cubic-bezier(.2,.8,.2,1);width:100%}
.gal-grid figure:hover img{transform:scale(1.06)}
.gal-grid figcaption{position:absolute;inset:auto 0 0 0;padding:16px;color:#fff;
  font-family:var(--roman);letter-spacing:.1em;text-transform:uppercase;font-size:11px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:.4s}
.gal-grid figure:hover figcaption{opacity:1}

/* ---- STYLES ---- */
.styles{background:var(--ink);color:var(--cream)}
.styles .sec-head p{color:#b7b0a0}
.styles .eyebrow{color:var(--gold-lt)}
.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.style-card{background:var(--ink-soft);border:1px solid rgba(200,162,74,.25);overflow:hidden;transition:.4s}
.style-card:hover{transform:translateY(-6px);border-color:var(--gold)}
.style-card img{aspect-ratio:4/5;object-fit:cover;width:100%}
.style-card .body{padding:22px 24px 28px}
.style-card h3{color:var(--gold-lt);margin-bottom:8px}
.style-card p{color:#b7b0a0;font-size:17px}
.style-card .badge{font-family:var(--roman);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--gold-lt);display:inline-block;padding:4px 12px;margin-bottom:14px}

/* ---- HOW ---- */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:step}
.how-card{text-align:center;position:relative;padding-top:20px}
.how-card .num{font-family:var(--serif);font-size:64px;color:var(--gold);line-height:1;opacity:.9}
.how-card h3{margin:12px 0 10px}
.how-card p{color:var(--muted);font-size:18px}

/* ---- PRICING ---- */
.pricing{background:var(--paper)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price-card{border:1px solid var(--line);background:var(--parchment);padding:38px 32px;display:flex;flex-direction:column;transition:.35s}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.price-card.feat{background:var(--ink);color:var(--cream);border-color:var(--gold);position:relative}
.price-card.feat .amt,.price-card.feat h3{color:var(--gold-lt)}
.price-card.feat p,.price-card.feat li{color:#c8c1b1}
.price-card .tier{font-family:var(--roman);letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--gold-deep)}
.price-card.feat .tier{color:var(--gold-lt)}
.price-card .amt{font-family:var(--serif);font-size:56px;margin:8px 0 4px}
.price-card .amt small{font-size:20px;color:var(--muted)}
.price-card ul{list-style:none;margin:22px 0 28px;flex:1}
.price-card li{padding:9px 0;border-bottom:1px solid var(--line);font-size:17px}
.price-card li::before{content:"✦";color:var(--gold);margin-right:10px}
.ribbon{position:absolute;top:16px;right:-34px;transform:rotate(45deg);background:var(--gold);color:var(--ink);
  font-family:var(--roman);font-size:11px;letter-spacing:.14em;padding:5px 44px;text-transform:uppercase}

/* ---- MEMORIAL ---- */
.memorial{background:linear-gradient(120deg,var(--burgundy),var(--ink));color:var(--cream);text-align:center}
.memorial .wrap{max-width:760px}
.memorial h2{color:var(--gold-lt)}
.memorial p{font-size:21px;color:#e7dfcd;margin:18px 0 30px}

/* ---- FAQ ---- */
.faq-list{max-width:820px;margin:0 auto}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 0;font-family:var(--serif);font-size:24px;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:30px;transition:.3s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 24px;color:var(--muted);font-size:18px;max-width:70ch}

/* ---- CTA ---- */
.cta{background:var(--ink);color:var(--cream);text-align:center}
.cta h2{color:var(--gold-lt);margin-bottom:14px}
.cta p{color:#c8c1b1;font-size:20px;margin-bottom:30px}

/* ---- FOOTER ---- */
footer{background:#0f1324;color:#9a9382;padding:56px 0 34px;font-size:15px}
footer .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px}
footer .brand{color:var(--cream)}
footer a{opacity:.75}footer a:hover{opacity:1;color:var(--gold-lt)}
footer .fcol h4{font-family:var(--roman);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--gold);margin-bottom:16px}
footer .fcol a{display:block;margin-bottom:9px}
footer .legal{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;opacity:.7}

/* ---- reveal anim (only hides when JS is active, so no-JS users/crawlers still see everything) ---- */
html.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
html.js .reveal.in{opacity:1;transform:none}

/* ---- ORDER PAGE ---- */
.order-hero{background:linear-gradient(180deg,var(--cream),var(--parchment));padding:60px 0 30px;text-align:center}
.order-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;padding:20px 0 90px;align-items:start}
.uploader{border:2px dashed var(--gold);background:var(--paper);border-radius:4px;padding:40px;text-align:center;cursor:pointer;transition:.3s}
.uploader:hover{background:#fffef9;border-color:var(--gold-deep)}
.uploader.has{padding:14px;border-style:solid}
.uploader img{margin:0 auto;max-height:340px;border:6px solid var(--paper);box-shadow:var(--shadow)}
.field{margin:22px 0}
.field label{font-family:var(--roman);letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--gold-deep);display:block;margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;padding:15px 16px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--serif);font-size:18px;color:var(--ink);border-radius:2px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.style-pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{font-family:var(--roman);font-size:13px;letter-spacing:.08em;padding:11px 18px;border:1px solid var(--line);cursor:pointer;transition:.25s;background:var(--paper)}
.pill.sel{background:var(--ink);color:var(--gold-lt);border-color:var(--ink)}
.summary{background:var(--ink);color:var(--cream);padding:34px;position:sticky;top:96px}
.summary h3{color:var(--gold-lt);margin-bottom:18px}
.summary .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:17px}
.summary .row.total{border-bottom:none;font-size:24px;color:var(--gold-lt);padding-top:18px}
.summary small{color:#b7b0a0;display:block;margin:16px 0 22px;font-size:14px}

/* ---- responsive ---- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .gal-grid{columns:2}
  .style-grid,.how-grid,.price-grid{grid-template-columns:1fr}
  .order-wrap{grid-template-columns:1fr}
  .nav-links{display:none}
  .ba-grid{grid-template-columns:1fr}
  .ba-arrow{transform:rotate(90deg)}
}
@media(max-width:560px){
  .gal-grid{columns:1}.wrap{padding:0 20px}
  .nav-in{height:64px}.brand{font-size:21px}.brand .mono{width:32px;height:32px;font-size:16px}
  .nav .btn{padding:11px 18px;font-size:11px;letter-spacing:.08em}
  .lg-only{display:none}.sm-only{display:inline}
  h1{font-size:clamp(42px,12vw,60px)}
  .hero-art .swatch{width:72px;height:90px;top:-12px;right:-10px}
}

/* ---- full gallery page ---- */
.pill-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.pair-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.pair{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  background:var(--paper);border:1px solid var(--line);padding:18px}
.pair img{width:100%;height:auto;display:block}
.pair img.after{border:6px solid transparent;border-image:linear-gradient(135deg,var(--gold-lt),var(--gold-deep)) 1}
.pair-arrow{font-size:24px;color:var(--gold)}
.pair small{grid-column:1/-1;text-align:center;font-family:var(--roman);letter-spacing:.07em;
  color:var(--muted);font-size:13px;margin-top:4px}
@media(max-width:960px){.pair-grid{grid-template-columns:1fr}}

/* ---- live preview + add-ons (order page) ---- */
.preview-box{border:1.5px dashed var(--line);border-radius:4px;background:var(--paper);padding:26px;text-align:center}
.preview-empty p{color:var(--muted);max-width:46ch;margin:0 auto 16px;font-size:16px}
.preview-note{font-size:14px;min-height:20px;margin-top:12px !important}
.preview-result{margin:0}
.preview-result img{width:100%;max-width:460px;border:10px solid transparent;
  border-image:linear-gradient(135deg,var(--gold-lt),var(--gold-deep)) 1;box-shadow:0 24px 50px -24px rgba(21,26,46,.5)}
.preview-result figcaption{color:var(--muted);font-size:14px;margin-top:14px;max-width:44ch;margin-left:auto;margin-right:auto}
.linklike{background:none;border:none;color:var(--gold-deep);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.bumps{display:flex;flex-direction:column;gap:10px}
.bump{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:3px;cursor:pointer;background:var(--paper);transition:.2s}
.bump:hover{border-color:var(--gold)}
.bump input{margin-top:4px;accent-color:var(--gold-deep);width:18px;height:18px;flex:none}
.bump span{font-size:15px;color:var(--ink);display:flex;flex-direction:column}
.bump b{font-family:var(--roman);letter-spacing:.02em}
.bump em{color:var(--gold-deep);font-style:normal;font-weight:600;font-size:14px;margin-top:2px}
.promise{list-style:none;margin:0 0 20px;padding:18px 0 4px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:9px}
.promise li{position:relative;padding-left:24px;font-size:14.5px;color:var(--cream);line-height:1.4}
.promise li::before{content:"✓";position:absolute;left:0;color:var(--gold-lt);font-weight:700}
.promise b{color:#fff}
.guar-link{display:inline-block;margin-top:16px;color:var(--gold-lt);font-size:14px;letter-spacing:.03em}

/* ---- homepage trust bar ---- */
.trustbar{background:var(--ink);color:var(--cream);padding:26px 0;border-bottom:1px solid rgba(200,162,74,.2)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.trust-item{text-align:center;display:flex;flex-direction:column;gap:3px;padding:0 8px}
.trust-item .ti-mark{color:var(--gold-lt);font-size:16px;margin-bottom:2px}
.trust-item b{font-family:var(--roman);letter-spacing:.03em;font-size:16px;color:#fff}
.trust-item small{color:#b7b0a0;font-size:13px}
@media(max-width:760px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}}

/* ---- preview button loading state ---- */
.btn.loading{position:relative;pointer-events:none;opacity:.9;
  background-size:200% 100%;background-image:linear-gradient(100deg,var(--gold-lt),var(--gold) 40%,var(--gold-deep) 60%,var(--gold-lt));
  animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.btn.loading{animation:none}}

/* ---- House of Regal Paws nav lockup ---- */
.brand .hname{display:inline-flex;flex-direction:column;line-height:1.05}
.brand .hname>small{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);font-family:var(--roman);margin-bottom:1px;font-weight:400}