@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-latin-ext-standard-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-latin-standard-normal.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:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-latin-ext-standard-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-latin-standard-italic.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:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin-ext-standard-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin-standard-normal.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}
:root{
  --bg:#FAF7F2;
  --surface:#FFFFFF;
  --ink:#1F2A33;
  --muted:#56646B;
  --line:#E4DED5;
  --petrol:#1E5A5F;
  --petrol-soft:#E3EEEE;
  --lav:#ECE7F4;
  --lav-ink:#4B4168;
  --peach:#EE9A74;
  --peach-ink:#2A1A12;
  --deep:#173F44;
  --deep-ink:#EEF3F1;
  --deep-muted:#A9C2C1;
  --deep-field:#21525A;
  --sage:#8A978D;
  --todo-bg:#FFF0B8;
  --todo-ink:#5A4300;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11191C;--surface:#172226;--ink:#ECE7E0;--muted:#9AA7AC;--line:#26343A;
    --petrol:#7FC1BF;--petrol-soft:#18302F;--lav:#231F30;--lav-ink:#C9BFE6;
    --peach:#F2A98A;--peach-ink:#2A1A12;--deep:#0D2A2D;--deep-ink:#E8EFED;
    --deep-muted:#8FB0AE;--deep-field:#16393D;--sage:#A7B5A9;--todo-bg:#4A3D10;--todo-ink:#FBE7A1;
  }
}
:root[data-theme="dark"]{
  --bg:#11191C;--surface:#172226;--ink:#ECE7E0;--muted:#9AA7AC;--line:#26343A;
  --petrol:#7FC1BF;--petrol-soft:#18302F;--lav:#231F30;--lav-ink:#C9BFE6;
  --peach:#F2A98A;--peach-ink:#2A1A12;--deep:#0D2A2D;--deep-ink:#E8EFED;
  --deep-muted:#8FB0AE;--deep-field:#16393D;--sage:#A7B5A9;--todo-bg:#4A3D10;--todo-ink:#FBE7A1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--peach);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
section{padding-block:clamp(64px,9vw,112px)}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol)}
.lead{font-size:19px;color:var(--muted);max-width:60ch}
.h2{font-size:clamp(32px,4.4vw,48px)}
.todo{background:var(--todo-bg);color:var(--todo-ink);padding:1px 6px;border-radius:4px;font-size:.88em;font-weight:500;white-space:nowrap}
.note{border:1px dashed var(--line);border-radius:10px;padding:12px 16px;font-size:14px;color:var(--muted);background:var(--surface)}
.note b{color:var(--ink)}

/* preview banner */
.preview{background:var(--todo-bg);color:var(--todo-ink);font-size:13.5px;text-align:center;padding:8px 16px}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.brand{display:flex;flex-direction:column;line-height:1.2;text-decoration:none}
.brand strong{font-family:var(--serif);font-size:21px;font-weight:600}
.brand span{font-size:12.5px;color:var(--muted)}
.links{display:flex;gap:22px;font-size:15px}
.links a{text-decoration:none;color:var(--muted)}
.links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--peach);color:var(--peach-ink);font-weight:600;font-size:15.5px;padding:12px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--peach) 80%,transparent)}
.btn.small{padding:9px 16px;font-size:14px}
@media (max-width:860px){.links{display:none}}

/* hero */
.hero{padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px)}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(40px,6.2vw,72px);margin-top:18px}
.hero h1 em{display:block;font-style:italic;color:var(--petrol)}
.thread{display:block;width:180px;max-width:60%;height:46px;margin-block:18px 16px;color:var(--sage)}
.thread path{stroke-dasharray:230;stroke-dashoffset:230;animation:draw 1.4s .2s ease-out forwards}
.thread circle{opacity:0;animation:dot .5s 1.3s ease-out forwards}
@keyframes dot{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.thread path{stroke-dashoffset:0}.thread circle{opacity:1}}
.hero .lead + .lead{margin-top:12px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
.cta-row small{color:var(--muted);font-size:14.5px;max-width:30ch}
.photo{aspect-ratio:4/5;width:100%;max-width:100%;border-radius:200px 200px 18px 18px;background:
  radial-gradient(120% 80% at 30% 20%,var(--lav) 0 40%,transparent 70%),
  linear-gradient(160deg,var(--petrol-soft),var(--lav));
  display:grid;place-items:center;text-align:center;padding:24px;color:var(--lav-ink);font-size:14px;border:1px solid var(--line)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(40px,6vw,64px)}
.pair article{padding:28px 30px;border-radius:18px}
.pair article:first-child{background:var(--lav)}
.pair article:last-child{background:var(--petrol-soft)}
.pair h3{font-size:26px;margin-bottom:10px}
.pair article:first-child h3{font-style:italic}
.pair p{color:var(--muted)}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.photo{max-width:340px;aspect-ratio:1/1;border-radius:18px}.pair{grid-template-columns:1fr}}

/* services */
.head{display:grid;gap:16px;margin-bottom:48px;max-width:720px}
.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.service{padding:30px 28px 8px 0;display:flex;flex-direction:column;gap:14px}
.service + .service{padding-left:28px;border-left:1px solid var(--line)}
.service .kind{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.service h3{font-size:25px}
.service p{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.tags span{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--lav);color:var(--lav-ink)}
.after{margin-top:36px;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--petrol)}
@media (max-width:860px){.services{grid-template-columns:1fr}.service,.service + .service{padding:28px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* process */
.dark{background:var(--deep);color:var(--deep-ink)}
.dark .eyebrow{color:var(--peach)}
.dark .lead{color:var(--deep-muted)}
.steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid color-mix(in srgb,var(--deep-ink) 22%,transparent);padding-top:20px}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--serif);font-size:44px;line-height:1;color:var(--peach);margin-bottom:16px;font-variant-numeric:tabular-nums}
.steps h3{font-size:22px;margin-bottom:10px}
.steps p{color:var(--deep-muted);font-size:16px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* work */
.cases{display:grid;gap:64px}
.case{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,56px);align-items:center}
.case:nth-child(even) .shot{order:2}
.shot{border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:0 24px 50px -32px rgba(20,40,45,.45)}
.shot .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.shot .bar em{margin-left:10px;font-style:normal}
.shot .img{aspect-ratio:1440/690;display:grid;place-items:center;text-align:center;padding:20px;color:var(--muted);font-size:14px;background:repeating-linear-gradient(135deg,var(--bg) 0 12px,var(--surface) 12px 24px)}
.case .body{display:grid;gap:14px}
.case h3{font-size:clamp(26px,3vw,34px)}
.case p{color:var(--muted)}
.case .scope{font-size:14px;color:var(--petrol);font-weight:500}
.quotes{margin-top:72px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quotes figure{margin:0;padding:24px;border-radius:16px;background:var(--lav)}
.quotes blockquote{margin:0 0 12px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;color:var(--ink)}
.quotes figcaption{font-size:14px;color:var(--lav-ink)}
@media (max-width:820px){.case{grid-template-columns:1fr}.case:nth-child(even) .shot{order:0}.quotes{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:start}
.about .photo{border-radius:18px;aspect-ratio:3/4;position:sticky;top:110px}
.prose{display:grid;gap:18px;max-width:62ch}
.prose p{color:var(--muted)}
.prose .first{font-family:var(--serif);font-size:24px;line-height:1.4;color:var(--ink)}
.prose h3{font-size:24px;font-style:italic;color:var(--petrol);margin-top:18px}
.prose .close{border-left:2px solid var(--peach);padding-left:18px;color:var(--ink)}
@media (max-width:820px){.about{grid-template-columns:1fr}.about .photo{position:relative;top:auto;max-width:340px}}

/* start */
.start{background:var(--petrol-soft)}
.route{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:16px;margin-top:48px;align-items:stretch}
.stage{background:var(--surface);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line)}
.stage.main{border:2px solid var(--petrol)}
.route-label{font-size:25px;margin:0 0 -28px}
.route + .route-label{margin-top:64px}
.stage .step{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stage h3{font-size:23px}
.stage .meta{font-size:14.5px;color:var(--petrol);font-weight:500}
.stage p,.stage li{color:var(--muted);font-size:15.5px}
.stage ul{margin:0;padding-left:18px;display:grid;gap:6px}
.stage .price{font-family:var(--serif);font-size:44px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:4px}
.price small{display:block;font-family:var(--sans);font-size:13px;margin-top:8px}
.stage .btn{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.route{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,72px)}
.contact-side{display:grid;gap:18px;align-content:start}
.contact-side dl{margin:16px 0 0;display:grid;gap:12px}
.contact-side dt{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--deep-muted)}
.contact-side dd{margin:2px 0 0}
form{display:grid;gap:16px}
label{display:grid;gap:6px;font-size:14.5px;font-weight:500}
input,textarea{font:inherit;color:var(--deep-ink);background:var(--deep-field);border:1px solid color-mix(in srgb,var(--deep-ink) 18%,transparent);border-radius:10px;padding:12px 14px}
input::placeholder,textarea::placeholder{color:var(--deep-muted)}
input:focus,textarea:focus{outline:2px solid var(--peach);outline-offset:1px}
textarea{min-height:140px;resize:vertical}
.privacy{font-size:13.5px;color:var(--deep-muted)}
.privacy a{color:var(--deep-ink)}
.thanks{background:var(--deep-field);border-radius:14px;padding:28px;font-family:var(--serif);font-size:22px;line-height:1.4}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

footer{padding-block:32px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}

/* obrázky s náhradní plochou, dokud fotka chybí */
.photo{position:relative;overflow:hidden}
.photo img,.shot .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .img{position:relative}
.shot .img img{object-position:top center}
.case .more{font-weight:600;color:var(--petrol);text-decoration:none;justify-self:start;border-bottom:1px solid currentColor}
.case .more:hover{color:var(--ink)}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* textová stránka (zásady) */
.doc{padding-block:clamp(48px,7vw,88px)}
.doc .prose{max-width:68ch}
.doc h1{font-size:clamp(34px,5vw,52px)}
.doc h2{font-size:24px;margin-top:22px}
.doc ul{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:6px}
.doc p{color:var(--muted)}
a.shot{display:block;text-decoration:none;color:inherit;transition:transform .2s ease}
a.shot:hover{transform:translateY(-3px)}
section[id]{scroll-margin-top:80px}
.aside{margin-top:6px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--deep-ink) 22%,transparent);font-size:15px;color:var(--deep-muted);max-width:42ch}
.said{margin:4px 0 0;padding-left:18px;border-left:2px solid var(--peach)}
.said blockquote{margin:0 0 8px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.45;color:var(--ink)}
.said figcaption{font-size:14px;color:var(--muted)}
.quotes.one{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
.quotes.one figure{padding:32px 36px;text-align:center}
.quotes.one blockquote{font-size:22px}
.start-intro{margin-top:-20px;margin-bottom:8px}
.route.two{grid-template-columns:1.25fr 1fr}
.route.two .stage:not(.main){align-self:start}
.soft{background:var(--lav)}
.why{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,6vw,72px);align-items:start}
.why .eyebrow{color:var(--lav-ink)}
.why .prose2{display:grid;gap:16px;max-width:60ch}
.why .prose2 p{color:var(--muted)}
@media (max-width:820px){.why{grid-template-columns:1fr}}
/* Ukázka bez snímku webu (účetní kancelář) */
.shot.panel .flow{display:grid;gap:0;padding:clamp(18px,3vw,30px)}
.shot.panel .flow p{margin:0;padding:16px 0 16px 22px;border-left:2px solid var(--line);position:relative;color:var(--ink);font-family:var(--serif);font-size:clamp(17px,1.8vw,20px);line-height:1.4}
.shot.panel .flow p::before{content:"";position:absolute;left:-6px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--line)}
.shot.panel .flow p:nth-child(2){border-left-color:var(--peach)}
.shot.panel .flow p:nth-child(2)::before{background:var(--peach)}
.shot.panel .flow span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}