/* Premium Handwritten Portfolio CSS */

:root{
  --ink:#101820;
  --text:#232323;
  --muted:#6e6259;
  --paper:#ffffff;
  --cream:#f6f4ef;
  --warm:#fff8ef;
  --line:#e4d9c8;
  --accent:#ff4d3d;
  --clay:#a8664f;
  --shadow:0 22px 50px rgba(16,24,32,.12);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:Inter,Arial,Helvetica,sans-serif;
  line-height:1.6;
}

img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 42px;
  background:rgba(246,244,239,.96);
  border-bottom:1px solid rgba(228,217,200,.7);
  backdrop-filter:blur(14px);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:#fff;
  border-radius:10px;
  font-family:Allura,cursive;
  font-size:1.9rem;
}

.brand-text strong,
.brand-text small{display:block;}

.brand-text strong{
  color:var(--ink);
  font-weight:900;
}

.brand-text small{
  color:var(--muted);
  font-size:.8rem;
}

.site-nav{
  display:flex;
  gap:26px;
  align-items:center;
  font-weight:800;
  font-size:.94rem;
}

.nav-button{
  padding:13px 19px;
  background:var(--ink);
  color:#fff;
  border-radius:8px;
  box-shadow:0 12px 24px rgba(16,24,32,.14);
}

/* HERO */

.hero{
  position:relative;
  min-height:720px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  gap:36px;
  padding:72px 42px 88px;
  background:var(--cream);
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  left:-80px;
  bottom:74px;
  width:680px;
  height:220px;
  border-top:4px dashed var(--accent);
  border-radius:50%;
  transform:rotate(-9deg);
  opacity:.78;
}

.hero-copy{
  position:relative;
  z-index:3;
  max-width:530px;
  margin-left:11vw;
}

.eyebrow{
  margin:0 0 12px;
  color:var(--clay);
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.hero h1{
  margin:0;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.3rem,6vw,5.3rem);
  line-height:1.06;
  letter-spacing:-.03em;
}

.hero h1::first-line{
  font-family:Allura,"Brush Script MT",cursive;
  font-size:1.28em;
  letter-spacing:0;
  font-weight:400;
}

.hero-lead{
  margin:28px 0 0;
  color:#17232d;
  font-size:1.16rem;
  line-height:1.8;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 22px;
  border-radius:0;
  font-weight:900;
  letter-spacing:.02em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover{
  transform:translateY(-2px);
}

.button-dark{
  background:var(--accent);
  color:#fff;
  box-shadow:0 15px 28px rgba(255,77,61,.28);
}

.button-light,.button-outline{
  border:1px solid var(--ink);
  background:#fff;
  color:var(--ink);
}

.trust-row{
  display:grid;
  gap:8px;
  margin-top:28px;
  color:#101820;
  font-size:1rem;
  font-weight:700;
}

.trust-row span::before{
  content:"✦ ";
  color:var(--accent);
}

/* Hero Visual Handwrytten-like */

.hero-visual{
  position:relative;
  z-index:2;
  min-height:580px;
}

.dashed-line{
  position:absolute;
  border-top:4px dashed var(--accent);
  border-radius:50%;
  opacity:.82;
  z-index:1;
}

.line-one{
  width:620px;
  height:210px;
  right:-45px;
  top:170px;
  transform:rotate(-8deg);
}

.line-two{
  width:520px;
  height:150px;
  left:-120px;
  bottom:10px;
  transform:rotate(18deg);
}

.paper-plane{
  position:absolute;
  left:2%;
  bottom:95px;
  z-index:3;
  font-size:3rem;
  color:var(--ink);
  transform:rotate(12deg);
}

.pen-doodle{
  position:absolute;
  left:13%;
  top:280px;
  z-index:3;
  font-size:3.2rem;
  color:var(--accent);
  transform:rotate(-26deg);
}

.envelope-scene{
  position:relative;
  width:min(760px,100%);
  height:590px;
  margin-left:auto;
}

.back-paper{
  position:absolute;
  width:360px;
  height:250px;
  right:92px;
  top:172px;
  z-index:1;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 20px 34px rgba(16,24,32,.12);
  transform:rotate(8deg);
}

.letter-card{
  position:absolute;
  width:430px;
  min-height:315px;
  left:50px;
  top:42px;
  z-index:4;
  padding:18px;
  background:#fff;
  border:8px solid #101d3b;
  box-shadow:0 28px 45px rgba(16,24,32,.18);
  transform:rotate(-12deg);
}

.letter-head{
  text-align:center;
  color:#101d3b;
  font-family:Georgia,serif;
  font-size:1.25rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.letter-card img{
  width:100%;
  height:238px;
  object-fit:contain;
  background:#fff;
}

.envelope-back{
  position:absolute;
  left:90px;
  bottom:50px;
  z-index:2;
  width:430px;
  height:260px;
  background:#fff;
  border:1px solid #e9e4dc;
  box-shadow:0 28px 45px rgba(16,24,32,.12);
  transform:rotate(-5deg);
}

.envelope-front{
  position:absolute;
  left:95px;
  bottom:40px;
  z-index:5;
  width:440px;
  height:180px;
  background:
    linear-gradient(145deg,transparent 49%,rgba(16,24,32,.08) 50%,transparent 51%),
    linear-gradient(215deg,transparent 49%,rgba(16,24,32,.08) 50%,transparent 51%),
    #fff;
  border:1px solid #e9e4dc;
  box-shadow:0 26px 42px rgba(16,24,32,.10);
  transform:rotate(-5deg);
}

.badge-card{
  position:absolute;
  right:16px;
  bottom:30px;
  z-index:6;
  width:330px;
  height:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 24px;
  background:#202020;
  color:#fff;
  transform:rotate(12deg);
  box-shadow:0 24px 38px rgba(16,24,32,.18);
}

.badge-card strong{
  font-family:Allura,cursive;
  font-size:5.2rem;
  line-height:.75;
  font-weight:400;
}

.badge-card span{
  color:#e9e4dc;
  font-size:.85rem;
  margin-top:12px;
}

/* GENERAL */

.section{padding:70px 40px;}

.section-heading{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:end;
  margin-bottom:30px;
}

.section-heading h2{
  margin:0;
  font-size:3rem;
  font-family:Georgia,serif;
  color:var(--ink);
}

/* SERVICES + FAQ + PACKAGES */

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

.price-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  box-shadow:var(--shadow);
}

.price-card h3{
  margin-top:0;
  margin-bottom:10px;
  font-size:1.1rem;
}

.price-card p{
  margin:0;
  color:var(--muted);
}

.package-name{
  margin:0 0 10px;
  color:var(--clay);
  font-size:.8rem;
  font-weight:900;
  text-transform:uppercase;
}

.price{
  font-size:2rem;
  color:#111 !important;
  font-family:Georgia,serif;
  margin:10px 0 0 !important;
}

.featured{
  background:#111;
  color:#fff;
}

.featured p,.featured h3,.featured .price{
  color:#fff !important;
}

/* PORTFOLIO */

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:start;
}

.portfolio-item{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  margin:0;
}

.portfolio-item img{
  width:100%;
  height:auto;
  object-fit:contain;
  background:#fff;
}

.portfolio-item figcaption{
  padding:16px;
}

.portfolio-item strong{
  display:block;
  margin-bottom:4px;
}

.portfolio-item span{
  color:var(--muted);
  font-size:.92rem;
}

/* FOOTER */

.site-footer{
  padding:24px 40px;
  border-top:1px solid var(--line);
  background:var(--cream);
  color:var(--muted);
}

/* RESPONSIVE */

@media(max-width:1100px){
  .hero{
    grid-template-columns:1fr;
  }
  .hero-copy{
    margin-left:0;
    max-width:760px;
  }
  .envelope-scene{
    margin:0 auto;
  }
  .section-heading{
    grid-template-columns:1fr;
  }
}

@media(max-width:1000px){
  .portfolio-grid,.services-grid,.pricing-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:650px){
  .site-header,.hero,.section,.site-footer{
    padding-left:18px;
    padding-right:18px;
  }
  .site-nav{
    gap:12px;
    flex-wrap:wrap;
  }
  .hero{
    padding-top:50px;
    min-height:auto;
  }
  .hero h1{
    font-size:3.4rem;
  }
  .hero-actions{
    flex-direction:column;
  }
  .button{
    width:100%;
  }
  .hero-visual{
    min-height:430px;
  }
  .envelope-scene{
    height:420px;
    transform:scale(.76);
    transform-origin:top center;
  }
  .portfolio-grid,.services-grid,.pricing-grid{
    grid-template-columns:1fr;
  }
}