:root { --cream:#fff8df; --paper:#fffdf3; --ink:#3d2929; --brown:#8e5e3f; --caramel:#c99a66; --yellow:#f7c94e; --green:#78844d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"Trebuchet MS",Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.nav { height:86px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; border-bottom:2px solid rgba(61,41,41,.16); }
.brand { font-size:22px; font-weight:900; letter-spacing:-1px; display:flex; align-items:center; gap:9px; }
.brand-dot { color:var(--yellow); -webkit-text-stroke:2px var(--ink); font-size:18px; }
.nav-links { display:flex; gap:34px; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; }
.nav-links a:hover { color:var(--brown); }
.nav-buy { background:var(--ink); color:#fff; padding:13px 19px; border-radius:15px; font-weight:900; display:flex; gap:10px; align-items:center; box-shadow:4px 4px 0 var(--caramel); transition:.2s; }
.nav-buy:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--caramel); }
.hero { min-height:700px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:40px; padding-block:68px; }
.eyebrow,.section-no { display:inline-flex; align-items:center; gap:9px; font-weight:900; font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.eyebrow i { width:9px; height:9px; border-radius:99px; background:#ef705a; box-shadow:0 0 0 5px rgba(239,112,90,.16); animation:pulse 1.8s infinite; }
.hero h1 { font-size:clamp(72px,10vw,138px); line-height:.78; letter-spacing:-9px; margin:35px 0 24px; font-weight:1000; transform:rotate(-2deg); }
.hero h1 span { color:var(--caramel); text-shadow:3px 3px 0 var(--ink); }
.tagline { font-family:Georgia,serif; font-size:31px; font-style:italic; margin:0 0 18px; }
.intro { max-width:430px; font-size:17px; line-height:1.65; opacity:.72; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:32px 0; }
.button { min-height:49px; padding:0 18px; border:2px solid var(--ink); border-radius:16px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:900; text-transform:uppercase; font-size:13px; transition:.2s; }
.button:hover { transform:translateY(-4px) rotate(-1deg); }
.button-light { background:var(--paper); box-shadow:3px 3px 0 var(--ink); }
.button-buy { background:var(--yellow); box-shadow:4px 4px 0 var(--ink); }
.social-icon { font-size:18px; line-height:1; }
.status { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:900; text-transform:uppercase; }
.status > div { width:110px; height:12px; display:flex; gap:3px; }
.status b { flex:1; border:1px solid var(--ink); background:var(--green); border-radius:3px; }
.status b:last-child { background:transparent; }
.status small { opacity:.5; letter-spacing:1px; }
.hero-art { position:relative; min-height:570px; display:grid; place-items:center; }
.image-card { width:min(560px,90%); position:relative; transform:rotate(3deg); border:4px solid var(--ink); border-radius:48% 44% 47% 45%; overflow:hidden; box-shadow:14px 16px 0 var(--caramel); background:var(--paper); animation:float 4s ease-in-out infinite; }
.image-card img { display:block; width:100%; height:auto; }
.sun { position:absolute; width:440px; height:440px; background:var(--yellow); border-radius:50%; opacity:.72; }
.leaf { position:absolute; font-size:70px; color:var(--green); z-index:2; }
.leaf-a { left:0; bottom:30px; transform:rotate(-25deg); }.leaf-b { right:0; top:30px; transform:rotate(32deg); }
.ping { position:absolute; right:9%; top:9%; background:#fff; border:3px solid var(--ink); border-radius:50%; width:70px; height:58px; display:grid; place-items:center; font-family:Georgia,serif; font-weight:900; transform:rotate(10deg); }
.ticker { background:var(--ink); color:var(--cream); border-block:3px solid var(--ink); overflow:hidden; transform:rotate(-1deg); width:102%; margin-left:-1%; }
.ticker div { width:max-content; padding:18px 0; font-weight:900; letter-spacing:2px; word-spacing:10px; animation:ticker 20s linear infinite; }
.ticker span { color:var(--yellow); }
.story { padding-block:130px; display:grid; grid-template-columns:1fr .9fr .65fr; align-items:center; gap:60px; }
.section-heading h2,.gallery-head h2,.call-copy h2 { font-size:clamp(48px,6vw,84px); line-height:.95; letter-spacing:-4px; margin:24px 0 0; }
h2 em { font-family:Georgia,serif; color:var(--brown); font-weight:500; }
.story-phone { background:var(--ink); border:4px solid var(--ink); border-radius:46px; padding:23px 18px 19px; min-height:560px; box-shadow:10px 12px 0 var(--caramel); display:flex; flex-direction:column; gap:13px; }
.phone-top { color:white; display:flex; justify-content:space-between; padding:0 15px 12px; font-size:12px; }
.message { max-width:86%; padding:15px 17px; border-radius:20px; line-height:1.45; font-size:14px; }
.message-in { background:var(--paper); border-bottom-left-radius:5px; }
.message-out { background:var(--yellow); align-self:flex-end; border-bottom-right-radius:5px; }
.typing { display:flex; gap:5px; background:var(--paper); padding:13px 15px; border-radius:18px; width:max-content; }
.typing i { width:7px; height:7px; background:var(--caramel); border-radius:50%; animation:blink 1.2s infinite; }.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.home-bar { height:5px; width:90px; border-radius:5px; background:rgba(255,255,255,.65); margin:auto auto 0; }
.story-note { align-self:end; margin-bottom:70px; transform:rotate(3deg); background:var(--yellow); border:3px solid var(--ink); padding:24px; box-shadow:7px 7px 0 var(--ink); }
.story-note span { font-size:42px; }.story-note p { font-family:Georgia,serif; font-style:italic; font-size:20px; }.story-note strong { font-size:13px; text-transform:uppercase; line-height:1.5; }
.gallery-section { background:#dbe0ba; padding-block:110px; border-block:3px solid var(--ink); }
.gallery-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:48px; }
.gallery-controls { display:flex; gap:12px; }.gallery-controls button { width:52px; height:52px; border-radius:50%; border:2px solid var(--ink); background:var(--paper); font-size:22px; cursor:pointer; box-shadow:3px 3px 0 var(--ink); }
.gallery-rail { display:flex; gap:30px; overflow-x:auto; scroll-snap-type:x mandatory; padding:20px max(20px,calc((100vw - 1180px)/2)) 42px; scrollbar-width:none; }
.gallery-rail::-webkit-scrollbar { display:none; }
.photo { flex:0 0 min(420px,75vw); background:var(--paper); padding:13px 13px 18px; border:3px solid var(--ink); box-shadow:8px 9px 0 var(--ink); transform:rotate(-2deg); cursor:pointer; scroll-snap-align:center; transition:.25s; }
.photo:nth-child(even) { transform:rotate(2deg); }.photo:hover { transform:rotate(0) translateY(-10px); }
.photo img { width:100%; height:auto; display:block; border:2px solid var(--ink); }
.photo span { display:block; text-align:left; margin:14px 5px 0; font-family:Georgia,serif; font-style:italic; }
.call { padding-block:130px; display:grid; grid-template-columns:.8fr 1.1fr; gap:110px; align-items:center; }
.call-phone { background:var(--ink); border:4px solid var(--ink); color:white; border-radius:58px; padding:22px 36px 25px; min-height:630px; box-shadow:13px 14px 0 var(--caramel); text-align:center; display:flex; flex-direction:column; align-items:center; }
.speaker { width:80px; height:7px; border-radius:10px; background:#6b5555; margin-bottom:35px; }.call-phone img { border-radius:50%; border:4px solid var(--cream); width:180px; height:180px; object-fit:cover; }
.call-phone > span { margin-top:22px; opacity:.55; text-transform:uppercase; font-size:12px; letter-spacing:2px; }.call-phone h2 { font-size:40px; line-height:1; margin:12px 0 35px; }
.call-actions { display:flex; gap:34px; align-items:center; }.call-actions a { width:65px; height:65px; border-radius:50%; display:grid; place-items:center; font-size:24px; position:relative; }.call-actions small { position:absolute; top:72px; font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.decline { background:#ec7064; }.answer { background:#7fa05c; animation:pulseButton 1.8s infinite; }.telegram { background:#6e9ec0; }
.call-copy p { font-family:Georgia,serif; font-size:22px; line-height:1.5; opacity:.7; max-width:520px; }.call-copy > a { display:inline-flex; gap:15px; align-items:center; margin-top:22px; background:var(--yellow); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:18px 24px; border-radius:17px; font-weight:900; text-transform:uppercase; }
footer { height:110px; border-top:2px solid rgba(61,41,41,.2); display:flex; align-items:center; justify-content:space-between; font-size:13px; text-transform:uppercase; letter-spacing:1px; }footer p { font-family:Georgia,serif; font-style:italic; text-transform:none; font-size:16px; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(38,25,24,.9); display:grid; place-items:center; padding:60px; }.lightbox img { max-width:min(800px,80vw); max-height:80vh; width:auto; height:auto; border:5px solid var(--paper); box-shadow:13px 13px 0 var(--caramel); }
.lightbox[hidden] { display:none; }
.lightbox button { position:absolute; border:0; background:var(--paper); color:var(--ink); width:50px; height:50px; border-radius:50%; font-size:25px; cursor:pointer; }.lightbox-close { right:25px; top:25px; }.lightbox-prev { left:25px; }.lightbox-next { right:25px; }
@keyframes float { 50% { transform:rotate(1deg) translateY(-12px); } } @keyframes pulse { 50% { box-shadow:0 0 0 10px rgba(239,112,90,0); } } @keyframes ticker { to { transform:translateX(-50%); } } @keyframes blink { 50%{opacity:.25} } @keyframes pulseButton { 50%{box-shadow:0 0 0 12px rgba(127,160,92,0)} 0%,100%{box-shadow:0 0 0 3px rgba(127,160,92,.3)} }
@media (max-width:900px) {
  .nav-links { display:none; }.hero { grid-template-columns:1fr; text-align:center; padding-top:50px; }.hero-copy { display:flex; flex-direction:column; align-items:center; }.hero h1 { letter-spacing:-6px; }.hero-art { min-height:auto; }.story { grid-template-columns:1fr; gap:50px; }.story-note { margin:0; max-width:330px; justify-self:end; }.gallery-head { align-items:flex-end; }.call { grid-template-columns:1fr; gap:75px; }.call-phone { width:min(440px,100%); justify-self:center; }.call-copy { text-align:center; }.call-copy p { margin-inline:auto; }
}
@media (max-width:600px) {
  .shell { width:min(100% - 24px,1180px); }.nav { height:72px; }.nav .brand { font-size:18px; }.nav-buy { padding:11px 14px; }.hero { min-height:auto; padding-block:55px 75px; gap:30px; }.hero h1 { font-size:72px; letter-spacing:-5px; }.tagline { font-size:25px; }.hero-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }.button-buy { grid-column:1/-1; }.hero-art { min-height:390px; }.image-card { width:88%; box-shadow:9px 10px 0 var(--caramel); }.sun { width:320px; height:320px; }.leaf { font-size:45px; }.story,.call { padding-block:85px; }.section-heading h2,.gallery-head h2,.call-copy h2 { font-size:52px; letter-spacing:-3px; }.story-phone { min-height:540px; }.story-note { justify-self:center; transform:rotate(-2deg); }.gallery-section { padding-block:80px; }.gallery-head { display:block; }.gallery-controls { margin-top:25px; }.photo { flex-basis:82vw; }.call-phone { min-height:590px; padding-inline:20px; }.call-actions { gap:25px; } footer { height:auto; padding-block:35px; flex-direction:column; gap:14px; }.lightbox { padding:20px; }.lightbox img { max-width:88vw; }.lightbox-prev,.lightbox-next { top:auto; bottom:25px; }.lightbox-prev { left:35%; }.lightbox-next { right:35%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; transition:none!important; } }