@font-face{font-family:'MINI Serif';src:url(fonts/MINISerif-Regular.otf) format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'MINI Serif';src:url(fonts/MINISerif-Italic.otf) format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'MINI Serif';src:url(fonts/MINISerif-Headline.otf) format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Helvetica;src:url(fonts/helvetica.ttf) format('truetype');font-weight:400;font-display:swap}
:root{--serif:'MINI Serif',Georgia,serif;--sans:Helvetica,Arial,sans-serif;--ink:#111;--accent:#35747a;--unit:min(1vw,1.337svh)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--ink);background:#fff}body{font-family:var(--serif);-webkit-text-size-adjust:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button,a{cursor:pointer}button{color:inherit}button:disabled{opacity:.45;cursor:wait}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}h1,h2,p{margin:0}h1{font-weight:700;text-transform:uppercase;line-height:1.04}h1:focus{outline:none}.screen{position:relative;width:100%;min-height:100svh}.artboard{height:100svh;min-height:0;isolation:isolate;overflow:hidden}.campaign{color:#fff;background:#5a5249}.paper{background:#fff}.campaign-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}.brand{position:absolute;right:5.2%;top:6.8%;width:15.3%;height:auto}.brand-light{filter:none}.brand-dark{filter:brightness(0)}.footer-brand{top:auto;right:3.5%;bottom:4.6%;width:9.7%}.eyebrow{font-size:calc(3.1 * var(--unit));line-height:1.05;font-weight:400;font-style:italic;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:0;border-radius:99px;background:#050505;color:#fff;text-decoration:none;text-transform:uppercase;font-weight:400;font-size:calc(1.8 * var(--unit));padding:15px 32px;line-height:1;transition:background .18s,transform .18s}.button:hover{background:#272727}.button:active{transform:scale(.98)}.artwork-button{width:20.3%;height:7.2%;padding:0;min-height:44px}.campaign-copy{position:absolute;left:5.8%;right:4%;bottom:7.4%}.campaign-copy .eyebrow{margin-bottom:1.2svh}.campaign-copy h1{font-size:calc(6.05 * var(--unit));line-height:1.07;font-weight:700}.campaign-copy .button{margin-top:3.2svh;width:22.5%;height:7.2svh;min-width:160px;max-width:370px}.back{position:absolute;left:1.6%;top:1.5%;display:inline-flex;gap:8px;align-items:center;border:0;background:transparent;padding:9px;font-family:var(--sans);font-size:19px;z-index:2}.back span{font-size:11px}.light{color:#fff}.staff-button{position:absolute;left:1.2%;bottom:.8%;padding:8px;border:0;background:none;color:#fff;font-family:var(--sans);font-size:10px;opacity:.7}.step-label{font-family:var(--sans);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#777}
/* Registration follows the supplied 4:3 artwork, with six fields. */
.registration-content{position:absolute;left:21.7%;top:8.5%;width:56.6%}.registration-content h1{font-size:calc(5.3 * var(--unit));white-space:nowrap;margin:0 0 4svh;line-height:1.06}.registration-content form{display:flex;flex-direction:column;gap:0}fieldset{border:0;margin:0;padding:0;min-width:0}legend{padding:0;font-size:calc(1.8 * var(--unit));font-weight:700;text-transform:uppercase;margin-bottom:3.1svh}.field{display:block;margin-bottom:1.7svh;min-width:0}.field:last-child{margin-bottom:0}.field input,.field select{display:block;width:100%;height:5.5svh;min-height:40px;border:1.5px solid #111;border-radius:99px;padding:8px 4.8%;background:#fff;color:#111;font-size:max(16px,calc(1.7 * var(--unit)));line-height:1.2;min-width:0}.field input::placeholder{color:#b9b9b9;opacity:1}.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20'%3E%3Cpath d='M2 3h24L14 17Z' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 3% center;background-size:22px 16px;padding-right:50px}.field select:invalid{color:#b9b9b9}.field select:disabled{opacity:1;-webkit-text-fill-color:#111;color:#111;background-color:#fff;cursor:default}.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:2px}.field [aria-invalid=true]{border-color:#a52424}.field .error{margin:4px 20px}.error{display:block;font-family:var(--sans);font-size:11px;color:#a52424;line-height:1.3}.error:empty{display:none}.consent{display:flex;gap:12px;align-items:flex-start;margin-top:3.7svh;font-size:calc(1.12 * var(--unit));line-height:1.25}.consent input{width:24px;height:24px;flex:0 0 24px;margin:0;accent-color:#111}.consent a{color:#709495;text-decoration:none}.participation-note{font-size:calc(1.12 * var(--unit));line-height:1.25;margin:2svh 0 0 36px}.registration-content form>.button{align-self:center;width:35.9%;height:7.2svh;margin-top:4.5svh;padding:0}.registration-content #form-status{margin-top:5px}.registration-content .field:has(.error:not(:empty)){margin-bottom:5px}
/* The real personal values remain in the inputs; the overlay displays Xs. */
.masked-input{display:block;position:relative;min-width:0}.field .masked-input input{color:transparent;-webkit-text-fill-color:transparent;caret-color:#111;font-family:monospace;font-size:max(16px,calc(1.6 * var(--unit)));letter-spacing:1px}.field .masked-input input::placeholder{color:#b9b9b9;-webkit-text-fill-color:#b9b9b9;font-family:var(--serif);letter-spacing:0}.field .masked-input input::selection{color:transparent;-webkit-text-fill-color:transparent;background:#35747a33}.field .masked-input input:-webkit-autofill{-webkit-text-fill-color:transparent!important}.masked-value{position:absolute;inset:1px 4.8%;display:flex;align-items:center;overflow:hidden;pointer-events:none;white-space:pre;color:#111;font-family:monospace;font-size:max(16px,calc(1.6 * var(--unit)));letter-spacing:1px}.masked-value>span{display:block;flex-shrink:0}.date-field{position:relative}.date-label{position:absolute;left:4.8%;top:50%;transform:translateY(-50%);font-size:max(15px,calc(1.6 * var(--unit)));z-index:1;pointer-events:none}.date-field .masked-input input{padding-left:34%;padding-right:44px}.date-field .masked-value{left:34%;right:44px}.field .masked-input input[type=date]{color:#111;-webkit-text-fill-color:#111;caret-color:transparent}.field .masked-input input[type=date]::-webkit-datetime-edit,.field .masked-input input[type=date]::-webkit-date-and-time-value{color:transparent;-webkit-text-fill-color:transparent}.field input[type=date]{position:relative;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M7 3v4M17 3v4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4.8% center;background-size:20px}.field input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
/* Customiser keeps the interactive controls beside the actual source renders. */
.customise-header{height:75px;display:flex;align-items:center;justify-content:space-between;padding:18px 4%}.customise-header .step-label{margin-left:auto;margin-right:auto}.customise-header img{width:75px;height:auto;filter:brightness(0)}.configurator{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:5%;max-width:1700px;margin:0 auto;padding:20px 5% 26px;height:calc(100svh - 75px);min-height:0}.car-panel{min-width:0;display:flex;flex-direction:column;justify-content:center;align-self:stretch}.car-heading .eyebrow{font-size:18px;color:#666;text-transform:none}.car-heading h1{font-size:clamp(28px,3vw,45px);margin-top:6px}.car-stage{position:relative;width:100%;margin:45px 0 14px;aspect-ratio:1535/898}.car-stage canvas{display:block;width:100%;height:auto}.car-stage p{position:absolute;inset:0;display:grid;place-items:center;background:#fff;font-family:var(--sans);font-size:13px}.paint-caption{text-align:center;color:#777;font-size:15px}.options-panel{display:flex;flex-direction:column;min-height:0;padding:8px 0 0}#options{overflow-y:auto;min-height:0;flex:1;padding:3px 8px 0 3px;overscroll-behavior:contain}.option-group{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid #e5e5e5}.group-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}.group-heading h2{font-size:17px;font-weight:400}.selected-label{font-family:var(--sans);font-size:11px;text-align:right;color:#777}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{position:relative;display:grid;place-items:center;width:48px;height:48px;border:1px solid transparent;border-radius:50%;background:transparent;padding:5px}.swatch .chip{display:block;width:36px;height:36px;border-radius:50%;background:var(--colour);box-shadow:inset 0 0 0 1px #0000000c}.swatch.paint .chip{background:linear-gradient(170deg,#ffffff50 5%,#ffffff16 27%,#0000001a 32%,transparent 38%,#00000033 85%),var(--colour)}.swatch[aria-pressed=true]{border:2px solid var(--accent)}.swatch[aria-pressed=true]:after{content:'';position:absolute;right:0;bottom:1px;width:11px;height:11px;background:var(--accent);border-radius:50%;border:2px solid #fff}.swatch:hover .chip{transform:scale(1.06)}.custom-colour{display:flex;gap:9px;align-items:center;width:max-content;font-family:var(--sans);font-size:11px;color:#777;margin-top:12px}.custom-colour input{width:25px;height:25px;padding:0;border:0;background:none;cursor:pointer}.text-button{border:0;background:none;padding:12px 0;font-family:var(--sans);font-size:11px;text-decoration:underline;text-underline-offset:4px}.preview-note{font-family:var(--sans);font-size:10px;line-height:1.4;color:#777;margin-top:10px}.design-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px;flex-shrink:0}.design-actions .button{font-size:14px;min-width:165px}
/* The finished artwork is composed again in the export canvas for the QR link. */
.preview-copy{position:absolute;left:5.8%;top:7.8%;right:4%}.preview-copy .eyebrow{margin-bottom:1.2svh}.preview-copy h1{font-size:calc(6.05 * var(--unit));white-space:nowrap}.preview-car{position:absolute;left:19.5%;top:32.5%;width:61%;height:46.5%;object-fit:contain;transform:scaleX(-1)}.preview-next{position:absolute;left:39.85%;bottom:6.1%}#preview-error{position:absolute;bottom:1%;left:25%;right:25%;text-align:center;color:#fff}.preview-edit{color:#fff;text-shadow:0 1px 5px #0006}
/* QR page uses the client's second countryman visual. */
.result .campaign-image{width:110%;height:110%;left:-5%;top:-10%}.result-copy{position:absolute;left:5.8%;top:7.8%;right:4%}.result-copy .eyebrow{margin-bottom:1.2svh}.result-copy h1{font-size:calc(6.05 * var(--unit))}.qr{position:absolute;left:50%;top:30%;transform:translateX(-50%);width:min(30vw,40svh);aspect-ratio:1;background:#fff;color:#111;display:grid;place-items:center;text-align:center;font-family:var(--sans);font-size:13px;line-height:1.5}.qr img{width:100%;height:auto;display:block;image-rendering:pixelated}.qr a{display:block;width:100%}.upload-status{position:absolute;left:30%;right:30%;top:72.5%;font-family:var(--sans);font-size:12px;line-height:1.4;text-align:center;text-shadow:0 1px 5px #000}.upload-status[data-state=saved]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.qr-retry{position:absolute;left:50%;top:78%;transform:translateX(-50%);font-size:14px}.result-bottom{position:absolute;bottom:3%;left:3%;display:flex;align-items:center;gap:20px}.result-link,.result-bottom .text-button{font-family:var(--sans);font-size:11px;color:#fff;text-decoration:underline;text-underline-offset:3px}.build-code{display:none}.sync-status{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:11px;background:#fff;border:1px solid #ddd;border-radius:20px;padding:8px 12px;z-index:5}
/* The page opened by the QR retains the full artwork and image download. */
.shared-header{display:flex;justify-content:flex-end;max-width:1200px;margin:auto;padding:22px 5%}.shared-header img{width:75px;height:auto;filter:brightness(0)}.shared-content{max-width:1200px;margin:auto;padding:0 4% 35px;text-align:center}.shared-content>.eyebrow,.shared-content>h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.shared-car{display:block;width:100%;height:auto;max-height:77svh;object-fit:contain;margin:0 auto 20px}.shared-content .button{font-size:15px;min-height:48px}.shared-note{font-family:var(--sans);font-size:11px;line-height:1.5;color:#777;max-width:310px;margin:16px auto 0}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:850px) and (orientation:landscape){.field input,.field select{min-height:34px}.registration-content{top:7%}.registration-content h1{margin-bottom:4.5svh}.field{margin-bottom:1.3svh}.consent{margin-top:2.8svh}.consent input{width:18px;height:18px;flex-basis:18px}.registration-content form>.button{margin-top:3svh;min-height:38px}.configurator{grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:3%;padding-top:8px}.customise-header{height:60px}.configurator{height:calc(100svh - 60px)}.car-stage{margin-top:20px}}
@media(orientation:portrait){.artboard{height:100svh;min-height:700px}.campaign-image{object-position:55% center}.brand{width:22%;top:5%}.footer-brand{width:15%;top:auto;bottom:4%}.campaign-copy{bottom:12%;left:7%}.campaign-copy h1{font-size:7vw}.campaign-copy .eyebrow{font-size:4vw}.campaign-copy .button{width:50%;height:48px;font-size:15px}.registration-content{position:relative;left:auto;top:auto;width:min(80%,560px);margin:auto;padding:70px 0 110px}.registration-content h1{font-size:clamp(24px,5vw,38px);white-space:normal;margin-bottom:35px}.registration-content legend{font-size:17px;margin-bottom:18px}.field{margin-bottom:12px}.field input,.field select{height:45px;font-size:16px}.field .masked-input input,.masked-value{font-size:17px}.date-label{font-size:15px}.consent{font-size:12px;margin-top:25px}.participation-note{font-size:11px;margin-top:16px}.registration-content form>.button{width:45%;height:48px;font-size:16px;margin-top:30px}#registration{height:auto;min-height:100svh;overflow:visible}.preview-copy,.result-copy{top:11%;left:7%}.preview-copy .eyebrow,.result-copy .eyebrow{font-size:3.9vw}.preview-copy h1,.result-copy h1{font-size:6.3vw;white-space:normal}.preview-car{left:5%;width:90%;top:32%;height:40%}.preview-next{width:40%;left:30%;height:48px;font-size:16px;bottom:10%}.qr{width:min(65vw,34svh);top:32%}.upload-status{left:15%;right:15%;top:68%}.qr-retry{top:75%}.result-bottom{bottom:4%;flex-direction:column;align-items:flex-start;gap:0}.result .campaign-image{object-position:60% center}.configurator{display:block;height:auto;min-height:0;padding:15px 8% 110px}.car-heading{text-align:center}.car-stage{margin:25px 0 10px}.options-panel{margin-top:30px}#options{overflow:visible}.design-actions{position:fixed;bottom:0;left:0;right:0;background:#fff;padding:15px 8%;margin:0;box-shadow:0 -12px 24px #ffffffdf;z-index:3}.customise-header{height:65px}.customise-header img{width:65px}.preview-note{margin-top:0}.shared-content{padding-left:0;padding-right:0}.shared-header{padding-top:20px;padding-bottom:15px}.shared-car{max-height:none;margin-bottom:25px}.shared-content .button{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}