:root{
  --navy:#102434;
  --navy-2:#17374a;
  --orange:#c85e2c;
  --orange-2:#f07a36;
  --cream:#f6eddb;
  --sand:#e8d5ae;
  --sage:#87a878;
  --sky:#72c7dc;
  --ink:#0b1822;
  --paper:#fff7ea;
  --white:#fffaf1;
  --line:rgba(16,36,52,.12);
  --shadow:0 20px 48px rgba(16,36,52,.12);
  --shadow-lg:0 24px 60px rgba(16,36,52,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 10%, rgba(114,199,220,.15), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(240,122,54,.13), transparent 22%),
    linear-gradient(180deg, #fffbf2 0%, #fcf2de 50%, #fff8ec 100%);
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.14;
  background:
    linear-gradient(45deg, rgba(16,36,52,.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(16,36,52,.035) 25%, transparent 25%);
  background-size:34px 34px;
  background-position:0 0,17px 17px;
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1160px,92vw);margin:auto}

.topbar{
  position:sticky; top:0; z-index:99;
  backdrop-filter: blur(14px);
  background: rgba(255,250,241,.78);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px 0;
}
.nav-left, .nav-right{display:flex; align-items:center; gap:16px}
.insta-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px;
  background:linear-gradient(135deg,#fdc468,#df4996,#6a3fd8);
  box-shadow:0 12px 22px rgba(106,63,216,.18);
  transition:.22s ease;
}
.insta-badge:hover{transform:translateY(-2px) rotate(-3deg)}
.insta-badge svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.brand img{
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  box-shadow:0 8px 18px rgba(16,36,52,.14);
}
.brand .wordmark{
  display:flex; flex-direction:column;
}
.brand .wordmark strong{
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.04em;
  font-size:1.7rem;
  color:var(--navy);
  line-height:1;
}
.brand .wordmark span{
  color:#5d6c77; font-size:.77rem; text-transform:uppercase; letter-spacing:.15em; font-weight:700;
}
.nav-links{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.nav-links a{
  text-decoration:none; font-weight:800; color:var(--navy); font-size:.95rem;
  position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:3px; border-radius:999px;
  transform:scaleX(0); transform-origin:left; transition:.24s ease; background:var(--orange);
}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1)}
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; text-decoration:none; cursor:pointer;
  padding:14px 22px; border-radius:999px; font-weight:900;
  background:var(--orange); color:white;
  box-shadow:0 14px 28px rgba(200,94,44,.25);
  transition:.22s ease;
}
.button:hover{transform:translateY(-2px); background:var(--orange-2)}
.button.secondary{
  background:transparent; color:var(--navy); border:2px solid var(--navy); box-shadow:none;
}
.button.secondary:hover{background:var(--navy); color:white}

.hero{
  position:relative;
  padding:72px 0 56px;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.03fr .97fr; gap:44px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.75); border:1px solid rgba(16,36,52,.12);
  border-radius:999px; padding:8px 12px; font-weight:800; color:var(--navy); font-size:.87rem;
}
.eyebrow i{
  width:10px; height:10px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 6px rgba(200,94,44,.12);
}
.hero h1{
  margin:16px 0 14px;
  font-family:"Bebas Neue", sans-serif;
  color:var(--navy);
  letter-spacing:.01em;
  font-size:clamp(4.6rem,9vw,8.2rem);
  line-height:.86;
}
.hero h1 .accent{
  color:var(--orange);
  display:inline-block;
  text-shadow:3px 3px 0 #fff;
  animation:wiggle 6s ease-in-out infinite;
}
@keyframes wiggle{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.5deg)}}
.lead{
  font-size:1.1rem;
  line-height:1.8;
  color:#455864;
  max-width:620px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.mini-points{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-top:26px; max-width:680px;
}
.mini-point{
  padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.75); border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.mini-point strong{
  display:block; font-family:"Bebas Neue", sans-serif; color:var(--navy); font-size:1.3rem; margin-bottom:6px;
}
.mini-point span{color:#5b6c77; font-size:.92rem; line-height:1.45}

.hero-visual{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.42));
  border:1px solid rgba(16,36,52,.08);
  border-radius:34px;
  padding:14px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.hero-visual::before{
  content:"";
  position:absolute; inset:-20% -10% auto auto; width:180px; height:180px; border-radius:50%;
  background:rgba(255,215,111,.36); filter:blur(4px); animation:float 8s ease-in-out infinite;
}
.hero-visual::after{
  content:"";
  position:absolute; left:-22px; bottom:-22px; width:110px; height:110px; border-radius:50%;
  background:rgba(114,199,220,.32); animation:float 10s ease-in-out infinite reverse;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.hero-scene{
  position:relative; z-index:2;
  border-radius:24px; overflow:hidden; background:var(--cream);
}
.hero-note{
  position:absolute; right:28px; bottom:28px; z-index:3;
  background:#ffe278; color:var(--navy);
  padding:12px 16px; border-radius:14px; transform:rotate(-5deg);
  font-family:"Bebas Neue", sans-serif; font-size:1.5rem; letter-spacing:.04em;
  box-shadow:0 12px 18px rgba(0,0,0,.12);
}

.ticker{
  overflow:hidden; background:var(--orange); color:#fff; border-block:3px solid var(--navy);
}
.ticker-track{
  white-space:nowrap; display:inline-block; padding:12px 0;
  font-family:"Bebas Neue"; font-size:1.32rem; letter-spacing:.08em;
  animation:marquee 18s linear infinite;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.page-hero{
  padding:58px 0 30px;
}
.page-hero h1{
  margin:10px 0 10px; font-family:"Bebas Neue"; color:var(--navy); font-size:clamp(3.7rem,7vw,6rem); line-height:.9;
}
.page-hero p{
  max-width:760px; color:#50626d; line-height:1.8; font-size:1.08rem;
}

section{padding:74px 0}
.section-head{
  display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:28px;
}
.section-head h2{
  margin:0; font-family:"Bebas Neue"; color:var(--navy); font-size:clamp(2.8rem,6vw,4.8rem); line-height:.9;
}
.section-head p{
  max-width:600px; color:#596976; line-height:1.75;
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--shadow);
  transition:.24s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.card h3{
  margin:8px 0 8px; font-family:"Bebas Neue"; color:var(--navy); font-size:2.2rem; line-height:.95;
}
.kicker{
  text-transform:uppercase; letter-spacing:.13em; font-size:.78rem; font-weight:900; color:var(--orange);
}
.card p, .card li{color:#566874; line-height:1.72}
.card ul{margin:12px 0 0; padding-left:18px}
.price{
  font-size:2rem; font-weight:900; color:var(--orange);
}
.feature{
  display:flex; gap:16px; align-items:flex-start;
}
.feature-bullet{
  min-width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg, var(--orange), var(--orange-2)); color:white; font-weight:900;
  box-shadow:0 12px 18px rgba(200,94,44,.22);
}

.story-strip{
  background:linear-gradient(135deg, rgba(114,199,220,.92), rgba(135,168,120,.9));
  border-radius:36px; padding:32px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
}
.story-strip::before{
  content:"";
  position:absolute; inset:-45%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.18), transparent 12%, rgba(255,255,255,.1) 28%, transparent 42%);
  animation:spin 28s linear infinite;
}
.story-strip > *{position:relative; z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}
.story-strip h2{
  margin:0 0 10px; font-family:"Bebas Neue"; color:var(--navy); font-size:4rem; line-height:.9;
}
.story-strip p{color:#183746; line-height:1.8}
.story-strip .note{
  background:rgba(255,250,241,.8); border:2px dashed rgba(16,36,52,.2); border-radius:18px; padding:16px 18px;
}

.gallery-grid{
  display:grid; grid-template-columns:1.2fr .8fr .8fr; grid-auto-rows:220px; gap:14px;
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:24px; box-shadow:var(--shadow);
}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:.45s ease}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item.big{grid-row:span 2}
.gallery-item span{
  position:absolute; left:14px; bottom:14px;
  background:rgba(16,36,52,.78); color:#fff; font-size:.78rem; font-weight:900;
  padding:8px 12px; border-radius:999px;
}

.shop-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.product{
  background:rgba(255,255,255,.86); border:1px solid var(--line); border-radius:28px; overflow:hidden; box-shadow:var(--shadow);
}
.product .product-media{
  height:215px;
}
.product .product-media img{
  width:100%; height:100%; object-fit:cover;
}
.product .body{padding:22px}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; font-weight:900; font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; background:#fff0c8; color:#7a541c;
}
.split{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:26px;
}
.form-panel, .info-panel{
  background:rgba(255,255,255,.84); border:1px solid var(--line); border-radius:30px; padding:26px; box-shadow:var(--shadow);
}
.info-panel{
  background:var(--navy); color:#fff; position:relative; overflow:hidden;
}
.info-panel::after{
  content:""; position:absolute; right:-50px; bottom:-60px; width:180px; height:180px; border-radius:50%; background:rgba(240,122,54,.95);
}
.info-panel > *{position:relative; z-index:1}
.info-panel h3{
  margin:0 0 8px; font-family:"Bebas Neue"; font-size:2.8rem;
}
.info-panel p, .info-panel li{color:#d6e3ea; line-height:1.75}
form{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.field{display:grid; gap:7px}
.field.full{grid-column:1/-1}
label{font-size:.85rem; font-weight:900; color:var(--navy)}
input, select, textarea{
  border:1px solid #c5d0d8; border-radius:14px; padding:13px 14px; font:inherit; background:#fffdf8;
}
textarea{min-height:132px; resize:vertical}
.footer{
  padding:26px 0 42px; color:#5b6b76;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  border-top:1px solid var(--line); padding-top:22px;
}
.footer-brand{display:flex; align-items:center; gap:10px}
.footer-brand img{width:38px; height:38px; border-radius:50%}

.pill-list{
  display:flex; flex-wrap:wrap; gap:10px;
}
.pill-list span{
  display:inline-flex; padding:9px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.86rem; font-weight:800; color:#4c606e;
}

@media (max-width: 980px){
  .hero-grid, .grid-2, .shop-grid, .split{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .mini-points{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-item.big{grid-row:span 1; grid-column:span 2}
}
@media (max-width: 760px){
  .topbar-inner{flex-direction:column; align-items:stretch}
  .nav-left, .nav-right{justify-content:center; flex-wrap:wrap}
  .nav-links{justify-content:center}
  .section-head{display:block}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item.big{grid-column:auto}
  form{grid-template-columns:1fr}
  .footer-inner{flex-direction:column}
}


/* ----- conversion + credibility additions ----- */
.hero-proof{
  margin-top:18px; display:flex; gap:10px; flex-wrap:wrap;
}
.proof-chip{
  display:inline-flex; gap:8px; align-items:center;
  padding:9px 12px; border-radius:999px; background:#fff;
  border:1px solid var(--line); font-size:.84rem; font-weight:800; color:#4a5e6b;
}
.proof-chip b{color:var(--navy)}
.comparison-wrap{
  overflow:auto; border-radius:24px; box-shadow:var(--shadow); border:1px solid var(--line);
  background:rgba(255,255,255,.88);
}
.comparison-table{
  width:100%; border-collapse:collapse; min-width:860px;
}
.comparison-table th,.comparison-table td{
  padding:16px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;
}
.comparison-table th{
  color:var(--navy); background:#fff7e7; font-size:.84rem; text-transform:uppercase; letter-spacing:.08em;
}
.comparison-table td:first-child{font-weight:900;color:var(--navy)}
.comparison-table tr:last-child td{border-bottom:0}
.recommended{
  background:rgba(114,199,220,.10);
}
.recommended td:nth-child(3), .recommended th:nth-child(3){
  position:relative;
}
.popular-label{
  display:inline-block; margin-left:6px; padding:4px 8px; border-radius:999px;
  background:var(--orange); color:#fff; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.timeline{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.timeline-step{
  position:relative; background:rgba(255,255,255,.84); border:1px solid var(--line);
  border-radius:22px; padding:20px; box-shadow:var(--shadow);
}
.timeline-step .n{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:900;
  background:var(--orange); color:#fff; margin-bottom:12px;
}
.timeline-step h3{font-family:"Bebas Neue";font-size:1.8rem;color:var(--navy);margin:0 0 8px}
.timeline-step p{color:#5b6b76;line-height:1.6;font-size:.92rem}
.spec-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.spec{
  padding:20px; border-radius:22px; background:var(--navy); color:#fff; min-height:150px;
  box-shadow:var(--shadow);
}
.spec strong{display:block;font-family:"Bebas Neue";font-size:2rem;margin-bottom:6px}
.spec span{color:#d8e4ea;line-height:1.6;font-size:.92rem}
.complexity-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.complexity{
  border-radius:24px;padding:22px;background:rgba(255,255,255,.86);border:1px solid var(--line);box-shadow:var(--shadow)
}
.complexity h3{font-family:"Bebas Neue";font-size:2.2rem;color:var(--navy);margin:8px 0}
.complexity .examples{font-size:.9rem;color:#5c6c77;line-height:1.7}
.social-strip{
  border-radius:28px; background:linear-gradient(135deg,#fdc468,#df4996,#6a3fd8);
  color:#fff; padding:24px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  box-shadow:var(--shadow-lg);
}
.social-strip h3{margin:0;font-family:"Bebas Neue";font-size:2.7rem}
.social-strip p{margin:4px 0 0;color:rgba(255,255,255,.9)}
.faq{
  display:grid;gap:12px
}
.faq details{
  background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow)
}
.faq summary{cursor:pointer;font-weight:900;color:var(--navy)}
.faq p{color:#566874;line-height:1.7}
.policy-box{
  background:#fff4cf;border:2px dashed rgba(200,94,44,.45);border-radius:22px;padding:20px;color:#6a512d;line-height:1.7
}
.price-note{
  font-size:.9rem;color:#667883;line-height:1.7;margin-top:10px
}
.shop-product.featured-product{
  outline:3px solid rgba(240,122,54,.35); transform:translateY(-6px);
}
.design-badges{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:12px
}
.design-badges span{
  padding:7px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.78rem;font-weight:800;color:#50616c
}
@media(max-width:980px){
  .timeline,.spec-grid,.complexity-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .timeline,.spec-grid,.complexity-grid{grid-template-columns:1fr}
  .social-strip{flex-direction:column;align-items:flex-start}
}

.section-tight{padding-top:44px;padding-bottom:44px}
.shop-note{
  margin-top:12px;color:#62727d;font-size:.88rem;line-height:1.65
}
.form-status{
  grid-column:1/-1;margin:0;color:#6a7780;font-size:.86rem;line-height:1.55
}

/* Launch-ready additions */
.notice{
  padding:14px 16px;border-radius:18px;background:#fff3cc;border:1px solid rgba(200,94,44,.24);
  color:#6a512d;line-height:1.65
}
.order-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px
}
.order-summary .card{min-height:150px}
.price-large{
  font-family:"Bebas Neue";font-size:3rem;color:var(--orange);line-height:1;margin:8px 0
}
.policy-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px
}
.policy-card{
  background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)
}
.policy-card h3{font-family:"Bebas Neue";font-size:2rem;color:var(--navy);margin:0 0 8px}
.policy-card p,.policy-card li{color:#586a76;line-height:1.7}
.policy-card ul{padding-left:18px}
.checkline{
  display:flex;gap:10px;align-items:flex-start;margin-top:12px;color:#566874;line-height:1.6
}
.checkline input{margin-top:4px}
.cta-band{
  border-radius:28px;padding:28px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:var(--shadow-lg)
}
.cta-band h2{font-family:"Bebas Neue";font-size:3.2rem;line-height:.95;margin:0}
.cta-band p{color:#d7e3e9;max-width:620px;line-height:1.7}
.muted{color:#697a84;font-size:.9rem;line-height:1.6}
@media(max-width:900px){
  .order-summary,.policy-grid{grid-template-columns:1fr 1fr}
  .cta-band{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  .order-summary,.policy-grid{grid-template-columns:1fr}
}

.upload-field input[type=file]{
  padding:16px;background:#fff7e8;border:2px dashed rgba(16,36,52,.22);cursor:pointer
}
.file-list{display:grid;gap:8px;margin-top:8px}
.file-pill{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:9px 12px;border-radius:12px;background:#eef5f5;color:#4d626f;font-size:.84rem;font-weight:700
}
.form-status.success{color:#347453}
.form-status.error{color:#a33e31}

.hp-field{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
#submit-order-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}
.form-status{
  min-height:1.5em;
}

/* concise production layout */
.custom-hero{padding:46px 0 24px}
.custom-intro{margin-bottom:22px}
.custom-intro h1{margin-bottom:8px}
.custom-intro p{max-width:720px}
.form-panel-wide{max-width:980px;margin:0 auto}
.form-panel-wide form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}
.form-panel-wide .field{margin:0}
.form-panel-wide .field.full,
.form-panel-wide .form-status{grid-column:1/-1}
.form-panel-wide textarea{min-height:120px}
.security-row{padding-top:4px}
.submit-row{display:flex;justify-content:flex-start}
.acknowledgements{display:grid;gap:7px}
.micro-info{
  display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  font-size:.9rem;color:#60727d
}
.micro-info strong{color:var(--navy)}
.page-hero{padding-bottom:30px}
section{padding-top:54px;padding-bottom:54px}
@media(max-width:700px){
  .form-panel-wide form{grid-template-columns:1fr}
  .form-panel-wide .field{grid-column:1/-1}
  .custom-hero{padding-top:28px}
}

/* concise policies page */
.policy-hero{padding-bottom:24px}
.policy-section{padding-top:30px}
.policy-grid-clean{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.policy-grid-clean .policy-card{
  padding:20px 22px;
  min-height:0;
}
.policy-grid-clean .policy-card h3{
  margin-bottom:6px;
  font-size:1.85rem;
}
.policy-grid-clean .policy-card p{
  margin:0;
}
.policy-note{
  margin-top:18px;
  padding:16px 18px;
  border-radius:18px;
  background:#fff4cf;
  border:1px solid rgba(200,94,44,.22);
  color:#65512f;
  line-height:1.6;
}
@media(max-width:700px){
  .policy-grid-clean{grid-template-columns:1fr}
}


.hero-visual{
  align-self:start;
  margin-top:6px;
}
.hero-scene img{
  display:block;
  width:100%;
  height:auto;
}
.hero-note{display:none;}


/* full-width homepage hero */
.hero{
  background:
    linear-gradient(90deg, rgba(247,244,235,.94) 0%, rgba(247,244,235,.90) 34%, rgba(247,244,235,.52) 60%, rgba(247,244,235,.18) 100%),
    url("../images/home-hero-bg.svg") center center / cover no-repeat;
  min-height: 700px;
  display: flex;
  align-items: center;
  width: 100%;
}

.hero-full{
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero-copy{
  max-width: 640px;
  padding: 12px 0 10px;
}

.hero-grid,
.hero-visual,
.hero-scene,
.hero-note,
.mini-points{
  display: none !important;
}

@media (max-width: 900px){
  .hero{
    min-height: 620px;
    background:
      linear-gradient(180deg, rgba(247,244,235,.94) 0%, rgba(247,244,235,.88) 44%, rgba(247,244,235,.68) 100%),
      url("../images/home-hero-bg.svg") 68% center / cover no-repeat;
  }
  .hero-copy{
    max-width: 100%;
  }
}

@media (max-width: 640px){
  .hero{
    min-height: 560px;
    padding: 40px 0 36px;
  }
}


/* homepage hero refinements */
.hero{
  min-height: 610px !important;
  align-items: flex-start !important;
  padding-top: 26px !important;
  padding-bottom: 18px !important;
  background:
    linear-gradient(90deg, rgba(247,244,235,.96) 0%, rgba(247,244,235,.93) 36%, rgba(247,244,235,.60) 58%, rgba(247,244,235,.20) 100%),
    url("../images/home-hero-bg.svg") center center / cover no-repeat !important;
}

.hero-full{
  padding-top: 0 !important;
}

.hero-copy{
  max-width: 660px !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

.hero .eyebrow{
  margin-bottom: 18px !important;
}

.hero h1{
  font-size: clamp(4.5rem, 10vw, 8.7rem) !important;
  line-height: .88 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 18px !important;
}

.hero .lead{
  max-width: 720px !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  margin-bottom: 24px !important;
}

.hero-actions{
  margin-bottom: 18px !important;
}

.hero-proof{
  gap: 12px !important;
}

@media (max-width: 900px){
  .hero{
    min-height: 560px !important;
    padding-top: 18px !important;
    background:
      linear-gradient(180deg, rgba(247,244,235,.96) 0%, rgba(247,244,235,.92) 46%, rgba(247,244,235,.74) 100%),
      url("../images/home-hero-bg.svg") 72% center / cover no-repeat !important;
  }
}

@media (max-width: 640px){
  .hero{
    min-height: auto !important;
    padding-top: 14px !important;
    padding-bottom: 20px !important;
  }
  .hero h1{
    font-size: clamp(3.6rem, 20vw, 5.8rem) !important;
  }
  .hero .lead{
    font-size: 1rem !important;
  }
}


/* final homepage hero correction */
.hero{
  min-height: 590px !important;
  padding: 18px 0 22px !important;
  align-items: flex-start !important;
  background:
    linear-gradient(90deg, rgba(247,244,235,.97) 0%, rgba(247,244,235,.94) 38%, rgba(247,244,235,.64) 60%, rgba(247,244,235,.16) 100%),
    url("../images/home-hero-bg.svg") center center / cover no-repeat !important;
}

.hero-full{
  width:min(1160px,92vw) !important;
  margin:0 auto !important;
  padding:0 !important;
}

.hero-copy{
  max-width:620px !important;
  margin:0 !important;
  padding:0 !important;
}

.hero .eyebrow{
  margin:0 0 14px !important;
}

.hero h1{
  margin:0 0 16px !important;
  font-size:clamp(4.4rem,7.2vw,7.2rem) !important;
  line-height:.88 !important;
  letter-spacing:-.02em !important;
}

.hero .lead{
  max-width:600px !important;
  font-size:1.04rem !important;
  line-height:1.55 !important;
  margin:0 0 22px !important;
}

.hero-actions{
  margin:0 0 16px !important;
}

.hero-proof{
  margin-top:0 !important;
}

@media(max-width:900px){
  .hero{
    min-height:540px !important;
    background:
      linear-gradient(180deg, rgba(247,244,235,.97) 0%, rgba(247,244,235,.92) 48%, rgba(247,244,235,.78) 100%),
      url("../images/home-hero-bg.svg") 72% center / cover no-repeat !important;
  }
  .hero h1{
    font-size:clamp(4rem,12vw,6.4rem) !important;
  }
}

@media(max-width:640px){
  .hero{
    min-height:auto !important;
    padding:14px 0 20px !important;
  }
  .hero h1{
    font-size:clamp(3.4rem,18vw,5.2rem) !important;
  }
}


/* hero table/readability correction */
.hero{
  min-height:560px !important;
  background:
    linear-gradient(90deg, rgba(247,244,235,.98) 0%, rgba(247,244,235,.95) 36%, rgba(247,244,235,.66) 57%, rgba(247,244,235,.12) 100%),
    url("../images/home-hero-bg.svg") center center / cover no-repeat !important;
}

.hero h1{
  font-size:clamp(4.2rem,6.4vw,6.8rem) !important;
  line-height:.89 !important;
  max-width:620px !important;
}

.hero .lead{
  max-width:570px !important;
}

@media(max-width:900px){
  .hero{
    background:
      linear-gradient(180deg, rgba(247,244,235,.98) 0%, rgba(247,244,235,.94) 48%, rgba(247,244,235,.80) 100%),
      url("../images/home-hero-bg.svg") 70% center / cover no-repeat !important;
  }
}


/* hero cleanup: top-down table, less visual noise */
.hero{
  min-height:540px !important;
  padding:16px 0 20px !important;
  background:
    linear-gradient(90deg, rgba(247,244,235,.985) 0%, rgba(247,244,235,.95) 39%, rgba(247,244,235,.60) 61%, rgba(247,244,235,.08) 100%),
    url("../images/home-hero-bg.svg") center center / cover no-repeat !important;
}

.hero h1{
  font-size:clamp(4.0rem,6vw,6.45rem) !important;
  max-width:600px !important;
}

.hero .lead{
  max-width:560px !important;
  line-height:1.5 !important;
}

@media(max-width:900px){
  .hero{
    background:
      linear-gradient(180deg, rgba(247,244,235,.985) 0%, rgba(247,244,235,.95) 50%, rgba(247,244,235,.82) 100%),
      url("../images/home-hero-bg.svg") 74% center / cover no-repeat !important;
  }
}


/* =========================================================
   iPhone / small-screen production fixes
   ========================================================= */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

input, select, textarea, button{
  font:inherit;
}

@media(max-width:760px){
  .wrap{
    width:min(100% - 28px, 1160px);
  }

  .topbar{
    background:rgba(255,250,241,.96);
    backdrop-filter:blur(12px);
  }
  .topbar-inner{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:9px 0 8px;
  }
  .nav-left{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:10px;
  }
  .insta-badge{
    width:42px;
    height:42px;
    border-radius:13px;
    flex:0 0 auto;
  }
  .insta-badge svg{
    width:22px;
    height:22px;
  }
  .brand{
    min-width:0;
    gap:9px;
  }
  .brand img{
    width:40px;
    height:40px;
  }
  .brand .wordmark strong{
    font-size:1.38rem;
  }
  .brand .wordmark span{
    font-size:.64rem;
    letter-spacing:.12em;
  }
  .nav-right{
    width:100%;
    display:block;
    overflow:hidden;
  }
  .nav-links{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:18px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 2px 7px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:.82rem;
  }

  .hero{
    min-height:auto !important;
    padding:20px 0 24px !important;
    background:
      linear-gradient(180deg,
        rgba(247,244,235,.99) 0%,
        rgba(247,244,235,.97) 48%,
        rgba(247,244,235,.90) 72%,
        rgba(247,244,235,.80) 100%),
      url("../images/home-hero-bg.svg") 79% 86% / 180% auto no-repeat !important;
  }
  .hero-full{
    width:min(100% - 28px,1160px) !important;
  }
  .hero-copy{
    max-width:100% !important;
  }
  .hero .eyebrow{
    max-width:100%;
    font-size:.75rem;
    line-height:1.25;
    padding:7px 10px;
    margin-bottom:13px !important;
  }
  .hero h1{
    font-size:clamp(3.4rem,17vw,5.1rem) !important;
    line-height:.9 !important;
    max-width:100% !important;
    letter-spacing:-.025em !important;
    margin-bottom:14px !important;
  }
  .hero .lead{
    max-width:100% !important;
    font-size:.98rem !important;
    line-height:1.55 !important;
    margin-bottom:18px !important;
  }
  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px !important;
    margin-bottom:15px !important;
  }
  .hero-actions .button{
    width:100%;
    min-height:50px;
  }
  .hero-proof{
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px !important;
  }
  .proof-chip{
    width:fit-content;
    max-width:100%;
    padding:8px 11px;
    font-size:.79rem;
  }

  section{
    padding-top:38px;
    padding-bottom:38px;
  }
  .page-hero,
  .custom-hero{
    padding-top:30px !important;
    padding-bottom:18px !important;
  }
  .page-hero h1{
    font-size:clamp(3rem,15vw,4.7rem);
  }
  .section-head{
    margin-bottom:20px;
  }
  .section-head h2{
    font-size:clamp(2.6rem,12vw,4rem);
  }

  .button{
    min-height:48px;
    padding:13px 18px;
  }

  .comparison-wrap{
    margin-left:-2px;
    margin-right:-2px;
    border-radius:18px;
    -webkit-overflow-scrolling:touch;
  }
  .comparison-table{
    min-width:700px;
  }
  .comparison-table th,
  .comparison-table td{
    padding:13px 12px;
    font-size:.82rem;
  }

  .timeline,
  .spec-grid,
  .complexity-grid,
  .order-summary,
  .policy-grid,
  .policy-grid-clean,
  .gallery-grid,
  .grid-2,
  .grid-3,
  .shop-grid,
  .split{
    grid-template-columns:1fr !important;
  }
  .timeline-step,
  .policy-card,
  .card,
  .form-panel,
  .info-panel{
    border-radius:18px;
  }
  .cta-band{
    padding:22px;
    border-radius:20px;
  }
  .cta-band h2{
    font-size:2.5rem;
  }

  .form-panel-wide{
    max-width:100%;
    padding:18px !important;
    border-radius:20px;
  }
  .form-panel-wide form,
  form{
    grid-template-columns:1fr !important;
  }
  .form-panel-wide .field,
  .form-panel-wide .field.full,
  .form-panel-wide .form-status{
    grid-column:1/-1 !important;
    min-width:0;
  }
  input,
  select,
  textarea{
    width:100%;
    max-width:100%;
    font-size:16px !important;
  }
  textarea{
    min-height:110px;
  }
  .checkline{
    font-size:.9rem;
    gap:9px;
  }
  .checkline input[type="checkbox"]{
    flex:0 0 auto;
    width:20px;
    height:20px;
  }
  .submit-row,
  .submit-row .button,
  #submit-order-btn{
    width:100%;
  }
  .upload-field input[type=file]{
    padding:13px;
  }
  .file-pill{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .micro-info{
    justify-content:flex-start;
    gap:8px 16px;
  }

  .cf-turnstile{
    transform-origin:left top;
    max-width:100%;
  }

  .social-strip{
    align-items:stretch !important;
  }
  .social-strip .button{
    width:100%;
  }

  .footer{
    text-align:center;
  }
  .footer-inner{
    gap:12px;
  }
}

@media(max-width:390px){
  .wrap,
  .hero-full{
    width:calc(100% - 22px) !important;
  }
  .hero h1{
    font-size:clamp(3.05rem,16.8vw,4.45rem) !important;
  }
  .hero .eyebrow{
    font-size:.70rem;
  }
  .brand .wordmark span{
    display:none;
  }
  .cf-turnstile{
    transform:scale(.92);
    margin-bottom:-6px;
  }
}


/* =========================================================
   Mobile hamburger + fixed iPhone header
   ========================================================= */
.menu-toggle{
  display:none;
  appearance:none;
  border:0;
  background:transparent;
  padding:8px;
  margin:0;
  width:44px;
  height:44px;
  border-radius:12px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.menu-toggle span{
  display:block;
  width:24px;
  height:3px;
  border-radius:999px;
  background:var(--navy);
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle.is-open span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.menu-toggle.is-open span:nth-child(2){
  opacity:0;
}
.menu-toggle.is-open span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

.mobile-comparison-cards{
  display:none;
}

@media(max-width:760px){
  body{
    padding-top:68px;
  }

  .topbar{
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    width:100%;
    border-bottom:1px solid rgba(16,36,52,.10);
    box-shadow:0 8px 22px rgba(16,36,52,.08);
  }

  .topbar-inner{
    width:min(100% - 22px,1160px) !important;
    margin:0 auto;
    min-height:68px;
    padding:8px 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center !important;
    gap:10px !important;
  }

  .nav-left{
    min-width:0;
    width:auto !important;
  }

  .insta-badge{
    display:none !important;
  }

  .brand{
    min-width:0;
  }

  .brand img{
    width:42px !important;
    height:42px !important;
  }

  .brand .wordmark strong{
    font-size:1.28rem !important;
  }

  .brand .wordmark span{
    display:block !important;
    font-size:.58rem !important;
  }

  .menu-toggle{
    display:flex;
    grid-column:2;
    grid-row:1;
    justify-self:end;
  }

  .nav-right{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100% !important;
    display:none !important;
    overflow:visible !important;
    background:rgba(255,250,241,.985);
    border-top:1px solid rgba(16,36,52,.08);
    border-bottom:1px solid rgba(16,36,52,.12);
    box-shadow:0 18px 30px rgba(16,36,52,.12);
  }

  .nav-right.menu-open{
    display:block !important;
  }

  .nav-links{
    display:flex !important;
    flex-direction:column;
    gap:0 !important;
    overflow:visible !important;
    padding:8px 14px 14px !important;
    width:min(100%,560px);
    margin:0 auto;
  }

  .nav-links a{
    width:100%;
    padding:13px 10px;
    font-size:.98rem !important;
    border-bottom:1px solid rgba(16,36,52,.08);
  }

  .nav-links a:last-child{
    border-bottom:0;
  }

  .nav-links a::after{
    display:none;
  }

  .nav-links a.active{
    color:var(--orange);
  }

  .menu-open-body{
    overflow:hidden;
  }

  /* Better comparison layout on iPhone */
  .comparison-wrap{
    display:none !important;
  }

  .mobile-comparison-cards{
    display:grid;
    gap:14px;
    margin-top:4px;
  }

  .mobile-build-card{
    background:rgba(255,255,255,.88);
    border:1px solid rgba(16,36,52,.12);
    border-radius:20px;
    padding:17px;
    box-shadow:0 10px 26px rgba(16,36,52,.07);
  }

  .mobile-build-card.popular{
    border:2px solid var(--orange);
    background:#fffaf3;
  }

  .mobile-build-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
  }

  .mobile-build-card-head h3{
    margin:0;
    font-family:"Bebas Neue", sans-serif;
    font-size:2rem;
    color:var(--navy);
    letter-spacing:.02em;
  }

  .mobile-popular{
    flex:0 0 auto;
    background:var(--orange);
    color:#fff;
    border-radius:999px;
    padding:6px 9px;
    font-size:.68rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .mobile-build-specs{
    display:grid;
    gap:0;
  }

  .mobile-build-spec{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:12px;
    align-items:start;
    padding:10px 0;
    border-top:1px solid rgba(16,36,52,.08);
  }

  .mobile-build-spec span{
    color:#6a7a84;
    font-size:.78rem;
    font-weight:700;
  }

  .mobile-build-spec strong{
    color:var(--navy);
    font-size:.84rem;
    line-height:1.35;
    text-align:right;
  }
}

@media(max-width:390px){
  body{
    padding-top:64px;
  }
  .topbar-inner{
    min-height:64px;
  }
  .brand img{
    width:38px !important;
    height:38px !important;
  }
  .brand .wordmark strong{
    font-size:1.18rem !important;
  }
  .mobile-build-spec{
    grid-template-columns:1fr;
    gap:3px;
  }
  .mobile-build-spec strong{
    text-align:left;
  }
}


/* =========================================================
   FINAL iPhone header + comparison overrides
   Cache-busted in HTML.
   ========================================================= */
@media(max-width:760px){
  body{
    padding-top:64px !important;
  }

  .topbar{
    position:fixed !important;
    inset:0 0 auto 0 !important;
    z-index:9999 !important;
    height:64px !important;
    background:#fffaf1 !important;
    border-bottom:1px solid rgba(16,36,52,.12) !important;
    box-shadow:0 5px 18px rgba(16,36,52,.08) !important;
  }

  .topbar-inner{
    width:calc(100% - 22px) !important;
    height:64px !important;
    min-height:64px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  .nav-left{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:8px !important;
  }

  .insta-badge{
    display:none !important;
  }

  .brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    gap:8px !important;
  }

  .brand img{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
  }

  .brand .wordmark strong{
    font-size:1.14rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .brand .wordmark span{
    display:none !important;
  }

  .menu-toggle{
    display:flex !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:10px !important;
    box-shadow:none !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
  }

  .menu-toggle span{
    display:block !important;
    width:24px !important;
    height:3px !important;
    background:var(--navy) !important;
    border-radius:99px !important;
    opacity:1;
  }

  .nav-right{
    display:none !important;
    position:fixed !important;
    top:64px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:calc(100dvh - 64px) !important;
    overflow-y:auto !important;
    background:#fffaf1 !important;
    border-top:1px solid rgba(16,36,52,.08) !important;
    border-bottom:1px solid rgba(16,36,52,.12) !important;
    box-shadow:0 18px 28px rgba(16,36,52,.12) !important;
  }

  .nav-right.menu-open{
    display:block !important;
  }

  .nav-links{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    width:100% !important;
    padding:8px 18px 14px !important;
    overflow:visible !important;
  }

  .nav-links a{
    display:block !important;
    width:100% !important;
    padding:14px 4px !important;
    font-size:1rem !important;
    border-bottom:1px solid rgba(16,36,52,.08) !important;
    white-space:normal !important;
  }

  .nav-links a:last-child{
    border-bottom:0 !important;
  }

  /* Mobile comparison is now static HTML, no JS required */
  .comparison-wrap{
    display:none !important;
  }

  .mobile-comparison-cards{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin:8px 0 0 !important;
  }

  .mobile-build-card{
    padding:16px !important;
    border-radius:18px !important;
    background:#fff !important;
  }

  .mobile-build-card-head{
    margin-bottom:8px !important;
  }

  .mobile-build-card-head h3{
    font-size:1.9rem !important;
  }

  .mobile-build-spec{
    grid-template-columns:1fr 1.15fr !important;
    padding:9px 0 !important;
  }

  .mobile-build-spec span{
    font-size:.76rem !important;
  }

  .mobile-build-spec strong{
    font-size:.82rem !important;
  }
}

@media(max-width:390px){
  .mobile-build-spec{
    grid-template-columns:1fr !important;
    gap:3px !important;
  }
  .mobile-build-spec strong{
    text-align:left !important;
  }
}


/* =========================================================
   Centered mobile menu with 20% overlay
   ========================================================= */
@media(max-width:760px){
  .nav-right{
    position:fixed !important;
    inset:64px 0 0 0 !important;
    width:100% !important;
    height:calc(100dvh - 64px) !important;
    max-height:none !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:20px !important;
    background:rgba(16,36,52,.20) !important; /* 20% opacity backdrop */
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:0 !important;
    box-shadow:none !important;
    overflow:auto !important;
  }

  .nav-right.menu-open{
    display:flex !important;
  }

  .nav-links{
    width:min(88vw,360px) !important;
    margin:0 !important;
    padding:14px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    background:rgba(255,250,241,.96) !important;
    border:1px solid rgba(16,36,52,.12) !important;
    border-radius:22px !important;
    box-shadow:0 22px 50px rgba(16,36,52,.20) !important;
  }

  .nav-links a{
    padding:15px 14px !important;
    text-align:center !important;
    border-bottom:1px solid rgba(16,36,52,.08) !important;
    border-radius:12px !important;
  }

  .nav-links a:last-child{
    border-bottom:0 !important;
  }

  .nav-links a:active,
  .nav-links a:hover{
    background:rgba(200,94,44,.08) !important;
  }
}

@media(max-width:390px){
  .nav-right{
    inset:64px 0 0 0 !important;
    height:calc(100dvh - 64px) !important;
    padding:16px !important;
  }
  .nav-links{
    width:min(90vw,340px) !important;
  }
}


/* =========================================================
   Compact centered mobile menu box
   ========================================================= */
@media(max-width:760px){
  .nav-right{
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%,-50%) !important;

    width:min(86vw,330px) !important;
    height:auto !important;
    max-height:80dvh !important;

    display:none !important;
    padding:10px !important;
    overflow:auto !important;

    /* one small translucent box — no full-screen overlay */
    background:rgba(255,250,241,.80) !important;
    border:1px solid rgba(16,36,52,.12) !important;
    border-radius:22px !important;
    box-shadow:0 20px 48px rgba(16,36,52,.20) !important;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }

  .nav-right.menu-open{
    display:block !important;
  }

  .nav-links{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .nav-links a{
    display:block !important;
    width:100% !important;
    padding:14px 12px !important;
    text-align:center !important;
    border-bottom:1px solid rgba(16,36,52,.08) !important;
    border-radius:10px !important;
    font-size:1rem !important;
  }

  .nav-links a:last-child{
    border-bottom:0 !important;
  }

  .menu-open-body{
    overflow:auto !important;
  }
}

@media(max-width:390px){
  .nav-right{
    width:min(88vw,310px) !important;
  }
}


/* =========================================================
   FIX: true viewport-centered compact mobile menu
   ========================================================= */
@media(max-width:760px){
  /* backdrop-filter on the fixed header was making the menu's fixed
     positioning resolve against the header instead of the viewport. */
  .topbar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important;
    contain:none !important;
  }

  .nav-right{
    position:fixed !important;
    top:50dvh !important;
    left:50vw !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%,-50%) !important;

    width:min(72vw,280px) !important;
    height:auto !important;
    max-height:calc(100dvh - 120px) !important;
    padding:8px !important;
    margin:0 !important;

    /* 20% opacity on the box background; menu text stays fully opaque */
    background:rgba(255,250,241,.20) !important;
    backdrop-filter:blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(120%) !important;

    border:1px solid rgba(255,255,255,.45) !important;
    border-radius:18px !important;
    box-shadow:0 18px 42px rgba(16,36,52,.18) !important;
    overflow:auto !important;
    z-index:10001 !important;
  }

  .nav-right.menu-open{
    display:block !important;
  }

  .nav-links{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .nav-links a{
    padding:11px 10px !important;
    text-align:center !important;
    font-size:.94rem !important;
    line-height:1.2 !important;
    border-bottom:1px solid rgba(16,36,52,.10) !important;
    border-radius:8px !important;
    background:rgba(255,250,241,.24) !important;
  }

  .nav-links a:last-child{
    border-bottom:0 !important;
  }

  .nav-links a:active,
  .nav-links a:hover{
    background:rgba(255,250,241,.44) !important;
  }
}

@media(max-width:390px){
  .nav-right{
    width:min(74vw,265px) !important;
    max-height:calc(100dvh - 100px) !important;
  }
}


/* =========================================================
   FULL-SCREEN mobile menu overlay with centered menu box
   ========================================================= */
@media(max-width:760px){
  .topbar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important;
    contain:none !important;
  }

  .nav-right{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:100vw !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:84px 18px 18px !important;

    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:auto !important;

    background:rgba(16,36,52,.20) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;

    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    z-index:10001 !important;
  }

  .nav-right.menu-open{
    display:flex !important;
  }

  .nav-links{
    width:min(86vw,340px) !important;
    max-width:340px !important;
    margin:auto !important;
    padding:10px !important;

    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;

    background:rgba(255,250,241,.96) !important;
    border:1px solid rgba(16,36,52,.12) !important;
    border-radius:20px !important;
    box-shadow:0 20px 48px rgba(16,36,52,.22) !important;
  }

  .nav-links a{
    display:block !important;
    width:100% !important;
    padding:14px 12px !important;
    text-align:center !important;
    font-size:.98rem !important;
    line-height:1.2 !important;
    border-bottom:1px solid rgba(16,36,52,.08) !important;
    border-radius:10px !important;
    background:transparent !important;
  }

  .nav-links a:last-child{
    border-bottom:0 !important;
  }

  .nav-links a:hover,
  .nav-links a:active{
    background:rgba(200,94,44,.08) !important;
  }

  .menu-open-body{
    overflow:hidden !important;
  }
}

@media(max-width:390px){
  .nav-right{
    padding:78px 14px 14px !important;
  }

  .nav-links{
    width:min(90vw,320px) !important;
  }
}


/* =========================================================
   FINAL FIX: full-screen mobile overlay was being shifted by
   an older translate(-50%, -50%) rule.
   ========================================================= */
@media(max-width:760px){
  .nav-right{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;

    transform:none !important;
    margin:0 !important;
    padding:76px 16px 16px !important;

    display:none !important;
    align-items:center !important;
    justify-content:center !important;

    background:rgba(16,36,52,.20) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;

    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:auto !important;
    z-index:10001 !important;
  }

  .nav-right.menu-open{
    display:flex !important;
  }

  .nav-links{
    width:min(86vw,330px) !important;
    max-width:330px !important;
    margin:auto !important;
    padding:10px !important;

    background:rgba(255,250,241,.96) !important;
    border:1px solid rgba(16,36,52,.12) !important;
    border-radius:20px !important;
    box-shadow:0 20px 48px rgba(16,36,52,.22) !important;
  }
}


/* =========================================================
   Keep the fixed navbar visible while the mobile menu is open
   ========================================================= */
@media(max-width:760px){
  .topbar{
    z-index:10002 !important;
  }

  .nav-right{
    top:64px !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    width:100vw !important;
    height:calc(100dvh - 64px) !important;

    padding:16px !important;
    z-index:10001 !important;
  }

  .nav-right.menu-open{
    display:flex !important;
  }

  .menu-toggle{
    position:relative !important;
    z-index:10003 !important;
  }
}

@media(max-width:390px){
  .nav-right{
    top:64px !important;
    height:calc(100dvh - 64px) !important;
  }
}


/* =========================================================
   FINAL mobile menu styling:
   keep navbar visible, make overlay area solid white,
   remove the inner rounded "box" look
   ========================================================= */
@media(max-width:760px){
  .topbar{
    z-index:10002 !important;
  }

  .nav-right{
    position:fixed !important;
    top:64px !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    width:100vw !important;
    height:calc(100dvh - 64px) !important;
    max-width:none !important;
    max-height:none !important;

    transform:none !important;
    margin:0 !important;
    padding:0 !important;

    display:none !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    overflow:auto !important;

    background:#ffffff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    z-index:10001 !important;
  }

  .nav-right.menu-open{
    display:block !important;
  }

  .nav-links{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:18px 20px 28px !important;

    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .nav-links a{
    display:block !important;
    width:100% !important;
    padding:18px 6px !important;
    text-align:center !important;
    font-size:1.12rem !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    color:var(--navy) !important;

    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid rgba(16,36,52,.10) !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .nav-links a:last-child{
    border-bottom:0 !important;
  }

  .nav-links a:hover,
  .nav-links a:active{
    background:rgba(16,36,52,.03) !important;
  }

  .menu-open-body{
    overflow:hidden !important;
  }
}

@media(max-width:390px){
  .nav-right{
    top:64px !important;
    height:calc(100dvh - 64px) !important;
  }

  .nav-links{
    padding:14px 16px 24px !important;
  }

  .nav-links a{
    font-size:1.04rem !important;
    padding:17px 4px !important;
  }
}


/* Navbar social links */
.nav-socials{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:8px;
}

.nav-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:40px;
  min-height:40px;
  padding:8px 10px;
  border-radius:999px;
  color:var(--navy);
  background:rgba(16,36,52,.05);
  border:1px solid rgba(16,36,52,.08);
  text-decoration:none;
  font-size:.78rem;
  font-weight:800;
}

.nav-social-link svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
}

.nav-social-link svg path{
  fill:currentColor;
  stroke:none;
}

.nav-social-link .fill-dot{
  fill:currentColor;
  stroke:none;
}

.nav-social-link:hover{
  color:var(--orange);
  background:rgba(200,94,44,.08);
}

@media(min-width:761px){
  .nav-social-link span{
    display:none;
  }
  .nav-social-link{
    width:40px;
    padding:8px;
  }
}

@media(max-width:760px){
  .nav-socials{
    width:100% !important;
    margin:12px 0 0 !important;
    padding-top:12px;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    border-top:1px solid rgba(16,36,52,.10);
  }

  .nav-social-link{
    width:100% !important;
    min-height:46px !important;
    border-radius:12px !important;
    justify-content:center !important;
    font-size:.9rem !important;
    background:rgba(16,36,52,.04) !important;
  }
}


/* Mobile social links: use the same compact icons as desktop */
@media(max-width:760px){
  .nav-socials{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    margin:14px 0 2px !important;
    padding-top:14px !important;
    border-top:1px solid rgba(16,36,52,.10) !important;
  }

  .nav-social-link{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(16,36,52,.05) !important;
    border:1px solid rgba(16,36,52,.08) !important;
  }

  .nav-social-link span{
    display:none !important;
  }

  .nav-social-link svg{
    width:20px !important;
    height:20px !important;
  }
}


/* =========================================================
   Fix navbar social icons + remove legacy left IG spacing
   ========================================================= */
.nav-left{
  gap:10px !important;
}

/* Desktop social icons */
.nav-links .nav-socials{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:auto !important;
  margin-left:8px !important;
  padding:0 !important;
  border:0 !important;
}

.nav-links .nav-social-link{
  flex:0 0 40px !important;
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:rgba(16,36,52,.05) !important;
  border:1px solid rgba(16,36,52,.08) !important;
}

.nav-links .nav-social-link span{
  display:none !important;
}

.nav-links .nav-social-link svg{
  width:19px !important;
  height:19px !important;
}

/* Mobile: keep both icons together and centered */
@media(max-width:760px){
  .nav-links .nav-socials{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;

    width:100% !important;
    margin:14px 0 0 !important;
    padding:16px 0 2px !important;

    border-top:1px solid rgba(16,36,52,.10) !important;
  }

  .nav-links .nav-social-link{
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;

    padding:0 !important;
    margin:0 !important;

    border:1px solid rgba(16,36,52,.08) !important;
    border-bottom:1px solid rgba(16,36,52,.08) !important;
    border-radius:999px !important;
    background:rgba(16,36,52,.05) !important;
  }

  .nav-links .nav-social-link:last-child{
    border-bottom:1px solid rgba(16,36,52,.08) !important;
  }

  .nav-links .nav-social-link svg{
    width:20px !important;
    height:20px !important;
  }
}


/* Painted-top-only product line */
.product-type-note,
.tier-price-note{
  margin-top:6px !important;
  font-size:.78rem !important;
  line-height:1.4;
}

.top-only-section{
  background:rgba(255,255,255,.36);
}

.top-only-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.top-only-card{
  position:relative;
  padding:22px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(16,36,52,.10);
  box-shadow:0 10px 26px rgba(16,36,52,.07);
}

.top-only-card.featured{
  border:2px solid var(--orange);
}

.top-only-card h3{
  margin:0 0 6px;
  font-family:"Bebas Neue",sans-serif;
  font-size:2.1rem;
  color:var(--navy);
}

.top-only-card > strong{
  display:block;
  margin-bottom:10px;
  font-size:1.35rem;
  color:var(--orange);
}

.top-only-card p{
  margin:0;
  color:#5b6c77;
  line-height:1.55;
}

.top-only-card .popular-label{
  position:absolute;
  top:14px;
  right:14px;
}

.top-only-cta{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:18px;
}

.top-only-cta p{
  margin:0;
}

@media(max-width:760px){
  .top-only-grid{
    grid-template-columns:1fr;
  }
  .top-only-card{
    padding:18px;
  }
  .top-only-cta{
    align-items:stretch;
    flex-direction:column;
    gap:10px;
  }
  .top-only-cta .button{
    width:100%;
  }
}


/* =========================================================
   Mobile navbar animation
   ========================================================= */
@media(max-width:760px){
  /* Keep the panel mounted so it can animate instead of snapping on/off */
  .nav-right{
    display:block !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    transform:translateY(-14px) !important;
    transition:
      opacity .24s ease,
      transform .28s cubic-bezier(.22,.8,.22,1),
      visibility 0s linear .28s !important;
  }

  .nav-right.menu-open{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    transform:translateY(0) !important;
    transition:
      opacity .24s ease,
      transform .28s cubic-bezier(.22,.8,.22,1),
      visibility 0s linear 0s !important;
  }

  /* Stagger menu items upward/fade-in */
  .nav-links > a{
    opacity:0 !important;
    transform:translateY(12px) !important;
    transition:
      opacity .22s ease,
      transform .26s cubic-bezier(.22,.8,.22,1),
      background-color .15s ease !important;
  }

  .nav-right.menu-open .nav-links > a{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  .nav-right.menu-open .nav-links > a:nth-child(1){transition-delay:.04s !important}
  .nav-right.menu-open .nav-links > a:nth-child(2){transition-delay:.075s !important}
  .nav-right.menu-open .nav-links > a:nth-child(3){transition-delay:.11s !important}
  .nav-right.menu-open .nav-links > a:nth-child(4){transition-delay:.145s !important}
  .nav-right.menu-open .nav-links > a:nth-child(5){transition-delay:.18s !important}

  /* Social icons follow the nav links */
  .nav-links .nav-socials{
    opacity:0 !important;
    transform:translateY(10px) scale(.96) !important;
    transition:
      opacity .22s ease .19s,
      transform .26s cubic-bezier(.22,.8,.22,1) .19s !important;
  }

  .nav-right.menu-open .nav-links .nav-socials{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
  }

  /* Smooth hamburger -> X */
  .menu-toggle span{
    transition:
      transform .24s cubic-bezier(.22,.8,.22,1),
      opacity .16s ease,
      width .18s ease !important;
    transform-origin:center !important;
  }

  .menu-toggle:active{
    transform:scale(.94);
  }

  /* Respect accessibility preference */
  @media(prefers-reduced-motion:reduce){
    .nav-right,
    .nav-links > a,
    .nav-links .nav-socials,
    .menu-toggle span{
      transition:none !important;
      animation:none !important;
    }
  }
}


/* =========================================================
   Rentals
   ========================================================= */
.rental-hero{
  padding-bottom:26px;
}

.rental-section{
  padding-top:24px;
}

.rental-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  max-width:980px;
  margin:0 auto;
}

.rental-card{
  display:flex;
  flex-direction:column;
  padding:26px;
  border-radius:26px;
  background:#fff;
  border:1px solid rgba(16,36,52,.11);
  box-shadow:0 14px 34px rgba(16,36,52,.08);
}

.rental-card-featured{
  border:2px solid var(--orange);
  background:#fffaf3;
}

.rental-badge{
  display:inline-flex;
  width:fit-content;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(16,36,52,.07);
  color:var(--navy);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.rental-badge.featured{
  background:var(--orange);
  color:#fff;
}

.rental-card h2{
  margin:12px 0 4px;
  font-family:"Bebas Neue",sans-serif;
  font-size:2.8rem;
  line-height:.95;
  color:var(--navy);
}

.rental-price{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:8px 0 12px;
}

.rental-price strong{
  font-family:"Bebas Neue",sans-serif;
  color:var(--orange);
  font-size:3.4rem;
  line-height:1;
}

.rental-price span{
  color:#71818a;
  font-weight:800;
}

.rental-card-top p{
  color:#536773;
  line-height:1.6;
}

.rental-list{
  display:grid;
  gap:9px;
  padding:0;
  margin:18px 0 24px;
  list-style:none;
}

.rental-list li{
  position:relative;
  padding-left:22px;
  color:#455864;
}

.rental-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--orange);
}

.rental-button{
  margin-top:auto;
  width:100%;
}

.rental-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:980px;
  margin:24px auto 0;
}

.rental-step{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(16,36,52,.09);
  border-radius:18px;
}

.rental-step > span{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-family:"Bebas Neue",sans-serif;
  font-size:1.3rem;
}

.rental-step strong{
  color:var(--navy);
}

.rental-step p{
  margin:4px 0 0;
  color:#657781;
  font-size:.86rem;
  line-height:1.45;
}

.rental-note{
  max-width:980px;
  margin:16px auto 0;
  padding:15px 17px;
  border-radius:16px;
  background:#fff3cf;
  border:1px solid rgba(200,94,44,.18);
  color:#665430;
  line-height:1.5;
}

.rental-note strong{
  color:var(--navy);
  margin-right:5px;
}

.rental-home-cta{
  padding:28px 0 !important;
  background:#fff8e9;
  border-bottom:1px solid rgba(16,36,52,.08);
}

.rental-home-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.rental-home-inner h2{
  margin:3px 0 4px;
  font-family:"Bebas Neue",sans-serif;
  color:var(--navy);
  font-size:2.7rem;
  line-height:1;
}

.rental-home-inner p{
  margin:0;
  color:#5f707a;
}

@media(max-width:760px){
  .rental-grid,
  .rental-steps{
    grid-template-columns:1fr;
  }

  .rental-card{
    padding:20px;
    border-radius:20px;
  }

  .rental-card h2{
    font-size:2.45rem;
  }

  .rental-home-inner{
    align-items:stretch;
    flex-direction:column;
    gap:14px;
  }

  .rental-home-inner .button{
    width:100%;
  }

  .rental-home-inner h2{
    font-size:2.4rem;
  }

  /* Six nav links now; keep the stagger smooth. */
  .nav-right.menu-open .nav-links > a:nth-child(6){
    transition-delay:.215s !important;
  }
}


/* Third rental tier */
.rental-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  max-width:1160px !important;
}

.rental-card-custom{
  border:2px solid var(--navy);
  background:#f8fbfc;
}

.rental-badge.custom{
  background:var(--navy);
  color:#fff;
}

@media(max-width:900px){
  .rental-grid{
    grid-template-columns:1fr !important;
    max-width:680px !important;
  }
}


/* Current product pricing */
.top-only-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:760px){
  .top-only-grid{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   Templates page
   ========================================================= */
.template-hero{
  padding-bottom:24px;
}

.templates-section{
  padding-top:28px;
}

.template-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.template-card{
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(16,36,52,.10);
  box-shadow:0 12px 28px rgba(16,36,52,.07);
}

.template-visual{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#f1ecdf;
  border-bottom:1px solid rgba(16,36,52,.08);
}

.template-photo{
  width:min(100%,340px);
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow:0 14px 26px rgba(16,36,52,.14);
  background:#fff;
}

.template-tabletop{
  width:min(100%,320px);
  aspect-ratio:2/1;
  border:8px solid var(--navy);
  border-radius:14px;
  box-shadow:0 14px 26px rgba(16,36,52,.14);
}

/* Six generic template previews */
.template-gameday .template-tabletop{
  background:
    linear-gradient(90deg, transparent 47%, #f7efe1 47% 53%, transparent 53%),
    linear-gradient(135deg, #102434 0 46%, #c85e2c 46% 54%, #102434 54% 100%);
}

.template-wave .template-tabletop{
  background:
    radial-gradient(80% 55% at 25% 55%, transparent 48%, #102434 49% 54%, transparent 55%),
    radial-gradient(80% 55% at 52% 60%, transparent 48%, #c85e2c 49% 54%, transparent 55%),
    radial-gradient(80% 55% at 78% 62%, transparent 48%, #72c7dc 49% 54%, transparent 55%),
    #ead4ad;
}

.template-checker .template-tabletop{
  background:
    linear-gradient(45deg, #102434 25%, transparent 25% 75%, #102434 75%) 0 0/54px 54px,
    linear-gradient(45deg, #c85e2c 25%, #f4dfbc 25% 75%, #c85e2c 75%) 27px 27px/54px 54px;
}

.template-house .template-tabletop{
  position:relative;
  background:
    linear-gradient(90deg, #102434 0 18%, #f4dfbc 18% 82%, #c85e2c 82% 100%);
}
.template-house .template-tabletop::after{
  content:"AB";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:"Bebas Neue",sans-serif;
  font-size:5rem;
  letter-spacing:.05em;
  color:#102434;
}

.template-minimal .template-tabletop{
  background:
    linear-gradient(90deg, #102434 0 12%, transparent 12% 88%, #c85e2c 88% 100%),
    linear-gradient(#f4dfbc,#f4dfbc);
}

.template-sunset .template-tabletop{
  background:
    linear-gradient(
      #f4dfbc 0 20%,
      #ffd76f 20% 40%,
      #c85e2c 40% 60%,
      #72c7dc 60% 80%,
      #102434 80% 100%
    );
}

.template-card-body{
  padding:18px;
}

.template-card-body h3{
  margin:0 0 6px;
  font-family:"Bebas Neue",sans-serif;
  font-size:2rem;
  color:var(--navy);
}

.template-card-body p{
  margin:0;
  min-height:3.2em;
  color:#60727c;
  line-height:1.55;
}

.template-card-actions{
  margin-top:16px;
}

.template-card-actions .button{
  width:100%;
}

.template-pricing-note{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:22px;
}

.template-pricing-note > div{
  padding:16px 18px;
  border-radius:18px;
  background:#fff8e9;
  border:1px solid rgba(200,94,44,.16);
}

.template-pricing-note strong{
  display:block;
  margin-bottom:4px;
  color:var(--navy);
}

.template-pricing-note span{
  color:#657781;
  font-size:.9rem;
  line-height:1.5;
}

.template-shop-cta{
  padding:28px 0 !important;
}

.template-shop-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px;
  border-radius:22px;
  background:#fff8e9;
  border:1px solid rgba(200,94,44,.16);
}

.template-shop-inner h2{
  margin:2px 0 4px;
  font-family:"Bebas Neue",sans-serif;
  color:var(--navy);
  font-size:2.5rem;
}

.template-shop-inner p{
  margin:0;
  color:#657781;
}

@media(max-width:900px){
  .template-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .template-grid,
  .template-pricing-note{
    grid-template-columns:1fr;
  }

  .template-card-body p{
    min-height:0;
  }

  .template-shop-inner{
    flex-direction:column;
    align-items:stretch;
  }

  .template-shop-inner .button{
    width:100%;
  }

  /* Seven nav links now, keep mobile stagger smooth */
  .nav-right.menu-open .nav-links > a:nth-child(7){
    transition-delay:.25s !important;
  }
}


/* =========================================================
   Primary navbar request CTA + rental form states
   ========================================================= */
.nav-links > a.nav-primary-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  background:var(--orange) !important;
  color:#fff !important;
  border:1px solid var(--orange) !important;
  box-shadow:0 8px 18px rgba(200,94,44,.18) !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

.nav-links > a.nav-primary-cta:hover{
  transform:translateY(-1px);
  background:var(--orange-2) !important;
  color:#fff !important;
}

.nav-links > a.nav-primary-cta::after{
  display:none !important;
}

.conditional-hidden{
  display:none !important;
}

@media(max-width:760px){
  .nav-links > a.nav-primary-cta{
    margin:8px 0 !important;
    padding:15px 16px !important;
    border-radius:999px !important;
    color:#fff !important;
    background:var(--orange) !important;
    border-bottom:1px solid var(--orange) !important;
  }

  .nav-links > a.nav-primary-cta.active{
    color:#fff !important;
  }
}


/* Alabama state template */
.template-alabama-state .template-tabletop{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, #102434 0 50%, #c85e2c 50% 100%);
}

.template-alabama-state .template-tabletop::before{
  content:"";
  position:absolute;
  inset:10% 8%;
  border:3px solid rgba(244,223,188,.9);
  border-radius:8px;
}

.alabama-state-mark{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

.alabama-state-shape{
  width:30%;
  height:78%;
  background:#f4dfbc;
  filter:drop-shadow(0 5px 0 rgba(16,36,52,.16));
  clip-path:polygon(
    19% 0%,
    79% 0%,
    82% 10%,
    85% 23%,
    87% 35%,
    89% 47%,
    90% 58%,
    89% 69%,
    92% 80%,
    100% 93%,
    84% 96%,
    70% 92%,
    57% 95%,
    46% 93%,
    36% 97%,
    21% 92%,
    12% 78%,
    13% 65%,
    10% 51%,
    11% 37%,
    8% 24%,
    13% 12%
  );
  position:relative;
}

.alabama-state-shape::after{
  content:"";
  position:absolute;
  inset:8%;
  background:linear-gradient(180deg, #c85e2c 0 50%, #102434 50% 100%);
  clip-path:inherit;
}
/* End Alabama state template */


/* Form completion checkmarks */
.completion-field{
  position:relative;
}

.completion-field.field-complete::after{
  content:"✓";
  position:absolute;
  top:34px;
  right:12px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#2e9b58;
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1;
  box-shadow:0 2px 8px rgba(46,155,88,.18);
  pointer-events:none;
  z-index:2;
}

.completion-field.field-complete input,
.completion-field.field-complete select,
.completion-field.field-complete textarea{
  border-color:rgba(46,155,88,.55) !important;
  box-shadow:0 0 0 3px rgba(46,155,88,.08);
}

.completion-field.field-complete input,
.completion-field.field-complete select{
  padding-right:44px;
}

.completion-field.field-complete textarea{
  padding-right:44px;
}

.completion-hint{
  grid-column:1 / -1;
  margin:-2px 0 2px;
  color:#6f7f88;
  font-size:.82rem;
}

.conditional-hidden.field-complete::after{
  display:none;
}

@media(max-width:760px){
  .completion-field.field-complete::after{
    top:35px;
    right:12px;
  }
}
/* End form completion checkmarks */