:root{color-scheme:dark;--bg:#060b19;--panel:#0c162c;--ink:#f4f6fc;--muted:#adb7cd;--cyan:#43d9ff;--violet:#8d6bff;--line:rgba(128,162,233,.19);--max:1200px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}input:focus,textarea:focus,select:focus{outline:2px solid var(--cyan);outline-offset:2px}.section{width:min(var(--max),calc(100% - 64px));margin-inline:auto}.header{height:100px;width:min(1320px,calc(100% - 64px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;letter-spacing:-.5px;white-space:nowrap}.brand-mark{width:29px;height:33px;display:inline-block;border-radius:50% 50% 50% 10%;background:linear-gradient(140deg,#68edff 0%,#2970ff 55%,#aa76ff 100%);box-shadow:0 0 23px #4a86ff44;transform:rotate(-12deg)}nav{display:flex;align-items:center;gap:30px;font-size:14px}nav>a:not(.button){color:#c5cde1}nav>a:hover{color:var(--cyan)}.button{display:inline-flex;justify-content:center;align-items:center;padding:14px 25px;border-radius:30px;font-size:15px;font-weight:700;line-height:1.4;border:1px solid transparent;transition:transform .2s,box-shadow .2s;position:relative;isolation:isolate;overflow:hidden}.button:hover{transform:translateY(-3px)}.button-primary{background:linear-gradient(110deg,#27d9f6,#3268ff 55%,#9b5dff);color:white;box-shadow:0 5px 30px #4564ff44}.button-primary:before{content:"";position:absolute;inset:-100% -40%;background:linear-gradient(110deg,transparent 40%,#ffffff55 50%,transparent 60%);transform:translateX(-80%);animation:button-shimmer 7s ease-in-out infinite;z-index:-1}.button-outline{background:#0a142377;border-color:#57bfff;box-shadow:inset 0 0 10px #2288ff11,0 0 18px #4389ff22}.nav-cta{padding:11px 22px}.menu-toggle{display:none}.hero{min-height:570px;display:grid;grid-template-columns:1fr 1.12fr;align-items:center;position:relative;padding:55px 0 65px}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:700;color:#96dfff;margin:0 0 24px;line-height:1.6}h1{font-size:clamp(44px,5vw,70px);line-height:1.08;letter-spacing:-3px;margin:0 0 28px;font-weight:750}.gradient-text{background:linear-gradient(105deg,#54e4ff,#55b8ff 58%,#b599ff);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-description{font-size:19px;color:#bdc7de;max-width:440px;line-height:1.7;margin:0 0 32px}.hero-note{color:#7f8ba7;font-size:13px;margin-top:20px}.hero-visual{position:relative;margin-left:-10px}.hero-visual img{display:block;width:115%;max-width:none;height:auto;position:relative;border-radius:36px;animation:float 8s ease-in-out infinite;mask-image:radial-gradient(ellipse 68% 63% at 50% 48%,#000 55%,transparent 100%)}.visual-chip{position:absolute;bottom:8%;left:19%;padding:7px 16px;border:1px solid #8cdfff44;border-radius:30px;font-size:12px;background:#09162dcc;color:#c4edff;backdrop-filter:blur(12px)}.hero-glow{position:absolute;right:-5%;top:4%;width:600px;height:600px;background:radial-gradient(ellipse,#3e60ff19,transparent 65%);pointer-events:none}.orbital{position:absolute;inset:15% 0;border-radius:50%;background:conic-gradient(from 0deg,transparent 55%,#319fff18,#a471ff24,transparent 90%);filter:blur(35px);animation:orbit 20s linear infinite}.benefits{display:grid;grid-template-columns:repeat(3,1fr);padding:35px 0;border-block:1px solid var(--line);gap:25px}.benefits>div{display:flex;align-items:center;gap:18px}.icon{flex-shrink:0;width:55px;height:55px;border:1px solid #48a9ff66;border-radius:50%;display:grid;place-items:center;font-size:28px;color:var(--cyan);box-shadow:0 0 25px #247cff20}.benefits h2{font-size:15px;line-height:1.4;margin:0 0 5px}.benefits p{font-size:14px;color:var(--muted);margin:0;line-height:1.6}.content-section{padding-top:110px}.section-title{font-size:clamp(32px,4vw,49px);line-height:1.15;letter-spacing:-1.6px;margin:0 0 38px}.services-grid,.examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.glass{border:1px solid #5478b940;border-radius:20px;background:linear-gradient(135deg,#15304a55,#17234155 50%,#37236033);box-shadow:0 10px 50px #01051055;position:relative;overflow:hidden}.shine:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),#65bdff24,transparent 65%);transition:opacity .3s;opacity:.55}.shine:after{content:"";position:absolute;top:-100%;left:-100%;width:55%;height:300%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#8ad9ff0d,transparent);animation:card-shimmer 13s ease-in-out infinite;pointer-events:none}.services-grid article:nth-child(2):after{animation-delay:3s}.services-grid article:nth-child(3):after{animation-delay:6s}.services-grid article{padding:30px;transition:transform .25s,border-color .25s}.services-grid article:hover{transform:translateY(-6px);border-color:#61a8ff88}.service-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;border:1px solid #73b4ff55;color:var(--cyan);font-size:30px;background:#24395c44;margin-bottom:30px}.services-grid h3{font-size:23px;letter-spacing:-.7px;margin:0 0 12px}.services-grid p{color:var(--muted);font-size:16px;line-height:1.7;min-height:85px}.services-grid ul{padding:0;list-style:none;font-size:14px;color:#c5cde0;margin:25px 0}.services-grid li{padding:6px 0}.services-grid li:before{content:"·";color:var(--cyan);font-weight:bold;margin-right:10px}.services-grid a{position:relative;color:#92dfff;font-size:14px;font-weight:700;border-bottom:1px solid #70bdff55;padding-bottom:4px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px}.section-heading>p{color:var(--muted);font-size:15px;margin-bottom:42px}.example{text-align:left;padding:0;color:var(--ink);transition:transform .3s,border-color .3s;background:#0c172b}.example:hover{transform:translateY(-7px);border-color:#67caff}.mini-site{display:block;margin:14px 14px 0;border-radius:9px;overflow:hidden;min-height:265px;color:#202322;text-align:left}.mini-nav{padding:12px 14px;display:flex;justify-content:space-between;background:#ffffffd9;font-size:10px;letter-spacing:1px;font-weight:700}.mini-nav span{font-size:9px;font-weight:400}.mini-body{display:flex;flex-direction:column;align-items:start;gap:12px;padding:22px 20px 18px}.mini-kicker{font-size:8px;letter-spacing:1.3px}.mini-body strong{font-family:Georgia,serif;font-size:26px;line-height:1.12;letter-spacing:-.7px}.mini-body>span:not(.mini-kicker):not(.mini-button){font-size:10px}.mini-button{padding:5px 9px;font-size:9px;border:1px solid currentColor}.mini-lines{display:flex;gap:8px;padding:0 20px 15px}.mini-lines i{display:block;height:5px;width:30%;background:currentColor;opacity:.13}.example-label{display:flex;justify-content:space-between;align-items:center;padding:20px;gap:10px}.example-label strong{display:block;font-size:18px}.example-label small{display:block;font-size:12px;color:#8f9cb6;margin-top:3px}.view-pill{font-size:12px;color:#a7ddff;border:1px solid #497ead55;padding:6px 10px;border-radius:15px}.examples-note{font-size:13px;color:#8190af;margin-top:18px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.steps article{border-top:1px solid #3a587a;padding-top:24px}.step-number{color:var(--cyan);font-size:14px;letter-spacing:2px;display:inline-block;margin-bottom:22px}.steps h3{font-size:19px;margin:0 0 12px}.steps p{font-size:16px;color:var(--muted);margin:0}.faq-section{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;padding-top:110px}.faq details{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;padding:22px 32px 22px 0;position:relative;font-size:16px;font-weight:600}summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:5px;top:20px;color:var(--cyan);font-size:24px;font-weight:400}details[open] summary:after{content:"−"}details p{font-size:15px;color:var(--muted);margin:0 0 24px;line-height:1.8}.contact-section{margin-top:100px;margin-bottom:80px;padding:55px;border:1px solid #497bac55;border-radius:28px;display:grid;grid-template-columns:.9fr 1.2fr;gap:55px;background:radial-gradient(ellipse at 0 0,#1269be24,transparent 60%),radial-gradient(ellipse at 100% 100%,#7147eb19,transparent 60%),#091225;position:relative}.contact-copy>p:not(.eyebrow){color:var(--muted);font-size:16px}.contact-copy .section-title{font-size:42px}.contact-note{margin-top:50px;display:flex;gap:15px;align-items:center;color:#b5caec}.contact-note span{font-size:30px;color:var(--cyan)}.contact-note p{font-size:14px}.quote-form{padding:27px;background:#070e1ccc;overflow:visible}.quote-form label{display:block;font-size:13px;color:#d0d9ed;margin-bottom:18px;font-weight:600}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}input,select,textarea{display:block;width:100%;margin-top:7px;padding:12px 13px;border:1px solid #41557966;background:#111b30;color:#eef2fc;border-radius:9px;font-size:16px;min-width:0}input::placeholder,textarea::placeholder{color:#7888a5;font-size:14px;font-weight:400}textarea{resize:vertical}.quote-form>.button{width:100%;font-size:14px}.form-note{font-size:12px;line-height:1.6;color:#8f9bb4;margin:15px 0 0}.quote-result{margin-top:20px;padding:18px;border:1px solid #47d8ff44;border-radius:12px;background:#12304766}.quote-result p{font-size:14px;color:#b7c6df}.quote-result .button{font-size:13px;width:100%;padding:12px}.footer{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:8px 30px;padding:32px 0 35px}.footer .brand{font-size:16px}.footer .brand-mark{width:23px;height:26px}.footer p{margin:0;font-size:13px;color:#8b98b1;grid-column:1}.footer>div{grid-column:2;grid-row:1/3;display:flex;gap:24px;align-items:center;font-size:13px;color:#b6c0d7}.footer button{background:none;border:0;color:inherit;font-size:13px;padding:0}.footer small{grid-column:1;font-size:12px;color:#596981;margin-top:8px}.skip{position:absolute;left:20px;top:-100px;z-index:100;background:white;color:black;padding:10px}.skip:focus{top:10px}dialog{width:min(560px,calc(100% - 36px));padding:38px;color:var(--ink);background:#0d182c;border:1px solid #5b9ce166;border-radius:24px;box-shadow:0 0 100px #1656c333}dialog::backdrop{background:#020714cc;backdrop-filter:blur(6px)}dialog h2{font-size:30px;line-height:1.2;letter-spacing:-.7px}dialog p,dialog li{font-size:16px;color:var(--muted)}dialog ul{padding-left:20px}.dialog-note{font-size:13px!important;border-top:1px solid var(--line);padding-top:18px}.close-dialog{position:absolute;right:14px;top:10px;border:0;background:none;color:#d3dff6;font-size:30px;padding:4px 10px}.reveal{opacity:1}.js-motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.js-motion .reveal.visible{opacity:1;transform:none}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes button-shimmer{0%,65%{transform:translateX(-80%)}90%,100%{transform:translateX(80%)}}@keyframes card-shimmer{0%,65%{left:-100%}90%,100%{left:170%}}
@media(min-width:1500px){.hero{min-height:660px}}@media(max-width:1000px){.header{gap:15px}nav{gap:18px}.brand{font-size:17px}.hero{grid-template-columns:1fr 1fr}h1{font-size:52px}.hero-description{font-size:17px}.services-grid article{padding:24px}.benefits{gap:18px}.icon{width:44px;height:44px}.benefits>div{gap:12px}.benefits h2{font-size:14px}.benefits p{font-size:12px}.contact-section{padding:35px;gap:30px}.contact-copy .section-title{font-size:36px}.form-row{grid-template-columns:1fr;gap:0}.faq-section{gap:35px}}
@media(max-width:760px){html{scroll-padding-top:30px}.section,.header{width:calc(100% - 40px)}.header{height:84px}.brand{font-size:16px}.brand-mark{width:24px;height:28px}.menu-toggle{display:flex;width:44px;height:44px;flex-direction:column;justify-content:center;gap:7px;padding:11px;background:#111c30;border:1px solid var(--line);border-radius:12px}.menu-toggle span{height:2px;background:#c9e6ff;width:100%}nav{display:none;position:absolute;left:0;right:0;top:75px;flex-direction:column;align-items:stretch;background:#0c172af5;padding:22px;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 40px #0009}nav.open{display:flex}nav>a{padding:8px}nav .button{margin-top:8px}.hero{padding:38px 0 25px;grid-template-columns:1fr;min-height:0}.eyebrow{font-size:11px;letter-spacing:2px;margin-bottom:20px}h1{font-size:clamp(43px,10vw,66px);letter-spacing:-2px}.hero-description{font-size:17px;max-width:480px}.hero-note{font-size:12px}.hero-visual{margin:15px -15px 0}.hero-visual img{width:100%;mask-image:radial-gradient(ellipse 66% 65% at 50% 50%,#000 55%,transparent 100%)}.visual-chip{left:20%;bottom:8%;font-size:11px}.hero-glow{width:100%;height:100%;right:0}.benefits{grid-template-columns:1fr;padding:25px 0;gap:22px}.benefits>div{gap:17px}.benefits h2{font-size:15px}.benefits p{font-size:14px}.icon{width:46px;height:46px}.content-section{padding-top:70px}.section-title{font-size:36px;letter-spacing:-1.4px;margin-bottom:30px}.services-grid,.examples-grid{grid-template-columns:1fr;gap:18px}.services-grid article{padding:27px}.services-grid p{min-height:0}.service-icon{margin-bottom:20px}.services-grid h3{font-size:24px}.section-heading{display:block}.section-heading>p{margin:0 0 25px}.mini-site{min-height:265px}.mini-body{padding:25px}.mini-body strong{font-size:31px}.mini-body>span:not(.mini-kicker):not(.mini-button){font-size:12px}.mini-kicker{font-size:10px}.mini-nav{font-size:12px;padding:14px}.mini-button{font-size:11px}.example-label{padding:20px 25px}.example-label small{font-size:13px}.view-pill{font-size:13px}.steps{grid-template-columns:1fr;gap:25px}.step-number{margin-bottom:14px}.faq-section{grid-template-columns:1fr;gap:5px;padding-top:70px}.contact-section{padding:25px;margin-top:65px;grid-template-columns:1fr;gap:20px;border-radius:22px}.contact-copy .section-title{font-size:35px}.contact-note{display:none}.quote-form{padding:20px}.footer{grid-template-columns:1fr;gap:12px;padding-top:27px}.footer>div{grid-column:1;grid-row:auto;flex-wrap:wrap;font-size:14px}.footer p{font-size:14px}.footer button{font-size:14px}.footer small{margin-top:5px}dialog{padding:28px}.form-note{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}.button:hover,.example:hover,.services-grid article:hover{transform:none}}

/* Three contrasting design examples. */
.mini-site{position:relative;isolation:isolate;min-height:300px}.mini-nav{font-size:12px;letter-spacing:.5px}.mini-nav span{font-size:12px}.mini-kicker{font-size:12px;letter-spacing:.8px}.mini-body>span:not(.mini-kicker):not(.mini-button){font-size:14px;line-height:1.45}.mini-button{font-size:12px;padding:7px 12px}.mini-body{gap:14px;padding:22px 20px}.mini-body strong{font-size:29px}.champetre{background:#f5efdf;color:#39452e;border:1px solid #ddd2b9;border-radius:70px 70px 8px 8px;padding-top:10px}.champetre .mini-nav{background:transparent;border-bottom:1px solid #b8bea380;color:#47563b;padding-inline:22px;letter-spacing:1px}.champetre .mini-kicker{color:#8b4d32;letter-spacing:1.5px;font-weight:600}.champetre .mini-body{gap:16px;padding-top:24px}.champetre .mini-body strong{font-family:Georgia,"Palatino Linotype",serif;font-weight:400;font-style:italic;font-size:29px;line-height:1.2;letter-spacing:-.6px}.champetre .mini-body>span:not(.mini-kicker):not(.mini-button){color:#596349}.champetre .mini-button{background:#4b5c3e;color:#fff9eb;border:1px solid #4b5c3e;border-radius:22px;padding:8px 15px}.champetre .mini-lines{gap:7px}.champetre .mini-lines i{height:3px;border-radius:3px;opacity:.7;background:#a77b50}.champetre .mini-lines i:nth-child(2){background:#7d8b65}.champetre .mini-lines i:nth-child(3){background:#c6b78f}.elegant{background:#000;color:#d9b85f}.elegant .mini-nav{background:#000;color:#d9b85f;border-bottom:1px solid #a58b5555;letter-spacing:1.2px}.elegant .mini-kicker{color:#d9b85f;font-weight:400;letter-spacing:1px}.elegant .mini-body{gap:16px}.elegant .mini-body strong{font-family:Georgia,"Times New Roman",serif;font-size:29px;letter-spacing:-.5px;font-weight:400;line-height:1.15}.elegant .mini-body>span:not(.mini-kicker):not(.mini-button){color:#d9b85f}.elegant .mini-button{background:transparent;color:#d9b85f;border:1px solid #bba16d;border-radius:0;letter-spacing:.7px;padding:8px 15px}.elegant .mini-lines i{opacity:1;background:#bba16d}.elegant .mini-lines i:nth-child(2){background:#d9b85f}.elegant .mini-lines i:nth-child(3){background:#6d6048}.example-label{padding:20px 16px}.example-label strong{font-size:17px}@keyframes example-reflection{0%,100%{background-position:100% 0}50%{background-position:0 0}}@media(max-width:760px){.mini-nav,.mini-nav span{font-size:12px}.mini-kicker{font-size:12px}.mini-body>span:not(.mini-kicker):not(.mini-button){font-size:14px}.mini-button{font-size:12px}.mini-body strong{font-size:32px}.mini-site{min-height:300px}.example-label{padding:20px 25px}}

/* Black and gold styling for the elegant example. */
.example[data-example="elegant"]{background:#000;color:#d9b85f;border-color:#bba16d66}.example[data-example="elegant"]:hover{border-color:#d9b85f}.example[data-example="elegant"] .example-label small,.example[data-example="elegant"] .view-pill{color:#d9b85f}.example[data-example="elegant"] .view-pill{border-color:#bba16d88}.example[data-example="elegant"]:focus-visible{outline-color:#d9b85f}#example-dialog[data-example="elegant"]{background:#000;color:#d9b85f;border-color:#bba16d88;box-shadow:0 0 80px #bba16d18}#example-dialog[data-example="elegant"] p,#example-dialog[data-example="elegant"] li,#example-dialog[data-example="elegant"] .close-dialog{color:#d9b85f}#example-dialog[data-example="elegant"] .button{background:#000;color:#d9b85f;border-color:#bba16d;box-shadow:none}#example-dialog[data-example="elegant"] .button:before{display:none}#example-dialog[data-example="elegant"] .dialog-note{border-color:#bba16d44}

/* Warm countryside presentation and matching discovery dialog. */
.example[data-example="champetre"]{background:#e8e0ce;color:#39452e;border-color:#c5b795}.example[data-example="champetre"]:hover{border-color:#84916a}.example[data-example="champetre"] .example-label small{color:#626d53}.example[data-example="champetre"] .view-pill{color:#47563b;border-color:#a0ac8b}.example[data-example="champetre"]:focus-visible{outline-color:#84916a}#example-dialog[data-example="champetre"]{color-scheme:light;background:#f5efdf;color:#39452e;border-color:#b8bea3;box-shadow:0 15px 70px #1c271b44}#example-dialog[data-example="champetre"] h2{font-family:Georgia,"Palatino Linotype",serif;font-style:italic;font-weight:400}#example-dialog[data-example="champetre"] p,#example-dialog[data-example="champetre"] li,#example-dialog[data-example="champetre"] .close-dialog{color:#596349}#example-dialog[data-example="champetre"] .button{background:#4b5c3e;color:#fff9eb;box-shadow:none}#example-dialog[data-example="champetre"] .button:before{display:none}#example-dialog[data-example="champetre"] .dialog-note{border-color:#b8bea3}@media(max-width:760px){.champetre .mini-body strong{font-size:32px}}

/* Rustic artisan palette and hand-lettered typography. */
@font-face{font-family:"Amatic Rustic";src:url("assets/amatic-sc-bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
.example[data-example="rustique"]{background:#26170f;color:#fff5df;border-color:#77583d;box-shadow:0 10px 40px #01051033}
.example[data-example="rustique"]:hover{border-color:#dbc59c}
.example[data-example="rustique"]:focus-visible{outline-color:#dbc59c}
.example[data-example="rustique"] .example-label small{color:#dcc9aa}
.example[data-example="rustique"] .view-pill{color:#fff5df;border-color:#a28a69;border-radius:3px}
.rustique{color:#fff7e6;font-family:"Amatic Rustic",cursive;font-weight:700;background:linear-gradient(#120a044d,#120a0470),url("assets/rustic-wood.webp") center/cover no-repeat,#342219;border:1px solid #816346;border-radius:3px;box-shadow:inset 0 0 35px #08030199;min-height:420px}
.rustique .mini-nav{color:#fff7e6;background:transparent;border-bottom:1px solid #d4c4a555;padding:12px 14px;letter-spacing:1px;gap:10px;align-items:center}
.rustique .mini-nav .rustic-mark{font-family:"Amatic Rustic",cursive;font-weight:700;font-size:21px;line-height:1;border:2px solid #f4e9d9aa;outline:1px solid #f4e9d955;outline-offset:3px;border-radius:50%;padding:9px 12px;text-align:center;transform:rotate(-7deg);color:#fff7e6}
.rustique .mini-nav>span:last-child{font-family:"Amatic Rustic",cursive;font-size:20px;font-weight:700;letter-spacing:.5px;color:#fff7e6}
.rustique .mini-body{padding:26px 12px 0;gap:16px;text-align:center;margin:0;align-items:center;border:0;text-shadow:0 2px 5px #000}
.rustique .mini-kicker{font-family:"Amatic Rustic",cursive;font-size:19px;font-weight:700;letter-spacing:1px;color:#f6dfb1;line-height:1.4}
.rustique .mini-body strong{font-family:"Amatic Rustic",cursive;font-weight:700;font-size:clamp(32px,3.4vw,44px);line-height:1.08;letter-spacing:.2px;color:#fff7e6}
.rustique .mini-body>span:not(.mini-kicker):not(.mini-button){color:#fff5df;font-size:23px;line-height:1.3}
.rustique .mini-button{background:#9b8060;color:#fff9ed;border:1px solid #d5c4a7;border-radius:3px;padding:5px 19px;font-family:"Amatic Rustic",cursive;font-size:24px;font-weight:700;align-self:center;box-shadow:0 3px 8px #0006;text-shadow:none;transform:rotate(-2deg)}
.rustique-detail{display:flex;justify-content:space-between;gap:12px;margin:32px 12px 18px;color:#fff9ed;font-family:"Amatic Rustic",cursive;font-size:20px;font-weight:700;line-height:1.2;text-shadow:0 2px 6px #000}
.rustique-detail>span{padding:4px 7px;background:#201109aa;border-bottom:1px dashed #e5d8bd99;transform:rotate(-5deg)}
.rustique-detail>span:last-child{transform:rotate(4deg)}
#example-dialog[data-example="rustique"]{color-scheme:dark;background:linear-gradient(#120a04b3,#120a04cc),url("assets/rustic-wood.webp") center/cover no-repeat,#342219;color:#fff7e6;border:2px solid #907353;border-radius:5px;box-shadow:0 15px 70px #0008}
#example-dialog[data-example="rustique"] h2{font-family:"Amatic Rustic",cursive;font-weight:700;font-size:44px;letter-spacing:.3px;border-bottom:1px dashed #d4c4a577;padding-bottom:18px}
#example-dialog[data-example="rustique"] p,#example-dialog[data-example="rustique"] li,#example-dialog[data-example="rustique"] .close-dialog{color:#f0e2cb}
#example-dialog[data-example="rustique"] .eyebrow{color:#edcc94}
#example-dialog[data-example="rustique"] .button{background:#9b8060;color:#fff9ed;border-radius:3px;box-shadow:none}
#example-dialog[data-example="rustique"] .button:before{display:none}
#example-dialog[data-example="rustique"] .dialog-note{border-color:#aa8f6a77}
@media(max-width:760px){.rustique .mini-body strong{font-size:44px}.rustique .mini-nav{padding-inline:18px}.rustique .mini-body{padding-inline:12px}.rustique-detail{margin-inline:18px}}

/* Country-style calligraphy inspired by the supplied wedding lettering. */
@font-face{font-family:"Country Calligraphy";src:url("assets/elegant-chancery.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
.example[data-example="champetre"],#example-dialog[data-example="champetre"]{font-family:"Country Calligraphy","Palatino Linotype",serif;font-weight:400;font-synthesis:none}
.champetre .mini-body strong{font-family:"Country Calligraphy",serif;font-style:normal;font-weight:400;font-size:2.5rem;line-height:1.25;letter-spacing:.02em;padding-inline:3px}
.champetre .mini-nav,.champetre .mini-nav span,.champetre .mini-kicker{font-size:1.125rem;font-weight:400;line-height:1.5;letter-spacing:.06em}
.champetre .mini-body>span:not(.mini-kicker):not(.mini-button){font-size:1.375rem;line-height:1.5}
.champetre .mini-button,.example[data-example="champetre"] .view-pill{font-size:1.25rem;line-height:1.4;font-weight:400}
.example[data-example="champetre"] .example-label strong{font-size:1.875rem;font-weight:400;line-height:1.3;letter-spacing:.03em}
.example[data-example="champetre"] .example-label small{font-size:1.125rem;line-height:1.4}
#example-dialog[data-example="champetre"] h2{font-family:"Country Calligraphy",serif;font-style:normal;font-weight:400;font-size:clamp(2.5rem,7vw,3.25rem);line-height:1.3;letter-spacing:.02em}
#example-dialog[data-example="champetre"] p:not(.eyebrow),#example-dialog[data-example="champetre"] li,#example-dialog[data-example="champetre"] .button{font-size:1.5rem;font-weight:400;line-height:1.5;letter-spacing:.02em}
#example-dialog[data-example="champetre"] .eyebrow{font-size:1.125rem;font-weight:400;letter-spacing:.12em}
#example-dialog[data-example="champetre"] .dialog-note{font-size:1.25rem}
@media(max-width:760px){.champetre .mini-body strong{font-size:2.5rem}}

/* Match the rustic Discover text to the hand-lettered preview. */
#example-dialog[data-example="rustique"]{font-family:"Amatic Rustic",cursive;font-weight:700;font-synthesis:none}
#example-dialog[data-example="rustique"] p,#example-dialog[data-example="rustique"] li,#example-dialog[data-example="rustique"] .button{font-family:inherit;font-size:1.5rem;font-weight:700;line-height:1.5;letter-spacing:.02em}
#example-dialog[data-example="rustique"] .eyebrow{font-size:1.25rem;letter-spacing:.06em}
#example-dialog[data-example="rustique"] .dialog-note{font-size:1.25rem!important}

/* Blue-violet title gradient with a moving light reflection. */
#services .services-grid h3.gradient-text,#etapes .steps h3.gradient-text{
 display:table;width:fit-content;max-width:100%;
 background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.92) 49%,rgba(223,232,255,.78) 51%,transparent 60%),linear-gradient(100deg,#50caff 0%,#648fff 38%,#a879ff 72%,#d391ff 100%);
 background-size:250% 100%,100% 100%;background-position:110% 0,0 0;background-repeat:no-repeat;
 background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 0 9px #8178ff35);animation:service-title-reflection 4.8s ease-in-out infinite;
}
#services .services-grid article:nth-child(2) h3,#etapes .steps article:nth-child(2) h3{animation-delay:.35s}
#services .services-grid article:nth-child(3) h3,#etapes .steps article:nth-child(3) h3{animation-delay:.7s}
@keyframes service-title-reflection{0%,15%{background-position:110% 0,0 0}65%,100%{background-position:-110% 0,0 0}}
@media(prefers-reduced-motion:reduce){#services .services-grid h3.gradient-text,#etapes .steps h3.gradient-text{animation:none;background-position:25% 0,0 0}}

/* Additional style previews and matching discovery windows. */
@font-face{font-family:"Minimal Sans";src:url("assets/style-minimal-sans.otf") format("opentype");font-display:swap}
@font-face{font-family:"Industrial Narrow";src:url("assets/style-industrial-narrow.otf") format("opentype");font-display:swap}
@font-face{font-family:"Dynamic Gothic";src:url("assets/style-dynamic-gothic.otf") format("opentype");font-display:swap}
@font-face{font-family:"Auto Sans";src:url("assets/style-auto-sans.otf") format("opentype");font-display:swap}
.example[data-example="minimaliste"],#example-dialog[data-example="minimaliste"]{--style-bg:#fafafa;--style-ink:#181b20;--style-accent:#181b20;--style-font:"Minimal Sans";--photo-x:0%;--photo-y:0.0%;}
.example[data-example="minimaliste"] .mini-body strong{font-family:var(--style-font),serif;}
#example-dialog[data-example="minimaliste"] h2{font-family:var(--style-font),serif;}
.example[data-example="industriel"],#example-dialog[data-example="industriel"]{--style-bg:#1c2022;--style-ink:#f8f4ec;--style-accent:#ff8c31;--style-font:"Industrial Narrow";--photo-x:100%;--photo-y:0.0%;}
.example[data-example="industriel"] .mini-body strong{font-family:var(--style-font),serif;}
#example-dialog[data-example="industriel"] h2{font-family:var(--style-font),serif;}
.example[data-example="dynamique"],#example-dialog[data-example="dynamique"]{--style-bg:#fff6e7;--style-ink:#1b214b;--style-accent:#ee554b;--style-font:"Dynamic Gothic";--photo-x:0%;--photo-y:33.333333333333336%;}
.example[data-example="dynamique"] .mini-body strong{font-family:var(--style-font),serif;}
#example-dialog[data-example="dynamique"] h2{font-family:var(--style-font),serif;}
.example[data-example="romantique"],#example-dialog[data-example="romantique"]{--style-bg:#fff6f1;--style-ink:#773047;--style-accent:#9d304d;--style-font:"Great Vibes";--photo-x:100%;--photo-y:33.333333333333336%;}
.example[data-example="romantique"] .mini-body strong{font-family:var(--style-font),serif;}
#example-dialog[data-example="romantique"] h2{font-family:var(--style-font),serif;}
.example[data-example="automobile"],#example-dialog[data-example="automobile"]{--style-bg:#181c21;--style-ink:#ffffff;--style-accent:#ff3446;--style-font:"Auto Sans";--photo-x:0%;--photo-y:100.0%;}
.example[data-example="automobile"] .mini-body strong{font-family:var(--style-font),serif;}
#example-dialog[data-example="automobile"] h2{font-family:var(--style-font),serif;}
.example[data-example="beaute"],#example-dialog[data-example="beaute"]{--style-bg:#fff3e9;--style-ink:#804d4e;--style-accent:#ad6961;--style-font:"Elegant Palladio";--photo-x:100%;--photo-y:100.0%;}
.example[data-example="beaute"] .mini-body strong{font-family:var(--style-font),serif;}
#example-dialog[data-example="beaute"] h2{font-family:var(--style-font),serif;}

.additional-example{background:var(--style-bg);color:var(--style-ink);border-color:var(--style-accent);}
.additional-example .new-style{background:var(--style-bg);color:var(--style-ink);min-height:330px;}
.style-photo,.dialog-photo{background-image:url("assets/style-photo-atlas.webp");background-size:200% 400%;background-position:var(--photo-x) var(--photo-y);background-repeat:no-repeat;}
.style-photo{position:absolute;inset:0;z-index:-2;}
.new-style:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--style-bg) 0%,var(--style-bg) 35%,transparent 100%);}
.additional-example .mini-nav{background:transparent;font-size:10px;letter-spacing:.5px;gap:12px;}
.additional-example .mini-nav>span{white-space:nowrap;}
.additional-example .mini-body{max-width:85%;gap:16px;}
.additional-example .mini-kicker{font-size:9px;letter-spacing:1px;}
.additional-example .mini-body strong{font-size:29px;line-height:1.16;letter-spacing:-.5px;color:var(--style-accent);}
.additional-example .mini-body>span:not(.mini-kicker):not(.mini-button){font-size:12px;line-height:1.5;max-width:210px;}
.additional-example .mini-button{background:var(--style-accent);color:var(--style-bg);border:0;font-family:Arial,sans-serif;font-size:10px;padding:8px 10px;}
.additional-example .example-label strong{font-size:17px;line-height:1.35;}
.additional-example .example-label small{color:var(--style-ink);opacity:.75;}
.additional-example .view-pill{color:var(--style-ink);border-color:var(--style-accent);white-space:nowrap;}
.additional-dialog{background:var(--style-bg);color:var(--style-ink);border-color:var(--style-accent);max-height:calc(100dvh - 36px);overflow:auto;color-scheme:normal;}
.additional-dialog h2{color:var(--style-accent);font-size:34px;line-height:1.25;}
.additional-dialog p,.additional-dialog li,.additional-dialog .close-dialog{color:var(--style-ink);}
.additional-dialog .eyebrow{font-family:Arial,sans-serif;padding-right:36px;font-size:12px;}
.additional-dialog .button{background:var(--style-accent);color:var(--style-bg);box-shadow:none;}
.additional-dialog .button:before{display:none;}
.additional-dialog .dialog-note{border-color:var(--style-accent);}
.dialog-photo{aspect-ratio:4/3;border-radius:10px;margin:20px 0;}
.dialog-photo[hidden]{display:none;}
.example[data-example="dynamique"] .style-photo,
#example-dialog[data-example="dynamique"] .dialog-photo{background-image:url("assets/dynamic-painting.webp");background-size:cover;background-position:center;}
.example[data-example="romantique"] .mini-body strong{font-size:43px;font-weight:400;line-height:1.3;}
#example-dialog[data-example="romantique"] h2{font-size:48px;font-weight:400;line-height:1.3;}
.example[data-example="automobile"] .mini-body strong{text-transform:uppercase;font-size:27px;}
@media(max-width:760px){.additional-example .mini-body strong{font-size:32px;}.additional-example .mini-body>span:not(.mini-kicker):not(.mini-button){font-size:14px;}.additional-example .mini-nav,.additional-example .mini-nav span,.additional-example .mini-button{font-size:12px;}.additional-example .new-style{min-height:350px;}.example[data-example="romantique"] .mini-body strong{font-size:46px;}}


/* Graphic design offer below personalized support. */
.graphic-service{padding-top:28px}.graphic-service-card{display:flex;align-items:center;gap:24px;padding:28px 30px}.graphic-service-card .service-icon{flex-shrink:0;margin:0}.graphic-service-card>div{flex:1;min-width:0}.graphic-service-card h2{font-size:clamp(20px,2.2vw,26px);line-height:1.35;margin:0 0 8px;letter-spacing:-.4px;background-image:linear-gradient(100deg,#50caff,#648fff 38%,#a879ff 72%,#d391ff)}.graphic-service-card p{margin:0;color:var(--muted);font-size:16px}.graphic-service-card .button{flex-shrink:0}@media(max-width:760px){.graphic-service-card{flex-wrap:wrap;padding:24px;gap:18px}.graphic-service-card>div{flex-basis:calc(100% - 72px)}.graphic-service-card .button{width:100%}}

/* Color and movement belong to the lettering in the dynamic example. */
.example[data-example="dynamique"] .mini-body strong,
.example[data-example="dynamique"] .example-label strong,
#example-dialog[data-example="dynamique"] h2{
  color:#b52c64;
  background-image:linear-gradient(110deg,#bf3048 0%,#a72b96 22%,#284fc7 44%,#087776 66%,#a45b00 82%,#bf3048 100%);
  background-size:220% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:dynamic-letter-colors 6s ease-in-out infinite;
}
.example[data-example="dynamique"] .mini-body strong,
#example-dialog[data-example="dynamique"] h2{
  animation:dynamic-letter-colors 6s ease-in-out infinite,dynamic-letter-lift 3.6s ease-in-out infinite;
}
.example[data-example="dynamique"] .mini-nav,
#example-dialog[data-example="dynamique"] .eyebrow{color:#284fc7;font-weight:700;}
.example[data-example="dynamique"] .mini-kicker{color:#a72b96;font-weight:700;}
.example[data-example="dynamique"] .mini-body>span:not(.mini-kicker):not(.mini-button),
#example-dialog[data-example="dynamique"] #example-description{color:#087776;}
#example-dialog[data-example="dynamique"] #example-features li:nth-child(3n+1){color:#bf3048;}
#example-dialog[data-example="dynamique"] #example-features li:nth-child(3n+2){color:#284fc7;}
#example-dialog[data-example="dynamique"] #example-features li:nth-child(3n){color:#a72b96;}
.example[data-example="dynamique"] .mini-button,
#example-dialog[data-example="dynamique"] .button{background:linear-gradient(110deg,#ba294b,#8533ad,#284fc7);color:#fff;}
@keyframes dynamic-letter-colors{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@keyframes dynamic-letter-lift{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-3px) rotate(-.6deg);}}
@media(prefers-reduced-motion:reduce){
  .example[data-example="dynamique"] .mini-body strong,
  .example[data-example="dynamique"] .example-label strong,
  #example-dialog[data-example="dynamique"] h2{animation:none;transform:none;background-size:100% 100%;}
}

/* Elegant salon interior in the beauty discovery window. */
#example-dialog[data-example="beaute"] .dialog-photo{background-image:url("assets/elegant-hair-salon.webp");background-size:cover;background-position:center;aspect-ratio:3/2;}

/* Sculpted supercar design, with a restrained golden-yellow signature. */
/* Automobile: silver silhouette, black and red. */
@font-face{font-family:"Automobile Narrow";src:url("assets/automobile-narrow.otf") format("opentype");font-display:swap}
.example[data-example="automobile"],#example-dialog[data-example="automobile"]{--style-bg:#030303;--style-ink:#eee;--style-accent:#df3038;--style-font:"Automobile Narrow";border-color:#666;background:#030303;}
.example[data-example="automobile"]:hover{border-color:#df3038;box-shadow:0 18px 55px #0008;}
.example[data-example="automobile"] .new-style{border-radius:0;min-height:0;margin:12px 12px 0;}
.example[data-example="automobile"] .style-photo,#example-dialog[data-example="automobile"] .dialog-photo{background-image:url("assets/automobile-silhouette.webp");background-size:contain;background-position:center;background-color:#030303;}
.example[data-example="automobile"] .style-photo{position:relative;inset:auto;display:block;height:auto;aspect-ratio:2.12;z-index:auto;border:0;}
.example[data-example="automobile"] .new-style:after{display:none;}
.example[data-example="automobile"] .mini-nav{color:#ddd;font-size:12px;padding:0 18px 6px;align-items:center;}
.example[data-example="automobile"] .auto-wordmark{font-family:"Automobile Narrow",Arial,sans-serif;font-size:clamp(28px,3vw,40px);line-height:1.25;letter-spacing:.16em;font-weight:400;white-space:nowrap;}
.example[data-example="automobile"] .auto-wordmark>span{font:inherit;letter-spacing:inherit;color:#df3038;}
.example[data-example="automobile"] .mini-body{max-width:100%;padding:18px 20px 26px;gap:14px;}
.example[data-example="automobile"] .mini-kicker{font-size:12px;letter-spacing:1px;color:#b9b9bb;}
.example[data-example="automobile"] .mini-body strong{font-family:"Automobile Narrow",Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.25;letter-spacing:1px;text-transform:uppercase;color:#eee;}
.example[data-example="automobile"] .mini-body>span:not(.mini-kicker):not(.mini-button){max-width:100%;font-size:14px;color:#bfbfc2;}
.example[data-example="automobile"] .mini-button{background:#b32029;color:#fff;border:1px solid #df3038;clip-path:none;border-radius:0;padding:11px 17px;font-size:12px;}
.example[data-example="automobile"] .example-label{border-top:1px solid #555;}
.example[data-example="automobile"] .example-label strong{font-family:"Automobile Narrow",Arial,sans-serif;font-size:23px;font-weight:400;letter-spacing:2px;color:#eee;}
.example[data-example="automobile"] .view-pill{border-radius:0;color:#fff;border-color:#b32029;}
#example-dialog[data-example="automobile"]{box-shadow:0 22px 90px #0009;border-radius:4px;}
#example-dialog[data-example="automobile"] h2{font-family:"Automobile Narrow",Arial,sans-serif;font-size:clamp(32px,7vw,48px);font-weight:400;letter-spacing:.18em;line-height:1.3;margin-block:20px;text-transform:uppercase;color:#eee;}
#example-dialog[data-example="automobile"] h2>span{color:#df3038;}
#example-dialog[data-example="automobile"] .eyebrow{color:#c4c4c8;}
#example-dialog[data-example="automobile"] .dialog-photo{border-radius:0;border:0;aspect-ratio:2.12;}
#example-dialog[data-example="automobile"] .button{border-radius:0;background:#b32029;color:#fff;border-color:#df3038;}
#example-dialog[data-example="automobile"] li::marker{color:#df3038;}
@media(max-width:380px){.example[data-example="automobile"] .auto-wordmark{font-size:28px;letter-spacing:.12em;}.example[data-example="automobile"] .mini-nav{padding-inline:12px;}#example-dialog[data-example="automobile"] h2{letter-spacing:.12em;}}

/* Platinum lettering and a light sweep following the existing car silhouette. */
.example[data-example="automobile"] .auto-platinum,
#example-dialog[data-example="automobile"] .auto-platinum{
  font:inherit;letter-spacing:inherit;line-height:inherit;
  color:#e5e4e2;
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .example[data-example="automobile"] .auto-platinum,
  #example-dialog[data-example="automobile"] .auto-platinum{
    background-image:linear-gradient(115deg,transparent 38%,#fff 49%,transparent 60%),linear-gradient(180deg,#fff 0%,#d5d7da 30%,#aeb2b9 48%,#f9fafb 54%,#c7cbd0 76%,#f4f5f6 100%);
    background-size:250% 100%,100% 100%;background-position:150% 0,0 0;
    background-clip:text;-webkit-background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:auto-platinum-reflection 6s ease-in-out infinite;
  }
}
.example[data-example="automobile"] .style-photo,
#example-dialog[data-example="automobile"] .dialog-photo{position:relative;overflow:hidden;isolation:isolate;filter:brightness(1.16) contrast(1.05);}
.example[data-example="automobile"] .style-photo::after,
#example-dialog[data-example="automobile"] .dialog-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 36%,#dce5ee99 45%,#fff 50%,#dce5ee99 55%,transparent 64%);
  background-size:300% 100%;background-position:150% 0;
  -webkit-mask-image:url("assets/automobile-silhouette.webp");mask-image:url("assets/automobile-silhouette.webp");
  mask-mode:luminance;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  mix-blend-mode:screen;animation:auto-car-reflection 7s ease-in-out infinite;
}
#example-dialog[data-example="automobile"] li::marker{color:#e5e4e2;}
@keyframes auto-platinum-reflection{0%,15%{background-position:150% 0,0 0}65%,100%{background-position:-150% 0,0 0}}
@keyframes auto-car-reflection{0%,12%{background-position:150% 0}70%,100%{background-position:-150% 0}}
@media(prefers-reduced-motion:reduce){
  .example[data-example="automobile"] .auto-platinum,#example-dialog[data-example="automobile"] .auto-platinum{animation:none;background-position:50% 0,0 0;}
  .example[data-example="automobile"] .style-photo::after,#example-dialog[data-example="automobile"] .dialog-photo::after{animation:none;background-position:50% 0;opacity:.5;}
}
@media(forced-colors:active){.example[data-example="automobile"] .auto-platinum,#example-dialog[data-example="automobile"] .auto-platinum{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;animation:none;}}

/* One shared sequence: platinum sweep, illuminated body, xenon on, xenon off. */
.example[data-example="automobile"] .auto-platinum,
#example-dialog[data-example="automobile"] .auto-platinum{animation-duration:8s;}
.example[data-example="automobile"] .style-photo,
#example-dialog[data-example="automobile"] .dialog-photo{animation:auto-body-light 8s ease-in-out infinite;}
.example[data-example="automobile"] .style-photo::after,
#example-dialog[data-example="automobile"] .dialog-photo::after{animation:auto-car-reflection 8s ease-in-out infinite;}
.auto-xenon-light{display:none;}
.example[data-example="automobile"] .auto-xenon-light,
#example-dialog[data-example="automobile"] .auto-xenon-light{
  display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #b9e3ff) drop-shadow(0 0 16px #6bbcff);
  animation:auto-xenon-switch 8s ease-in-out infinite;
}
.auto-xenon-light::before{
  content:"";position:absolute;inset:0;
  background:url("assets/automobile-silhouette.webp") center/contain no-repeat;
  clip-path:polygon(79.8% 51.2%,86.8% 53.3%,86% 55.5%,81% 54%);
  filter:brightness(5) contrast(1.4);
}
.auto-xenon-light::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 7% 5% at 84% 54%,#effaff70 0%,#a4d8ff38 35%,transparent 100%);
}
@keyframes auto-car-reflection{0%,15%{background-position:150% 0}65%,100%{background-position:-150% 0}}
@keyframes auto-body-light{0%,12%,65%,100%{filter:brightness(1.16) contrast(1.05)}25%,48%{filter:brightness(1.65) contrast(1.08) drop-shadow(0 0 5px #bcd7ee22)}}
@keyframes auto-xenon-switch{0%,65%{opacity:0}70%,83%{opacity:1}91%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .example[data-example="automobile"] .style-photo,#example-dialog[data-example="automobile"] .dialog-photo{animation:none;}
  .example[data-example="automobile"] .auto-xenon-light,#example-dialog[data-example="automobile"] .auto-xenon-light{animation:none;opacity:0;}
}

@media(prefers-reduced-motion:reduce){.example[data-example="automobile"] .style-photo::after,#example-dialog[data-example="automobile"] .dialog-photo::after{animation:none;}}

/* Rose petals: slow falling motion and pearly highlights on both romantic views. */
.example[data-example="romantique"] .mini-site{position:relative;isolation:isolate;}
.romantic-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;display:block;contain:paint;--petal-travel:390px;}
#example-dialog>.romantic-petals{display:none;--petal-travel:850px;}
#example-dialog[data-example="romantique"]>.romantic-petals{display:block;}
#example-dialog[data-example="romantique"] .close-dialog{z-index:3;}
.romantic-petal{position:absolute;left:var(--petal-x);top:-44px;width:var(--petal-size);height:calc(var(--petal-size)*1.2);opacity:0;animation:romantic-petal-fall var(--petal-duration) linear var(--petal-delay) infinite;}
.romantic-petal-surface{display:block;width:100%;height:100%;background:url("assets/romantic-rose-petal.webp") center/contain no-repeat;filter:drop-shadow(0 2px 2px #77304722);animation:romantic-petal-reflection 3.6s ease-in-out var(--petal-delay) infinite;}
@keyframes romantic-petal-fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}8%{opacity:.72}35%{transform:translate3d(var(--petal-drift),calc(var(--petal-travel)*.35),0) rotate(calc(var(--petal-turn)*.4)) rotateY(40deg)}68%{opacity:.62;transform:translate3d(0,calc(var(--petal-travel)*.68),0) rotate(calc(var(--petal-turn)*.7)) rotateY(-25deg)}92%{opacity:.55}100%{opacity:0;transform:translate3d(var(--petal-drift),var(--petal-travel),0) rotate(var(--petal-turn)) rotateY(35deg)}}
@keyframes romantic-petal-reflection{0%,100%{filter:brightness(.96) drop-shadow(0 2px 2px #77304722)}45%{filter:brightness(1.22) drop-shadow(0 0 4px #ffe8ee88)}55%{filter:brightness(1.48) drop-shadow(0 0 5px #fff0eec0)}}
@media(prefers-reduced-motion:reduce){.romantic-petals{display:none!important;}.romantic-petal,.romantic-petal-surface{animation:none;}}

/* Contact and email preparation. */
.contact-email a{color:#7cddff;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:4px}
.privacy-inline{font:inherit;color:#7cddff;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.quote-result a:not(.button),#privacy-dialog a{color:#7cddff;overflow-wrap:anywhere;text-decoration:underline}
.quote-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.quote-actions .button{white-space:normal;text-align:center}
#copy-status{font-size:14px;line-height:1.6;color:#a8e4ff}
#quote-fallback[hidden]{display:none}
#quote-preview{width:100%;font-size:16px;line-height:1.6}
#privacy-dialog h3{font-size:18px;line-height:1.5;margin-top:24px}
#privacy-dialog{max-height:calc(100dvh - 40px);overflow:auto}
@media(max-width:480px){.quote-actions .button{width:100%}}

.form-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
#prepare-quote-email{margin-top:8px;white-space:normal}
.thanks-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 20px}
.thanks-card{max-width:640px;padding:clamp(24px,5vw,48px)}
.thanks-card h1{font-size:clamp(32px,7vw,48px);line-height:1.2;margin-block:16px}
.thanks-card p{font-size:16px;line-height:1.7;margin-block:20px}
.thanks-card a:not(.button){color:#7cddff;overflow-wrap:anywhere}

/* Language selection and longer translated labels. */
.language-switch{display:flex;align-items:center;gap:8px;font-size:14px;flex-shrink:0}
.language-switch>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.language-select{background:#0c172a;color:#eaf3ff;border:1px solid #57bfff88;border-radius:10px;padding:9px 10px;max-width:125px;min-height:44px;font-size:14px;cursor:pointer}
.header{gap:18px}.header nav{gap:20px}.header .brand{flex-shrink:0}
.mini-nav{gap:10px;align-items:center}.mini-nav>span:last-child{flex-shrink:0}
.mini-nav .chic-nav-title{overflow-wrap:anywhere}.mini-button{max-width:100%;white-space:normal}
.examples-grid .mini-body strong{overflow-wrap:anywhere}.example-label>span:first-child{min-width:0}.example-label strong{overflow-wrap:anywhere}.view-pill{flex-shrink:0}
html:not([lang="fr"]) .additional-example .mini-nav{white-space:normal;overflow-wrap:anywhere}
@media(min-width:761px) and (max-width:1100px){.header{flex-wrap:wrap;height:auto;padding-block:20px}.header nav{order:3;width:100%;justify-content:center;flex-wrap:wrap}.header .language-switch{margin-left:auto}}
@media(max-width:760px){.header{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px 12px;height:auto;padding-block:18px}.header .brand{font-size:15px}.header .menu-toggle{grid-column:2;grid-row:1}.header .language-switch{grid-column:1 / -1;grid-row:2;justify-self:end}.header nav{top:126px;gap:16px}.header .language-select{font-size:16px}.chic .mini-nav .chic-nav-title{font-size:25px}.example-label{gap:10px}}
.thanks-card .language-switch{justify-content:flex-end;margin-bottom:20px}

/* Supplied logo: show only its artwork, excluding the surrounding screenshot controls. */
.brand-symbol,.brand-logo{position:relative;display:block;overflow:hidden;background:#fff;flex-shrink:0}
.brand-symbol{width:40px;aspect-ratio:334/374;border-radius:8px}
.brand-symbol img{position:absolute;display:block;width:247.9042%;max-width:none;height:auto;left:-79.6407%;top:-172.7273%}
.brand-logo{width:124px;aspect-ratio:450/562;border-radius:12px}
.brand-logo img{position:absolute;display:block;width:184%;max-width:none;height:auto;left:-42.2222%;top:-113.5231%}
.footer .brand{width:max-content}
.confirmation-logo{margin:0 auto 24px;width:132px}
@media(max-width:760px){.header .brand-symbol{width:32px}.header .brand{gap:9px}.footer .brand-logo{width:120px}}

/* All screen layers share the photograph's coordinates and floating movement. */
.hero-device-stage{position:relative;width:115%;aspect-ratio:3/2;animation:float 8s ease-in-out infinite;mask-image:radial-gradient(ellipse 68% 63% at 50% 48%,#000 55%,transparent 100%)}
.hero-visual .hero-device-photo{display:block;width:100%;height:auto;max-width:none;border-radius:0;animation:none;mask-image:none}
.device-screen{position:absolute;inset:0;background:#030509;pointer-events:none;overflow:hidden}
.laptop-screen{clip-path:polygon(33.6% 12.1%,76.6% 13.3%,71.1% 65.5%,27% 57.2%)}
.phone-screen{clip-path:polygon(76.5% 29.4%,88.7% 29.4%,89.5% 30.2%,90% 32%,89.3% 79.5%,88.7% 81.8%,87.5% 82.3%,76% 80.2%,74.9% 78.4%,74.9% 32%,75.4% 30.2%)}
.screen-logo{position:absolute;display:block;width:14%;aspect-ratio:450/562;left:52%;top:36%;overflow:hidden;background:#fff;border-radius:8px;opacity:0;transform:translate(-50%,-50%) skewX(-9deg) rotate(2deg);box-shadow:0 0 24px #41cfff66,0 0 75px #614aff55}
.hero-visual .screen-logo img{position:absolute;display:block;width:184%;max-width:none;height:auto;left:-42.2222%;top:-113.5231%;border-radius:0;animation:none;mask-image:none}
.phone-screen .screen-logo{width:9%;left:82.3%;top:54%;transform:translate(-50%,-50%) rotate(1deg);border-radius:5px}
.screen-light{position:absolute;inset:0;opacity:0;background:linear-gradient(110deg,transparent 35%,#277dff33 42%,#79edffbb 49%,#fff 50%,#be91ff99 52%,transparent 62%);transform:translateX(-90%);mix-blend-mode:screen}
.device-reflection{position:absolute;left:74%;top:83%;width:17%;height:17%;background:linear-gradient(#030509e8,#060b1980);clip-path:polygon(7% 0,92% 7%,100% 100%,0 100%);pointer-events:none}
[data-intro="running"] .device-screen,[data-intro="running"] .device-reflection{animation:screen-reveal 6.5s ease-in-out both}
[data-intro="running"] .screen-logo{animation:screen-logo-reveal 6.5s ease-in-out both}
[data-intro="running"] .screen-light{animation:screen-light-sweep 6.5s ease-in-out both}
[data-intro="finished"] .device-screen,[data-intro="finished"] .device-reflection{display:none}
@keyframes screen-reveal{0%,70%{opacity:1}90%,100%{opacity:0}}
@keyframes screen-logo-reveal{0%,17%{opacity:0;filter:brightness(.6) blur(8px)}35%,68%{opacity:1;filter:brightness(1) blur(0)}82%,100%{opacity:0;filter:brightness(1) blur(0)}}
@keyframes screen-light-sweep{0%,14%{opacity:0;transform:translateX(-90%)}22%{opacity:1}44%{opacity:0;transform:translateX(90%)}100%{opacity:0;transform:translateX(90%)}}
@media(max-width:760px){.hero-device-stage{width:100%;mask-image:radial-gradient(ellipse 66% 65% at 50% 50%,#000 55%,transparent 100%)}}
@media(prefers-reduced-motion:reduce){.hero-device-stage{animation:none}.device-screen,.device-reflection{display:none}}
/* Opening Automobile starts the light sequence and engine on the same beat. */
#example-dialog.auto-sequence-reset[data-example="automobile"] .auto-platinum,
#example-dialog.auto-sequence-reset[data-example="automobile"] .dialog-photo,
#example-dialog.auto-sequence-reset[data-example="automobile"] .dialog-photo::after,
#example-dialog.auto-sequence-reset[data-example="automobile"] .auto-xenon-light{animation:none!important}
.automobile-audio-credit{display:none;font-size:12px;line-height:1.6;color:#aeb3be;margin-top:20px}
#example-dialog[data-example="automobile"] .automobile-audio-credit{display:block}
.automobile-audio-credit a{text-decoration:underline;text-underline-offset:3px}
.hero-device-stage[role="button"]{cursor:pointer}
.hero-device-stage[role="button"]:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* Dialog headlights follow the actual engine recording, rather than a delayed loop. */
#example-dialog[data-example="automobile"] .auto-xenon-light{
  animation:none;opacity:0;transition:opacity .18s ease-out;
}
#example-dialog.auto-engine-running[data-example="automobile"] .auto-xenon-light{
  opacity:1;transition:none;
}

/* A warm fire-orange reflection across the rustic lettering, on both views. */
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .example[data-example="rustique"] .rustic-mark,
  .example[data-example="rustique"] .mini-nav>span:last-child,
  .example[data-example="rustique"] .mini-body strong,
  .example[data-example="rustique"] .mini-body>span:not(.mini-button),
  .example[data-example="rustique"] .example-label strong,
  #example-dialog[data-example="rustique"] h2,
  #example-dialog[data-example="rustique"] p,
  #example-dialog[data-example="rustique"] li{
    background-image:linear-gradient(0deg,#fff3dc 0%,#fff3dc 37%,#ffaf57 44%,#ff782d 48%,#fff2b9 51%,#ffc16a 54%,#fff3dc 63%,#fff3dc 100%);
    background-size:100% 280%;background-position:0 -20%;
    background-clip:text;-webkit-background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    text-shadow:none;
    animation:rustic-fire-reflection 9s ease-in-out infinite;
    filter:drop-shadow(0 1px 2px #170900) drop-shadow(0 0 2px #ff8b3530);
  }
}
@keyframes rustic-fire-reflection{
  0%,12%{background-position:0 -20%}
  88%,100%{background-position:0 120%}
}
@media(prefers-reduced-motion:reduce){
  .example[data-example="rustique"] .rustic-mark,
  .example[data-example="rustique"] .mini-nav>span:last-child,
  .example[data-example="rustique"] .mini-body strong,
  .example[data-example="rustique"] .mini-body>span:not(.mini-button),
  .example[data-example="rustique"] .example-label strong,
  #example-dialog[data-example="rustique"] h2,
  #example-dialog[data-example="rustique"] p,
  #example-dialog[data-example="rustique"] li{animation:none;background-position:0 50%}
}
@media(forced-colors:active){
  .example[data-example="rustique"] .rustic-mark,
  .example[data-example="rustique"] .mini-nav>span:last-child,
  .example[data-example="rustique"] .mini-body strong,
  .example[data-example="rustique"] .mini-body>span:not(.mini-button),
  .example[data-example="rustique"] .example-label strong,
  #example-dialog[data-example="rustique"] h2,
  #example-dialog[data-example="rustique"] p,
  #example-dialog[data-example="rustique"] li{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;filter:none;animation:none}
}

/* Start the open rustic example with the rising fire reflection already visible. */
#example-dialog[data-example="rustique"] h2,
#example-dialog[data-example="rustique"] p,
#example-dialog[data-example="rustique"] li{animation-delay:-3.5s;}
#example-dialog.rustic-reflection-reset[data-example="rustique"] h2,
#example-dialog.rustic-reflection-reset[data-example="rustique"] p,
#example-dialog.rustic-reflection-reset[data-example="rustique"] li{animation:none!important;}