/* =========================================================
   Axora Habitat — iOS-inspired refinement layer
   Loaded after each page's own styles. Purely additive:
   softer depth, rounder geometry, calmer motion, clearer
   focus states. No layout structure is changed and no
   feature is removed — this only restyles existing markup.
   ========================================================= */

:root{
  --ios-radius-s: 10px;
  --ios-radius-m: 16px;
  --ios-radius-l: 22px;
  --ios-radius-pill: 999px;
  --ios-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ios-shadow-1: 0 1px 2px rgba(20,19,18,0.05), 0 1px 1px rgba(20,19,18,0.04);
  --ios-shadow-2: 0 10px 30px -12px rgba(20,19,18,0.18), 0 2px 8px rgba(20,19,18,0.06);
  --ios-shadow-3: 0 24px 60px -20px rgba(20,19,18,0.24);
  --ios-border: rgba(28,27,26,0.08);
  --ios-focus: rgba(221,122,31,0.35);
}

/* Base feel: iOS-native type stack layered under the brand fonts,
   smoother rendering, calmer default motion */
body{
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Work Sans', sans-serif;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4{
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Libre Franklin', sans-serif;
  letter-spacing: -0.015em;
}
*{
  -webkit-tap-highlight-color: transparent;
}
a, button, .btn, .v31-btn, .ui-btn, .owner-btn, .private-icon-btn, .clean-icon-btn{
  transition: transform 0.35s var(--ios-ease), background-color 0.25s var(--ios-ease),
              color 0.25s var(--ios-ease), border-color 0.25s var(--ios-ease),
              box-shadow 0.25s var(--ios-ease), opacity 0.25s var(--ios-ease);
}

/* ---------- Sticky headers: frosted glass ---------- */
header, .clean-header, .clean-private-header{
  background: rgba(251,251,250,0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ios-border) !important;
}

/* ---------- Buttons: pill-shaped, tactile ---------- */
.btn, .v31-btn, .ui-btn, .owner-btn{
  border-radius: var(--ios-radius-pill) !important;
}
.btn:active, .v31-btn:active, .ui-btn:active, .owner-btn:active,
.clean-icon-btn:active, .private-icon-btn:active{
  transform: scale(0.96);
}
.btn.primary, .v31-btn.primary, .ui-btn.orange, .owner-btn.primary, .owner-btn.orange{
  box-shadow: var(--ios-shadow-1);
}
.btn.primary:hover, .v31-btn.primary:hover{
  box-shadow: var(--ios-shadow-2);
  transform: translateY(-1px);
}
.clean-icon-btn, .private-icon-btn{
  border-radius: var(--ios-radius-pill) !important;
}

/* ---------- Cards & photo tiles: rounder, softer depth ---------- */
.v31-card, .what-card, .payment-card, .profile-card, .tool-card,
.contact-card, .inspo-card, .inspo-category-card, .review-form-card,
.provided-review-card, .v31-band-card, .axora-photo-card, .quote-side,
.billing-field, .quote-form-wrap .pro-form{
  border-radius: var(--ios-radius-l) !important;
  transition: transform 0.4s var(--ios-ease), box-shadow 0.4s var(--ios-ease);
}
.v31-card:hover, .what-card:hover, .tool-card:hover, .inspo-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--ios-shadow-2);
}
.axora-photo-card{
  overflow: hidden;
  box-shadow: var(--ios-shadow-1);
}
.axora-photo-card img{
  transition: transform 0.6s var(--ios-ease);
}
.axora-photo-card:hover img{
  transform: scale(1.045);
}

/* Hero / split photography: rounded, softly framed */
.hero-photo, .page-hero-photo, .about-photo, .split-image,
.what-card-photo, .quote-photo, .gallery-item, .project-card,
.photo-mosaic figure{
  border-radius: var(--ios-radius-l) !important;
  overflow: hidden;
  box-shadow: var(--ios-shadow-2);
}

/* ---------- Forms: iOS-style rounded fields ---------- */
input, textarea, select,
.pro-form input, .pro-form textarea, .pro-form select,
.billing-field input, .billing-field textarea, .billing-field select{
  border-radius: var(--ios-radius-m) !important;
  transition: box-shadow 0.25s var(--ios-ease), border-color 0.25s var(--ios-ease);
}
input:focus, textarea:focus, select:focus,
.pro-form input:focus, .pro-form textarea:focus, .pro-form select:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ios-focus) !important;
  border-color: var(--orange) !important;
}

/* ---------- Motion & scroll feel ---------- */
html{ scroll-behavior: smooth; }
img{ backface-visibility: hidden; }

/* ---------- Focus visibility for accessibility, iOS-flavoured ---------- */
a:focus-visible, button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ios-focus);
  border-radius: var(--ios-radius-s);
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}