/* Premium Safety Glass — main custom styles
 * Phase 1: base tokens + button primitives only.
 * Homepage sections (floating header, 3D hero, product grid, etc.)
 * are added in Phase 3 after design approval.
 */

/* ---- Button primitives (CTA hierarchy: green = act, yellow = act now) ---- */
.psg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--psg-font);font-weight:600;line-height:1;
  padding:.95em 1.6em;border-radius:var(--psg-radius-sm);
  text-decoration:none;border:0;cursor:pointer;transition:background .15s ease,transform .05s ease;
}
.psg-btn:active{transform:translateY(1px);}

.psg-btn--green{background:var(--psg-green);color:var(--psg-white);}
.psg-btn--green:hover{background:var(--psg-green-hover);color:var(--psg-white);}

.psg-btn--yellow{background:var(--psg-orange);color:var(--psg-ink);}
.psg-btn--yellow:hover{background:var(--psg-orange-hover);color:var(--psg-ink);}

.psg-btn--blue{background:var(--psg-brand);color:var(--psg-white);}
.psg-btn--blue:hover{background:var(--psg-brand-dark);color:var(--psg-white);}

.psg-btn--whatsapp{background:var(--psg-whatsapp);color:var(--psg-white);}
.psg-btn--outline{background:transparent;border:2px solid var(--psg-brand);color:var(--psg-brand);}
.psg-btn--outline:hover{background:var(--psg-brand);color:var(--psg-white);}

/* respect reduced motion globally for our additions */
@media (prefers-reduced-motion: reduce){
  .psg-btn{transition:none;}
}

/* =====================================================================
   HOMEPAGE (front-page.php) — Phase 2: header + 3D hero
   ===================================================================== */
.psg-home{margin:0;}
.psg-home .psg-main{font-family:var(--psg-font);color:var(--psg-ink);}
.psg-skip{position:absolute;left:-9999px;top:0;background:var(--psg-ink);color:#fff;padding:10px 16px;z-index:1000;border-radius:0 0 8px 0;}
.psg-skip:focus{left:0;}

/* ---- Floating header ---- */
.psg-header{position:fixed;top:0;left:0;right:0;z-index:900;transition:background .25s ease,box-shadow .25s ease,padding .25s ease;}
/* logged-in admins: sit below the WP admin bar instead of under it */
body.admin-bar .psg-header{top:32px;}
@media (max-width:782px){body.admin-bar .psg-header{top:46px;}}
.psg-header__inner{max-width:var(--psg-maxw);margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:24px;}
.psg-header__logo{flex:0 0 auto;line-height:0;}
.psg-header__logo img{height:46px;width:auto;display:block;transition:height .25s ease;}
.psg-header[data-state="scrolled"]{background:var(--psg-white);box-shadow:0 4px 18px rgba(14,34,51,.10);}
.psg-header[data-state="scrolled"] .psg-header__inner{padding-top:10px;padding-bottom:10px;}
.psg-header[data-state="scrolled"] .psg-header__logo img{height:38px;}

/* nav */
.psg-nav{margin-left:auto;}
.psg-nav__list{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
.psg-nav__list a,.psg-nav__toggle{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:15px;color:var(--psg-ink);text-decoration:none;background:none;border:0;cursor:pointer;padding:10px 12px;border-radius:8px;font-family:inherit;}
.psg-nav__list a:hover,.psg-nav__toggle:hover{color:var(--psg-brand);}
.psg-header[data-state="top"] .psg-nav__list a,
.psg-header[data-state="top"] .psg-nav__toggle{color:var(--psg-ink);}

/* mega menu */
.psg-nav__mega-parent{position:relative;}
.psg-mega{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px);min-width:480px;background:#fff;border-radius:var(--psg-radius);box-shadow:var(--psg-shadow-lg);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;z-index:950;}
.psg-nav__mega-parent:hover .psg-mega,.psg-nav__mega-parent.is-open .psg-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
/* invisible hover bridge across the 8px gap between trigger and panel —
   without it the menu closes before the pointer can reach it (2026-09-04) */
.psg-mega::before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px;}
.psg-mega__item{padding:10px 12px !important;border-radius:8px;font-weight:500 !important;color:var(--psg-ink) !important;}
.psg-mega__item:hover{background:var(--psg-surface);color:var(--psg-brand) !important;}

/* header CTAs (both phone + quote are now buttons) */
.psg-header__cta{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.psg-call{padding:9px 15px;font-size:14px;gap:7px;white-space:nowrap;}
.psg-call svg{flex:0 0 auto;}
.psg-call__num{font-weight:700;letter-spacing:.01em;}
.psg-header__quote{font-size:14px;padding:10px 18px;white-space:nowrap;}
.psg-nav__cta-mobile{display:none;}

/* burger (mobile only) */
.psg-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.psg-burger span{display:block;width:26px;height:3px;border-radius:3px;background:var(--psg-ink);transition:.2s;}

/* ---- Hero ---- */
.psg-hero{position:relative;padding:130px 24px 70px;background:
    radial-gradient(1200px 600px at 78% -10%, rgba(0,146,63,.10), transparent 60%),
    linear-gradient(180deg, var(--psg-surface), #fff 70%);
  overflow:hidden;}
.psg-hero__inner{max-width:var(--psg-maxw);margin:0 auto;}

/* centered intro above both columns */
.psg-hero__head{max-width:820px;margin:0 auto 38px;text-align:center;}
.psg-eyebrow{display:inline-block;margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--psg-brand);background:rgba(0,146,63,.10);padding:7px 14px;border-radius:999px;}
.psg-hero__title{font-size:clamp(30px,4vw,48px);line-height:1.08;margin:0 0 16px;color:var(--psg-ink);font-weight:800;letter-spacing:-.01em;}
.psg-hero__sub{font-size:17px;line-height:1.6;color:var(--psg-muted);margin:0 auto;max-width:48ch;}

/* equal-height two columns: model+trust | form */
.psg-hero__cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch;}

/* VISUAL column = a "showcase" card mirroring the form card; equal height */
.psg-hero__visual{display:flex;flex-direction:column;padding:22px 22px 22px;border-radius:var(--psg-radius);border:1px solid rgba(14,34,51,.06);box-shadow:var(--psg-shadow);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,146,63,.10), transparent 62%),
    linear-gradient(180deg,#ffffff, var(--psg-surface));}
.psg-model-wrap{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:320px;margin:0 0 14px;}
.psg-model{width:100%;height:100%;min-height:320px;--poster-color:transparent;background:transparent;}
.psg-model__fallback{width:100%;height:100%;background:
    radial-gradient(60% 60% at 50% 40%, rgba(0,146,63,.18), transparent 70%);}

.psg-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;list-style:none;margin:0;padding:6px 0 2px;border-top:1px solid rgba(14,34,51,.07);}
.psg-trust li{padding-top:14px;}
.psg-trust li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--psg-ink);}
.psg-trust svg{color:var(--psg-green);flex:0 0 auto;}

/* ---- Form card (wraps the reused Divi form) ---- */
.psg-hero__form{display:flex;}
.psg-formcard{flex:1 1 auto;width:100%;background:#fff;border-radius:var(--psg-radius);box-shadow:var(--psg-shadow-lg);padding:28px 26px;border:1px solid rgba(14,34,51,.06);display:flex;flex-direction:column;}
.psg-formcard .et_pb_contact{flex:1 1 auto;}
.psg-formcard__head{margin-bottom:14px;}
.psg-formcard__title{font-size:24px;font-weight:800;margin:0 0 4px;color:var(--psg-ink);}
.psg-formcard__sub{margin:0;color:var(--psg-muted);font-size:15px;}
.psg-formcard__call{display:block;text-align:center;margin-top:14px;color:var(--psg-muted);font-size:15px;text-decoration:none;}
.psg-formcard__call strong{color:var(--psg-brand);}
.psg-formcard__err{color:#b00;font-weight:600;}

/* hide the Divi form's own title (we provide our own heading) */
.psg-formcard .et_pb_contact_main_title{display:none !important;}
/* keep GCLID field in the DOM + submitting, but hidden from view */
.psg-formcard .et_pb_contact_field[data-id="gclid_field"]{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* restyle the reused Divi form fields */
.psg-formcard .et_pb_contact_form_0 p,
.psg-formcard .et_pb_contact p{padding:0 0 12px;margin:0;}
.psg-formcard .et_pb_contact_form input[type="text"],
.psg-formcard .et_pb_contact_form input[type="email"],
.psg-formcard .et_pb_contact_form textarea,
.psg-formcard .et_pb_contact_form select{
  width:100%;background:#fff !important;border:1px solid #d4dbe3 !important;border-radius:10px !important;
  padding:13px 14px !important;font-size:15px !important;color:var(--psg-ink) !important;font-family:var(--psg-font) !important;box-shadow:none !important;}
.psg-formcard .et_pb_contact_form input:focus,
.psg-formcard .et_pb_contact_form textarea:focus{outline:none;border-color:var(--psg-brand) !important;box-shadow:0 0 0 3px rgba(0,146,63,.15) !important;}
.psg-formcard .et_pb_contact_form textarea{min-height:96px;}
.psg-formcard .et_pb_contact_form ::placeholder{color:#9aa4af;}

/* bottom row: [ equation = textbox ] ............ [ Submit ] — one line, equal heights */
.psg-formcard .et_contact_bottom_container{display:flex !important;align-items:center;justify-content:flex-end;gap:16px;float:none !important;width:100%;margin:4px 0 0 !important;text-align:left;}
.psg-formcard .et_pb_contact_right{display:flex;align-items:center;margin:0;min-width:0;}
.psg-formcard .et_pb_contact_right p{display:flex !important;align-items:center;gap:8px;white-space:nowrap;padding:0 !important;margin:0 !important;}
.psg-formcard .et_pb_contact_captcha_question{font-weight:600;color:var(--psg-ink);}
/* captcha textbox: keep it small + inline (override the full-width field rule) */
.psg-formcard input.et_pb_contact_captcha{width:62px !important;height:48px !important;padding:0 8px !important;text-align:center;flex:0 0 auto;}

/* submit = YELLOW (act-now), same height as the captcha textbox */
.psg-formcard .et_pb_contact_submit,
.psg-formcard .et_contact_bottom_container .et_pb_button{
  background:var(--psg-orange) !important;color:var(--psg-ink) !important;border:0 !important;
  border-radius:10px !important;height:48px !important;padding:0 30px !important;font-size:16px !important;font-weight:700 !important;
  width:auto !important;display:inline-flex !important;align-items:center;line-height:1;flex:0 0 auto;transition:background .15s ease;}
.psg-formcard .et_pb_contact_submit:hover,
.psg-formcard .et_contact_bottom_container .et_pb_button:hover{background:var(--psg-orange-hover) !important;color:var(--psg-ink) !important;}
.psg-formcard .et_pb_contact_submit:after,
.psg-formcard .et_contact_bottom_container .et_pb_button:after{display:none !important;}

/* privacy consent (sits above the captcha + submit row) */
.psg-privacy{margin:2px 0 14px;}
.psg-privacy__label{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--psg-muted);cursor:pointer;margin:0;}
.psg-formcard .et_pb_contact_form input.psg-privacy__cb,
.psg-privacy__cb{width:18px !important;height:18px !important;min-height:0 !important;flex:0 0 auto;margin:1px 0 0 !important;padding:0 !important;background:transparent !important;accent-color:var(--psg-green);border-radius:4px !important;box-shadow:none !important;}
.psg-privacy__label a{color:var(--psg-brand);font-weight:600;text-decoration:underline;}
.psg-privacy__err{color:#c0392b;font-size:13px;margin:7px 0 0;font-weight:600;}
.psg-privacy.is-invalid .psg-privacy__cb{outline:2px solid #c0392b;outline-offset:2px;}

/* success / error states */
.psg-formcard .et-pb-contact-message{font-size:15px;line-height:1.5;}
.psg-formcard .et-pb-contact-message p{padding:0 0 8px;}

/* phase note (temporary) */
.psg-phase-note{text-align:center;color:var(--psg-muted);font-size:14px;padding:30px;background:var(--psg-surface);}

/* ---- Reposition the existing WhatsApp (joinchat) — do NOT add a new one ---- */
.joinchat{--whatsapp:var(--psg-whatsapp);}
.joinchat__button{box-shadow:var(--psg-shadow) !important;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  .psg-hero__cols{grid-template-columns:1fr;gap:26px;}
  /* Mobile order (owner, 2026-09-07): 3D model first, form below.
     Trust badges under the model hidden on mobile so the form sits
     directly beneath the model. */
  .psg-hero__visual{order:1;}
  .psg-hero__form{order:2;}
  .psg-hero__visual .psg-trust{display:none;}
  .psg-model-wrap{min-height:auto;}
  .psg-model{height:clamp(240px,40vh,360px);min-height:240px;}
}
@media (max-width:860px){
  .psg-nav,.psg-header__quote{display:none;}
  .psg-burger{display:flex;}
  .psg-header{background:var(--psg-white);box-shadow:0 4px 18px rgba(14,34,51,.10);}
  .psg-header__cta{margin-left:auto;gap:8px;}
  .psg-call{padding:9px 13px;}
  /* mobile drawer */
  .psg-nav.is-open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--psg-white);box-shadow:var(--psg-shadow-lg);padding:12px 16px 16px;max-height:calc(100vh - 64px);overflow:auto;}
  .psg-nav.is-open .psg-nav__list{flex-direction:column;align-items:stretch;gap:2px;}
  .psg-nav.is-open .psg-nav__list>li>a,.psg-nav.is-open .psg-nav__toggle{padding:12px 10px;font-size:16px;width:100%;justify-content:space-between;}
  .psg-nav.is-open .psg-mega{position:static;transform:none;opacity:1;visibility:visible;min-width:0;box-shadow:none;grid-template-columns:1fr;padding:4px 0 8px 12px;}
  .psg-nav__cta-mobile{display:block;margin-top:10px;}
  .psg-nav__cta-mobile .psg-btn{width:100%;justify-content:center;}
  .psg-hero{padding-top:92px;}
}
@media (max-width:560px){
  .psg-header__inner{padding:10px 14px;gap:10px;}
  .psg-header__logo img{height:38px;}
  .psg-formcard{padding:22px 16px;}
  .psg-hero{padding-left:16px;padding-right:16px;}
  .psg-hero__visual{padding:16px;}
  .psg-wrap{padding:0 16px;}
}
@media (max-width:400px){
  .psg-call .psg-call__num{display:none;}   /* icon-only call on very small screens */
  .psg-call{padding:10px;}
}

/* reduced motion: model-viewer handled in JS; also calm transitions */
@media (prefers-reduced-motion: reduce){
  .psg-header,.psg-mega,.psg-model{transition:none;}
}
/* =====================================================================
   PHASE 3 — homepage sections, footer
   ===================================================================== */
.psg-wrap{max-width:var(--psg-maxw);margin:0 auto;padding:0 24px;}
.psg-section{padding:72px 0;}
.psg-section--surface{background:var(--psg-surface);}
.psg-section__head{text-align:center;max-width:720px;margin:0 auto 40px;}
.psg-section__title{font-size:clamp(26px,3vw,36px);font-weight:800;color:var(--psg-ink);margin:0 0 12px;letter-spacing:-.01em;}
.psg-section__sub{font-size:17px;line-height:1.6;color:var(--psg-muted);margin:0;}
.psg-grid{display:grid;gap:24px;}
.psg-grid--3{grid-template-columns:repeat(3,1fr);}

/* trust row */
.psg-trustrow{background:var(--psg-white);border-top:1px solid var(--psg-border);border-bottom:1px solid var(--psg-border);}
.psg-trustrow__inner{max-width:var(--psg-maxw);margin:0 auto;padding:22px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.psg-trustrow__item{display:flex;align-items:center;gap:12px;color:var(--psg-brand);}
.psg-trustrow__item div{display:flex;flex-direction:column;line-height:1.25;}
.psg-trustrow__item strong{color:var(--psg-ink);font-size:16px;}
.psg-trustrow__item span{color:var(--psg-muted);font-size:13px;}

/* product cards */
.psg-card{display:flex;flex-direction:column;background:var(--psg-white);border:1px solid var(--psg-border);border-radius:var(--psg-radius);overflow:hidden;text-decoration:none;box-shadow:var(--psg-shadow);transition:transform .15s ease,box-shadow .15s ease;}
.psg-card:hover{transform:translateY(-4px);box-shadow:var(--psg-shadow-lg);}
.psg-card__media{aspect-ratio:16/10;background-color:var(--psg-surface);position:relative;overflow:hidden;}
.psg-card__img,.psg-card__media-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.psg-card__media-bg{background-size:cover;background-position:center;}
.psg-card:hover .psg-card__img{transform:scale(1.03);}
.psg-card__img{transition:transform .25s ease;}
.psg-card__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1 1 auto;}
.psg-card__title{font-size:19px;font-weight:700;color:var(--psg-ink);margin:0 0 6px;}
.psg-card__blurb{font-size:14.5px;line-height:1.55;color:var(--psg-muted);margin:0 0 16px;flex:1 1 auto;}
.psg-card__cta{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--psg-green);font-size:15px;}
.psg-card:hover .psg-card__cta{gap:11px;}

/* features / why */
.psg-feature{background:var(--psg-white);border:1px solid var(--psg-border);border-radius:var(--psg-radius);padding:28px;text-align:center;}
.psg-feature__icon{width:58px;height:58px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,146,63,.10);color:var(--psg-brand);margin-bottom:16px;}
.psg-feature h3{font-size:19px;font-weight:700;color:var(--psg-ink);margin:0 0 8px;}
.psg-feature p{font-size:15px;line-height:1.6;color:var(--psg-muted);margin:0;}

/* steps */
.psg-step{position:relative;background:var(--psg-white);border:1px solid var(--psg-border);border-radius:var(--psg-radius);padding:30px 24px 24px;}
.psg-step__n{position:absolute;top:-18px;left:24px;width:40px;height:40px;border-radius:50%;background:var(--psg-green);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:18px;}
.psg-step h3{margin:10px 0 8px;font-size:19px;color:var(--psg-ink);}
.psg-step p{margin:0;color:var(--psg-muted);font-size:15px;line-height:1.6;}
.psg-how__cta{text-align:center;margin-top:36px;}

/* gallery */
.psg-gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.psg-gallery__item{aspect-ratio:1/1;border-radius:var(--psg-radius-sm);background-color:var(--psg-surface);transition:transform .15s ease,filter .15s ease;position:relative;overflow:hidden;}
.psg-gallery__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.psg-gallery__item:hover{transform:scale(1.02);filter:brightness(1.06);}

/* service area + map */
.psg-area__inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.psg-area__list{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;list-style:none;margin:18px 0 24px;padding:0;}
.psg-area__list li{display:flex;align-items:center;gap:8px;color:var(--psg-ink);font-weight:500;}
.psg-area__list svg{color:var(--psg-green);flex:0 0 auto;}
.psg-area__contact{display:flex;gap:12px;flex-wrap:wrap;}
.psg-area__map{height:360px;border-radius:var(--psg-radius);overflow:hidden;box-shadow:var(--psg-shadow);border:1px solid var(--psg-border);}
.psg-area__map iframe{display:block;width:100%;height:100%;}

/* FAQ accordion */
.psg-faq__inner{max-width:820px;}
.psg-accordion{display:flex;flex-direction:column;gap:12px;}
.psg-acc__item{background:var(--psg-white);border:1px solid var(--psg-border);border-radius:var(--psg-radius-sm);overflow:hidden;}
.psg-acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:none;border:0;cursor:pointer;font-family:inherit;font-size:16.5px;font-weight:600;color:var(--psg-ink);text-align:left;}
.psg-acc__q svg{flex:0 0 auto;color:var(--psg-brand);transition:transform .2s ease;}
.psg-acc__q[aria-expanded="true"] svg{transform:rotate(45deg);}
.psg-acc__a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.psg-acc__a p{margin:0;padding:0 20px 20px;color:var(--psg-muted);line-height:1.65;font-size:15.5px;}

/* final CTA band */
.psg-cta-band{background:linear-gradient(120deg,var(--psg-brand),var(--psg-brand-dark));}
.psg-cta-band__inner{padding:48px 24px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.psg-cta-band h2{color:#fff;font-size:clamp(24px,2.6vw,32px);margin:0 0 6px;font-weight:800;}
.psg-cta-band p{color:rgba(255,255,255,.9);margin:0;font-size:16px;}
.psg-cta-band__actions{display:flex;gap:12px;flex-wrap:wrap;}

/* footer */
.psg-footer{background:var(--psg-dark);color:#cfdae4;}
.psg-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding:56px 24px 40px;}
.psg-footer__col h3{color:#fff;font-size:16px;margin:0 0 16px;font-weight:700;}
.psg-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.psg-footer__col a{color:#cfdae4;text-decoration:none;font-size:14.5px;}
.psg-footer__col a:hover{color:#fff;}
.psg-footer__brand img{height:44px;width:auto;margin-bottom:14px;background:#fff;padding:8px 10px;border-radius:8px;}
.psg-footer__brand p{font-size:14.5px;line-height:1.6;color:#aebccb;margin:0 0 14px;max-width:32ch;}
.psg-footer__contact{display:flex;flex-direction:column;gap:6px;}
.psg-footer__contact a{font-weight:600;}
.psg-footer__col .psg-btn{margin-top:6px;}
.psg-footer__bar{border-top:1px solid rgba(255,255,255,.1);}
.psg-footer__bar .psg-wrap{padding-top:18px;padding-bottom:18px;font-size:13px;color:#9fb0c0;}
/* responsive */
@media (max-width:980px){
  .psg-grid--3{grid-template-columns:1fr 1fr;}
  .psg-trustrow__inner{grid-template-columns:1fr 1fr;}
  .psg-gallery__grid{grid-template-columns:repeat(2,1fr);} /* 4 imgs → 2+2, not 3+1 */
  .psg-area__inner{grid-template-columns:1fr;}
  .psg-footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .psg-section{padding:52px 0;}
  .psg-grid--3{grid-template-columns:1fr;}
  .psg-trustrow__inner{grid-template-columns:1fr 1fr;gap:18px;}
  .psg-gallery__grid{grid-template-columns:repeat(2,1fr);}
  .psg-area__map{height:300px;}
  .psg-area__list{grid-template-columns:1fr;}
  .psg-area__contact{flex-direction:column;}
  .psg-area__contact .psg-btn{width:100%;justify-content:center;}
  .psg-footer__grid{grid-template-columns:1fr;gap:26px;}
  .psg-cta-band__inner{flex-direction:column;align-items:flex-start;}
  .psg-cta-band__actions{width:100%;}
  .psg-cta-band__actions .psg-btn{flex:1 1 auto;justify-content:center;}
}
@media (max-width:520px){
  /* form bottom row: keep captcha + submit tidy, allow wrap */
  .psg-formcard .et_contact_bottom_container{flex-wrap:wrap;gap:12px;}
  .psg-formcard .et_pb_contact_submit{flex:1 1 auto;justify-content:center;}
  .psg-trustrow__item{gap:10px;}
  .psg-trustrow__item strong{font-size:15px;}
}
@media (max-width:380px){
  .psg-trustrow__inner{grid-template-columns:1fr;}
  .psg-gallery__grid{grid-template-columns:repeat(2,1fr);}
}

/* =====================================================================
   LIGHT BLUE GLASS — taste test (2026-09-02): hero, header, product
   cards wear frosted glass panes on a daylight-blue ground.
   Pane recipe: translucent tint + backdrop blur + bright polished top
   edge + cool outline + soft blue shadow. Fallback: near-opaque white.
   ===================================================================== */

/* daylight ground with soft glass washes (subtle prism hints at edges) */
body.psg-home{background:
  radial-gradient(900px 480px at 85% -5%, rgba(0,124,194,.10), transparent 60%),
  radial-gradient(700px 420px at -10% 22%, rgba(64,196,255,.09), transparent 55%),
  radial-gradient(600px 380px at 108% 68%, rgba(133,194,38,.05), transparent 60%),
  var(--psg-page);}

/* the pane, as a reusable recipe */
.psg-hero__visual,
.psg-formcard,
.psg-card,
.psg-mega{
  background:var(--psg-glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--psg-glass-line);
  box-shadow:inset 0 1px 0 var(--psg-glass-edge), var(--psg-shadow);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .psg-hero__visual,.psg-formcard,.psg-card,.psg-mega{background:rgba(255,255,255,.94);}
}

/* hero: keep the glow, let the panes float over the washes */
.psg-hero{background:
  radial-gradient(1100px 560px at 78% -10%, rgba(0,124,194,.14), transparent 60%),
  linear-gradient(180deg, rgba(233,243,250,.6), rgba(242,248,252,0) 70%);}
.psg-hero__visual{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,124,194,.10), transparent 62%),
    var(--psg-glass);}
.psg-eyebrow{background:rgba(0,124,194,.10);color:var(--psg-brand-dark);
  border:1px solid rgba(0,124,194,.18);}

/* floating header becomes a true frosted glass bar when scrolled */
.psg-header[data-state="scrolled"]{
  background:var(--psg-elev);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 -1px 0 var(--psg-glass-line), 0 8px 30px rgba(30,80,140,.10);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .psg-header[data-state="scrolled"]{background:rgba(255,255,255,.96);}
}
@media (max-width:860px){
  .psg-header{background:var(--psg-elev);
    -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);}
  .psg-nav.is-open{background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}
}

/* product cards: pane body, photo stays a clean white panel */
.psg-card{overflow:hidden;}
.psg-card__media{background:rgba(255,255,255,.75);}
.psg-card:hover{box-shadow:inset 0 1px 0 var(--psg-glass-edge), var(--psg-shadow-lg);}

/* form fields sit ON the pane: solid white for max readability */
.psg-formcard .et_pb_contact_form input[type="text"],
.psg-formcard .et_pb_contact_form input[type="email"],
.psg-formcard .et_pb_contact_form textarea{
  background:rgba(255,255,255,.92) !important;border-color:var(--psg-input-border) !important;}

/* act-now: orange submit with fixed dark ink */
.psg-formcard .et_pb_contact_submit,
.psg-formcard .et_contact_bottom_container .et_pb_button{color:var(--psg-btn-ink) !important;}
.psg-btn--yellow{color:var(--psg-btn-ink);}
.psg-btn--yellow:hover{color:var(--psg-btn-ink);}

/* =====================================================================
   GLASS GLARE v2 (2026-09-02): the PAGE ITSELF is the pane.
   - Blender-rendered "through-glass" texture as the global ground
     (blurred structures + frost grain + surface reflection), under a
     soft white veil so text stays AA.
   - The light stroke/gloss now sweeps the WHOLE viewport (front glass
     catching light), not the cards. Buttons keep a hover micro-gloss.
   ===================================================================== */

/* global ground: veil + rendered through-glass texture */
body.psg-home{background:
  linear-gradient(180deg, rgba(244,250,253,.72) 0%, rgba(244,250,253,.40) 26%, rgba(244,250,253,.56) 100%),
  url(../img/psg-glass-bg3.webp?v=2) center / cover no-repeat,
  var(--psg-page);}
@media (min-width:1025px){
  body.psg-home{background-attachment:fixed,fixed,scroll;}  /* content glides behind the pane */
}

/* let the texture show through the hero (keep only a faint glow) */
.psg-hero{background:
  radial-gradient(1100px 560px at 78% -10%, rgba(0,124,194,.10), transparent 60%);}

/* ---- GLOBAL gloss sweep: a light stroke gliding across the front glass ---- */
body.psg-home::after{
  content:"";position:fixed;top:-12%;bottom:-12%;left:0;width:44%;
  background:linear-gradient(100deg,
    transparent 0%, rgba(255,255,255,.05) 34%,
    rgba(255,255,255,.34) 47%, rgba(205,233,255,.20) 53%,
    rgba(255,255,255,.05) 66%, transparent 100%);
  transform:translateX(-160%) skewX(-14deg);
  /* sweep is JS-driven (psg.js): twice on load, then random long/short pauses */
  pointer-events:none;z-index:99990;}
body.psg-home.psg-glare-run::after{animation:psgGlareOnce 2.2s ease-in-out;}
@keyframes psgGlareOnce{
  from{transform:translateX(-160%) skewX(-14deg);}
  to  {transform:translateX(420%)  skewX(-14deg);}
}

/* buttons keep a hover micro-gloss (interaction feedback) — ALL .psg-btn
   variants (green/yellow/blue/outline/whatsapp/call). Owner direction
   2026-09-04: prominent/common BUTTONS only — never icons (the cart icon's
   overflow:hidden clipped its count badge). */
.psg-btn{position:relative;overflow:hidden;}
.psg-btn::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:46%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45) 50%,transparent);
  transform:translateX(-180%) skewX(-18deg);pointer-events:none;}
.psg-btn:hover::after{
  animation:psgSheenOnce .7s ease forwards;}
@keyframes psgSheenOnce{to{transform:translateX(320%) skewX(-18deg);}}

@media (prefers-reduced-motion: reduce){
  body.psg-home::after,
  .psg-btn::after{animation:none !important;}
}

/* =====================================================================
   SANDBLASTED ELEMENTS (2026-09-02, owner direction — ref pictureglass.co.za):
   cards / hero panes / trust band read as shapes SANDBLASTED INTO the pane:
   milky matte etched fills with fine grain, soft white halos —
   no glossy edges, no cool borders, no heavy shadows.
   ===================================================================== */

/* the etched-frost recipe (overrides the earlier glossy pane recipe) */
.psg-hero__visual,
.psg-formcard,
.psg-card,
.psg-mega,
.psg-trustrow{
  position:relative;
  background:rgba(255,255,255,.48);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);
  backdrop-filter:blur(10px) saturate(1.05);
  border:0;
  box-shadow:0 0 30px rgba(255,255,255,.55), 0 10px 28px rgba(30,80,140,.06);
}
.psg-hero__visual{background:rgba(255,255,255,.42);} /* model floats on lighter etch */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .psg-hero__visual,.psg-formcard,.psg-card,.psg-mega,.psg-trustrow{background:rgba(255,255,255,.95);}
}

/* fine sandblast grain etched into every shape */
.psg-hero__visual::before,
.psg-formcard::before,
.psg-card::before,
.psg-trustrow::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;}

/* trust band = a full-width etched strip across the pane (no rules/borders) */
.psg-trustrow{border-top:0;border-bottom:0;}
/* classic sandblast dot-gradient fading in from the band's right edge */
.psg-trustrow::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:radial-gradient(circle at 3px 3px, rgba(255,255,255,.95) 2.2px, transparent 2.8px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent 70%, #000 96%);
  mask-image:linear-gradient(90deg,transparent 70%, #000 96%);}

/* eyebrow: small etched pill */
.psg-eyebrow{background:rgba(255,255,255,.72);border:0;color:var(--psg-brand-dark);
  box-shadow:0 0 18px rgba(255,255,255,.6);}

/* mega menu + scrolled header: matte frost, no glossy edge */
.psg-header[data-state="scrolled"]{
  background:rgba(255,255,255,.78);
  box-shadow:0 0 26px rgba(255,255,255,.5), 0 10px 30px rgba(30,80,140,.08);}

/* form fields: clear "windows" cut into the etched card */
.psg-formcard .et_pb_contact_form input[type="text"],
.psg-formcard .et_pb_contact_form input[type="email"],
.psg-formcard .et_pb_contact_form textarea{
  background:rgba(255,255,255,.85) !important;border-color:rgba(120,160,195,.35) !important;}

/* cards: calm matte hover (no glossy lift) */
.psg-card{transition:box-shadow .2s ease, transform .15s ease;}
.psg-card:hover{transform:translateY(-3px);
  box-shadow:0 0 34px rgba(255,255,255,.65), 0 14px 30px rgba(30,80,140,.10);}

/* fix: the mega dropdown must stay absolutely positioned (the sandblast
   recipe's position:relative pulled it into the nav flow and broke the header) */
.psg-mega{position:absolute;}

/* =====================================================================
   SANDBLAST ROLLOUT (2026-09-03): every homepage section joins the
   hero/trust-band language — etched frost shapes on the pane, photos as
   CLEAR-GLASS windows cut into the frost, solid colour = vinyl accents.
   ===================================================================== */

/* ---- PRODUCT CARDS: makeover ---- */
.psg-card{
  border-radius:18px;
  padding:14px 14px 10px;
}
.psg-card__media{
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.85);
  /* polished clear-window edge cut into the frost */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 3px 14px rgba(30,80,140,.12);
}
.psg-card__body{padding:16px 8px 10px;}
.psg-card__title{letter-spacing:-.01em;}
/* CTA becomes an etched pill that fills with vinyl green on hover */
.psg-card__cta{
  margin-top:2px;
  align-self:flex-start;
  padding:9px 16px;
  border:1.5px solid var(--psg-green);
  border-radius:999px;
  color:var(--psg-green);
  transition:background .15s ease,color .15s ease,gap .15s ease;
}
.psg-card:hover .psg-card__cta{background:var(--psg-green);color:#fff;}
/* corner sandblast dot-motif */
.psg-card::after{
  content:"";position:absolute;right:10px;bottom:10px;width:84px;height:56px;
  pointer-events:none;opacity:.55;border-radius:0 0 14px 0;
  background-image:radial-gradient(circle at 3px 3px, rgba(255,255,255,.95) 2px, transparent 2.6px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(135deg,transparent 30%,#000 95%);
  mask-image:linear-gradient(135deg,transparent 30%,#000 95%);
}

/* ---- WHY-US features: etched panels + solid vinyl icon chips ---- */
.psg-feature{
  background:rgba(255,255,255,.48);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0;border-radius:18px;
  box-shadow:0 0 30px rgba(255,255,255,.55), 0 10px 28px rgba(30,80,140,.06);
}
.psg-feature__icon{background:var(--psg-brand);color:#fff;border-radius:14px;
  box-shadow:0 6px 16px rgba(0,124,194,.35);}

/* ---- HOW IT WORKS steps: etched cards, vinyl number dots ---- */
.psg-step{
  background:rgba(255,255,255,.48);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0;border-radius:18px;
  box-shadow:0 0 30px rgba(255,255,255,.55), 0 10px 28px rgba(30,80,140,.06);
}
.psg-step__n{box-shadow:0 6px 14px rgba(11,122,56,.35);}

/* ---- GALLERY: photos as clear windows in the pane ---- */
.psg-gallery__item{
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 4px 16px rgba(30,80,140,.12);
}
.psg-gallery__item:hover{transform:scale(1.015);filter:none;}

/* ---- WHERE WE WORK: etched info panel + map as a clear window ---- */
.psg-area__info{
  background:rgba(255,255,255,.48);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:18px;padding:28px;
  box-shadow:0 0 30px rgba(255,255,255,.55), 0 10px 28px rgba(30,80,140,.06);
}
.psg-area__map{
  border:0;border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 6px 20px rgba(30,80,140,.14);
}

/* ---- FAQ: etched accordion strips ---- */
.psg-acc__item{
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0;border-radius:14px;
  box-shadow:0 0 24px rgba(255,255,255,.5), 0 8px 22px rgba(30,80,140,.05);
}

/* ---- CTA band: a brand-blue VINYL decal panel on the glass ---- */
.psg-cta-band{background:transparent;padding:0 24px clamp(48px,6vw,84px);}
.psg-cta-band__inner{
  background:linear-gradient(120deg,#0075B8,#005E95);
  border-radius:22px;
  padding:clamp(34px,4vw,48px);
  box-shadow:0 18px 44px rgba(0,94,149,.30);
}

/* ---- alternating sections: let the pane show through everywhere ---- */
.psg-section--surface{background:rgba(233,243,250,.35);}

/* =====================================================================
   SANDBLAST v2 for cards + gallery (2026-09-03, owner feedback):
   no more white photo boxes — product shots are etched INTO the frost.
   ===================================================================== */

/* product cards: drop the white "clear window" panel entirely;
   multiply-blend melts the photos' white backgrounds into the frost,
   so the glass product reads as a sandblasted print on the pane */
.psg-card__media{
  background:transparent;
  box-shadow:none;
  border-radius:12px;
}
.psg-card__img,.psg-card__media-bg{
  mix-blend-mode:normal;
  filter:saturate(.95) contrast(1.03);
}

/* gallery: photos sit BEHIND the frost — a milky grained veil that
   wipes clear on hover (frost → clear glass) */
.psg-gallery__item{position:relative;}
.psg-gallery__item .psg-gallery__img{
  transition:filter .3s ease;
}
/* (frost veil removed 2026-09-07 — owner: made photos look low quality) */

/* FINAL: photos shown normally; an INSET FROST FEATHER submerges every edge
   into the etch (inset shadow reaches all edges by construction), plus a
   faint frost tint knocks back the white background. Deterministic. */
.psg-card__media{overflow:hidden;position:relative;}
.psg-card__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:rgba(236,242,247,.22);
  box-shadow:inset 0 0 26px 18px #ECF2F7;
}

/* homepage header cart link (2026-09-03) */
.psg-cartlink{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;color:var(--psg-ink);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 16px rgba(255,255,255,.5);transition:background .15s;}
.psg-cartlink:hover{background:rgba(255,255,255,.85);color:var(--psg-brand-dark);}
.psg-cartlink .psg-cart-count{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--psg-orange);color:#14231A;
  font-size:10.5px;font-weight:800;line-height:16px;text-align:center;}
.psg-cartlink .psg-cart-count.is-empty{display:none;}
@media (max-width:400px){.psg-cartlink{width:38px;height:38px;}}

/* =====================================================================
   HOVER LIGHT-STROKE (2026-09-04, owner request): the one-shot gloss
   sweep the CTA buttons use, extended to product cards and image tiles.
   Uses ::before — ::after is taken on these elements (frost/dot motifs).
   ===================================================================== */
.psg-card__media{position:relative;overflow:hidden;}
.psg-gallery__item{position:relative;overflow:hidden;}
.psg-card__media::before,
.psg-gallery__item::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:46%;z-index:3;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45) 50%,transparent);
  transform:translateX(-180%) skewX(-18deg);pointer-events:none;}
.psg-card:hover .psg-card__media::before,
.psg-gallery__item:hover::before{animation:psgSheenOnce .7s ease forwards;}
@media (prefers-reduced-motion: reduce){
  .psg-card__media::before,.psg-gallery__item::before{animation:none !important;}
}


/* =====================================================================
   HOVER LIGHT-STROKE round 2 (2026-09-04, owner request):
   - hero form Submit button (Divi contact submit) — explicit rule so it
     works regardless of Divi's button class combinations;
   ===================================================================== */
.psg-formcard .et_pb_contact_submit,
.psg-formcard .et_contact_bottom_container .et_pb_button{position:relative;overflow:hidden;}
.psg-formcard .et_pb_contact_submit::before,
.psg-formcard .et_contact_bottom_container .et_pb_button::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:46%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45) 50%,transparent);
  transform:translateX(-180%) skewX(-18deg);pointer-events:none;}
.psg-formcard .et_pb_contact_submit:hover::before,
.psg-formcard .et_contact_bottom_container .et_pb_button:hover::before{
  animation:psgSheenOnce .7s ease forwards;}

/* (2026-09-04: feature/step card sweep removed same day — owner: a light
   stroke shouldn't hit a sandblasted area. Buttons keep theirs.) */

@media (prefers-reduced-motion: reduce){
  .psg-formcard .et_pb_contact_submit::before,
  .psg-formcard .et_contact_bottom_container .et_pb_button::before{animation:none !important;}
}

/* =====================================================================
   WCAG QA PASS (2026-09-04, computed-contrast audit on the glass ground)
   ===================================================================== */
.psg-btn--outline{color:var(--psg-brand-dark);}       /* 4.1–4.2 → 5.2 on glass */
.psg-btn--whatsapp{color:#0E2B1C;}                    /* white on WA green was 1.98 → ~8 */
.psg-footer a.psg-btn{color:#fff;}                    /* footer link color bled into green btn (3.84 → 5.5) */
.psg-formcard a{color:var(--psg-brand-dark);}         /* privacy-policy link 4.35 → 5.2 */

/* =====================================================================
   COMPLETE GLASS SOLUTIONS banner + Google reviews (2026-09-07, parity
   with the live site's homepage).
   ===================================================================== */
.psg-banner .psg-wrap{max-width:1140px;}
.psg-banner__frame{margin:0;border-radius:18px;overflow:hidden;
  box-shadow:0 0 30px rgba(255,255,255,.55), 0 18px 44px -18px rgba(30,80,140,.25);}
.psg-banner__frame img{display:block;width:100%;height:auto;}
.psg-reviews__widget{border-radius:18px;padding:6px 0 0;}
.psg-reviews .ti-widget{opacity:1 !important;height:auto !important;overflow:visible !important;}

/* =====================================================================
   MOBILE POLISH (2026-09-07, owner feedback after go-live):
   1) breathing room between the hero-form fields;
   2) 16px inputs so iOS doesn't zoom on focus;
   3) slightly smaller type on small screens.
   ===================================================================== */
.psg-formcard .et_pb_contact_field{margin-bottom:12px !important;}
/* side-by-side halves (First/Last, Email/Phone) need a horizontal gutter too —
   Divi floats them at bare 50% and our padding reset removed its spacing */
.psg-formcard .et_pb_contact_field_half{width:calc(50% - 6px) !important;}
.psg-formcard .et_pb_contact_field_half:not(.et_pb_contact_field_last){margin-right:12px !important;}
@media (max-width:980px){
  .psg-formcard .et_pb_contact_form input[type="text"],
  .psg-formcard .et_pb_contact_form input[type="email"],
  .psg-formcard .et_pb_contact_form textarea,
  .psg-formcard .et_pb_contact_form select,
  .psg-formcard input,.psg-formcard textarea{font-size:16px !important;}
}
@media (max-width:560px){
  .psg-hero__title{font-size:28px;}
  .psg-hero__sub{font-size:15.5px;}
  .psg-section__title{font-size:23px;}
  .psg-section__sub{font-size:15.5px;}
  .psg-formcard__sub{font-size:14.5px;}
}