/* Monaco Flowers — one stylesheet for the whole site. Written with CSS logical properties throughout (margin-inline, inset-inline, text-align:start) so that switching for Arabic mirrors the entire layout without a second stylesheet. */ /* ---------- fonts ---------------------------------------------------- */ @font-face{font-family:Cormorant;src:url(fonts/cormorant-500-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Cormorant;src:url(fonts/cormorant-500-latin-ext.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Cormorant;src:url(fonts/cormorant-600-latin.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD} @font-face{font-family:Cormorant;src:url(fonts/cormorant-600-latin-ext.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Cormorant;src:url(fonts/cormorant-500i-latin.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD} @font-face{font-family:Cormorant;src:url(fonts/cormorant-500i-latin-ext.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:InterVar;src:url(fonts/inter-400-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD} @font-face{font-family:InterVar;src:url(fonts/inter-400-latin-ext.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:InterVar;src:url(fonts/inter-500-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD} @font-face{font-family:InterVar;src:url(fonts/inter-500-latin-ext.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:InterVar;src:url(fonts/inter-600-latin.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD} @font-face{font-family:InterVar;src:url(fonts/inter-600-latin-ext.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF} /* Cyrillic, Arabic, CJK fall through to the system stack below — self-hosting those subsets would add megabytes for no visual gain. */ /* ---------- tokens --------------------------------------------------- */ :root{ --paper:#FBF8F4; --paper-2:#F4EDE5; --card:#FFFFFF; --ink:#191411; --ink-2:#453B34; --ink-3:#7A6C62; --line:rgba(25,20,17,.13); --line-2:rgba(25,20,17,.07); --accent:#A8324A; --accent-dark:#7E2235; --accent-wash:#F7E8EB; --gold:#B08A4A; --green:#3F5F4B; --serif:Cormorant,"Noto Serif","Times New Roman",serif; --sans:InterVar,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",system-ui,sans-serif; --wrap:1180px; --gut:clamp(20px,5vw,56px); --r:18px; --r-lg:28px; --shadow:0 1px 2px rgba(25,20,17,.05),0 18px 40px -24px rgba(25,20,17,.28); --shadow-lg:0 2px 4px rgba(25,20,17,.05),0 40px 80px -40px rgba(25,20,17,.38); --ease:cubic-bezier(.22,.61,.36,1); } /* CJK / Arabic locales need a different first choice for the display face. */ html[lang="zh"],html[lang="ja"],html[lang="ko"]{ --serif:"Noto Serif SC","Songti SC","Hiragino Mincho ProN","Yu Mincho","MS Mincho",serif; --sans:"PingFang SC","Hiragino Sans","Yu Gothic UI","Microsoft YaHei",var(--sans); } html[lang="ar"]{ --serif:"Noto Naskh Arabic","Amiri","Times New Roman",serif; --sans:"Noto Sans Arabic","Segoe UI",system-ui,sans-serif; } html[lang="ru"],html[lang="uk"]{ --serif:"Noto Serif","PT Serif",Georgia,serif; } /* ---------- reset ---------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg{max-width:100%;display:block} button,input,select,textarea{font:inherit;color:inherit} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p,figure{margin:0} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} ::selection{background:var(--accent-wash);color:var(--accent-dark)} /* ---------- type ----------------------------------------------------- */ .display{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.015em} h1.display{font-size:clamp(2.6rem,6.4vw,4.9rem)} h2.display{font-size:clamp(2rem,4.2vw,3.3rem)} h3.display{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.2} .eyebrow{ font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600; color:var(--accent);display:flex;align-items:center;gap:10px; } .eyebrow::before{content:"";inline-size:26px;block-size:1px;background:currentColor;opacity:.6;flex:none} html[lang="ar"] .eyebrow{letter-spacing:0} .lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--ink-2);max-inline-size:62ch} .muted{color:var(--ink-3)} .tiny{font-size:.83rem;line-height:1.5} /* ---------- layout --------------------------------------------------- */ .wrap{inline-size:min(100% - var(--gut) * 2,var(--wrap));margin-inline:auto} section{padding-block:clamp(64px,9vw,124px);position:relative} .sec-head{display:flex;flex-direction:column;gap:16px;margin-block-end:clamp(36px,5vw,60px)} .skip{position:absolute;inset-inline-start:-9999px} .skip:focus{position:fixed;inset-block-start:12px;inset-inline-start:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px} /* ---------- buttons -------------------------------------------------- */ .btn{ --bg:var(--ink);--fg:#fff;--bd:var(--ink); display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--bg);color:var(--fg);border:1px solid var(--bd); padding:14px 26px;border-radius:999px;cursor:pointer; font-size:.95rem;font-weight:500;letter-spacing:.01em; transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s,opacity .2s; text-align:center; } .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(25,20,17,.5)} .btn:active{transform:translateY(0)} .btn--accent{--bg:var(--accent);--bd:var(--accent)} .btn--accent:hover{--bg:var(--accent-dark);--bd:var(--accent-dark)} .btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)} .btn--ghost:hover{--bd:var(--ink);box-shadow:none} .btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff} .btn--wide{inline-size:100%} .btn[disabled]{opacity:.45;pointer-events:none} .btn .arw{transition:transform .3s var(--ease)} .btn:hover .arw{transform:translateX(3px)} [dir=rtl] .btn .arw{transform:scaleX(-1)} [dir=rtl] .btn:hover .arw{transform:scaleX(-1) translateX(3px)} /* ---------- header --------------------------------------------------- */ .hdr{ position:sticky;inset-block-start:0;z-index:40; background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:saturate(1.4) blur(14px); border-block-end:1px solid transparent;transition:border-color .3s,background .3s; } .hdr.stuck{border-block-end-color:var(--line-2)} .hdr__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);block-size:74px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:1.28rem;letter-spacing:.02em;font-weight:600;white-space:nowrap} .brand__mark{inline-size:30px;block-size:30px;flex:none;color:var(--accent)} .brand small{display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-block-start:-4px} .nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);margin-inline-start:auto} .nav a{font-size:.92rem;color:var(--ink-2);position:relative;padding-block:6px} .nav a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;inline-size:0;block-size:1px;background:var(--accent);transition:inline-size .3s var(--ease)} .nav a:hover{color:var(--ink)} .nav a:hover::after{inline-size:100%} .hdr .btn{padding:11px 20px;font-size:.88rem} /* language picker */ .lang{position:relative} .lang__btn{ display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line); padding:9px 14px;border-radius:999px;cursor:pointer;font-size:.85rem; } .lang__btn:hover{border-color:var(--ink)} .lang__btn svg{inline-size:15px;block-size:15px;opacity:.6} .lang__menu{ position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;z-index:50; background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px; box-shadow:var(--shadow-lg);display:none; grid-template-columns:repeat(2,minmax(140px,1fr));gap:2px;max-block-size:70vh;overflow:auto; } .lang.open .lang__menu{display:grid} .lang__menu button{ display:flex;align-items:center;gap:9px;inline-size:100%;text-align:start; background:none;border:0;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:.9rem; } .lang__menu button:hover{background:var(--paper-2)} .lang__menu button[aria-current=true]{background:var(--accent-wash);color:var(--accent-dark);font-weight:500} .lang__menu .native{color:var(--ink-3);font-size:.8rem;margin-inline-start:auto} .burger{display:none;background:none;border:1px solid var(--line);border-radius:12px;padding:9px 11px;cursor:pointer} .burger span{display:block;inline-size:18px;block-size:1.5px;background:var(--ink);margin-block:3.5px;transition:.3s var(--ease)} .mobnav{display:none} /* ---------- hero ----------------------------------------------------- */ .hero{padding-block:clamp(48px,6vw,86px) clamp(56px,7vw,104px);overflow:hidden} .hero__grid{display:grid;grid-template-columns:1.03fr .97fr;gap:clamp(28px,4vw,64px);align-items:center} .hero__badge{ display:inline-flex;align-items:center;gap:9px;align-self:start; background:var(--accent-wash);color:var(--accent-dark);border-radius:999px; padding:7px 15px;font-size:.78rem;font-weight:500;letter-spacing:.02em; } .hero__badge i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--accent);flex:none} .hero h1{margin-block:22px 20px} .hero h1 em{font-style:italic;color:var(--accent)} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:32px} .hero__trust{display:flex;flex-direction:column;gap:11px;margin-block-start:34px;padding-block-start:26px;border-block-start:1px solid var(--line-2)} .hero__trust li{display:flex;align-items:flex-start;gap:11px;font-size:.93rem;color:var(--ink-2)} .hero__trust svg{inline-size:17px;block-size:17px;color:var(--accent);flex:none;margin-block-start:3px} .hero__art{position:relative} .hero__art .frame{ position:relative;border-radius:var(--r-lg);overflow:hidden; aspect-ratio:4/4.7;background:var(--paper-2);box-shadow:var(--shadow-lg); } .hero__art .frame img{inline-size:100%;block-size:100%;object-fit:cover} .hero__art .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(25,20,17,.34))} .hero__chip{ position:absolute;inset-block-end:22px;inset-inline-start:22px;inset-inline-end:22px;z-index:2; background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-radius:16px;padding:14px 16px; display:flex;align-items:center;gap:13px;box-shadow:var(--shadow); } .hero__chip .av{inline-size:38px;block-size:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none} .hero__chip .av svg{inline-size:19px;block-size:19px} .hero__chip b{display:block;font-size:.9rem;font-weight:600} .hero__chip span{font-size:.8rem;color:var(--ink-3)} /* ---------- how it works --------------------------------------------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);counter-reset:s} .step{ background:var(--card);border:1px solid var(--line-2);border-radius:var(--r); padding:clamp(22px,2.4vw,30px);position:relative;overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s; } .step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line)} .step__n{ counter-increment:s;font-family:var(--serif);font-size:2.6rem;line-height:1; color:var(--accent);opacity:.28;font-weight:600; } .step__n::before{content:"0" counter(s)} .step h3{margin-block:14px 9px;font-size:1.12rem;font-weight:600;font-family:var(--sans);letter-spacing:-.01em} .step p{font-size:.93rem;color:var(--ink-2);line-height:1.6} .how__note{ margin-block-start:clamp(28px,3vw,42px);display:flex;flex-wrap:wrap;align-items:center;gap:16px; background:var(--paper-2);border-radius:var(--r);padding:20px 24px;font-size:.95rem;color:var(--ink-2); } .how__note .btn{margin-inline-start:auto} /* ---------- occasions ------------------------------------------------ */ /* 240px min lands on 4 even columns at the 1180px wrap — 12 occasions, 3 tidy rows. */ .occ{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .occ li{ background:var(--card);border:1px solid var(--line-2);border-radius:14px; padding:18px 20px;display:flex;align-items:center;gap:12px;font-size:.96rem; transition:border-color .3s,transform .3s var(--ease),background .3s; } .occ li:hover{border-color:var(--accent);transform:translateY(-3px)} .occ li svg{inline-size:19px;block-size:19px;color:var(--accent);flex:none} /* ---------- budget --------------------------------------------------- */ .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)} .tier{ border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.2vw,28px); background:var(--card);display:flex;flex-direction:column;gap:10px; transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .tier:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .tier--star{background:var(--ink);color:#fff;border-color:var(--ink)} .tier--star .tier__b{color:rgba(255,255,255,.72)} .tier--star .tier__r{color:#fff} .tier__t{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--accent)} .tier--star .tier__t{color:#E9A8B6} .tier__r{font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1} .tier__b{font-size:.92rem;color:var(--ink-2)} .budget__note{ margin-block-start:26px;display:flex;gap:13px;align-items:flex-start; font-size:.92rem;color:var(--ink-2);max-inline-size:78ch; } .budget__note svg{inline-size:18px;block-size:18px;color:var(--gold);flex:none;margin-block-start:4px} /* ---------- works / endless slideshow -------------------------------- */ .works{background:var(--ink);color:#fff;overflow:hidden} .works .eyebrow{color:#E9A8B6} .works .lead{color:rgba(255,255,255,.72)} .marquee{display:flex;flex-direction:column;gap:16px;margin-block-start:clamp(30px,4vw,46px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .mq{display:flex;gap:16px;inline-size:max-content;will-change:transform} .mq--a{animation:mq 64s linear infinite} .mq--b{animation:mq 78s linear infinite reverse} .marquee:hover .mq{animation-play-state:paused} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .mq figure{ inline-size:clamp(200px,23vw,290px);aspect-ratio:4/5;flex:none;border-radius:16px;overflow:hidden; background:#241C18;position:relative; } .mq img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .8s var(--ease)} .mq figure:hover img{transform:scale(1.05)} .mq figcaption{ position:absolute;inset-block-end:0;inset-inline:0;padding:26px 16px 14px; background:linear-gradient(transparent,rgba(15,11,9,.86)); font-size:.82rem;color:rgba(255,255,255,.9);display:flex;justify-content:space-between;gap:8px; } .mq figcaption span:last-child{color:rgba(255,255,255,.55)} .works__empty{ border:1px dashed rgba(255,255,255,.28);border-radius:var(--r);padding:48px 28px;text-align:center; color:rgba(255,255,255,.7);margin-block-start:34px; } .works__note{margin-block-start:20px;font-size:.8rem;color:rgba(255,255,255,.45)} /* ---------- coverage ------------------------------------------------- */ .cover__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-block-start:34px} .stat b{display:block;font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;line-height:1;color:var(--accent)} .stat span{font-size:.83rem;color:var(--ink-3);display:block;margin-block-start:8px} .cities{display:flex;flex-wrap:wrap;gap:8px} .cities li{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.87rem;background:var(--card);color:var(--ink-2)} .cities li.more{border-style:dashed;color:var(--ink-3)} .cover__label{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-block-end:16px} /* ---------- faq ------------------------------------------------------ */ .faq{max-inline-size:860px;margin-inline:auto} .faq details{border-block-end:1px solid var(--line-2);padding-block:6px} .faq summary{ cursor:pointer;list-style:none;padding-block:18px;display:flex;align-items:flex-start;gap:16px; font-size:1.04rem;font-weight:500; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";inline-size:11px;block-size:11px;flex:none;margin-inline-start:auto;margin-block-start:7px; border-inline-end:1.6px solid var(--accent);border-block-end:1.6px solid var(--accent); transform:rotate(45deg);transition:transform .3s var(--ease); } .faq details[open] summary::after{transform:rotate(-135deg)} .faq p{padding-block-end:22px;color:var(--ink-2);max-inline-size:70ch;font-size:.97rem} /* ---------- cta band ------------------------------------------------- */ .band{background:var(--accent);color:#fff;border-radius:var(--r-lg);padding:clamp(38px,5vw,64px);text-align:center;position:relative;overflow:hidden} .band h2{position:relative;z-index:1} .band p{color:rgba(255,255,255,.85);margin:16px auto 28px;max-inline-size:52ch;position:relative;z-index:1} .band .btn{position:relative;z-index:1} .band::before,.band::after{ content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08); } .band::before{inline-size:340px;block-size:340px;inset-block-start:-140px;inset-inline-start:-90px} .band::after{inline-size:260px;block-size:260px;inset-block-end:-130px;inset-inline-end:-60px} /* ---------- footer --------------------------------------------------- */ .ftr{background:var(--paper-2);padding-block:clamp(48px,6vw,72px) 34px;margin-block-start:clamp(48px,6vw,90px)} .ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px} .ftr h4{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-block-end:16px} .ftr li{margin-block-end:9px} .ftr a{font-size:.93rem;color:var(--ink-2)} .ftr a:hover{color:var(--accent)} .ftr__tag{font-size:.93rem;color:var(--ink-2);max-inline-size:38ch;margin-block-start:16px} .ftr__bot{ margin-block-start:40px;padding-block-start:22px;border-block-start:1px solid var(--line); display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:.83rem;color:var(--ink-3); } .ftr__bot .sp{margin-inline-start:auto} /* ---------- reveal --------------------------------------------------- */ .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} .rv:nth-child(2){transition-delay:.06s} .rv:nth-child(3){transition-delay:.12s} .rv:nth-child(4){transition-delay:.18s} /* ===================== ORDER WIZARD ================================== */ .order-shell{padding-block:clamp(30px,4vw,56px) clamp(40px,6vw,90px)} .order-grid{display:grid;grid-template-columns:270px 1fr;gap:clamp(24px,3.4vw,52px);align-items:start} .rail{position:sticky;inset-block-start:96px} .rail ol{display:flex;flex-direction:column;gap:2px} .rail li{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:12px;font-size:.93rem;color:var(--ink-3);transition:.3s} .rail li b{ inline-size:26px;block-size:26px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;font-size:.76rem;font-weight:600;flex:none;transition:.3s; } .rail li.done{color:var(--ink-2)} .rail li.done b{background:var(--green);border-color:var(--green);color:#fff} .rail li.cur{background:var(--card);color:var(--ink);box-shadow:var(--shadow)} .rail li.cur b{background:var(--accent);border-color:var(--accent);color:#fff} .rail__save{margin-block-start:18px;padding-inline:12px;font-size:.8rem;color:var(--ink-3)} .card{ background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg); padding:clamp(24px,3.2vw,44px);box-shadow:var(--shadow); } .prog{block-size:3px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-block-end:26px} .prog i{display:block;block-size:100%;background:var(--accent);inline-size:0;transition:inline-size .5s var(--ease)} .stepno{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600} /* The wizard steps are
s inside the card, so the page-level section padding has to be undone here or every step floats in 120px of air. */ .pane{display:none;padding-block:0} .pane.on{display:block;animation:fade .45s var(--ease)} @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .pane h2{margin-block:12px 10px;font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1} .pane > .lead{margin-block-end:28px} .field{margin-block-end:22px} .field > label,.lbl{display:block;font-size:.88rem;font-weight:500;margin-block-end:9px} .lbl .opt{color:var(--ink-3);font-weight:400;font-size:.82rem;margin-inline-start:6px} input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],select,textarea{ inline-size:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px; padding:13px 15px;font-size:.98rem;transition:border-color .25s,background .25s,box-shadow .25s; } textarea{min-block-size:104px;resize:vertical;line-height:1.55} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--accent);background:var(--card); box-shadow:0 0 0 4px var(--accent-wash); } input.bad,select.bad,textarea.bad{border-color:var(--accent);background:#FFF7F8} .err{display:none;font-size:.82rem;color:var(--accent);margin-block-start:7px} .err.on{display:block} .help{font-size:.83rem;color:var(--ink-3);margin-block-start:7px} .row{display:grid;gap:16px} .row--2{grid-template-columns:1fr 1fr} .row--3{grid-template-columns:1fr 1fr 1fr} .row--phone{grid-template-columns:132px 1fr} /* chips */ .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{position:relative} .chip input{position:absolute;opacity:0;inline-size:0;block-size:0} .chip span{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; border:1px solid var(--line);border-radius:999px;padding:10px 17px;font-size:.92rem; background:var(--paper);transition:.22s var(--ease); } .chip span:hover{border-color:var(--ink-3)} .chip input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff} .chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px} /* big option cards */ .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .opt-card{position:relative} .opt-card input{position:absolute;opacity:0;inline-size:0;block-size:0} .opt-card > span{ display:flex;flex-direction:column;gap:7px;cursor:pointer;block-size:100%; border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--paper); transition:.25s var(--ease); } .opt-card b{font-size:.98rem;font-weight:600} .opt-card small{font-size:.85rem;color:var(--ink-3);line-height:1.5} .opt-card > span:hover{border-color:var(--ink-3);transform:translateY(-2px)} .opt-card input:checked + span{border-color:var(--accent);background:var(--accent-wash);box-shadow:0 0 0 1px var(--accent)} .opt-card input:checked + span small{color:var(--ink-2)} /* checkboxes */ .check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);margin-block-end:12px;transition:.25s} .check:hover{border-color:var(--ink-3)} .check input{inline-size:20px;block-size:20px;accent-color:var(--accent);margin:1px 0 0;flex:none} .check span{font-size:.93rem;color:var(--ink-2)} .check.bad{border-color:var(--accent);background:#FFF7F8} .navbtns{display:flex;gap:12px;margin-block-start:32px;padding-block-start:26px;border-block-start:1px solid var(--line-2)} .navbtns .btn--ghost{margin-inline-end:auto} /* summary */ .sum{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-block-end:24px} .sum__row{display:grid;grid-template-columns:170px 1fr auto;gap:16px;padding:14px 18px;border-block-end:1px solid var(--line-2);font-size:.94rem;align-items:baseline} .sum__row:last-child{border-block-end:0} .sum__row dt{color:var(--ink-3);font-size:.86rem} .sum__row dd{margin:0;color:var(--ink);white-space:pre-line} .sum__row button{background:none;border:0;color:var(--accent);cursor:pointer;font-size:.83rem;text-decoration:underline;padding:0} .sendbox{display:flex;flex-direction:column;gap:12px} .sendbox .btn{padding-block:16px;font-size:1rem} .notice{ display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);border-radius:14px; padding:16px 18px;font-size:.9rem;color:var(--ink-2);margin-block-end:20px; } .notice svg{inline-size:18px;block-size:18px;flex:none;margin-block-start:3px;color:var(--gold)} .notice--wa{background:var(--accent-wash);color:var(--accent-dark)} .notice--wa svg{color:var(--accent)} /* legal pages */ .legal{max-inline-size:760px;margin-inline:auto} .legal h1{margin-block-end:18px} .legal h2{font-size:1.15rem;font-weight:600;margin-block:34px 10px;font-family:var(--sans);letter-spacing:-.01em} .legal p{color:var(--ink-2);font-size:.98rem} .legal .updated{margin-block-start:44px;padding-block-start:20px;border-block-start:1px solid var(--line-2);font-size:.85rem;color:var(--ink-3)} /* 404 */ .oops{min-block-size:70vh;display:grid;place-items:center;text-align:center} /* ---------- responsive ----------------------------------------------- */ @media (max-width:1040px){ .steps{grid-template-columns:repeat(2,1fr)} .tiers{grid-template-columns:repeat(2,1fr)} .order-grid{grid-template-columns:1fr} .rail{position:static} .rail ol{flex-direction:row;overflow:auto;gap:6px;padding-block-end:6px;scrollbar-width:none} .rail ol::-webkit-scrollbar{display:none} .rail li{white-space:nowrap} .rail li span{display:none} .rail li.cur span{display:inline} .rail__save{display:none} } @media (max-width:880px){ .nav,.hdr .btn--accent{display:none} .burger{display:block} .hero__grid{grid-template-columns:1fr} .hero__art{order:-1;max-inline-size:460px;margin-inline:auto;inline-size:100%} .hero__art .frame{aspect-ratio:4/3.4} .cover__grid{grid-template-columns:1fr} .ftr__grid{grid-template-columns:1fr 1fr} .opts{grid-template-columns:1fr} .mobnav{ display:none;position:fixed;inset:74px 0 0;z-index:39;background:var(--paper); padding:26px var(--gut);overflow:auto; } .mobnav.open{display:block;animation:fade .3s var(--ease)} .mobnav a{display:block;padding-block:16px;border-block-end:1px solid var(--line-2);font-size:1.15rem;font-family:var(--serif)} .mobnav .btn{margin-block-start:24px;inline-size:100%} body.locked{overflow:hidden} .lang__menu{grid-template-columns:1fr;position:fixed;inset-block-start:78px;inset-inline:var(--gut) var(--gut);max-block-size:60vh} } @media (max-width:620px){ body{font-size:16px} .steps,.tiers{grid-template-columns:1fr} .row--2,.row--3{grid-template-columns:1fr} .stats{grid-template-columns:1fr;gap:14px;text-align:start} .ftr__grid{grid-template-columns:1fr} .sum__row{grid-template-columns:1fr;gap:4px} .sum__row button{justify-self:start} .hero__cta .btn{inline-size:100%} .occ{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} .rv{opacity:1;transform:none} } @media print{ .hdr,.ftr,.navbtns,.rail{display:none} }