:root {
  color-scheme: light;
  --paper:#f8f5ef; --white:#fffcf7; --ink:#242620; --muted:#5b5d51;
  --accent:#a93520; --warm:#f5a587; --line:#dcd4c6; --soft:#eee8dc;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif; --serif:Georgia,"Times New Roman",serif;
}
*,*::before,*::after { box-sizing:border-box }
[hidden] { display:none!important }
html { scroll-padding-top:96px }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 var(--sans) }
h1,h2,h3,p,figure { margin:0 }
a { color:inherit }
img { display:block; max-width:100% }
button,input,textarea,select { font:inherit }
button { cursor:pointer }
:focus-visible { outline:3px solid #297266; outline-offset:4px }
.contact :focus-visible,.footer :focus-visible { outline-color:var(--warm) }
.wrap { width:min(1240px,calc(100% - 104px)); margin-inline:auto }
.skip { position:fixed; z-index:10; top:8px; left:8px; transform:translateY(-150%); padding:10px 16px; background:var(--white) }
.skip:focus { transform:none }
.topbar { position:sticky; top:0; z-index:4; background:var(--paper); border-bottom:1px solid var(--line) }
.nav { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:76px; position:relative }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:1.45rem; line-height:1.05; font-weight:820; letter-spacing:-.07em; flex:none }
.brand>span>span { color:var(--accent) }
.brand small { display:block; margin-top:5px; font-size:.52rem; letter-spacing:.15em; color:var(--muted) }
.nav nav { display:flex; gap:clamp(15px,2.7vw,36px); font-size:.88rem; font-weight:650 }
.nav nav a,.footer a { text-decoration:none }
.nav nav a:hover,.footer a:hover { text-decoration:underline; text-underline-offset:5px }
.menu { display:none; border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:7px; padding:7px 12px; font-weight:700 }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:16px; text-decoration:none; border:1px solid transparent; border-radius:7px; padding:12px 17px; width:fit-content; max-width:100%; font-weight:750; font-size:.91rem; line-height:1.35; min-height:46px; transition:background-color .15s,color .15s }
.button span { flex:none; font-size:1.02rem }
.button-small { padding:9px 13px; min-height:40px; font-size:.8rem }
.button-ink { background:var(--ink); color:var(--white) }
.button-ink:hover { background:#404338 }
.button-accent { background:var(--accent); color:white }
.button-accent:hover { background:#862b1a }
.button:disabled { opacity:.7; cursor:wait }
.text-link { text-underline-offset:5px; font-size:.91rem; font-weight:720 }
.text-link:hover { color:var(--accent) }
.hero { min-height:570px; display:grid; grid-template-columns:1fr 1.03fr; align-items:center; gap:clamp(24px,5vw,76px); padding-block:64px 68px }
.kicker { font-size:.72rem; line-height:1.4; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--accent) }
.kicker>span,.visual-label>span { display:inline-block; width:7px; height:7px; background:currentColor; border-radius:50%; margin-right:6px; vertical-align:2px }
h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.063em; line-height:1.02; text-wrap:balance }
h1 { font-size:clamp(3rem,5.6vw,6.15rem); margin:16px 0 20px }
h1 em { color:var(--accent); font-weight:500 }
.intro { color:var(--muted); font-size:clamp(1rem,1.3vw,1.17rem); max-width:445px }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin:26px 0 18px }
.hero-price { color:var(--muted); font-size:.83rem }
.hero-price strong { color:var(--ink) }
.hero-visual { position:relative; min-width:0; isolation:isolate; aspect-ratio:1.23; border-radius:15px; overflow:hidden; background-color:#dad0bf; background-image:linear-gradient(90deg,#493e2912 1px,transparent 1px),linear-gradient(#493e2912 1px,transparent 1px),radial-gradient(ellipse at 61% 36%,#f4e7cf,#d2c1a7); background-size:27px 27px,27px 27px,100% 100% }
.visual-label { position:absolute; left:6%; top:6%; font-size:clamp(.49rem,1vw,.65rem); font-weight:850; letter-spacing:.12em }
.visual-label>span { background:var(--accent); width:6px; height:6px; vertical-align:1px }
.desktop-demo { position:absolute; width:79%; height:70%; left:6%; top:14%; border-radius:9px; overflow:hidden; background:var(--white); border:1px solid #443f34; box-shadow:0 22px 45px #4336254f; display:grid; grid-template-rows:10% 13% 53% 24% }
.browserbar { display:flex; align-items:center; gap:4px; background:#2b2b25; padding:0 4%; color:#e4dece; font-size:clamp(.36rem,.9vw,.55rem) }
.browserbar i { width:5px; height:5px; border-radius:50%; background:#b29a7d }
.browserbar span { margin-left:auto; margin-right:auto }
.demo-nav { display:flex; align-items:center; justify-content:space-between; padding-inline:5%; font-size:clamp(.37rem,.86vw,.62rem) }
.demo-nav span { color:var(--muted) }
.demo-cover { display:flex; align-items:center; padding:0 5%; background:linear-gradient(90deg,#141c19ef,#141c1940 71%),url("../img/hero-artisan.webp") 66% 43%/cover; color:var(--white); min-height:0 }
.demo-cover small,.phone-cover small { display:block; color:#ffba9d; font-size:clamp(.35rem,.84vw,.63rem); font-weight:800; letter-spacing:.075em }
.demo-cover b { display:block; font:clamp(.84rem,2.5vw,2.22rem)/1 var(--serif); letter-spacing:-.05em; margin:4px 0 5px }
.demo-cover span { display:inline-block; border-radius:3px; padding:3px 5px; background:#f6b194; color:#2f251e; font-size:clamp(.35rem,.8vw,.6rem); font-weight:750 }
.demo-bottom { padding:2% 5%; font-size:clamp(.4rem,1vw,.73rem) }
.demo-bottom div { display:flex; gap:3%; margin-top:2%; height:43% }
.demo-bottom i { background:#eae3d6; flex:1; border-radius:3px }
.phone-demo { position:absolute; right:8%; bottom:12%; height:57%; width:24%; background:var(--white); border:4px solid #22241f; border-radius:clamp(8px,1.7vw,19px); overflow:hidden; box-shadow:0 14px 30px #42342065; display:grid; grid-template-rows:15% 69% 16% }
.phone-nav,.phone-contact { display:flex; justify-content:space-between; align-items:center; padding-inline:8%; font-size:clamp(.32rem,.8vw,.57rem); font-weight:800 }
.phone-cover { display:flex; justify-content:flex-end; flex-direction:column; padding:8%; color:white; background:linear-gradient(0deg,#1b211ded,#1b211d16),url("../img/hero-artisan.webp") 72% center/cover }
.phone-cover b { font:clamp(.61rem,1.67vw,1.25rem)/1.02 var(--serif); margin-top:3px }
.phone-contact { color:#244d31; background:#e8efe3 }
.hero-visual figcaption { position:absolute; bottom:4%; left:6%; right:6%; display:flex; justify-content:space-between; gap:10px; font-size:clamp(.43rem,.9vw,.59rem); letter-spacing:.11em; font-weight:800 }
.ownership { border-block:1px solid var(--line); background:#f1ece3 }
.ownership-inner { display:grid; grid-template-columns:repeat(3,1fr); gap:15px }
.ownership-inner>div { display:flex; align-items:center; justify-content:center; gap:10px; padding:20px 0; font-size:.86rem }
.ownership-inner>div+div { border-left:1px solid var(--line) }
.ownership-inner span,.item-no { color:var(--accent); font:700 .76rem/1 ui-monospace,monospace }
.section { padding-block:clamp(61px,8vw,104px) }
.section-head { max-width:730px; margin-bottom:32px }
h2 { font-size:clamp(2.4rem,4.7vw,4.35rem); margin:9px 0 13px }
.section-head>p:last-child,.guide-card>div>p:not(.kicker) { color:var(--muted); max-width:620px }
.offer,.setup { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(22px,5vw,70px); align-items:start }
.price-card,.hostinger-card { background:var(--ink); color:var(--white); border-radius:13px; padding:clamp(22px,4vw,42px) }
.price-card .kicker,.hostinger-card .kicker,.contact .kicker,.after .kicker { color:var(--warm) }
.price { font-family:var(--serif); font-size:clamp(4.6rem,8vw,7.5rem); line-height:.9; letter-spacing:-.085em; margin-top:19px }
.price span { font-size:.56em; color:var(--warm) }
.price small { font:800 clamp(1rem,2.3vw,1.5rem)/1 var(--sans); letter-spacing:0; color:var(--warm) }
.price-caption { margin:9px 0 23px; font-weight:650 }
.offer-note { margin-top:13px; color:#e1dacd; font-size:.81rem }
.inclusions { border-top:1px solid var(--line) }
.inclusions article { display:grid; grid-template-columns:30px 1fr; gap:11px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line) }
h3 { font-size:1.12rem; font-weight:780; line-height:1.25 }
.inclusions p,.steps p { color:var(--muted); font-size:.92rem; margin-top:4px }
.offer-estimate { border-top:1px solid #67695c; margin-top:23px; padding-top:17px }
.offer-estimate strong { display:block; color:var(--warm); font-size:1rem }
.offer-estimate p { color:#e1dacd; font-size:.81rem; margin-top:5px }
.agent-offer { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(18px,4vw,52px); align-items:center; padding:clamp(21px,4vw,44px); margin-top:clamp(25px,5vw,62px); background:#e9e7d9; border:1px solid #d2d0bf; border-radius:13px }
.agent-offer h3 { font:500 clamp(1.7rem,3.2vw,3rem)/1.05 var(--serif); letter-spacing:-.045em; margin:10px 0 }
.agent-offer p:not(.kicker) { color:var(--muted) }
.agent-example { min-width:0; background:var(--white); border:1px solid var(--line); border-radius:10px; padding:clamp(14px,2.7vw,25px) }
.agent-example small { display:block; color:var(--accent); font-weight:800; font-size:.68rem; letter-spacing:.09em }
.agent-example p { margin:8px 0 7px; font-size:.93rem }
.agent-example strong { display:block; color:var(--ink); font-size:.9rem }
.agent-example strong span { color:var(--accent); margin-right:5px }
.portfolio { background:#252720; color:var(--white) }
.portfolio :focus-visible { outline-color:var(--warm) }
.portfolio-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:34px }
.portfolio-head .section-head { margin:0 }
.portfolio .kicker { color:#f2ab91 }
.portfolio .section-head>p:last-child { color:#e0d9cb }
.portfolio-count { flex:none; color:#eee4d4; font:500 clamp(2rem,4.5vw,4rem)/.85 var(--serif); letter-spacing:-.045em; text-align:right }
.portfolio-count span { display:block; color:#cfc4b4; font:750 .61rem/1.2 var(--sans); letter-spacing:.14em; margin-top:9px }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,4.2vw,55px) clamp(15px,2.7vw,34px) }
.work { min-width:0 }
.work-stage { position:relative; isolation:isolate; aspect-ratio:1.55; overflow:hidden; background:radial-gradient(ellipse at 58% 27%,var(--stage-light),var(--stage)); border-radius:13px; color:#242620 }
.work-entr-guyon { --stage-light:#eedfd2; --stage:#c6947f }
.work-ent-meiller { --stage-light:#e0e9ee; --stage:#a1b9ca }
.work-renovationlocale { --stage-light:#eae6d7; --stage:#b7b59d }
.work-metrego { --stage-light:#f0e7d5; --stage:#c4a976 }
.work-index,.work-format { position:absolute; margin:0; font-size:clamp(.47rem,.88vw,.67rem); font-weight:820; letter-spacing:.12em }
.work-index { left:5%; top:5.2% }
.work-format { left:5%; bottom:5.2% }
.work-browser { position:absolute; top:13%; left:5%; width:78%; height:71%; background:#171916; border:1px solid #262822; border-radius:clamp(4px,1vw,11px); overflow:hidden; display:grid; grid-template-rows:8% minmax(0,1fr); box-shadow:0 14px 35px #19181047 }
.work-browserbar { display:flex; align-items:center; gap:4px; color:#f1e8d8; font-size:clamp(.36rem,.74vw,.58rem); padding:0 3% }
.work-browserbar i { width:clamp(3px,.42vw,6px); aspect-ratio:1; border-radius:50%; background:#a49782 }
.work-browserbar span { margin-inline:auto }
.work-browser img,.work-phone img { width:100%; height:100%; object-fit:cover; object-position:top center; background:#f6f3ed }
.work-phone { position:absolute; right:5%; bottom:7%; width:25%; height:66%; overflow:hidden; background:#151713; border:clamp(3px,.56vw,8px) solid #151713; border-radius:clamp(8px,1.9vw,24px); box-shadow:0 13px 28px #17181261 }
.work-copy { padding:17px 0 19px; border-bottom:1px solid #5d5e51 }
.work-copy h3 { font:500 clamp(1.65rem,3vw,2.85rem)/1.02 var(--serif); letter-spacing:-.045em; margin:7px 0 8px }
.work-copy>p:not(.kicker) { color:#e0d9cb; font-size:.94rem; max-width:51ch }
.work-link { display:inline-flex; gap:10px; align-items:center; min-height:44px; padding-block:6px; color:var(--white); font-weight:750; text-underline-offset:4px; font-size:.88rem; margin-top:4px }
.work-link span,.work-link:hover { color:#f2ab91 }
.hostinger-card h3 { font:500 clamp(1.8rem,3vw,2.7rem)/1.08 var(--serif); letter-spacing:-.045em; margin:12px 0 }
.hostinger-card>p:not(.kicker):not(.offer-note) { margin-bottom:18px }
.steps { counter-reset:step; list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.steps li { counter-increment:step; display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; border-bottom:1px solid var(--line); padding:14px 0 }
.steps li::before { content:counter(step,decimal-leading-zero) / ""; display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; color:var(--accent); font:700 .75rem/1 ui-monospace,monospace }
.steps li>div { padding-top:3px }
.copy-row { margin-top:7px; display:flex; flex-wrap:wrap; align-items:center; gap:7px }
.copy-row code { background:var(--soft); padding:4px 7px; border-radius:4px; font-size:.91rem; overflow-wrap:anywhere }
.copy { border:1px solid var(--line); border-radius:5px; color:var(--ink); background:var(--white); font-weight:700; font-size:.79rem; padding:4px 8px }
.copy-status:empty,.form-status:empty { display:none }
.support-link { display:inline-block; margin-top:17px }
.after { background:#2b2d26; color:var(--white) }
.after .section-head>p:last-child { color:#e7e0d3 }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px }
.choice-grid article { border:1px solid #6c6b5d; border-radius:10px; padding:clamp(18px,3vw,32px); background:#33352d }
.choice-grid h3 { font:500 clamp(1.6rem,3vw,2.5rem)/1.12 var(--serif); letter-spacing:-.04em; margin:10px 0 }
.choice-grid article>p:last-child { color:#e9e1d5; overflow-wrap:anywhere }
.guide-card { display:grid; grid-template-columns:minmax(145px,.6fr) minmax(0,1.4fr); gap:clamp(25px,6vw,85px); align-items:center; padding:clamp(22px,5vw,62px); background:#f0e1d1; border:1px solid #dfcdb8; border-radius:14px }
.guide-card h2 { font-size:clamp(2.25rem,4.4vw,3.8rem) }
.guide-card .button { margin:18px 0 9px }
.guide-note { font-size:.82rem }
.guide-sheet { width:min(100%,220px); justify-self:center; padding:17px; border-radius:7px; background:#fffaf1; box-shadow:8px 8px 0 #d9c3ad; border:1px solid #cdbcaa; transform:rotate(-4deg) }
.guide-sheet small { display:block; color:var(--accent); font-size:.55rem; font-weight:800; letter-spacing:.1em }
.guide-sheet span { display:grid; place-items:center; margin:13px 0; width:37px; height:37px; border-radius:50%; color:var(--white); background:var(--accent); font:700 1.3rem var(--serif) }
.guide-sheet b { display:block; margin-bottom:11px; font:500 clamp(1.1rem,2.2vw,1.85rem)/1 var(--serif); letter-spacing:-.05em }
.guide-sheet i { display:block; background:#e4d6c5; width:100%; height:3px; margin-bottom:6px }
.guide-sheet i+i { width:68%; margin-bottom:14px }
.contact { background:var(--ink); color:var(--white) }
.contact-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(25px,6vw,80px) }
.contact-intro { color:#e6dfd1; max-width:430px; margin-bottom:20px }
.contact-links { display:grid; justify-items:start; gap:6px; margin-top:18px; overflow-wrap:anywhere }
.contact-links a { text-underline-offset:4px }
.form { display:grid; gap:13px; padding:clamp(17px,3vw,31px); background:var(--white); color:var(--ink); border-radius:11px }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.form label { display:block; font-size:.85rem; font-weight:680 }
.form label span { color:var(--accent) }
.form input:not([type=checkbox]),.form select,.form textarea { width:100%; min-height:41px; display:block; margin-top:4px; padding:8px; border:1px solid #b2aa9b; border-radius:5px; color:var(--ink); background:white; font-size:1rem }
.form textarea { resize:vertical }
.consent { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:8px; font-size:.78rem }
.consent input { margin-top:5px; accent-color:var(--accent) }
.consent label { display:inline; font-size:inherit; font-weight:550 }
.form-status { font-size:.88rem; font-weight:650 }
.form-status[data-state=error] { color:#94311f }
.form-status[data-state=success] { color:#2c5e36 }
.footer { border-top:1px solid #535548; background:var(--ink); color:var(--white); padding:21px 0 }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px }
.footer nav { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.8rem }
.footer .brand>span>span { color:var(--warm) }
.footer .brand small { color:#e1dacd }
.legal-page .section { padding-block:42px }
.legal-hero { padding-top:42px }
.legal-card { max-width:840px; overflow-wrap:anywhere }
.legal-card h2 { font:760 1.22rem/1.3 var(--sans); letter-spacing:0; margin:22px 0 6px }
.legal-card p,.legal-card li { color:var(--muted) }
.legal-note { margin-top:20px; padding:14px; background:var(--soft); border-radius:6px }
@media(max-width:1020px) {
  .wrap { width:calc(100% - 64px) }
  .nav { gap:14px }
  .nav nav { gap:15px }
  .hero { min-height:0; gap:28px }
}
@media(max-width:800px) {
  .wrap { width:calc(100% - 38px) }
  .nav { min-height:61px; flex-wrap:wrap }
  .nav-cta { margin-left:auto }
  .nav nav { order:3; width:100%; flex-wrap:wrap; padding-bottom:11px }
  .nav:has(.menu:not([hidden])) .menu { display:block }
  .nav:has(.menu:not([hidden])) nav { display:none }
  .nav:has(.menu:not([hidden])) nav.open { display:flex; position:absolute; top:100%; left:0; padding:13px; border:1px solid var(--line); border-radius:6px; background:var(--white); box-shadow:0 12px 26px #34251126 }
  .hero { grid-template-columns:1fr; padding-block:44px 34px }
  h1 { font-size:clamp(3rem,9.5vw,5.5rem) }
  .hero-visual { max-width:590px; width:100%; aspect-ratio:1.42 }
  .demo-cover b { font-size:clamp(1.04rem,4.4vw,1.9rem) }
  .phone-cover b { font-size:clamp(.66rem,2.6vw,1.19rem) }
}
@media(max-width:600px) {
  .nav-cta { display:none }
  .nav { gap:8px }
  .nav nav.open { flex-direction:column; gap:11px }
  .ownership-inner { grid-template-columns:1fr; gap:0; padding-block:4px }
  .ownership-inner>div { justify-content:flex-start; padding:7px 0 }
  .ownership-inner>div+div { border-left:0; border-top:1px solid var(--line) }
  .offer,.setup,.contact-grid,.choice-grid,.agent-offer,.work-grid { grid-template-columns:1fr }
  .portfolio-count { display:none }
  .portfolio-head { margin-bottom:23px }
  .guide-card { grid-template-columns:1fr; gap:23px }
  .guide-sheet { width:138px; justify-self:start }
  .footer-inner { align-items:flex-start; flex-direction:column }
}
@media(max-width:380px) {
  .wrap { width:calc(100% - 30px) }
  .form-row { grid-template-columns:1fr }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important } }

.recipe-section { background:var(--paper); padding-block:clamp(42px,6vw,82px) }
.recipe-card { background:#f2e6d7; border:1px solid #dac5ac; border-radius:16px; padding:clamp(20px,4.4vw,54px) }
.recipe-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px }
.recipe-head h1 { font-size:clamp(2.55rem,5.1vw,4.65rem); margin-block:11px 13px }
.recipe-head p:not(.kicker) { max-width:64ch; color:var(--muted) }
.recipe-stamp { flex:none; display:grid; justify-items:center; gap:5px; color:#893522; border:1px solid #be846c; border-radius:8px; padding:9px 12px; font-size:.6rem; font-weight:800; letter-spacing:.12em }
.recipe-stamp b { font:700 1.35rem/1.1 ui-monospace,monospace; letter-spacing:-.07em }
.recipe-content { margin-top:24px; border:1px solid #d8bfaa; border-radius:9px; background:var(--white) }
.recipe-body { padding:clamp(15px,3vw,31px) }
.recipe-chapter + .recipe-chapter { border-top:1px solid #e8d9ca; margin-top:22px; padding-top:22px }
.recipe-chapter h2 { font:500 clamp(1.35rem,2.6vw,2.15rem)/1.16 var(--serif); letter-spacing:-.035em; margin-top:4px }
.recipe-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 34px; margin:14px 0 0; padding-inline-start:1.55em; color:var(--muted); font-size:.91rem }
.recipe-steps li { padding-inline-start:3px; overflow-wrap:anywhere }
.recipe-steps li::marker { color:var(--accent); font-weight:780 }
.recipe-steps li strong { display:block; color:var(--ink) }
.recipe-steps code { font-size:.95em; color:#743320; background:#f4ebe1; padding:1px 3px; border-radius:3px }
.recipe-steps a { color:#893522; font-weight:690; text-underline-offset:3px }
.recipe-end { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; border-radius:7px; margin-top:25px; padding:clamp(15px,2vw,22px); background:#f2e6d7 }
.recipe-end p { max-width:59ch; color:var(--muted); font-size:.9rem }
.recipe-end strong { color:var(--ink) }
@media(max-width:640px) {
  .recipe-stamp { display:none }
  .recipe-steps { grid-template-columns:1fr; gap:12px }
}
.recipe-entry { display:flex; justify-content:center; padding-block:clamp(23px,4vw,48px) }
.recipe-first { grid-template-columns:1fr; max-width:68ch }
.recipe-steps .recipe-referral { margin-top:12px }
.recipe-referral .button { color:#fff }
.recipe-disclosure { margin-top:7px; font-size:.8rem }