*{box-sizing:border-box}
body{margin:0;background:#fff;color:#3A3335;font-family:Lato,system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:#B5788E;text-decoration:none}
a:hover{color:#8E5A70}

/* Shared page-level typography classes (P2-2 / P2-3) */
.h1-page{font-size:clamp(32px,5vw,54px);line-height:1.12}
.section-h2{font-size:clamp(26px,3vw,36px)}

/* Shared component classes (P2-21) */
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#9C5B75}
.cta-primary{background:#2A2426;color:#fff;padding:16px 34px;border-radius:999px;font-family:Lato,sans-serif;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;display:inline-block}
.cta-outline{background:#fff;color:#B5788E;padding:16px 34px;border-radius:999px;font-family:Lato,sans-serif;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;display:inline-block}
.card{background:#fff;border-radius:24px;padding:30px 26px;text-align:left;box-shadow:0 8px 24px rgba(184,120,142,.10)}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* Reveal-on-scroll (data-rv) */
[data-rv]{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
[data-rv].in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rv]{opacity:1!important;transform:none!important}
}

/* Header active state */
.nav a.active{color:#fff;background-size:100% 2px}
.nav a{padding:10px 4px;padding-bottom:5px;font-size:14px;letter-spacing:.04em;color:#5C5155;background:linear-gradient(#fff,#fff) left bottom/0 2px no-repeat;transition:color .25s ease,background-size .35s cubic-bezier(.2,.8,.3,1)}

/* Mobile menu panel base styling (P3-11) */
.menu-panel{max-width:1120px;margin:10px auto 0;padding:14px;border-radius:26px;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);box-shadow:0 14px 34px rgba(184,120,142,.18);flex-direction:column;gap:2px;animation:fadeUp .25s ease both}

/* Focus visibility for keyboard users */
:focus-visible{outline:2px solid #B5788E;outline-offset:3px;border-radius:6px}

/* Skip-to-content link: visually hidden until focused */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#2A2426;color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-family:Lato,sans-serif;font-weight:700;font-size:14px;letter-spacing:.02em;text-decoration:none}
.skip-link:focus{left:0}

@media (max-width:900px){
  header{top:0 !important;margin:0 0 -96px !important;padding:10px 12px 0 !important}
  header>div:first-child{padding:8px 10px 8px 18px !important;gap:10px !important}
  header>div:first-child>div:first-child{font-size:16px !important;white-space:nowrap}
  .nav{display:none !important}
  .cta-book{display:none !important}
  .burger{display:flex !important}
  header>div:first-child>a:first-child{width:140px !important;height:60px !important}
  header>div:first-child>a:first-child img{object-position:left center !important}
  .menu-panel{position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;left:auto !important;width:66% !important;max-width:none !important;margin:0 !important;padding:80px 18px 24px !important;border-radius:0 !important;background:#F2B6C6 !important;border:none !important;box-shadow:-12px 0 32px rgba(0,0,0,.18) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;animation:slideInRight .3s cubic-bezier(.2,.8,.3,1) both !important;z-index:60 !important;overflow-y:auto !important}
  .menu-panel>a{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;margin-bottom:2px;color:#3A3335 !important;font-size:20px !important}

  /* Layout-critical rules promoted from the 760px block (P2-1): hero grid, hero-photo,
     tl-row + its decorative wave/bubble, and service cards all need to break before
     the nav goes to burger at 900px, not after. */
  .hero{grid-template-columns:1fr !important;min-height:0 !important;padding-top:0 !important}
  .hero-photo{display:none !important}
  .tl-row{grid-template-columns:1fr !important;gap:0 !important}
  .tl-row>div{text-align:left !important;padding-left:22px !important;padding-right:22px !important}
  .tl-bubble{display:none !important}
  .tl-spacer{display:none !important}
  .tl-wave{display:none !important}
  .service-card{grid-template-columns:1fr !important;padding:24px !important;gap:18px !important}
  .service-card>div:last-child{align-items:stretch !important;text-align:left !important}
  .service-card>div:last-child>a{text-align:center;width:100%;box-sizing:border-box}
}
@media (max-width:1000px){
  /* Logo container: intermediate size between the 900px burger breakpoint and desktop (P3-6) */
  header>div:first-child>a:first-child{width:160px;height:70px}
}
@media (max-width:760px){
  main section{padding-left:20px !important;padding-right:20px !important}
  .hero-copy{padding:100px 20px 64px !important;text-align:center}
  .hero-copy>div{margin:0 auto}
  .hero-copy h1{font-size:38px !important;line-height:1.08 !important}
  .hero-copy h1 br{display:none}
  .hero-copy p{font-size:16.5px !important;max-width:none !important;margin-left:auto;margin-right:auto}
  .hero-copy>div>div:first-child{margin-bottom:20px !important}
  .hero-copy>div:last-child{justify-content:center !important}
  .hero-copy>div>div:last-child{flex-direction:column !important;align-items:stretch !important;gap:12px !important}
  .hero-copy>div>div:last-child>div{flex:1 1 100%;text-align:center}
  section{padding-top:64px !important;padding-bottom:64px !important}
  h1{font-size:36px !important;line-height:1.08 !important}
  h2{font-size:28px !important;line-height:1.14 !important}
  footer>div{gap:22px !important}
  footer{padding:28px 20px !important}
  /* Hero on very small screens: keep pill on one line, reduce headline further */
  .hero-copy>div>div:first-child{white-space:normal !important;font-size:9.5px !important;padding:6px 12px !important;margin-top:24px !important}
  .hero-copy h1{font-size:34px !important}
  /* Prevent overly wide side padding eating content on phones */
  main section{padding-left:16px !important;padding-right:16px !important}
  /* Consultation detail: stack price and CTA */
  section[style*="padding:60px 32px 80px"] > div[data-rv] > div[style*="justify-content:space-between"]{flex-direction:column !important;align-items:stretch !important}
  /* Contact grid: full width on mobile */
  form[action^="mailto:"]{padding:22px !important}
  /* E-knjiga: tighten hero + feature card padding on mobile */
  .shop-hero{padding:96px 20px 24px !important}
  .feature-product{padding:24px 16px 40px !important}
  .feature-product > div{padding:28px 22px !important;gap:28px !important;border-radius:24px !important}
  .feature-product > div > div:first-child{aspect-ratio:4/5 !important;max-height:360px !important;padding:14px !important;border-radius:18px !important}
  .feature-product h2{font-size:22px !important}
  .feature-product ul li{font-size:15px !important}
  .trust-signals{padding:32px 20px 48px !important}
  .trust-signals > div{gap:22px !important}
}

/* --- Tap targets -----------------------------------------------------------
   WCAG 2.5.8 / Lighthouse want ~48x48px with 8px spacing for touch. These
   elements carry inline styles from the page templates, so the rules need
   !important to win. Only the hit box grows; type sizes stay as designed.
   Scoped to coarse pointers so desktop layout is untouched. */
@media (pointer:coarse){
  /* Pill CTAs: anchors and buttons that render as uppercase pills. */
  a[style*="border-radius:999px"],
  button{
    min-height:48px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  /* The header burger is 42px square by default. */
  .burger{width:48px !important;height:48px !important}
  /* Mobile menu + footer links: give short text links a real hit box. */
  .menu-panel a,
  footer nav a,
  footer a[href^="/"]{
    min-height:48px !important;
    display:inline-flex !important;
    align-items:center !important;
  }
  /* 8px minimum spacing between adjacent footer links. */
  footer nav{row-gap:8px !important;column-gap:20px !important}
}

/* --- Minimum body copy size ------------------------------------------------
   Supporting copy sat at 15/15.5px on several templates. Uppercase micro-labels
   (letter-spaced eyebrows, badges) stay small by design and are excluded. */
@media (max-width:760px){
  p, li{font-size:16px !important}
}