/* Studio Earthly site additions (2 Nov 2026): headings for Google, smooth scrolling, gentle reveal animations,
   phone/iPad polish. Loaded after the theme's own CSS. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* the main heading of a page that has no visible one: read by Google and screen readers, not shown */
.se-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* project and category titles became <h1>: keep exactly the old look */
h1.title { font-size: 45px; font-weight: 300; line-height: normal; }
.project-description h1.title { margin: 0 0 10px; }
h1.title.center { margin: 0; text-transform: capitalize; }

/* gentle fade-up as things scroll into view (only when JavaScript runs, never for reduced-motion users) */
.se-js .se-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.se-js .se-reveal.se-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .se-js .se-reveal { opacity: 1; transform: none; transition: none; } }

/* pictures fade in once loaded instead of popping */
img[loading="lazy"] { transition: opacity .4s ease; }

/* phones and iPads */
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
@media (max-width: 1024px) { h1.title { font-size: 36px; } }
@media (max-width: 600px) { h1.title { font-size: 30px; } body { overflow-x: hidden; } }
a, button { -webkit-tap-highlight-color: rgba(0,0,0,.08); }

/* One typeface everywhere: Lato (Zaman, 2 Nov 2026: "the font, everything, to be used in Lato only"), replacing the
   copied template's "Studioilse" font and Baskervville. Icon fonts (Font Awesome <i>, slider arrows) are left alone. */
html, body, body :not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class*="icon"]) {
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif !important; }
body { font-weight: 400; -webkit-font-smoothing: antialiased; }

/* Project covers were drawn twice (a blurred copy and a sharp copy of the SAME file stacked on top); on phones the two
   slipped apart and looked like two pictures merging. Show the one picture, sharp. */
.image-cover .lowres, .image-container .lowres { -webkit-filter: none !important; filter: none !important; }
.image-cover .highres, .image-container .highres { display: none !important; }

/* Contact page enquiry form */
.se-enquiry { max-width: 760px; margin: 10px auto 60px; padding: 0 20px; }
.se-enquiry h2 { font-size: 26px; font-weight: 300; text-align: center; margin: 0 0 24px; letter-spacing: .5px; }
.se-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.se-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: #6b6b6b; }
.se-form .se-wide { grid-column: 1 / -1; }
.se-form input, .se-form select, .se-form textarea { font-size: 16px; text-transform: none; letter-spacing: 0; color: #222; padding: 12px 14px;
  border: 1px solid #d6d2cc; border-radius: 6px; background: #fff; width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.se-form input:focus, .se-form select:focus, .se-form textarea:focus { outline: none; border-color: #8a7f72; }
.se-form button { grid-column: 1 / -1; justify-self: center; padding: 14px 44px; font-size: 14px; letter-spacing: 1.5px;
  text-transform: uppercase; color: #fff; background: #2b2a28; border: 0; border-radius: 30px; cursor: pointer; transition: background .2s; }
.se-form button:hover { background: #4a463f; }
.se-form .se-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.se-msg { text-align: center; padding: 12px; border-radius: 6px; margin: 0 0 20px; }
.se-ok { background: #eef6ee; color: #2f6b34; } .se-bad { background: #fbeeee; color: #9b2c2c; }
@media (max-width: 600px) { .se-form { grid-template-columns: 1fr; } }

/* Call + WhatsApp capsule (bottom-right corner). The template's full-width bar and green bubble are hidden. */
.destop, .mobile-icons, .wp.wp2 { display: none !important; }
.se-reach { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 9990; display: flex;
  align-items: center; padding: 5px; border-radius: 999px; background: rgba(28, 27, 25, .82); color: #f3f0eb;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .08); }
.se-reach a { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; color: inherit !important;
  text-decoration: none !important; font-size: 13px; letter-spacing: .4px; transition: background .2s ease; }
.se-reach a:hover, .se-reach a:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.se-reach i { width: 1px; height: 18px; background: rgba(255, 255, 255, .2); }
.se-reach svg { display: block; }
@media (max-width: 600px) {
  .se-reach { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .se-reach a { padding: 10px 12px; }
  .se-reach span { display: none; }   /* phones: just the two icons */
}

/* one main heading per page: the home sections and blog cards became h2/h3 with exactly their old look */
h2.se-sec { font-size: 35px; font-weight: 500; line-height: 1.333; margin: 10px 0; text-align: center; }
.card-body .se-card { font-size: 20px; font-weight: 500; line-height: 1.333; margin: 8px 0; }