/* sns.css — Spaces & Stories layer on top of the design CSS + onnext-polish.css.
   Home section sizing (moved out of the old per-page inline <style>) + the few new
   blocks the S&S content needs. Loaded last. */

/* ---- Header ----
   aantrik's own layout from the design CSS (.grid-34: centered logo row, then a full-width
   nav row; <=991px logo left + hamburger, CTA pill <=479px). Not sticky, like aantrik.
   The S&S mark is square with its wordmark at the bottom, so aantrik's 44px-tall logo
   would be unreadable: it gets a 66px logo (row 76px vs aantrik's 54px). S&S also has one
   more nav item and a longer CTA label, so labels never wrap. */
.logo-sns { display: block; height: 66px; width: auto; margin-top: 10px; }
.navbar-3 .nav-menu-2 .nav-link, .navbar-3 .nav-link-3 { white-space: nowrap; }
@media (min-width: 992px) {
  /* evenly spaced across the design's padded nav row, like aantrik */
  .navbar-3 .nav-menu-2 { justify-content: space-between; align-items: center; }
  .navbar-3 .nav-menu-2 > * { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 991px) {
  .logo-sns { height: 50px; margin-top: 0; }
  .navbar-3 .grid-34 { grid-template-columns: 1fr auto 60px !important; column-gap: 8px !important; }
  .navbar-3 .w-nav-brand { justify-self: start; display: flex; justify-content: flex-start; padding-left: 10px; }
  .navbar-3 .w-nav-button { grid-column: 3; justify-self: end; }
}
@media (max-width: 479px) {
  .navbar-3 .mobile-button { font-size: 12px !important; padding: 3px 12px !important; }
}
/* ---- Footer (aantrik: plain white; logo, about, one locations/projects grid of 114px
   tracks, then the links grid). S&S has 3 link columns, so they stay aantrik's 232px wide and
   centre instead of leaving an empty 4th column. Square S&S logo: 90px tall (aantrik 59). ---- */
.sns-footer-logo { height: 90px; width: auto; }
.section.footer .collection-list-4 { grid-template-columns: repeat(auto-fit, 114px); justify-content: center; width: 762px; max-width: 100%; }
.section.footer .grid-13.footer { grid-template-columns: repeat(3, 232px); justify-content: center; }
.section.footer .link-2 { display: block; }
.sns-copyright { text-align: center; margin: 0 0 30px; font-size: 13px; }
@media (max-width: 767px) {
  .section.footer .grid-13.footer { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .section.footer .collection-list-4 { grid-template-columns: repeat(auto-fit, 96px); width: 310px; }
}

/* ---- Home hero (aantrik: two tall panels per slide, 90% container, 646x917 at 1440) ----
   Panels are portrait like aantrik's; S&S photos are landscape, so they cover-crop. The
   design CSS gives .div-block-70 an aantrik background photo: always cleared here. */
.section-69 .container-94 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; }
.section-69 .container-94::before, .section-69 .container-94::after { display: none; } /* w-container clearfix pseudos would take grid cells */
.section-69 .container-94.sns-single { grid-template-columns: 1fr; }
.section-69 .div-block-69, .section-69 .div-block-70 { position: relative; width: auto; height: auto; aspect-ratio: 646 / 917; overflow: hidden; margin: 0; background: none !important; }
.section-69 .sns-single .div-block-69 { aspect-ratio: 1296 / 917; }
.section-69 .sns-hero-link { display: block; width: 100%; height: 100%; }
.section-69 .image-149 { display: block; width: 100%; height: 100%; object-fit: cover; }
.section-69 .sns-hero-b .link-4 { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 16px; color: #fff; font-size: 30px; line-height: 1.17; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
@media (max-width: 991px) { .section-69 .sns-hero-b .link-4 { font-size: 22px; } }
@media (max-width: 479px) { .section-69 .container-94 { column-gap: 3px; } .section-69 .sns-hero-b .link-4 { font-size: 13px; padding: 0 8px; text-underline-offset: 3px; } }

/* ---- Home portfolio tiles (aantrik's Instagram-feed slot: 80% container, 5 cols x 3 rows,
   2px gaps, 4:5 tiles, no radius/labels; 3 cols x 4 rows below 992px) ---- */
.section-55.portfolio-preview { display: block !important; padding: 50px 0 0; }
.onx-portfolio-head { text-align: center; max-width: 760px; margin: 0 auto 30px; padding: 0 20px; }
.onx-portfolio-head h2 { font-family: 'Open Sans', sans-serif; font-weight: 400; letter-spacing: 2px; font-size: 25px; line-height: 40px; margin: 0; color: #333; text-transform: capitalize; }
.onx-portfolio-head p { font-family: 'Open Sans', sans-serif; font-size: 15px; color: #828282; margin: 6px 0 0; }
.onx-portfolio-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 80%; margin: 0 auto; }
.onx-card { display: block; overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; }
.onx-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.onx-card:hover img { transform: scale(1.05); }
.onx-portfolio-preview { text-align: center; }
.onx-portfolio-cta { display: inline-block; margin: 30px auto 0; padding: 10px 24px; background: #b3a29c; color: #fff !important; border-radius: 20px; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; text-decoration: none; }
.onx-portfolio-cta:hover { background: #a08f89; }
@media (max-width: 991px) { .onx-portfolio-grid { grid-template-columns: repeat(3, 1fr); } .onx-card:nth-child(n+13) { display: none; } }
@media (max-width: 479px) { .onx-portfolio-grid { width: 82%; gap: 1px; } .onx-portfolio-head h2 { font-size: 20px; line-height: 25px; } }
.section-56.our-story .image-117 { width: 100%; max-width: 380px; aspect-ratio: 380 / 573; object-fit: cover; } /* aantrik story portrait */
.why-choose-us-hp .dream-home .image-y { background: #efeae3; object-fit: cover; aspect-ratio: 4/3; width: 100%; height: auto; }

/* ---- Consultation form: tel/email links, inline error ---- */
.sns-tel { color: inherit; text-decoration: none; }
.sns-tel:hover { text-decoration: underline; }
.w-form-fail { margin-top: 12px; }
.form-3 .sns-invalid { border-color: #c0392b !important; }

/* ---- Client reviews (slider) + YouTube facade ---- */
.testimonial-slide-2 .sns-review-media { flex: 1 1 45%; min-width: 0; display: flex; align-items: center; }
.testimonial-slide-2 .sns-review-media .testimonial-image-two { width: 100%; height: 100%; object-fit: cover; }
.testimonial-slide-2.sns-no-media .testimonial-content { max-width: 760px; margin: 0 auto; }
.sns-stars { color: #b8702f; letter-spacing: 3px; font-size: 18px; margin: 8px 0; }
.sns-yt { position: relative; display: block; width: 100%; aspect-ratio: 16/9; padding: 0; border: 0; background: #000; cursor: pointer; border-radius: 12px; overflow: hidden; }
.sns-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .9; display: block; }
.sns-yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; background: #ff0000; border-radius: 12px; }
.sns-yt-play::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.sns-yt-frame { display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; }

/* ---- Generic page header / content ---- */
.sns-page-head { text-align: center; }
.sns-page-head .h3-a { max-width: 760px; margin-left: auto; margin-right: auto; }
.sns-prose { max-width: 900px; margin: 0 auto; padding: 24px 20px 48px; font-size: 16px; line-height: 1.75; color: #555; }
.sns-prose h2 { font-size: 24px; margin: 36px 0 12px; color: #2b2b2b; }
.sns-prose h3 { font-size: 19px; margin: 24px 0 8px; color: #2b2b2b; }
.sns-prose ul { padding-left: 22px; margin: 0 0 12px; }
.sns-prose p { margin: 0 0 12px; }
.sns-prose a { color: #b8702f; }
.sns-legal-updated { color: #888; text-align: center; margin-bottom: 24px !important; }
.sns-empty { text-align: center; color: #7a7167; padding: 24px 20px 60px; font-size: 16px; }

/* ---- Portfolio list: category filter chips ---- */
.sns-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1140px; margin: 0 auto 28px; padding: 0 20px; }
.sns-chip { font-family: 'Montserrat', sans-serif; font-size: 13px; letter-spacing: .4px; padding: 8px 16px; border-radius: 999px; border: 1px solid #d9d2c8; background: #fff; color: #4a423a; cursor: pointer; }
.sns-chip.is-active, .sns-chip:hover { background: #b3a29c; border-color: #b3a29c; color: #fff; }
.collection-item[hidden] { display: none !important; }
.collection-list-2 { align-items: start; }
@media (max-width: 991px) { .collection-list-2 { grid-template-rows: none; } } /* design CSS "0 auto" rows collapse the first row onto the heading */

/* ---- Portfolio detail ---- */
/* aantrik project page: cover image (<=800px tall), labels | description, masonry gallery */
.projects_template .main-image { max-width: 80%; text-align: center; }
.projects_template .header-image-project { display: inline-block; width: auto; max-width: 100%; height: auto; max-height: 800px; object-fit: contain; }
.container-84 { width: 80%; max-width: none; }
.section.projects .w-richtext h2 { font-size: 18px; line-height: 28px; letter-spacing: 2px; font-weight: 400; margin: 16px 0 6px; }
.sns-gallery { columns: 3; column-gap: 11px; }
.sns-gallery a { display: block; break-inside: avoid; margin-bottom: 11px; }
.sns-gallery img { width: 100%; height: auto; display: block; }
.sns-video { max-width: 900px; margin: 32px auto 0; padding: 0 20px; }
@media (max-width: 767px) { .sns-gallery { columns: 2; } .projects_template .main-image { max-width: 100%; } }
@media (max-width: 479px) { .sns-gallery { columns: 1; } .container-84 { width: auto; margin: 0 20px; } }

/* ---- Cards (care, landing, careers) ---- */
.sns-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.sns-cards.two { grid-template-columns: repeat(2, 1fr); max-width: 940px; }
.sns-card { background: #fff; border: 1px solid #ece6dd; border-radius: 14px; padding: 26px; box-shadow: 0 8px 26px rgba(31, 27, 23, .06); }
.sns-card h3 { font-size: 20px; margin: 0 0 10px; color: #2b2b2b; }
.sns-card p { margin: 0; color: #666; line-height: 1.65; }
.sns-card .sns-step { color: #b8702f; font-weight: 700; letter-spacing: 2px; font-size: 13px; margin-bottom: 8px; }
.sns-card-img { margin: -26px -26px 18px; height: 220px; overflow: hidden; border-radius: 14px 14px 0 0; }
.sns-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sns-split-block { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 1140px; margin: 0 auto; padding: 20px 20px 50px; }
.sns-split-block img { width: 100%; height: 420px; object-fit: cover; border-radius: 14px; display: block; }
.sns-split-block h2 { margin-top: 0; }
.sns-section { padding: 40px 0; }
.sns-section > .sns-h2 { text-align: center; margin: 0 0 8px; }
.sns-section > .sns-sub { text-align: center; color: #7a7167; max-width: 680px; margin: 0 auto 30px; padding: 0 20px; }
.sns-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; }
.sns-tags li { background: #f5f1eb; border-radius: 999px; padding: 6px 14px; font-size: 14px; color: #4a423a; }
@media (max-width: 991px) { .sns-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .sns-cards, .sns-cards.two, .sns-split-block { grid-template-columns: 1fr; } .sns-split-block img { height: 280px; } }

/* ---- Careers form ---- */
.sns-careers { display: grid; gap: 6px; }
.sns-careers textarea { min-height: 120px; }
.sns-job h3 { margin-bottom: 4px; }
.sns-job .sns-job-meta { color: #b8702f; font-size: 14px; margin-bottom: 10px; }
.sns-faq-sub { color: #7a7167; margin: 6px 0 22px; }

/* Body copy font for the new blocks (the design's base font is a serif fallback) */
.sns-prose, .sns-card, .sns-split-block, .sns-empty, .sns-filters, .sns-faq-sub, .sns-sub { font-family: 'Open Sans', sans-serif; }
.onx-latest .container { max-width: 1140px !important; width: 100%; padding-left: 20px; padding-right: 20px; }
.onx-latest-head { text-align: center; }
.sns-lead { font-family: 'Open Sans', sans-serif; text-align: center; max-width: 720px; margin: 0 auto 30px; padding: 0 20px; font-size: 17px; line-height: 1.7; color: #666; }
.sns-careers-wrap { display: block; max-width: 720px; margin: 0 auto; width: 100%; padding: 28px; border: 1px solid #ece6dd; border-radius: 14px; }
.sns-careers-wrap .h2 { text-align: center; }
.sns-careers .field-label-6 { text-align: left; }
.sns-careers .w-input, .sns-careers .w-select { font-family: 'Open Sans', sans-serif; }
.sns-careers .submit-button-3 { justify-self: start; padding-left: 36px; padding-right: 36px; }

/* Instagram feed (home 'instagram' slot, only with INSTAGRAM_ACCESS_TOKEN) */
.sns-ig { text-align: center; }
.sns-ig-follow { margin: 0 0 24px; }
.sns-ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sns-ig-tile { display: block; aspect-ratio: 1; overflow: hidden; background: #f2f2f2; }
.sns-ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sns-ig-tile:hover img { transform: scale(1.06); }
@media (max-width: 767px) { .sns-ig-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* Contact page NAP (name, phone, address) */
.sns-nap { font-family: 'Open Sans', sans-serif; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0 auto 10px; padding: 0 20px; text-align: center; color: #555; }
.sns-nap a { color: inherit; }

/* ---- Share your experience (review form) ---- */
.sns-review { display: grid; gap: 6px; }
.sns-review textarea { min-height: 150px; }
.sns-review .field-label-6 { text-align: left; }
.sns-review .w-input { font-family: 'Open Sans', sans-serif; }
.sns-review .submit-button-3 { justify-self: start; padding-left: 36px; padding-right: 36px; }
.sns-review .sns-invalid { border-color: #c0392b !important; }
.sns-rating-field { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.sns-rating-field legend { padding: 0; }
/* Radios are listed 5→1; row-reverse shows 1→5 so "hover/checked + following siblings" fills the left stars. */
.sns-rating { position: relative; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.sns-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sns-rating label { font-size: 34px; line-height: 1; color: #d9d2c8; cursor: pointer; padding: 2px; }
.sns-rating input:checked ~ label, .sns-rating label:hover, .sns-rating label:hover ~ label { color: #b8702f; }
.sns-rating input:focus-visible + label { outline: 2px solid #b8702f; outline-offset: 2px; border-radius: 4px; }
.sns-rating:has(.sns-invalid) label { color: #e6b0aa; }
.sns-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sns-share-link { text-align: center; margin: 18px auto 0; font-family: 'Open Sans', sans-serif; font-size: 14px; }
.sns-share-link a { color: #8a6d3b; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Desktop spacing pass: FAQ + Care + footer (owner feedback 2026-10-07) ----
   One shared 760px column for the whole footer so the about text, the locations grid and
   the three link columns line up on the same edges; readable about text; FAQ heading +
   subtitle centred over the question list with a normal gap before the footer; Care
   sections all on the same 1140px edges; the shared "Get in Touch" block's text sits at
   the top of its column instead of floating in the middle of the empty space. */
.section.footer .footer-holder { width: 760px; max-width: 100%; margin-left: auto; margin-right: auto; }
.section.footer .footer-holder .paragraph-3 { font-size: 14px; line-height: 1.75; text-align: center; color: #6f675f; max-width: 640px; margin: 18px auto 34px; }
.section.footer .collection-list-4 { width: 760px; grid-template-columns: repeat(5, 1fr); justify-content: stretch; column-gap: 16px; row-gap: 18px; margin: 0 auto; text-align: left; }
.section.footer .grid-13.footer { width: 760px; max-width: 100%; grid-template-columns: repeat(3, 1fr); justify-content: stretch; column-gap: 16px; margin: 48px auto 0; text-align: left; }
.section.footer .social-wrapper { margin-top: 44px; }
.section-67 { padding-bottom: 70px !important; }
.section-67 .faq-groups-wrapper { max-width: 860px; margin: 0 auto; }
.section-67 .faq-menu-title-label { display: block; width: 100%; text-align: center !important; margin-left: 0 !important; padding-left: 0 !important; }
.sns-faq-sub { text-align: center; margin: 8px auto 40px; font-size: 16px; }
.section-67 #general { padding-top: 0 !important; padding-bottom: 0 !important; }
.sns-cards.two { max-width: 1140px; }
@media (min-width: 768px) {
  .e-consultation-form .grid-11-copy { align-items: start; }
  .e-consultation-form .div-block-25 { padding-top: 36px; align-self: start !important; }
  .e-consultation-form .div-block-25 > .h2 { font-size: 32px; line-height: 1.25; margin: 6px 0 12px; }
  .e-consultation-form .div-block-25 > .h3b { font-size: 16px; line-height: 1.6; }
}
@media (max-width: 991px) {
  .section.footer .footer-holder, .section.footer .collection-list-4, .section.footer .grid-13.footer { width: 100%; padding-left: 20px; padding-right: 20px; }
  .section.footer .collection-list-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .section.footer .grid-13.footer { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Mobile: centre the whole "Get in touch" text column (owner 2026-10-20) ----
   On phones the eyebrow/heading/blurb read centred but the phone + email rows stayed
   flush-left, so the column looked off-centre. Centre every row below 768px. */
@media (max-width: 767px) {
  .e-consultation-form .div-block-25 { align-items: center !important; text-align: center !important; padding-left: 16px; padding-right: 16px; }
  .e-consultation-form .div-block-25 > * { text-align: center !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; justify-content: center !important; }
  .e-consultation-form .div-block-25 .sns-tel { display: inline-block; word-break: break-word; }
}
/* Desktop: one consistent left edge for the same column (the blurb was centred while the
   phone/email/eyebrow sat flush-left, so every row started somewhere different). */
@media (min-width: 768px) {
  .e-consultation-form .div-block-25 > * { text-align: left !important; justify-content: flex-start !important; align-self: flex-start !important; margin-left: 0 !important; }
}