/* Sofia Sans + Sofia Sans Condensed by Lettersoup (SIL OFL 1.1, see fonts/OFL-LICENSE.txt).
   Self-hosted, so the site makes no requests to third-party servers. */
@font-face{font-family:"Sofia Sans";font-style:normal;font-weight:1 1000;font-display:swap;src:url("../fonts/sofia-sans-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Sofia Sans";font-style:normal;font-weight:1 1000;font-display:swap;src:url("../fonts/sofia-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans Condensed";font-style:normal;font-weight:1 1000;font-display:swap;src:url("../fonts/sofia-sans-condensed-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Sofia Sans Condensed";font-style:normal;font-weight:1 1000;font-display:swap;src:url("../fonts/sofia-sans-condensed-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =========================================================
   PetkovWeb main stylesheet
   Colours: pine #133D30, sun #F3C13A, paper #F7F8F4, sage #E4ECE5, moss #4D695D
   Type: Sofia Sans + Sofia Sans Condensed (Bulgarian letterforms by default)
   ========================================================= */
:root{
  --pine:#133D30;
  --pine-deep:#0D2C22;
  --pine-soft:#1F4F40;
  --sun:#F3C13A;
  --sun-deep:#E5AD1F;
  --paper:#F7F8F4;
  --sage:#E4ECE5;
  --white:#FFFFFF;
  --moss:#4D695D;
  --line:rgba(19,61,48,.14);
  --line-strong:rgba(19,61,48,.32);
  --on-pine:#F7F8F4;
  --on-pine-2:rgba(247,248,244,.76);
  --on-pine-line:rgba(247,248,244,.18);
  --error-on-pine:#FFBFB0;

  --f-text:"Sofia Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-display:"Sofia Sans Condensed","Sofia Sans","Arial Narrow",system-ui,sans-serif;

  --wrap:88rem;
  --gutter:clamp(20px,4vw,72px);
  --header-h:72px;
  --sec:clamp(88px,10vw,144px);
  --ease:cubic-bezier(.22,.72,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--pine);font-family:var(--f-text);font-size:1.125rem;line-height:1.6;font-weight:430;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.no-scroll{overflow:hidden}
svg{display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2{font-family:var(--f-display);font-weight:790;line-height:.98;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(3rem,1.2rem + 4.7vw,5.6rem)}
h2{font-size:clamp(2.3rem,1.45rem + 2.5vw,3.9rem)}
h3{font-size:1.3rem;font-weight:720;line-height:1.25;letter-spacing:-.004em}
p{text-wrap:pretty}
strong{font-weight:760}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.lead{font-size:clamp(1.125rem,1rem + .45vw,1.3125rem);line-height:1.55;color:var(--moss);max-width:34em;text-wrap:balance}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--pine);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--sun)}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--pine);color:var(--paper);padding:12px 16px;border-radius:10px;font-weight:650;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Buttons & links ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border:0;border-radius:12px;background:var(--sun);color:var(--pine);font:inherit;font-size:1.0625rem;font-weight:740;line-height:1.1;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sun-deep);transform:translateY(102%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:none}
.btn:active{transform:translateY(1px) scale(.985)}
.btn[disabled]{cursor:progress;opacity:.75}
.btn-sm{min-height:44px;padding:0 18px;font-size:1rem;border-radius:10px}
.btn-block{width:100%}
.text-link{font-weight:680;text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:7px;transition:text-decoration-color .25s,text-underline-offset .25s}
.text-link:hover{text-decoration-color:currentColor;text-underline-offset:9px}

/* ---------- Logo ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:1.3rem;line-height:1;letter-spacing:-.01em}
.brand-mark{width:34px;height:34px;flex:none;transition:transform .55s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-10deg)}
.bm-bg{fill:var(--pine)} .bm-p{fill:var(--paper)} .bm-dot{fill:var(--sun)}
.brand-word b{font-weight:800}
.brand-word span{font-weight:500;color:var(--moss)}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header.is-scrolled{background:rgba(247,248,244,.92);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
/* backdrop-filter would become the containing block of the fixed mobile menu, so drop it while the menu is open */
.site-header.menu-open{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--line)}
.header-inner{height:100%;display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.header-inner .brand{margin-right:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav-link{position:relative;padding:6px 0;font-size:1.02rem;font-weight:580;text-decoration:none}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{display:none}
.header-actions{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;position:relative;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--pine);cursor:pointer}
.nav-toggle span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.nav-toggle span:first-child{top:17px}
.nav-toggle span:last-child{top:25px}
.nav-toggle[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(var(--header-h) + 56px) 0 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,4vw,56px);align-items:center}
.hero-copy{position:relative;z-index:2;padding-block:24px}
.hero-copy h1{max-width:9.6em}
/* Highlighter stroke over "Сайт за вашия бизнес": crosses the lower half of the letters and runs a little below them */
.hl{padding:0 .08em;margin:0 -.08em;background-image:linear-gradient(rgba(243,193,58,.6),rgba(243,193,58,.6));background-repeat:no-repeat;background-size:100% .44em;background-position:0 76%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .hl{animation:hl-draw .9s var(--ease) .35s backwards}
@keyframes hl-draw{from{background-size:0 .44em}}
.hero-copy .lead{margin-top:28px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:40px}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(24px,3vw,52px) clamp(20px,2.6vw,44px)}
/* Yellow panel: starts at the left edge of the illustration box and runs off the right edge of the screen */
.hero-visual::before{content:"";position:absolute;top:0;bottom:0;left:0;right:-100vw;background:var(--sun);border-radius:32px 0 0 32px;pointer-events:none}

/* ---------- Hero demo (SVG) ---------- */
.demo{--biz:#2F5BD3;--biz-soft:#DFE7FB;position:relative;width:100%;height:auto;overflow:visible}
/* The yellow panel extends past the column to the right edge of the screen.
   Shift the illustration right by half of that overhang so it sits centred on the visible yellow. */
.hero-visual .demo{transform:translateX(calc((100vw - min(100vw, var(--wrap) + 2 * var(--gutter))) / 4 + var(--gutter) / 2))}
.demo text{font-family:var(--f-text)}
.demo use{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.d-frame{fill:#fff}
.d-mon{fill:#0B261D}
.d-stand{fill:#0B261D}
.d-cam{fill:#2B4C40}
.d-bar{fill:#EEF2EE}
.d-barline{stroke:#DFE6E0;stroke-width:1}
.d-dot{fill:#D2DBD4}
.d-url-bg{fill:#fff;stroke:#DAE2DC;stroke-width:1}
.d-lock{color:#46614F;stroke-width:2.2}
.d-url-text{font-size:13px;font-weight:560;fill:#35503F;letter-spacing:.01em}
.d-caret{fill:#35503F;opacity:0}
.d-ink{fill:#1B2A23}
.d-ink2{fill:#5A6B63}
.d-mute{fill:#E3E9E4}
.d-mute2{fill:#D3DBD5}
.d-foot{fill:#F2F5F2}
.biz-fill{fill:var(--biz);transition:fill .6s var(--ease)}
.biz-soft{fill:var(--biz-soft);transition:fill .6s var(--ease)}
.biz-icon{color:var(--biz);transition:color .6s var(--ease)}
.d-h{font-size:30px;font-weight:800;fill:#15211B;letter-spacing:-.01em}
.d-cta-t{font-size:13px;font-weight:720;fill:#fff}
.d-press{fill:#000;opacity:0}
.d-phone-body{fill:#0B261D}
.d-screen{fill:#fff}
.d-island{fill:#0B261D}
.d-burger{fill:none;stroke:#1B2A23;stroke-width:2;stroke-linecap:round}
.d-h-m{font-size:15px;font-weight:800;fill:#15211B}
.d-cta-m{font-size:9.5px;font-weight:720;fill:#fff}
.d-cursor{opacity:0}
.d-cursor path{fill:var(--pine);stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.d-ripple{fill:none;stroke:#fff;stroke-width:2.5;opacity:0}
.biz-swap{transition:opacity .28s var(--ease),transform .28s var(--ease)}
.is-swapping .biz-swap{opacity:0;transform:translateY(5px)}

/* Page-load sequence: the only motion on the page that runs by itself */
.play .d-b-in{animation:d-pop .8s var(--ease) .1s backwards;transform-box:fill-box;transform-origin:50% 70%}
.play .d-caret{animation:d-blink .9s steps(1) infinite}
.play.typed .d-caret{animation:none;opacity:0}
.play .d-nav{animation:d-fade .5s var(--ease) .95s backwards}
.play .d-grow{animation:d-grow .7s var(--ease) backwards;transform-box:fill-box;transform-origin:0 50%}
.play .d-kick{animation-delay:1.05s}
.play .d-l1{animation-delay:1.22s}
.play .d-l2{animation-delay:1.3s}
.play .d-h{animation:d-up .6s var(--ease) 1.12s backwards}
.play .d-cta{animation:d-pop .5s var(--ease) 1.4s backwards;transform-box:fill-box;transform-origin:50% 50%}
.play .d-img{animation:d-pop .7s var(--ease) 1.2s backwards;transform-box:fill-box;transform-origin:50% 50%}
.play .d-svc{animation:d-up .6s var(--ease) backwards}
.play .d-svc-1{animation-delay:1.5s}
.play .d-svc-2{animation-delay:1.58s}
.play .d-svc-3{animation-delay:1.66s}
.play .d-foot-g{animation:d-fade .6s var(--ease) 1.75s backwards}
.play .d-p-in{animation:d-rise .9s var(--ease) 1.6s backwards}
.play .d-cursor{animation:d-cursor 1.8s var(--ease) 2.3s both}
.play .d-press{animation:d-press .45s ease-out 3.38s}
.play .d-ripple{animation:d-ripple .65s ease-out 3.38s;transform-box:fill-box;transform-origin:center}
@keyframes d-pop{from{opacity:0;transform:scale(.94)}}
@keyframes d-fade{from{opacity:0}}
@keyframes d-up{from{opacity:0;transform:translateY(10px)}}
@keyframes d-grow{from{transform:scaleX(0)}}
@keyframes d-rise{from{opacity:0;transform:translateY(60px)}}
@keyframes d-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes d-cursor{
  0%{opacity:0;transform:translate(600px,520px)}
  10%{opacity:1}
  55%{transform:translate(204px,266px)}
  60%{transform:translate(204px,266px) scale(.84)}
  66%{transform:translate(204px,266px) scale(1)}
  88%{opacity:1;transform:translate(204px,266px)}
  100%{opacity:0;transform:translate(220px,288px)}
}
@keyframes d-press{0%{opacity:0}30%{opacity:.18}100%{opacity:0}}
@keyframes d-ripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.8)}}

/* ---------- Business types ---------- */
.who{background:var(--sage);padding-block:clamp(72px,9vw,120px)}
.who-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:start}
.who h2{position:sticky;top:calc(var(--header-h) + 32px);font-size:clamp(2rem,1.3rem + 2vw,3.1rem);max-width:10.5em}
.pics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.pic{display:flex;flex-direction:column;gap:14px;min-height:128px;padding:26px 18px 22px;background:var(--sage)}
.pic svg{width:36px;height:36px;overflow:visible;fill:none;stroke:var(--pine);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pic span{font-size:1.02rem;font-weight:620;line-height:1.25}
.pic svg *{transform-box:view-box}
.p-fork,.p-knife,.p-blade-a,.p-blade-b,.p-wrench,.p-spark,.p-hat,.p-bell,.p-fresh,.p-smoke,.p-tulip,.p-plus,.p-flash,.p-lens,.p-toe,.p-steam{transition:transform .45s var(--ease),opacity .3s var(--ease)}
.p-fork{transform-origin:8.2px 20.5px}
.p-knife{transform-origin:16.8px 20.5px}
.p-blade-a,.p-blade-b{transform-origin:13.3px 12px}
.p-wrench{transform-origin:17px 7px}
.p-spark{transform-origin:21px 2.5px;transform:scale(0);opacity:0}
.p-hat{transform-origin:12px 17.5px}
.p-fresh,.p-smoke{opacity:0;transform:translateY(1.5px)}
.p-tulip{transform-origin:12px 21px}
.p-plus{transform-origin:12px 12px}
.p-flash{transform-origin:20px 4.5px;transform:scale(.3);opacity:0}
.p-lens{transform-origin:12px 13.5px}
.pic-more{grid-column:1 / -1;margin-top:-1px;flex-direction:row;align-items:center;gap:18px;min-height:0}
.pic-more span{font-weight:500}
.pic-more strong{font-weight:760}
.p-more-bg{fill:var(--sun);stroke:none}
@media (hover:hover){
  .pic:hover .p-fork{transform:rotate(-10deg)}
  .pic:hover .p-knife{transform:rotate(10deg)}
  .pic:hover .p-steam{animation:p-steam 1.4s var(--ease) infinite}
  .pic:hover .p-blade-a{animation:p-snip-a .7s var(--ease) 2}
  .pic:hover .p-blade-b{animation:p-snip-b .7s var(--ease) 2}
  .pic:hover .p-wrench{animation:p-turn .9s var(--ease)}
  .pic:hover .p-spark{transform:scale(1) rotate(90deg);opacity:1}
  .pic:hover .p-fresh,.pic:hover .p-smoke{opacity:1;transform:none}
  .pic:hover .p-hat{animation:p-bob .8s var(--ease)}
  .pic:hover .p-bell{animation:p-lift .9s var(--ease)}
  .pic:hover .p-tulip{animation:p-sway 1.1s var(--ease)}
  .pic:hover .p-plus{transform:rotate(90deg)}
  .pic:hover .p-flash{transform:scale(1);opacity:1}
  .pic:hover .p-lens{transform:scale(.8)}
  .pic:hover .p-toe-1{transform:translate(-.7px,-.3px)}
  .pic:hover .p-toe-2{transform:translate(-.3px,-.8px)}
  .pic:hover .p-toe-3{transform:translate(.3px,-.8px)}
  .pic:hover .p-toe-4{transform:translate(.7px,-.3px)}
}
@keyframes p-steam{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-2px);opacity:.35}}
@keyframes p-snip-a{50%{transform:rotate(-22deg)}}
@keyframes p-snip-b{50%{transform:rotate(22deg)}}
@keyframes p-turn{35%{transform:rotate(-28deg)}70%{transform:rotate(6deg)}}
@keyframes p-bob{30%{transform:translateY(-2px) rotate(-7deg)}65%{transform:translateY(0) rotate(3deg)}}
@keyframes p-lift{40%{transform:translateY(-3.5px)}70%{transform:translateY(.6px)}}
@keyframes p-sway{30%{transform:rotate(8deg)}65%{transform:rotate(-5deg)}85%{transform:rotate(1.5deg)}}

/* ---------- Package & price ---------- */
.offer{padding-block:var(--sec)}
.offer-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);gap:clamp(40px,6vw,96px);align-items:start}
.included{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 44px;margin-top:60px}
.inc-ic{width:46px;height:46px;margin-bottom:20px;fill:none;stroke:var(--pine);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.inc-ic .fp{fill:var(--paper)}
.inc-ic .fs{fill:var(--sun)}
.included h3{margin-bottom:8px}
.included p{max-width:30em;font-size:1.0625rem;color:var(--moss)}
.offer-head{max-width:46rem}
.offer-head .lead{margin-top:16px}
.offer-pk{margin-top:clamp(72px,8vw,112px)}
.included-wide{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.included-wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
.offer-more{max-width:42em;margin-top:56px;padding-top:36px;border-top:1px solid var(--line)}
.offer-more p{margin:10px 0 20px;color:var(--moss)}
.price{position:sticky;top:calc(var(--header-h) + 28px)}
.plate{padding:clamp(28px,3vw,40px);border-radius:24px;background:var(--pine);color:var(--on-pine)}
.plate-name{font-size:1.125rem;font-weight:680}
.plate-amount{display:flex;align-items:baseline;gap:.1em;margin-top:18px;font-family:var(--f-display);font-size:clamp(5.5rem,4rem + 4vw,8rem);font-weight:800;line-height:.85;letter-spacing:-.02em;color:var(--sun)}
.plate-amount .cur{font-size:.5em}
.plate-once{margin-top:12px;color:var(--on-pine-2)}
.plate-lines{margin:28px 0;border-top:1px solid var(--on-pine-line);font-size:1.0625rem}
.plate-lines div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--on-pine-line)}
.plate-lines dt{white-space:nowrap;color:var(--on-pine-2)}
.plate-lines dd{font-weight:700;text-align:right}
.plate-small{margin-top:18px;font-size:.95rem;line-height:1.5;color:var(--on-pine-2)}

/* ---------- Domain & hosting ---------- */
.own{padding-block:var(--sec);background:var(--sage)}
.own-head{max-width:780px}
.own-head .lead{margin-top:24px}
.tree{margin-top:64px}
.tree-root{display:inline-flex;align-items:center;gap:12px;padding:12px 22px 12px 14px;border-radius:14px;background:var(--pine);color:var(--on-pine);font-size:1.125rem;font-weight:720}
.tree-root svg{width:28px;height:28px;fill:none;stroke:var(--sun);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tree-list{margin:0 0 0 32px}
.tree-row{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4.2fr);gap:12px 32px;align-items:center;padding:28px 0 28px 58px;border-bottom:1px solid var(--line)}
.tree-row::before{content:"";position:absolute;left:0;top:0;width:42px;height:47px;border-left:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);border-bottom-left-radius:14px;transition:border-color .3s var(--ease)}
.tree-row:first-child::before{top:-18px;height:65px}
.tree-row:not(:last-child)::after{content:"";position:absolute;left:0;top:30px;bottom:-1px;border-left:2px solid var(--line-strong)}
.tree-row:hover::before{border-color:var(--pine)}
.tree-what{display:flex;align-items:center;gap:14px}
.tree-what svg{width:38px;height:38px;flex:none;fill:none;stroke:var(--pine);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.tree-row:hover .tree-what svg{transform:rotate(-8deg)}
.tree-what .fs{fill:var(--sun)}
.tree-what .fp{fill:var(--sage)}
.tree-what .tw-mark *{stroke:none}
.tree-desc{color:var(--moss)}
.tree-cost{font-weight:560}
.tree-cost strong{font-weight:790}
.tree-total{max-width:46rem;margin-top:28px;color:var(--moss)}
.tree-total strong{color:var(--pine)}
.own-note{max-width:46rem;margin-top:56px;padding:26px 30px;border-left:4px solid var(--sun);border-radius:0 14px 14px 0;background:rgba(255,255,255,.55)}
.own-note p{margin-top:8px;color:var(--moss)}

/* ---------- Process ---------- */
.steps{padding-block:var(--sec)}
.route{--gap:28px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--gap);margin-top:64px}
.stop{position:relative}
.stop:not(:last-child)::before{content:"";position:absolute;top:21px;left:23px;right:calc(-1 * var(--gap) - 23px);height:4px;border-radius:2px;background:var(--pine)}
.stop-dot{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border:3px solid var(--pine);border-radius:50%;background:var(--paper);font-family:var(--f-display);font-size:1.3rem;font-weight:800;line-height:1;transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.stop:last-child .stop-dot{background:var(--sun)}
.stop:hover .stop-dot{transform:scale(1.1);background:var(--pine);color:var(--paper)}
.stop h3{margin-top:26px}
.stop p{margin-top:10px;max-width:24em;font-size:1.0625rem;color:var(--moss)}

/* ---------- FAQ ---------- */
.faq{padding-block:var(--sec);background:var(--sage)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,88px);align-items:start}
.faq-intro{position:sticky;top:calc(var(--header-h) + 32px)}
.faq-intro p{margin-top:22px;color:var(--moss)}
.faq-intro a{font-weight:680;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:4px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa h3{font-size:1.2rem;font-weight:680;line-height:1.35}
.qa-btn{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:24px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.qa-btn:hover .qa-q{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--sun);text-underline-offset:5px}
.qa-icon{position:relative;flex:none;width:32px;height:32px;border:1.5px solid var(--line-strong);border-radius:50%;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.qa-icon::before,.qa-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:currentColor;transition:transform .4s var(--ease)}
.qa-icon::after{transform:rotate(90deg)}
.qa.is-open .qa-icon{background:var(--sun);border-color:var(--sun)}
.qa.is-open .qa-icon::after{transform:rotate(0deg)}
.qa-panel{display:grid;grid-template-rows:1fr}
.js .qa-panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s linear .45s}
.js .qa.is-open .qa-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s var(--ease),visibility 0s linear 0s}
.qa-panel > div{overflow:hidden}
.qa-panel p{max-width:38em;padding:0 56px 26px 0;color:var(--moss)}

/* ---------- Contact ---------- */
.contact{padding-block:var(--sec);background:var(--pine);color:var(--on-pine)}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact-intro p{margin-top:22px;max-width:28em;color:var(--on-pine-2)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:44px}
.mail-link{font-family:var(--f-display);font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem);font-weight:760;line-height:1.1;color:var(--sun);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease)}
.mail-link:hover{background-size:100% 2px}
.mail-copy{min-height:38px;padding:0 14px;border:1.5px solid var(--on-pine-line);border-radius:9px;background:transparent;color:var(--on-pine);font:inherit;font-size:.95rem;font-weight:620;cursor:pointer;transition:border-color .25s,background-color .25s}
.mail-copy:hover{border-color:var(--on-pine-2);background:rgba(247,248,244,.06)}
.mail-phone{margin-top:14px;font-size:1.15rem;color:var(--on-pine-2)}
.mail-phone a{font-weight:760;color:var(--on-pine);text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:4px}
.mail-note{margin-top:14px;font-size:1rem;color:var(--on-pine-2)}
.form{display:grid;gap:20px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field label{display:block;margin-bottom:8px;font-size:.98rem;font-weight:640}
.field input,.field textarea{display:block;width:100%;padding:14px 16px;border:2px solid transparent;border-radius:12px;background:var(--paper);color:var(--pine);font:inherit;font-size:1.0625rem;line-height:1.45;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7C8F86;opacity:1}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sun);box-shadow:0 0 0 4px rgba(243,193,58,.3)}
.field [aria-invalid="true"]{border-color:var(--error-on-pine)}
.field-err{margin-top:8px;font-size:.95rem;font-weight:560;color:var(--error-on-pine)}
.field-err:empty{display:none}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:4px}
.form-note{flex:1 1 240px;font-size:.92rem;line-height:1.5;color:var(--on-pine-2)}
.form-note a{color:var(--on-pine)}
.form-status{font-weight:600}
.form-status:empty{display:none}
.form-status.is-ok{color:var(--sun)}
.form-status.is-err{color:var(--error-on-pine)}

/* ---------- Footer ---------- */
.site-footer{padding:72px 0 36px;background:var(--pine-deep);color:var(--on-pine-2);font-size:1rem}
.footer-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);gap:40px}
.site-footer .brand{color:var(--on-pine)}
.site-footer .brand-word span{color:var(--on-pine-2)}
.site-footer .bm-bg{fill:var(--on-pine)}
.site-footer .bm-p{fill:var(--pine)}
.footer-brand p{margin-top:18px;max-width:22em}
.footer-links{display:grid;gap:12px;align-content:start}
.footer-links a{width:fit-content;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .2s}
.footer-links a:hover{color:var(--on-pine);background-size:100% 1px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--on-pine-line);font-size:.95rem}
.footer-bottom a{text-decoration:none}
.footer-bottom a:hover{color:var(--on-pine);text-decoration:underline;text-underline-offset:4px}

/* ---------- Form extras ---------- */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Inner pages (legal, 404) ---------- */
.page{padding:calc(var(--header-h) + clamp(48px,7vw,96px)) 0 var(--sec)}
.page-head{max-width:46rem}
.page-head h1{font-size:clamp(2.6rem,1.5rem + 3.2vw,4.4rem)}
.page-head .lead{margin-top:22px}
.page-meta{margin-top:18px;color:var(--moss)}
.prose{max-width:46rem;margin-top:56px}
.prose h2{margin:52px 0 14px;font-size:clamp(1.6rem,1.25rem + 1vw,2.2rem);line-height:1.05}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul,.prose dl{margin:0 0 16px}
.prose ul{padding-left:1.25em;list-style:disc}
.prose li{margin:6px 0;padding-left:.2em}
.prose li::marker{color:var(--moss)}
.prose a{font-weight:620;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:4px}
.prose a:hover{text-decoration-color:currentColor}
.prose dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 24px}
.prose dt{color:var(--moss)}
.prose dd{font-weight:600}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px}
@media (max-width:560px){.prose dl{grid-template-columns:1fr;gap:2px}.prose dd{margin-bottom:10px}}

/* ---------- "Why me" page ---------- */
.why-hero{padding-bottom:clamp(64px,8vw,112px)}
.band{padding-block:var(--sec)}
.band-sage{background:var(--sage)}
.band-head{max-width:46rem}
.band-head .lead{margin-top:22px}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.vs-col{padding:clamp(26px,3vw,40px);border-radius:22px}
.vs-them{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--line)}
.vs-me{background:var(--pine);color:var(--on-pine)}
.vs-label{font-size:.95rem;font-weight:640;color:var(--moss)}
.vs-me .vs-label{color:var(--sun)}
.vs-col h3{margin-top:6px;font-family:var(--f-display);font-size:clamp(1.7rem,1.3rem + 1vw,2.3rem);font-weight:790;line-height:1.05}
.vs-col ul{margin-top:24px;border-top:1px solid var(--line)}
.vs-me ul{border-top-color:var(--on-pine-line)}
.vs-col li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.vs-me li{justify-content:flex-start;gap:12px;border-bottom-color:var(--on-pine-line);font-weight:600}
.vs-them li span{text-align:right;color:var(--moss)}
.vs-them li strong{font-weight:700}
.vs-me li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23133D30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;align-self:center}
.vs-foot{margin-top:20px;color:var(--moss)}
.vs-me .vs-foot{color:var(--on-pine-2)}
.pull{max-width:30em;margin-top:clamp(48px,6vw,72px);font-family:var(--f-display);font-size:clamp(1.7rem,1.2rem + 1.5vw,2.6rem);font-weight:760;line-height:1.12;text-wrap:balance}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;margin-top:56px}
.svc h3{padding-bottom:14px;border-bottom:3px solid var(--sun)}
.svc ul{margin-top:16px;display:grid;gap:10px}
.svc li{color:var(--moss)}
.included.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.inc-ic .fs-stroke{stroke:#C2410C}
.calc{max-width:46rem;margin-top:48px;padding:28px 32px;border-radius:18px;background:var(--sage)}
.calc-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-family:var(--f-display);font-size:clamp(1.8rem,1.3rem + 1.6vw,2.8rem);font-weight:780;line-height:1}
.calc-op{color:var(--moss);font-weight:500}
.calc-sum strong{padding:0 .12em;background:linear-gradient(transparent 55%,rgba(243,193,58,.7) 55%)}
.calc-text{margin-top:14px;color:var(--moss)}
.calc-text strong{color:var(--pine)}
@media (max-width:1000px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .included.trio{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .vs{grid-template-columns:minmax(0,1fr)}
  .vs-them li{flex-direction:column;gap:2px}
  .vs-them li span{text-align:left}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:minmax(0,1fr)}
}
.glossary{max-width:62rem;margin:56px 0 0}
.glossary div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:8px 40px;padding:26px 0;border-top:1px solid var(--line)}
.glossary dt{font-weight:760;font-size:1.25rem}
.glossary dd{margin:0;color:var(--moss)}
.cta-band{background:var(--pine);color:var(--on-pine)}
.cta-band h2{max-width:14em}
.cta-band .lead{margin-top:22px;color:var(--on-pine-2)}
.cta-band .text-link{color:var(--on-pine)}
@media (max-width:760px){
                      .glossary div{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Projects page ---------- */
.proj-hero{padding-bottom:clamp(56px,7vw,104px);background:var(--sage)}
.proj-features{padding-block:clamp(64px,8vw,120px) var(--sec)}
.proj-feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.proj-feature + .proj-feature{margin-top:clamp(72px,9vw,128px)}
.proj-feature:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.proj-feature:nth-child(even) .cover{order:2}
.proj-label{font-weight:640;color:var(--moss)}
.proj-info h2{margin-top:10px}
.proj-text{margin-top:16px;color:var(--moss)}
.proj-did{margin-top:22px;display:grid;gap:10px}
.proj-did li{position:relative;padding-left:30px}
.proj-did li::before{content:"";position:absolute;left:0;top:calc((1lh - 20px) / 2);width:20px;height:20px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23133D30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.proj-note{margin-top:22px;font-weight:700}
.proj-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px}
.ext{width:.9em;height:.9em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 44px;margin-top:56px}
.proj-tile h3{margin-top:24px}
.proj-tile h3 a{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.proj-tile h3 a:hover{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:5px}
.proj-meta{margin-top:4px;font-size:1rem;font-weight:600;color:var(--moss)}
.proj-tile .proj-text{margin-top:10px}

/* Browser-framed cover (designed preview, or a real screenshot) */
.cover{display:block;container-type:inline-size;overflow:hidden;border-radius:16px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 0 0 1px var(--line),0 24px 48px -28px rgba(19,61,48,.45);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cover:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--line),0 32px 56px -28px rgba(19,61,48,.55)}
.cover-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;background:#EEF2EE;border-bottom:1px solid #DFE6E0}
.cover-bar i{width:9px;height:9px;flex:none;border-radius:50%;background:#D2DBD4}
.cover-url{flex:1;min-width:0;margin-left:10px;padding:3px 10px;border:1px solid #DAE2DC;border-radius:7px;background:#fff;font-size:.8rem;font-weight:560;color:#35503F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cover-shot{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:top}
.cover-body{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3.2cqi;aspect-ratio:2/1;padding:11cqi 7cqi 6cqi;background:var(--cv-bg);color:var(--cv-fg)}
.cover-brand{position:absolute;top:5.5cqi;left:7cqi;font-size:2.6cqi;font-weight:800;opacity:.85}
.cover-title{max-width:58%;font-size:6.4cqi;font-weight:800;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.cover-lines{display:grid;gap:1.6cqi}
.cover-lines i{display:block;height:1.3cqi;width:44%;border-radius:1cqi;background:currentColor;opacity:.22}
.cover-lines i + i{width:32%}
.cover-media{position:absolute;top:22%;right:7cqi;bottom:16%;width:28%;border-radius:2cqi;background:color-mix(in srgb,var(--cv-fg) 10%,transparent)}
.cover-media::after{content:"";position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;border-radius:50%;background:var(--cv-accent);transform:translate(-50%,-50%)}
.cover-btn{width:20cqi;height:5.2cqi;border-radius:1.2cqi;background:var(--cv-accent)}
@media (max-width:900px){
  .proj-feature{grid-template-columns:minmax(0,1fr)}
  .proj-feature:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .proj-feature:nth-child(even) .cover{order:0}
}
@media (max-width:640px){
  .proj-grid{grid-template-columns:minmax(0,1fr);gap:56px}
}

/* ---------- About page ---------- */
.about-hero{padding-bottom:clamp(56px,7vw,96px)}
.about-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);align-items:start}
.about-story h2{margin-bottom:28px}
.about-story p{max-width:36em;color:var(--moss)}
.about-story p + p{margin-top:18px}
.facts{position:sticky;top:calc(var(--header-h) + 32px);padding:clamp(24px,3vw,36px);border-radius:22px;background:var(--paper)}
.facts h2{font-size:clamp(1.6rem,1.3rem + .8vw,2rem)}
.facts dl{margin:18px 0 0}
.facts dl div{padding:12px 0;border-top:1px solid var(--line)}
.facts dt{font-size:.92rem;font-weight:600;color:var(--moss)}
.facts dd{margin:2px 0 0;font-weight:640}
@media (max-width:900px){
  .about-cols{grid-template-columns:minmax(0,1fr)}
  .facts{position:static}
}

/* ---------- Pricing page ---------- */
.price-hero{padding-bottom:clamp(56px,7vw,104px);background:var(--sage)}
.pkg{padding-block:clamp(64px,8vw,120px) var(--sec)}
.pkg-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);gap:clamp(40px,6vw,96px);align-items:center}
.pkg .lead{margin-top:18px}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin-top:32px}
.checks li{position:relative;padding-left:30px;font-weight:600}
.checks li::before{content:"";position:absolute;left:0;top:.25em;width:20px;height:20px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23133D30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.price-list{margin-top:48px;border-top:1px solid var(--line-strong)}
.price-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 40px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.price-list h3{font-size:1.2rem}
.price-list li p{margin-top:4px;max-width:40em;color:var(--moss)}
.price-list li .price-tag{margin-top:0;max-width:none;text-align:right;white-space:nowrap;color:var(--pine)}
.price-tag strong{display:block;font-family:var(--f-display);font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem);font-weight:800;line-height:1}
.price-tag span{font-size:.92rem;color:var(--moss)}
.custom-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);gap:clamp(40px,6vw,96px);align-items:start}
.custom-grid .lead{margin-top:18px}
.custom-grid .checks{grid-template-columns:minmax(0,1fr)}
.no-shop{max-width:46rem;margin-top:28px;padding-left:16px;border-left:4px solid var(--sun);font-weight:700}
.costs{padding:clamp(24px,3vw,36px);border-radius:22px;background:var(--paper)}
.costs h3{font-size:1.3rem}
.costs > p{margin-top:6px;color:var(--moss)}
.costs dl{margin:18px 0 0}
.costs dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.costs dt{color:var(--moss)}
.costs dd{margin:0;font-weight:680;text-align:right}
.costs-stack dl div{flex-direction:column;gap:2px}
.costs-stack dd{text-align:left}
.costs-note{margin-top:16px;font-size:.95rem;color:var(--moss)}
@media (max-width:900px){
  .pkg-grid,.custom-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .checks{grid-template-columns:minmax(0,1fr)}
  .price-list li{grid-template-columns:minmax(0,1fr)}
  .price-list li .price-tag{text-align:left}
  .price-tag strong{display:inline;margin-right:8px}
  .costs dl div{flex-direction:column;gap:2px}
  .costs dd{text-align:left}
}

/* ---------- How I work page ---------- */
.how-hero{padding-bottom:clamp(40px,5vw,64px)}
.how-steps{padding-bottom:var(--sec)}
.timeline{--gap:40px;display:grid;gap:var(--gap);max-width:52rem}
.timeline li{position:relative;min-height:46px;padding-left:76px}
.timeline .stop-dot{position:absolute;left:0;top:0}
.timeline li:not(:last-child)::before{content:"";position:absolute;top:23px;left:21px;bottom:calc(-1 * var(--gap) - 23px);width:4px;border-radius:2px;background:var(--pine)}
.timeline li:last-child .stop-dot{background:var(--sun)}
.timeline h3{margin-top:9px}
.timeline p{margin-top:8px;max-width:40em;color:var(--moss)}
.how-more{margin-top:40px}
@media (max-width:640px){
  .timeline li{padding-left:64px}
}

/* ---------- Packages (home + pricing) ---------- */
/* the package block itself is a regular section: .pkg-grid with the price on the left and .costs on the right */
.pk-eyebrow{font-weight:760;color:var(--moss)}
.pk-sec h2{margin-top:10px}
.pk-amount{display:flex;align-items:baseline;gap:.1em;margin-top:28px;font-family:var(--f-display);font-size:clamp(4.5rem,3.4rem + 3vw,6.5rem);font-weight:800;line-height:.85;letter-spacing:-.02em;color:var(--pine)}
.pk-amount .cur{font-size:.5em}
.pk-once{margin-top:10px;color:var(--moss)}
.pk-sec .lead{margin-top:24px}
.pk-sec .costs,.band:not(.band-sage) .costs{background:var(--sage)}
.offer .pk-sec{margin-top:clamp(72px,8vw,112px)}
/* home page: compact price block, text left, price + tags right */
.pk-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.pk-home .lead{margin-top:16px;max-width:26em}
.pk-home .page-actions{margin-top:28px}
.pk-home-price{padding-left:clamp(32px,5vw,80px);border-left:1px solid var(--line)}
.pk-home .pk-amount{margin-top:0}
.pk-home .pk-amount .hl{background-size:100% .3em;background-position:0 88%}
.pk-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;max-width:30rem;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.pk-chips li{position:relative;padding-left:30px;font-weight:640}
.pk-chips li::before{content:"";position:absolute;left:0;top:calc((1lh - 20px) / 2);width:20px;height:20px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23133D30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.js .pk-home .hl{animation:none}
@media (max-width:900px){
  /* phone: heading and text, then the price and tags, then the button */
  .pk-home{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .pk-home-text{display:contents}
  .pk-home-price{order:1;margin-top:28px;padding-left:0;border-left:0}
  .pk-home .page-actions{order:2}
}
/* pricing page: "when you need more" — intro left, tiles right */
.more{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.more-intro .lead{margin-top:20px}
.more-note{margin-top:28px;padding:20px 22px;border-radius:18px;background:var(--pine);color:var(--on-pine-2);font-size:1rem}
.more-intro .no-shop{margin-top:24px}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.more-grid li{padding:24px;border-radius:20px;background:var(--sage)}
.more-ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:13px;background:var(--sun)}
.more-ic svg{width:24px;height:24px;fill:none;stroke:var(--pine);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.more-grid h3{font-size:1.15rem}
.more-grid p{margin-top:4px;font-size:.98rem;color:var(--moss)}
@media (min-width:901px){.more-intro{position:sticky;top:calc(var(--header-h) + 32px)}}
@media (max-width:900px){.more{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.more-grid,.pk-chips{grid-template-columns:minmax(0,1fr)}}
.btn-ghost{background:var(--pine);color:var(--on-pine)}
.btn-ghost::before{background:var(--pine-soft)}

/* ---------- Responsive ---------- */
/* Large screens: scale everything proportionally so the layout uses the width */
@media (min-width:1600px){html{font-size:106.25%}}
@media (min-width:1800px){html{font-size:112.5%}}
@media (min-width:2200px){html{font-size:125%}}
@media (min-width:2800px){html{font-size:150%}}

@media (max-width:1100px){
  .pics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tree-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .tree-cost{grid-column:2}
}
@media (max-width:900px){
  .route{--gap:36px;grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
  .stop{min-height:46px;padding-left:72px}
  .stop-dot{position:absolute;left:0;top:0}
  .stop:not(:last-child)::before{top:23px;left:21px;right:auto;bottom:calc(-1 * var(--gap) - 23px);width:4px;height:auto}
  .stop h3{margin-top:9px}
  .nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 40px;background:var(--paper);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
  .menu-open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear 0s}
  .nav-link{padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:2.2rem;font-weight:760;line-height:1.05}
  .nav-link::after{display:none}
  .nav-cta{display:inline-flex;margin-top:28px}
  .nav-toggle{display:inline-block}
  .hero{padding:calc(var(--header-h) + 36px) 0 0}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .hero-copy{padding-block:0}
  .hero-visual{display:block;margin-bottom:48px;padding:24px 18px 28px}
  .hero-visual::before{right:calc(-1 * var(--gutter));border-radius:24px 0 0 24px}
  .who-grid,.offer-grid,.faq-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .who h2{position:static;max-width:14em}
  .price,.faq-intro{position:static}
  .price{max-width:520px}
  .footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:760px){
  .tree-list{margin-left:18px}
  .tree-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 0 24px 46px}
  .tree-row::before{width:32px;height:43px}
  .tree-row:first-child::before{height:61px}
  .tree-cost{grid-column:auto}
}
@media (max-width:640px){
  .pics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pic{min-height:0;padding:22px 14px 20px}
  .included{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:44px}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .qa-panel p{padding-right:0}
  .footer-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:370px){
  .header-actions .btn{display:none}
  .brand{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}


/* =========================================================
   Full-screen hero and small laptop screens
   ========================================================= */

/* Home hero: exactly one screen on laptops and up (other sections keep their natural height) */
@media (min-width:901px) and (min-height:500px){
  .hero{display:flex;flex-direction:column;justify-content:center;min-height:100svh}
}

/* Home hero: fits one screen, headline and illustration scale with the screen height */
@media (min-width:901px){
  .hero{padding:calc(var(--header-h) + clamp(16px,4vh,48px)) 0 clamp(24px,6vh,72px)}
  .hero-copy h1{font-size:clamp(2.6rem,min(1.2rem + 4.7vw,10.5vh),5.6rem)}
  .hero-copy .lead{margin-top:clamp(16px,3.4vh,28px)}
  .hero-actions{margin-top:clamp(22px,4.4vh,40px)}
  .hero-visual{padding-block:clamp(18px,4vh,52px)}
  /* The illustration is 640×546; cap its width so its height fits the screen */
  .hero-visual .demo{width:min(100%,calc((100svh - var(--header-h) - 22vh) * 1.17))}
}

/* Shorter screens (13–14 inch laptops, or Windows display scaling at 125–150%):
   scale the whole site down a step, the way browser zoom would */
@media (min-width:761px) and (max-height:820px){html{font-size:93.75%}}
@media (min-width:761px) and (max-height:680px){html{font-size:87.5%}}
@media (min-width:761px) and (max-height:820px){
  :root{--header-h:64px}
  h2{font-size:clamp(2.1rem,1.2rem + 2.2vw,3.4rem)}
  .page-head h1{font-size:clamp(2.4rem,1.3rem + 2.8vw,3.8rem)}
  .pk-amount{font-size:clamp(4rem,3rem + 2.4vw,5.4rem)}
}