:root{
  --brand:#183b35;
  --deep:#0f2a25;
  --mid:#2c6153;
  --brand-soft:#a9c6ba;
  --champagne:#e3c894;
  --champagne-lt:#f2e4c8;
  --cream:#f5f0e3;
  --paper:#fff;
  --bg:#fbf8f1;
  --ink:#16332c;
  --ink-soft:#4f6b62;
  --muted:#8b9c95;
  --line:#e4e6dd;
  --gold:var(--champagne);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --lift:0 16px 44px rgba(16,42,36,.08);
  --lift-lg:0 28px 70px rgba(16,42,36,.15);
}
*{box-sizing:border-box}
html{color-scheme:light only;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--mid);color:#fff}
.shell{width:100%;max-width:1140px;margin:0 auto;padding-left:22px;padding-right:22px}

/* Same glass navigation and real wordmark used by the landing page. */
.top{position:sticky;top:14px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;padding:9px 9px 9px 22px;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.9);border-radius:999px;box-shadow:0 8px 30px rgba(15,42,36,.09)}
.logo{display:block;width:86px;height:26px;flex:0 0 86px;overflow:hidden;color:transparent;font-size:0;text-decoration:none;background:var(--ink);-webkit-mask:url('/assets/logo.svg') no-repeat left center;mask:url('/assets/logo.svg') no-repeat left center;-webkit-mask-size:contain;mask-size:contain}
.top-right{display:flex;align-items:center;gap:9px}
.back{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.62);color:var(--ink-soft);font-size:12px;font-weight:500;letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .2s}
.back:hover{background:var(--ink);border-color:var(--ink);color:var(--bg);transform:translateY(-1px)}
/* Language pill — the service pages get the same UK / EN switch as the landing. */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(24,59,53,.07)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border-radius:999px;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);transition:background .22s,color .22s}
.lang a[aria-current]{background:var(--ink);color:var(--bg)}
.lang a:not([aria-current]):hover{color:var(--ink)}

.hero{padding:clamp(64px,9vw,104px) 0 34px}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mid);margin:0 0 16px;padding-left:.28em;font-weight:500}
.hero h1{font:400 clamp(44px,7.6vw,78px)/1.02 var(--serif);letter-spacing:-.015em;margin:0;max-width:13ch}
.hero p{max-width:650px;margin:22px 0 0;color:var(--ink-soft);font-weight:300;font-size:17px;line-height:1.72}
.card{background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);border-radius:22px;padding:clamp(24px,5vw,48px);box-shadow:var(--lift);margin:20px 0 72px}
.card:hover{box-shadow:var(--lift-lg)}
.notice{border:1px solid rgba(227,200,148,.48);border-radius:16px;padding:14px 17px;background:var(--champagne-lt);color:#5c4a27;font-size:13px;margin-bottom:24px}
.legal h2{font:400 28px/1.2 var(--serif);margin:38px 0 12px}.legal h2:first-child{margin-top:0}.legal h3{font-size:15px;margin:24px 0 6px}.legal p,.legal li{color:#385049;font-size:14px}.legal ul,.legal ol{padding-left:22px}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.meta div{padding:16px;border:1px solid var(--line);border-radius:15px}.meta small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}.placeholder{color:#a24545;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label,.legend{font-size:13px;font-weight:500}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--deep);padding:13px 15px;font:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}.field textarea{min-height:115px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--mid);box-shadow:0 0 0 3px rgba(44,97,83,.12)}
/* Native select chrome varies wildly between browsers — draw our own caret. */
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6b62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:15px}
/* ── Steps ───────────────────────────────────────────────────────
   The checkout is one form read top to bottom, so each decision gets
   a numbered heading rather than a wizard the buyer has to click through. */
.step{margin:0 0 34px}
.step:last-of-type{margin-bottom:0}
.step-head{display:flex;align-items:baseline;gap:13px;margin:0 0 15px}
.step-num{flex:0 0 auto;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand);color:var(--cream);font-size:11px;font-weight:500;letter-spacing:0;transform:translateY(3px)}
.step-head h2{font:400 23px/1.2 var(--serif);margin:0}
.step-note{margin:-8px 0 15px;padding-left:39px;color:var(--muted);font-size:12.5px}

/* ── Choice cards (packages, designs, extras) ────────────────────
   All three pickers hide the native control and light up a card, so
   the inherited `.field input{width:100%}` must be undone explicitly. */
.opt input,.pick input,.choice input,.field .opt input,.field .pick input,.field .choice input{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;pointer-events:none}
/* The real control is off-screen, so the card has to show the focus ring
   for anyone arrowing through the group on a keyboard. */
.opt:has(input:focus-visible),.pick:has(input:focus-visible),.choice:has(input:focus-visible),
.consent:has(input:focus-visible),.button:focus-visible,.back:focus-visible,.lang a:focus-visible,
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.pick-demo:focus-visible{outline:2px solid var(--mid);outline-offset:3px}
.opts{display:grid;gap:11px}
.opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 19px;border:1px solid var(--line);border-radius:18px;background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .2s}
.opt:hover{border-color:var(--brand-soft);transform:translateY(-1px);box-shadow:0 10px 24px rgba(16,42,36,.06)}
.opt-dot{position:relative;flex:none;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--brand-soft);transition:border-color .2s}
.opt-dot:after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brand);transform:scale(0);transition:transform .2s cubic-bezier(.2,.9,.24,1)}
.opt-txt{min-width:0}
.opt-txt b{display:block;font-size:14.5px;font-weight:500}
.opt-txt small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px}
.opt-price{flex:none;font:500 16px/1 var(--serif);color:var(--brand);white-space:nowrap}
.opt.is-on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 12px 28px rgba(16,42,36,.09)}
.opt.is-on .opt-dot{border-color:var(--brand)}
.opt.is-on .opt-dot:after{transform:scale(1)}

/* Design picker — a real thumbnail of every template, plus its live demo.
   One card per design; the classic swaps colourway in place. */
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.pick{position:relative;display:block;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .2s}
.pick:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,42,36,.09)}
.pick figure{margin:0;overflow:hidden;background:var(--cream);aspect-ratio:4/5}
.pick img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.pick:hover img{transform:scale(1.05)}
.pick-body{display:flex;flex-direction:column;gap:5px;padding:11px 13px 13px}
.pick-name{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;line-height:1.3}
.pick-name i{flex:none;width:8px;height:8px;border-radius:50%}
.pick-demo{align-self:flex-start;font-size:11px;color:var(--mid);text-decoration:none;border-bottom:1px solid rgba(44,97,83,.3);padding-bottom:1px;transition:color .2s,border-color .2s}
.pick-demo:hover{color:var(--brand);border-color:var(--brand)}
.pick-tick{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--brand);color:var(--cream);opacity:0;transform:scale(.55);transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.24,1)}
.pick-tick svg{width:12px;height:12px}
.pick.is-on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 12px 28px rgba(16,42,36,.1)}
.pick.is-on .pick-tick{opacity:1;transform:none}
/* Colourways sit on the shot, the way the landing gallery shows them. */
.pick-swatches{position:absolute;top:9px;left:9px;z-index:2;display:flex;gap:6px;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(15,42,36,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pick-swatch{position:relative;width:18px;height:18px;padding:0;border:1px solid rgba(15,42,36,.18);border-radius:50%;background:none;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),border-color .2s}
.pick-swatch i{position:absolute;inset:2px;display:block;border-radius:50%}
.pick-swatch:hover{transform:scale(1.15)}
.pick-swatch[aria-pressed="true"]{border-color:var(--ink);border-width:1.5px}
.pick-swatch:focus-visible{outline:2px solid var(--mid);outline-offset:2px}

/* "Your own design" has no screenshot to show — the wordmark stands in. */
.pick-own figure{display:grid;place-items:center;background:linear-gradient(150deg,var(--cream),#ece3cf)}
.pick-own-mark{display:block;width:62%;aspect-ratio:104/31;background:var(--mid);opacity:.6;-webkit-mask:url('/assets/logo.svg') no-repeat center;mask:url('/assets/logo.svg') no-repeat center;-webkit-mask-size:contain;mask-size:contain}

/* Extras — same card grammar, square tick instead of a radio dot. */
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;width:100%}
.choice{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:15px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;font-size:13px;cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .2s}
.choice:hover{border-color:var(--brand-soft);transform:translateY(-1px);box-shadow:0 10px 24px rgba(16,42,36,.06)}
.choice-tick{position:relative;flex:none;width:20px;height:20px;border-radius:7px;border:1.5px solid var(--brand-soft);color:var(--cream);transition:background .2s,border-color .2s}
.choice-tick svg{position:absolute;inset:0;margin:auto;width:11px;height:11px;opacity:0;transform:scale(.5);transition:opacity .18s,transform .22s cubic-bezier(.2,.9,.24,1)}
.choice-txt{min-width:0}
.choice-txt b{display:block;font-size:13.5px;font-weight:500}
.choice-txt small{display:block;color:var(--muted);font-size:11.5px;line-height:1.45;margin-top:1px}
.choice-price{flex:none;font-size:12.5px;color:var(--mid);white-space:nowrap}
.choice.is-on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 12px 26px rgba(16,42,36,.08)}
.choice.is-on .choice-tick{background:var(--brand);border-color:var(--brand)}
.choice.is-on .choice-tick svg{opacity:1;transform:none}
/* ── Order summary ───────────────────────────────────────────────
   Sticky beside the form on desktop, stacked above it on mobile so the
   price is the first thing a buyer sees either way. */
.checkout-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);align-items:start;gap:24px;margin:22px 0 0}
.checkout-grid>.card{margin:0}
.summary-col{position:sticky;top:100px}
.summary{background:linear-gradient(140deg,#0f2a25,#1d4a41 42%,#2c6153 72%,#4a7a63);color:#fff;border-radius:22px;padding:26px;box-shadow:0 18px 44px rgba(15,42,36,.16)}
.summary-row{display:flex;justify-content:space-between;gap:20px;align-items:center}
.summary h2{font:400 25px/1.2 var(--serif);margin:2px 0 0}
/* Same treatment as the pricing cards on the landing: the amount in the
   serif, the hryvnia equivalent small and quiet beside it. Lining figures
   throughout — the serif's default old-style digits sit at four different
   heights, which is the one thing a price must not do. */
.summary strong{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0 0;padding:16px 20px;border-radius:16px;background:var(--brand-soft);color:var(--deep);text-align:center;box-shadow:0 6px 18px rgba(15,42,36,.14)}
.summary strong b{font:500 clamp(27px,3vw,34px)/1.05 var(--serif);font-variant-numeric:lining-nums;letter-spacing:-.015em}
.summary strong i{font:400 14.5px/1.4 var(--sans);font-style:normal;font-variant-numeric:lining-nums tabular-nums;color:rgba(15,42,36,.62);white-space:nowrap}
.summary small{display:block;color:rgba(255,255,255,.68);font-size:11.5px;line-height:1.55}
.summary-lines{margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(245,240,227,.18);display:grid;gap:8px;font-size:12.5px;color:rgba(255,255,255,.86)}
.summary-lines div{display:flex;justify-content:space-between;gap:14px}
.summary-lines span:last-child{color:rgba(255,255,255,.66);white-space:nowrap}
.summary-lines:empty{display:none}
.summary-rate{margin-top:16px}
.included{margin:18px 0 0;padding:18px 0 0;border-top:1px solid rgba(245,240,227,.18);list-style:none;display:grid;gap:9px;font-size:12.5px;color:rgba(255,255,255,.82)}
.included li{display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.included svg{flex:none;width:13px;height:13px;margin-top:3px;color:var(--champagne)}
.summary-help{margin:16px 0 0;font-size:12px;color:rgba(255,255,255,.62);line-height:1.6}
.summary-help a{color:var(--champagne-lt)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:22px 0}.consent input{margin-top:5px;accent-color:var(--brand)}
.button{width:100%;border:1px solid var(--ink);border-radius:999px;padding:16px 22px;background:var(--ink);color:var(--bg);font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .25s,border-color .25s,transform .2s,box-shadow .25s}.button:hover{background:#000;border-color:#000;transform:translateY(-2px);box-shadow:0 12px 30px rgba(16,42,36,.16)}.button:disabled{opacity:.55;cursor:wait;transform:none}
.status{display:none;margin-top:16px;padding:13px 15px;border-radius:14px;font-size:13px}.status.show{display:block}.status.ok{background:#dfeee7;color:#214e3f}.status.error{background:#f6dfdd;color:#7b302b}.section-title{font:400 28px var(--serif);margin:34px 0 16px}.hp{position:absolute!important;left:-9999px!important}
/* ── What happens next ───────────────────────────────────────────
   The stages a buyer sees after sending the brief. Same four we move
   the order through internally, so the two never drift apart. */
.track{list-style:none;margin:0;padding:0;position:relative}
.track:before{content:'';position:absolute;left:11px;top:12px;bottom:14px;width:1px;background:var(--line)}
.track li{position:relative;padding:0 0 26px 42px}
.track li:last-child{padding-bottom:0}
.track li:before{content:'';position:absolute;left:5px;top:5px;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--brand-soft);background:var(--paper)}
.track li.is-now:before{border-color:var(--brand);background:var(--brand);box-shadow:0 0 0 4px rgba(24,59,53,.12)}
.track b{display:block;font-size:15px;font-weight:500}
.track p{margin:4px 0 0;color:var(--ink-soft);font-size:13.5px;line-height:1.7}

/* ── Site footer ─────────────────────────────────────────────────
   The same green footer the landing page ends on, rendered by
   assets/service-chrome.js so every service page shares one source. */
.site-foot{--fg:var(--cream);--fg-soft:rgba(245,240,227,.6);--fdark:#183b35;--fline:rgba(245,240,227,.15);position:relative;overflow:hidden;margin-top:80px;background:var(--fdark);color:var(--fg)}
.site-foot:before{content:'';position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;filter:blur(52px);background:radial-gradient(ellipse 40% 46% at 14% 12%,rgba(44,97,83,.9),transparent 64%),radial-gradient(ellipse 46% 50% at 88% 8%,rgba(227,200,148,.16),transparent 62%),radial-gradient(ellipse 60% 40% at 50% 104%,rgba(109,157,136,.28),transparent 66%)}
.site-foot .shell{position:relative;z-index:1}
.site-foot a{color:var(--fg);text-decoration:none;transition:color .2s,opacity .2s}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:44px;padding:56px 0 38px}
.foot-lead{display:flex;flex-direction:column;gap:18px;max-width:400px}
.foot-logo{display:block;width:104px;height:31px;background:var(--fg);-webkit-mask:url('/assets/logo.svg') no-repeat left center;mask:url('/assets/logo.svg') no-repeat left center;-webkit-mask-size:contain;mask-size:contain}
.foot-lead p{margin:0;max-width:34ch;font-size:13.5px;font-weight:300;line-height:1.6;color:var(--fg-soft)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.foot-col h5{margin:0 0 13px;font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-soft)}
.foot-col a{display:block;padding:6px 0;font-size:14px;opacity:.78}
.foot-col a:hover{opacity:1}
.foot-mid{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:32px 0;border-top:1px solid var(--fline)}
.foot-tag{margin:0;max-width:15ch;font:400 clamp(23px,2.8vw,34px)/1.06 var(--serif)}
.foot-social{display:flex;gap:10px;align-items:center}
.foot-social a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--fline);border-radius:999px;font-size:12.5px;transition:border-color .2s,transform .2s}
.foot-social a:hover{border-color:var(--fg);transform:translateY(-2px)}
.foot-social svg{flex:none;width:15px;height:15px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 24px;border-top:1px solid var(--fline);font-size:12px;font-weight:300;color:var(--fg-soft)}
.foot-giant{overflow:hidden;line-height:0;height:clamp(56px,11vw,132px)}
.foot-giant i{display:block;width:100%;aspect-ratio:104/31;background:var(--fg);opacity:.9;-webkit-mask:url('/assets/logo.svg') no-repeat center top;mask:url('/assets/logo.svg') no-repeat center top;-webkit-mask-size:100% auto;mask-size:100% auto}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media(max-width:940px){.checkout-grid{grid-template-columns:1fr}.summary-col{position:static;order:-1}}
@media(max-width:760px){.foot-top{grid-template-columns:1fr;gap:32px}}
@media(max-width:520px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
/* auto-fill would drop to a single 300px card here, which is a very long scroll */
.picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.top{top:8px;margin-top:8px;padding:7px 7px 7px 16px}.logo{width:78px;height:24px;flex-basis:78px}.back{min-height:40px;padding:8px 13px;font-size:11px}.grid,.meta{grid-template-columns:1fr}.hero{padding-top:58px}.card{padding:22px;border-radius:22px}.summary{padding:22px}.step-head h2{font-size:21px}}
/* Below 430px the pill runs out of room — the arrow alone carries the
   "back" affordance, so the links keep an aria-label for screen readers. */
@media(max-width:430px){.shell{padding-left:14px;padding-right:14px}.choices{grid-template-columns:1fr}.back span{display:none}.back{padding:8px 15px}.lang a{min-height:34px;padding:7px 10px;font-size:9.5px}.hero h1{font-size:42px}.opt{gap:11px;padding:14px 15px}.opt-price{font-size:15px}}