@import url("tokens.css");
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--size-105px)}
body{margin:0;color:var(--ink);background:var(--white);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:var(--weight-600)}
h1{letter-spacing:var(--hero-title-tracking)}
h2{letter-spacing:var(--section-title-tracking)}
h2{font-size:var(--section-title-size);line-height:var(--section-title-leading)}
h3{font-size:var(--type-size-22px);letter-spacing:var(--tracking-np035em);line-height:var(--leading-1p18)}
p{line-height:var(--leading-1p7)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:var(--transparent)}
img{display:block;max-width:100%}
svg{display:block}
button{border:0}
::selection{color:var(--ink);background:var(--selection)}
:focus-visible{outline:var(--size-3px) solid var(--focus);outline-offset:var(--focus-offset);border-radius:var(--focus-radius)}
[hidden]{display:none!important}
.container{width:min(var(--size-1168px),calc(100% - var(--size-96px)));margin-inline:auto}
.section-pad{padding-block:var(--size-100px)}
.eyebrow{font-size:var(--eyebrow-size);line-height:var(--eyebrow-leading);font-weight:var(--weight-700);letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-case);display:flex;align-items:center;gap:var(--eyebrow-gap)}
.eyebrow:before{content:"";width:var(--size-6px);height:var(--size-6px);border-radius:var(--radius-50pct);background:var(--orange);flex-shrink:0}
.muted{color:var(--heading-muted)}
.serif{font-family:var(--font-sans);font-style:normal;font-weight:var(--weight-600)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);padding:var(--button-padding);min-height:var(--button-height);border-radius:var(--button-radius);background:var(--orange);color:var(--ink);font-size:var(--button-size);font-weight:var(--weight-700);line-height:var(--button-leading);transition:transform .25s,background .25s,box-shadow .25s}
.button:hover{background:var(--orange-hover);transform:translateY(var(--size-n2px));box-shadow:var(--shadow-button)}
.arrow{width:var(--size-20px);height:var(--size-20px);fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0;transition:transform .25s}
.button:hover .arrow,.text-link:hover .arrow{transform:translateX(var(--size-4px))}
.button--small{padding:var(--button-small-padding);min-height:var(--button-small-height);font-size:var(--button-small-size)}
.button--dark{background:var(--ink);color:var(--white)}
.button--dark:hover{background:var(--button-dark-hover);color:var(--white)}
.text-link{display:inline-flex;align-items:center;gap:var(--size-12px);min-height:var(--size-44px);font-size:var(--type-size-13px);font-weight:var(--weight-600)}
.text-link:hover{text-decoration:underline;text-underline-offset:var(--size-5px)}
.sr-only{position:absolute;width:var(--size-1px);height:var(--size-1px);padding:0;margin:var(--size-n1px);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:100;top:var(--size-10px);left:var(--size-15px);background:var(--ink);color:var(--white);padding:var(--size-14px) var(--size-20px);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.site-header{position:sticky;top:0;z-index:50;background:var(--header-background);border-bottom:var(--size-1px) solid var(--header-line);backdrop-filter:blur(var(--size-16px))}
.header-inner{height:var(--size-82px);width:min(var(--size-1360px),calc(100% - var(--size-64px)));margin:auto;display:flex;align-items:center;gap:var(--size-28px)}
.brand{flex-shrink:0}
.brand img{width:var(--size-156px);height:var(--size-39px);object-fit:contain}
.desktop-nav{display:flex;align-items:center;gap:var(--size-30px);margin-left:auto;margin-right:var(--size-10px)}
.desktop-nav a{display:flex;align-items:center;min-height:var(--size-44px);color:var(--nav-text);font-size:var(--type-size-12px)}
.desktop-nav a:hover{color:var(--orange-dark)}
.menu-toggle{display:none;width:var(--size-44px);height:var(--size-44px);background:none;align-items:center;justify-content:center;flex-direction:column;gap:var(--size-6px)}
.menu-toggle span{height:var(--size-2px);width:var(--size-23px);background:var(--ink);transition:transform .2s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(var(--size-4px)) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(var(--size-n4px)) rotate(-45deg)}
.mobile-menu{background:var(--white);padding:var(--size-8px) var(--size-24px) var(--size-24px);border-top:var(--size-1px) solid var(--line)}
.mobile-menu a{display:flex;padding:var(--size-16px) 0;border-bottom:var(--size-1px) solid var(--line);font-size:var(--type-size-18px)}
.breadcrumbs{display:flex;align-items:center;gap:var(--size-8px);flex-wrap:wrap;font-size:var(--type-size-11px);color:var(--muted);padding-top:var(--size-26px);line-height:var(--leading-1p7)}
.breadcrumbs a:hover{color:var(--orange-dark);text-decoration:underline}
.breadcrumbs .sep{color:var(--art-color-62645f)}
.hero{padding-block:var(--size-44px) var(--size-58px)}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto;column-gap:var(--size-45px);row-gap:0;align-items:center}
.hero-copy{grid-column:1;grid-row:1;min-width:0}
.hero-conversion{grid-column:1;grid-row:2;align-self:start;min-width:0}
.hero-stage{grid-column:2;grid-row:1/3}
.hero h1{font-size:var(--hero-title-size);line-height:var(--hero-title-leading);margin-top:var(--size-24px);max-width:var(--size-720px)}
.hero h1 span{color:var(--orange-title)}
.hero-lead{font-size:var(--type-size-16px);color:var(--muted);max-width:var(--size-530px);margin-top:var(--size-25px)}
.promise{margin-top:var(--size-20px);font-size:var(--type-size-14px);max-width:var(--size-470px)}
.promise:before{content:"";display:inline-block;width:var(--size-20px);height:var(--size-2px);background:var(--orange);margin-right:var(--size-10px);vertical-align:middle}
.hero-actions{margin-top:var(--size-26px);display:flex;flex-wrap:wrap;align-items:center;gap:var(--size-12px) var(--size-22px)}
.hero-actions .button{font-size:var(--button-hero-size);padding:var(--button-hero-padding)}
.hero-note{font-size:var(--type-size-11px);color:var(--muted);margin-top:var(--size-17px);letter-spacing:var(--tracking-p02em)}
.hero-stage{position:relative;min-width:0;padding:var(--size-28px) var(--size-10px) var(--size-25px);display:flex;align-items:center;justify-content:center;isolation:isolate}
.hero-stage:before{content:"";position:absolute;width:100%;aspect-ratio:1;border:var(--size-1px) solid var(--art-color-e9e2da);border-radius:var(--radius-50pct);z-index:-1}
.stage-dot{position:absolute;top:24%;right:7%;width:var(--size-13px);height:var(--size-13px);background:var(--orange);border-radius:var(--radius-50pct);box-shadow:var(--shadow-art-11)}
.stage-label{position:absolute;left:0;top:var(--size-10px);writing-mode:vertical-rl;font-size:var(--type-size-10px);letter-spacing:var(--tracking-p2em);color:var(--muted)}
.phone-wrap{width:var(--size-286px);max-width:82%}
.phone-wrap .phone{transform:rotate(3deg)}
.phone{position:relative;background:var(--ink);border:var(--size-1px) solid var(--art-color-797a7b);padding:var(--size-7px);border-radius:var(--radius-37px);box-shadow:var(--shadow-art-12);aspect-ratio:auto}
.phone:before{content:"";position:absolute;width:var(--size-3px);height:var(--size-42px);left:var(--size-n3px);top:25%;background:var(--art-color-747576);border-radius:var(--radius-2px-0-0-2px)}
.phone-screen{position:relative;aspect-ratio:9/16;width:100%;border-radius:var(--radius-30px);overflow:hidden;background:var(--ink);isolation:isolate}
.phone-screen img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}
.dynamic-island{position:absolute;top:2.5%;left:36%;width:28%;height:3.5%;background:var(--ink);border-radius:var(--radius-20px);z-index:5}
.home-indicator{position:absolute;bottom:2%;left:34%;width:32%;height:var(--size-3px);background:var(--art-color-ffffffba);z-index:5;border-radius:var(--radius-4px)}
.video-controls{position:absolute;bottom:6%;left:var(--size-12px);right:var(--size-12px);display:flex;justify-content:space-between;gap:var(--size-10px);z-index:8}
.media-button{border:var(--size-1px) solid var(--art-color-ffffff70);background:var(--art-color-202124e8);color:var(--white);border-radius:var(--radius-50pct);width:var(--size-44px);height:var(--size-44px);display:grid;place-items:center;font-size:var(--type-size-16px)}
.media-button:hover{background:var(--ink)}
.media-button:focus-visible{outline-color:var(--white)}
.media-icon{width:var(--size-17px);height:var(--size-17px);fill:currentColor}
.demo-mention{display:block;text-align:center;font-size:var(--type-size-11px);line-height:var(--leading-1p6);margin-top:var(--size-18px);color:var(--muted);transform:none}
.formats{background:var(--soft);border-block:var(--size-1px) solid var(--line)}
.formats-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--size-24px);padding-block:var(--size-24px)}
.formats p{font-size:var(--type-size-10px);font-weight:var(--weight-700);letter-spacing:var(--tracking-p12em);line-height:var(--leading-1p6)}
.format-list{display:flex;gap:var(--size-23px);align-items:center;flex-wrap:wrap;font-size:var(--type-size-14px);font-weight:var(--weight-600)}
.format-list i{font-style:normal;color:var(--format-separator)}
.section-heading{max-width:var(--size-730px);margin-bottom:var(--size-42px)}
.section-heading h2{margin-top:var(--size-18px)}
.section-heading>p:last-child:not(.eyebrow){margin-top:var(--size-22px);color:var(--muted);font-size:var(--type-size-15px);max-width:var(--size-600px)}
.context-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--size-24px)}
.context-card{padding-top:var(--size-24px);border-top:var(--size-1px) solid var(--line)}
.context-tag{display:block;font-size:var(--type-size-10px);text-transform:uppercase;letter-spacing:var(--tracking-p13em);color:var(--orange-dark);font-weight:var(--weight-700);margin-bottom:var(--size-22px)}
.context-card h3{font-size:var(--type-size-21px);margin-bottom:var(--size-13px)}
.context-card p{font-size:var(--type-size-14px);color:var(--muted)}
.uses-section{background:var(--paper);border-block:var(--size-1px) solid var(--line)}
.uses-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--size-80px)}
.uses-layout .section-heading{position:sticky;top:var(--size-135px);align-self:start;margin-bottom:0}
.uses-list{counter-reset:uses}
.use-card{display:grid;grid-template-columns:var(--size-40px) 1fr;gap:var(--size-20px);padding:var(--size-25px) 0;border-bottom:var(--size-1px) solid var(--line)}
.use-card:first-child{padding-top:0}
.use-number{font-size:var(--type-size-12px);color:var(--orange-dark);font-weight:var(--weight-700);padding-top:var(--size-5px)}
.use-card h3{font-size:var(--type-size-24px);margin-bottom:var(--size-12px)}
.use-card p{font-size:var(--type-size-14px);color:var(--muted)}
.showcase{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.showcase-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--size-100px);align-items:center}
.showcase-art{display:flex;justify-content:center;position:relative}
.showcase-art:before{content:"9:16";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:var(--type-fluid-5);font-weight:var(--weight-600);letter-spacing:var(--tracking-np08em);color:var(--art-color-ffffff07);white-space:nowrap}
.showcase .phone-wrap{max-width:84%;width:var(--size-296px)}
.showcase .phone{transform:rotate(-3deg)}
.showcase .demo-mention{color:var(--art-color-b4b4b2);margin-top:var(--size-24px)}
.showcase h2{margin-top:var(--size-20px)}
.showcase-copy>p:not(.eyebrow){margin-top:var(--size-25px);color:var(--art-color-c6c7c2);font-size:var(--type-size-15px);max-width:var(--size-470px)}
.showcase-copy .text-link{margin-top:var(--size-24px);color:var(--white)}
.showcase-copy .eyebrow{color:var(--orange-on-dark)}
.ingredient-list{display:flex;gap:var(--size-10px);flex-wrap:wrap;margin-top:var(--size-28px)}
.ingredient-list span{border:var(--size-1px) solid var(--art-color-ffffff30);border-radius:var(--radius-100px);padding:var(--size-8px) var(--size-12px);font-size:var(--type-size-11px);color:var(--art-color-d9d9d4)}
.media-note{font-size:var(--type-size-12px)!important;line-height:var(--leading-1p65);color:var(--art-color-c6c7c2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--size-38px)}
.step{border-top:var(--size-1px) solid var(--line);padding-top:var(--size-24px)}
.step-number{color:var(--orange-dark);font-size:var(--type-size-12px);font-weight:var(--weight-700);display:block;margin-bottom:var(--size-25px)}
.step h3{font-size:var(--step-title-size);margin-bottom:var(--size-16px)}
.step p{font-size:var(--type-size-14px);color:var(--muted)}
.formules{padding-top:0}
.formule-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--size-24px)}
.formule-card{border:var(--size-1px) solid var(--line);border-radius:var(--radius-18px);padding:var(--size-38px);background:var(--paper)}
.formule-card:last-child{background:var(--white)}
.formule-card .eyebrow{color:var(--orange-dark)}
.formule-card h3{font-size:var(--card-title-size);margin-top:var(--size-20px)}
.formule-card>p:not(.eyebrow){font-size:var(--type-size-14px);color:var(--muted);margin-top:var(--size-18px)}
.formule-card ul{padding-left:var(--size-18px);margin:var(--size-18px) 0 0;font-size:var(--type-size-14px);line-height:var(--leading-1p8);color:var(--muted)}
.quality-note{padding-top:var(--size-24px);margin-top:var(--size-26px);border-top:var(--size-1px) solid var(--line);font-size:var(--type-size-13px);color:var(--muted);max-width:var(--size-760px)}
.faq-section{background:var(--soft)}
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--size-80px)}
.faq-intro h2{margin-top:var(--size-20px)}
.faq-intro>p:not(.eyebrow){font-size:var(--type-size-14px);color:var(--muted);margin-top:var(--size-20px)}
.faq-list details{border-bottom:var(--size-1px) solid var(--faq-line)}
.faq-list details:first-child{border-top:var(--size-1px) solid var(--faq-line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--size-20px);list-style:none;padding:var(--size-25px) 0;min-height:var(--size-79px);cursor:pointer;font-size:var(--type-size-15px);font-weight:var(--weight-600);line-height:var(--leading-1p5)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-plus{width:var(--size-18px);height:var(--size-18px);position:relative;flex-shrink:0}
.faq-plus:before,.faq-plus:after{content:"";position:absolute;background:currentColor;top:var(--size-8px);left:var(--size-2px);width:var(--size-14px);height:var(--size-1px)}
.faq-plus:after{transform:rotate(90deg);transition:transform .2s}
details[open] .faq-plus:after{transform:none}
details[open] summary{color:var(--orange-dark)}
.faq-answer{padding:0 var(--size-25px) var(--size-26px) 0;font-size:var(--type-size-14px);color:var(--muted)}
.contact-section{background:var(--orange);overflow:hidden;position:relative}
.contact-inner{position:relative;padding-block:var(--size-85px);isolation:isolate}
.contact-inner>.eyebrow:before{background:var(--ink)}
.contact-inner h2{font-size:var(--contact-title-size);margin-top:var(--size-24px);max-width:var(--size-850px);line-height:var(--contact-title-leading)}
.contact-inner h2 span{font-family:var(--font-serif);font-style:var(--font-style-italic);font-weight:var(--weight-400)}
.contact-inner>p:not(.eyebrow){color:var(--text-on-orange);font-size:var(--type-size-16px);margin-top:var(--size-26px);max-width:var(--size-560px)}
.contact-actions{display:flex;align-items:center;gap:var(--size-35px);margin-top:var(--size-32px)}
.contact-instagram{display:flex;flex-direction:column;font-size:var(--type-size-12px);line-height:var(--leading-1p8);color:var(--text-on-orange);min-height:var(--size-44px);justify-content:center}
.contact-instagram span{color:var(--ink);font-size:var(--type-size-14px);font-weight:var(--weight-600)}
.contact-instagram:hover{text-decoration:underline}
.contact-outline{position:absolute;right:var(--size-n60px);top:0;z-index:-1;font-size:var(--type-size-420px);line-height:var(--leading-1);color:var(--art-color-20212412);pointer-events:none}
.related-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--size-24px);margin-bottom:var(--size-35px)}
.related-heading h2{font-size:var(--type-size-42px)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--size-12px)}
.related-card{padding:var(--size-23px) var(--size-24px);border:var(--size-1px) solid var(--line);border-radius:var(--radius-12px);display:flex;align-items:center;justify-content:space-between;gap:var(--size-15px);transition:background .2s,border-color .2s}
.related-card:hover{background:var(--paper);border-color:var(--art-color-babbb4)}
.related-card small{display:block;font-size:var(--type-size-11px);color:var(--muted);margin-bottom:var(--size-8px)}
.related-card strong{font-size:var(--type-size-15px);line-height:var(--leading-1p4);font-weight:var(--weight-600)}
.related-card .arrow{width:var(--size-17px)}
.site-footer{background:var(--soft);border-top:var(--size-1px) solid var(--line)}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:var(--size-30px);min-height:var(--size-120px)}
.footer-top>p{margin-right:auto;font-size:var(--type-size-12px);color:var(--muted)}
.back-top{font-size:var(--type-size-12px);display:flex;align-items:center;gap:var(--size-12px);min-height:var(--size-44px)}
.back-top .arrow{transform:rotate(-90deg)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:var(--size-20px);padding-block:var(--size-23px);border-top:var(--size-1px) solid var(--line);font-size:var(--type-size-11px);color:var(--muted)}
.footer-bottom span:first-child{margin-right:auto}
.footer-bottom a{display:inline-flex;min-height:var(--size-32px);align-items:center}
.footer-bottom a:hover{color:var(--orange-dark);text-decoration:underline}
.footer-email{overflow-wrap:anywhere}
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(var(--size-16px));transition:opacity .65s,transform .65s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}

/* One edge-to-edge image or video per phone; no photo overlays or transforms. */
.reel{position:absolute;inset:0;background:var(--ink);color:var(--white)}

.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.reel .video-controls{justify-content:flex-end}
.reel .media-button{width:var(--size-44px);height:var(--size-44px)}

.demo-mention span{display:block}
.demo-coming{margin-top:var(--size-7px);font-size:var(--type-size-10px);line-height:var(--leading-1p55)}

/* Directory */
.zones-hero{padding-block:var(--size-62px) var(--size-65px);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--size-70px);align-items:center}
.zones-hero h1{font-size:var(--hero-title-size);line-height:var(--hero-title-leading);margin-top:var(--size-24px)}
.zones-hero h1 em{font-family:var(--font-sans);font-weight:var(--weight-600);color:var(--orange-title)}
.zones-hero>div>p:not(.eyebrow){font-size:var(--type-size-16px);color:var(--muted);max-width:var(--size-510px);margin-top:var(--size-24px)}
.zones-art{height:var(--size-300px);position:relative;display:grid;place-items:center;background:var(--paper);border:var(--size-1px) solid var(--line);border-radius:var(--radius-50pct)}
.zones-art svg{width:85%;height:85%}
.zones-art-label{position:absolute;bottom:var(--size-30px);font-size:var(--type-size-10px);letter-spacing:var(--tracking-p12em);color:var(--muted)}
.directory-tools{display:flex;gap:var(--size-18px);align-items:center;flex-wrap:wrap;border-block:var(--size-1px) solid var(--line);padding-block:var(--size-24px)}
.search-field{position:relative;flex:1;min-width:var(--size-240px)}
.search-field label{display:block;font-size:var(--type-size-11px);font-weight:var(--weight-700);margin-bottom:var(--size-8px)}
.search-field input{font:inherit;font-size:var(--type-size-14px);width:100%;height:var(--size-48px);padding:var(--size-12px) var(--size-16px);color:var(--ink);border:var(--size-1px) solid var(--art-color-bfc0b9);background:var(--white);border-radius:var(--radius-8px)}
.directory-count{font-size:var(--type-size-12px);color:var(--muted);align-self:end;min-height:var(--size-48px);display:flex;align-items:center}
.view-links{display:flex;gap:var(--size-16px);flex-wrap:wrap;margin-top:var(--size-22px);font-size:var(--type-size-12px);color:var(--orange-dark)}
.view-links a{min-height:var(--size-44px);display:flex;align-items:center;text-decoration:underline;text-underline-offset:var(--size-4px)}
.directory-section{padding-top:var(--size-65px)}
.directory-section h2{font-size:var(--type-size-38px);margin-bottom:var(--size-30px)}
.city-group{border-top:var(--size-1px) solid var(--line);padding-block:var(--size-30px);display:grid;grid-template-columns:var(--size-220px) 1fr;gap:var(--size-32px)}
.city-group h3{font-size:var(--type-size-25px);margin-top:var(--size-5px)}
.directory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--size-12px)}
.directory-grid .related-card{padding:var(--size-20px)}
.trade-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--size-28px)}
.trade-group{border-top:var(--size-1px) solid var(--line);padding-top:var(--size-25px)}
.trade-group h3{font-size:var(--type-size-23px);margin-bottom:var(--size-12px)}
.trade-group a{display:inline-flex;align-items:center;margin:0 var(--size-12px) var(--size-7px) 0;min-height:var(--size-36px);font-size:var(--type-size-13px);color:var(--muted);text-decoration:underline;text-underline-offset:var(--size-4px)}
.trade-group a:hover{color:var(--orange-dark)}
.no-results{font-size:var(--type-size-15px);padding-top:var(--size-30px)}

@media(min-width:1440px){.hero{padding-block:var(--size-60px) var(--size-75px)}
.hero-inner{column-gap:var(--size-70px)}
.phone-wrap{width:var(--size-285px)}
}

@media(max-width:1050px){.container{width:calc(100% - var(--size-64px))}
.desktop-nav{gap:var(--size-17px);margin-right:0}
.header-inner{gap:var(--size-16px)}
.desktop-nav a{font-size:var(--type-size-11px)}
.header-cta{font-size:var(--button-header-size);padding:var(--button-header-padding)}
.brand img{width:var(--size-144px);height:var(--size-36px)}
.hero-inner{gap:var(--size-15px);grid-template-columns:1.15fr 1fr}
.hero h1{font-size:var(--hero-title-size)}
.hero-actions{gap:var(--size-10px)}
.context-grid{grid-template-columns:repeat(2,1fr);gap:var(--size-30px)}
.uses-layout,.faq-layout{gap:var(--size-45px)}
.showcase-layout{gap:var(--size-50px)}
.format-list{gap:var(--size-14px);font-size:var(--type-size-12px)}
.related-grid{grid-template-columns:repeat(2,1fr)}
.city-group{grid-template-columns:var(--size-170px) 1fr}
}

@media(max-width:760px){html{scroll-padding-top:var(--size-88px)}
.container{width:calc(100% - var(--size-44px))}
.header-inner{height:var(--size-72px);width:calc(100% - var(--size-32px));gap:var(--size-10px)}
.brand img{width:var(--size-132px);height:var(--size-33px)}
.desktop-nav{display:none}
.header-cta{margin-left:auto;font-size:var(--button-header-size);min-height:var(--button-header-height);padding:var(--button-header-padding)}
.header-cta .arrow{display:none}
.menu-toggle{display:flex}
.breadcrumbs{padding-top:var(--size-21px);font-size:var(--type-size-10px);gap:var(--size-6px)}
.hero{padding-top:var(--size-34px);padding-bottom:var(--size-35px)}
.hero-inner{grid-template-columns:minmax(0,1fr);gap:var(--size-25px)}
.hero-copy,.hero-stage,.hero-conversion{grid-column:1;grid-row:auto}
.hero-stage{margin-top:0}
.hero-conversion .promise{margin-top:0}
.hero h1{font-size:var(--hero-title-size);line-height:var(--hero-title-leading);max-width:var(--size-620px);margin-top:var(--size-20px)}
.eyebrow{font-size:var(--eyebrow-size);letter-spacing:var(--eyebrow-tracking)}
.hero-lead{font-size:var(--type-size-15px);margin-top:var(--size-21px)}
.promise{font-size:var(--type-size-13px);margin-top:var(--size-17px)}
.hero-actions{align-items:flex-start;gap:var(--size-10px);margin-top:var(--size-23px);flex-direction:column}
.hero-actions .button{font-size:var(--button-hero-size);width:100%;max-width:var(--size-390px);justify-content:space-between;padding:var(--button-hero-padding)}
.hero-actions .text-link{font-size:var(--type-size-12px)}
.hero-note{font-size:var(--type-size-10px);margin-top:var(--size-12px)}
.hero-stage{margin:auto;width:min(100%,var(--size-430px));padding-block:var(--size-24px) var(--size-12px)}
.hero-stage:before{width:97%;aspect-ratio:1}
.phone-wrap{width:var(--size-227px);max-width:73%}
.phone{border-radius:var(--radius-32px);padding:var(--size-6px)}
.phone-screen{border-radius:var(--radius-26px)}
.stage-label{font-size:var(--type-size-8px);top:var(--size-21px)}
.stage-dot{right:3%;width:var(--size-10px);height:var(--size-10px)}
.demo-mention{font-size:var(--type-size-10px);margin-top:var(--size-17px)}
.formats-inner{display:block;padding-block:var(--size-22px)}
.formats p{font-size:var(--type-size-9px);text-align:center;margin-bottom:var(--size-16px)}
.format-list{justify-content:center;gap:var(--size-10px);font-size:var(--type-size-11px)}
.section-pad{padding-block:var(--size-65px)}
.section-heading{margin-bottom:var(--size-30px)}
.section-heading h2{margin-top:var(--size-17px)}
.section-heading>p:last-child:not(.eyebrow){font-size:var(--type-size-14px);margin-top:var(--size-20px)}
.context-grid{gap:var(--size-29px) var(--size-22px)}
.context-card{padding-top:var(--size-18px)}
.context-tag{font-size:var(--type-size-9px);margin-bottom:var(--size-15px)}
.context-card h3{font-size:var(--type-size-20px)}
.context-card p{font-size:var(--type-size-13px);line-height:var(--leading-1p75)}
.uses-layout{grid-template-columns:1fr;gap:var(--size-10px)}
.uses-layout .section-heading{position:static;margin-bottom:var(--size-25px)}
.use-card{grid-template-columns:var(--size-26px) 1fr;gap:var(--size-13px);padding-block:var(--size-23px)}
.use-card h3{font-size:var(--type-size-23px);margin-bottom:var(--size-10px)}
.use-card p{font-size:var(--type-size-14px)}
.showcase-layout{grid-template-columns:1fr;gap:var(--size-42px)}
.showcase-art{order:2}
.showcase h2{font-size:var(--showcase-title-size)}
.showcase-copy>p:not(.eyebrow){font-size:var(--type-size-14px);margin-top:var(--size-20px)}
.showcase .phone-wrap{width:var(--size-241px);max-width:76%}
.showcase .demo-mention{font-size:var(--type-size-10px)}
.ingredient-list{gap:var(--size-7px);margin-top:var(--size-22px)}
.ingredient-list span{font-size:var(--type-size-10px)}
.steps{grid-template-columns:1fr;gap:var(--size-27px)}
.step{position:relative;padding-top:var(--size-20px);padding-left:var(--size-42px)}
.step-number{position:absolute;left:0;top:var(--size-23px);margin:0}
.step h3{font-size:var(--step-title-size);margin-bottom:var(--size-13px)}
.formules{padding-top:0}
.formule-grid{grid-template-columns:1fr;gap:var(--size-17px)}
.formule-card{padding:var(--size-27px);border-radius:var(--radius-13px)}
.formule-card h3{font-size:var(--card-title-size);margin-top:var(--size-16px)}
.quality-note{font-size:var(--type-size-12px);line-height:var(--leading-1p8)}
.faq-layout{grid-template-columns:1fr;gap:var(--size-30px)}
.faq-list summary{font-size:var(--type-size-14px);padding-block:var(--size-22px)}
.faq-answer{font-size:var(--type-size-14px);padding-right:var(--size-13px)}
.contact-inner{padding-block:var(--size-65px)}
.contact-inner h2{font-size:var(--contact-title-size);margin-top:var(--size-24px)}
.contact-inner>p:not(.eyebrow){font-size:var(--type-size-14px);line-height:var(--leading-1p8);margin-top:var(--size-24px)}
.contact-actions{flex-direction:column;align-items:flex-start;gap:var(--size-20px);margin-top:var(--size-27px)}
.contact-actions .button{font-size:var(--button-dark-size);width:100%;max-width:var(--size-390px);justify-content:space-between;padding-inline:var(--button-dark-padding-inline)}
.contact-outline{font-size:var(--type-size-340px);right:var(--size-n160px);top:var(--size-30px)}
.related-heading{display:block;margin-bottom:var(--size-20px)}
.related-heading h2{font-size:var(--type-size-35px)}
.related-heading .text-link{margin-top:var(--size-13px);font-size:var(--type-size-12px)}
.related-grid{grid-template-columns:1fr;gap:var(--size-10px)}
.related-card{padding:var(--size-18px) var(--size-20px)}
.related-card strong{font-size:var(--type-size-14px)}
.footer-top{flex-wrap:wrap;gap:var(--size-15px);padding-block:var(--size-28px);min-height:0}
.footer-top>p{order:3;flex-basis:100%;font-size:var(--type-size-11px)}
.back-top{margin-left:auto;font-size:var(--type-size-11px)}
.footer-bottom{font-size:var(--type-size-10px);gap:var(--size-12px) var(--size-20px);display:grid;grid-template-columns:1fr auto;padding-block:var(--size-20px)}
.footer-bottom span:first-child{margin:0}
.footer-email{grid-column:1/-1;word-break:break-word}
.zones-hero{grid-template-columns:1fr;gap:var(--size-28px);padding-block:var(--size-42px)}
.zones-hero h1{font-size:var(--hero-title-size)}
.zones-hero>div>p:not(.eyebrow){font-size:var(--type-size-15px)}
.zones-art{height:var(--size-230px);max-width:var(--size-390px);width:100%;justify-self:center}
.zones-art-label{font-size:var(--type-size-9px);bottom:var(--size-20px)}
.directory-tools{gap:var(--size-8px);padding-block:var(--size-20px)}
.search-field{min-width:100%}
.directory-count{min-height:var(--size-30px)}
.directory-section{padding-top:var(--size-45px)}
.directory-section h2{font-size:var(--type-size-34px);margin-bottom:var(--size-24px)}
.city-group{grid-template-columns:1fr;gap:var(--size-18px);padding-block:var(--size-25px)}
.city-group h3{font-size:var(--type-size-26px)}
.directory-grid{grid-template-columns:1fr;gap:var(--size-8px)}
.directory-grid .related-card{padding:var(--size-17px) var(--size-18px)}
.trade-list{grid-template-columns:1fr;gap:var(--size-25px)}
.trade-group a{font-size:var(--type-size-13px);margin-right:var(--size-15px)}
.trade-group h3{font-size:var(--type-size-22px)}
.view-links{margin-top:var(--size-13px);font-size:var(--type-size-11px);gap:var(--size-18px)}
}

@media(max-width:374px){.header-cta{font-size:var(--button-header-size);padding:var(--button-header-padding)}
.brand img{width:var(--size-121px)}
.header-inner{gap:var(--size-7px)}
.hero h1{font-size:var(--hero-title-size)}
.hero-actions .button{font-size:var(--button-hero-size)}
.context-grid{grid-template-columns:1fr}
.context-card h3{font-size:var(--type-size-23px)}
.context-card p{font-size:var(--type-size-14px)}
.hero-stage{margin-top:var(--size-5px)}
.phone-wrap{width:var(--size-214px)}
.format-list{gap:var(--size-8px);font-size:var(--type-size-10px)}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.js .reveal{opacity:1;transform:none}
.phone-wrap,.showcase .phone-wrap,.showcase .demo-mention{transform:none}
}


/* Keep intrinsic grid content and long names inside the viewport. */
.hero-inner>*,.showcase-layout>*,.faq-layout>*,.uses-layout>*,.related-card>span{min-width:0}
h1,h2,h3,.eyebrow{overflow-wrap:break-word}
.showcase .demo-mention{transform:none}

@media(max-width:760px){.hero-stage .phone-wrap{width:var(--size-258px);max-width:82%}
.hero-stage .phone{transform:none}
.hero-stage:before{width:94%;max-width:var(--size-340px)}
.hero-stage .demo-mention{max-width:var(--size-258px);margin-inline:auto}
}

@media(prefers-reduced-motion:reduce){.phone-wrap .phone,.showcase .phone{transform:none}
}


/* Shared design roles; local grids, content widths and media stay in place. */
.hero h1,.zones-hero h1{letter-spacing:var(--hero-title-tracking);line-height:var(--hero-title-leading)}

.zones-hero h1 em{font-style:normal}

.contact-inner h2{letter-spacing:var(--contact-title-tracking);line-height:var(--contact-title-leading)}

.contact-inner h2 span{letter-spacing:var(--tracking-np06em)}

.step h3{line-height:var(--step-title-leading)}

.faq-intro h2{font-size:var(--faq-title-size)}

.button--small{border-radius:var(--button-small-radius);gap:var(--button-small-gap)}

.hero-actions .button{min-height:var(--button-hero-height);gap:var(--button-hero-gap)}

.button--dark{font-size:var(--button-dark-size);min-height:var(--button-dark-height);padding-inline:var(--button-dark-padding-inline);gap:var(--button-dark-gap)}

.button--dark:hover{box-shadow:var(--shadow-button-dark)}

.header-cta{font-size:var(--button-header-size);min-height:var(--button-header-height);padding:var(--button-header-padding);gap:var(--button-header-gap)}

.button:hover .arrow{transform:translateX(var(--size-3px))}

.mobile-menu a:last-child{color:var(--orange-dark)}

.contact-inner>.eyebrow{color:var(--eyebrow-on-orange)}

/* CSS owns the map palette through shared design tokens. */
.zones-art svg>g:first-of-type{stroke:var(--map-grid)}

.zones-art svg>path{stroke:var(--muted)}

.zones-art svg>path+path,.zones-art svg>circle{stroke:var(--orange)}

.zones-art svg>g:last-of-type{fill:var(--orange);stroke:var(--soft)}