/* Master Plaster Ltd. — site styles */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', system-ui, sans-serif;
  color:#1a1714; background:#ffffff;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }
a { color:#b8923f; text-decoration:none; }
a:hover { color:#8f7130; }
::selection { background:#d4af5e; color:#1a1714; }
:focus-visible { outline:2px solid #b8923f; outline-offset:2px; }
input, textarea, select, button { font-family:'Inter', system-ui, sans-serif; }
input::placeholder, textarea::placeholder { color:#a8a29a; }
form input, form textarea, form select { width:100%; min-width:0; max-width:100%; }
form label { min-width:0; }
button { cursor:pointer; }
[hidden] { display:none !important; }

.x1:hover { color:#d4af5e !important; }
.x2:hover { color:#f7f4ef !important; }
.x3:hover { background:#d4af5e !important; color:#1a1714 !important; }
.x4:hover { background:#d4af5e !important; }
.x5:hover { background:#ffffff !important; color:#1a1714 !important; border-color:#ffffff !important; }
.x6:hover { background:#f7f4ef !important; }
.x7:hover { background:#2a241c !important; }
.x8:hover { color:#1a1714 !important; border-color:#1a1714 !important; }
.x9:hover { color:#ffffff !important; border-color:#ffffff !important; }
.x10:hover { background:#1a1714 !important; }
.x11:hover { background:#ffffff !important; color:#1a1714 !important; }
.x12:hover { background:#2a241c !important; color:#d4af5e !important; }
.x13:hover { background:#ffffff !important; }
.x14:hover { background:#b8923f !important; color:#1a1714 !important; }
.x15:hover { border-color:#b8923f !important; }
.x16:focus { border-color:#b8923f !important; }

/* transitions on interactive chrome */
a, button, input, select, textarea { transition:background-color .18s ease, color .18s ease, border-color .18s ease; }

@media (max-width: 1100px) {
  body { overflow-x:hidden; }
}
@media print {
  header, footer, [style*="position:fixed"] { display:none !important; }
}

/* ------------------------------------------------------------------
   Tablet and phone layout.
   Page layout lives in inline styles, so these rules match on the
   inline values with attribute selectors and override with !important.
   ------------------------------------------------------------------ */

.nav-toggle { display:none; }

/* Tablet and down: menu button, call/quote bar, stacked two-column layouts */
@media (max-width: 960px) {
  header > div { padding:12px 20px !important; min-height:64px !important; gap:0 !important; }
  header > div > div { display:none !important; }   /* phone + quote button: the bottom bar covers these */
  .nav-toggle {
    display:inline-flex; align-items:center; gap:10px;
    background:none; border:1px solid rgba(184,146,63,0.5); border-radius:2px; color:#f7f4ef;
    padding:10px 14px; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; font-weight:600;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display:block; width:16px; height:2px; background:#d4af5e; position:relative; transition:transform .2s ease, background-color .2s ease;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content:""; position:absolute; left:0; }
  .nav-toggle-bars::before { top:-5px; }
  .nav-toggle-bars::after { top:5px; }
  .nav-open .nav-toggle-bars { background:transparent; }
  .nav-open .nav-toggle-bars::before { transform:translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle-bars::after { transform:translateY(-5px) rotate(-45deg); }

  .js header nav { display:none !important; }
  header nav { flex-basis:100%; flex-direction:column; align-items:stretch !important; gap:0 !important; padding:10px 0 6px; }
  .js header.nav-open nav { display:flex !important; }
  header nav a { padding:15px 0 !important; font-size:12.5px !important; border-top:1px solid rgba(247,244,239,0.08); }
  header nav a span { right:auto !important; width:28px; bottom:10px !important; }

  /* Floating Call / Quote buttons become a full-width bar */
  body > div[style*="position:fixed"] {
    left:0 !important; right:0 !important; bottom:0 !important; gap:0 !important;
    padding-bottom:env(safe-area-inset-bottom); background:#1a1714;
  }
  body > div[style*="position:fixed"] a { flex:1; text-align:center; border-radius:0 !important; box-shadow:none !important; padding:17px 10px !important; }

  /* Two-column splits stack (photo-only grids with a 4px gap stay side by side) */
  [style*="grid-template-columns:minmax(0, 1"]:not([style*="gap:4px"]):not([style*="gap:22px"]):not([style*="auto minmax"]):not([style*="1fr 1.1fr"]) {
    grid-template-columns:minmax(0, 1fr) !important; gap:40px !important;
  }
  /* Blog index cards: no gap between photo and text, photo first */
  a[style*="grid-template-columns"][style*="gap:0"] { gap:0 !important; }
  a[style*="grid-template-columns"] > div[style*="height:320px"] { order:-1; }

  /* Footer: two columns */
  footer [style*="grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) 1fr 1.1fr"] {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:40px 24px !important;
  }

  /* Galleries: four across becomes two */
  [style*="grid-template-columns:repeat(4, minmax(0, 1fr))"] { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-auto-rows:212px"] { grid-auto-rows:170px !important; }
}

/* Phone */
@media (max-width: 640px) {
  /* Section spacing: 60px side padding becomes 20px, vertical padding shrinks */
  [style*="padding:100px 60px;"], [style$="padding:100px 60px"] { padding:60px 20px !important; }
  [style*="padding:104px 60px;"], [style$="padding:104px 60px"] { padding:62px 20px !important; }
  [style*="padding:104px 60px 88px;"], [style$="padding:104px 60px 88px"] { padding:62px 20px 53px !important; }
  [style*="padding:110px 60px;"], [style$="padding:110px 60px"] { padding:66px 20px !important; }
  [style*="padding:120px 60px 110px;"], [style$="padding:120px 60px 110px"] { padding:72px 20px 66px !important; }
  [style*="padding:60px 60px 96px;"], [style$="padding:60px 60px 96px"] { padding:36px 20px 58px !important; }
  [style*="padding:72px 60px;"], [style$="padding:72px 60px"] { padding:43px 20px !important; }
  [style*="padding:72px 60px 88px;"], [style$="padding:72px 60px 88px"] { padding:43px 20px 53px !important; }
  [style*="padding:72px 60px 96px;"], [style$="padding:72px 60px 96px"] { padding:43px 20px 58px !important; }
  [style*="padding:76px 60px 0;"], [style$="padding:76px 60px 0"] { padding:46px 20px 0 !important; }
  [style*="padding:80px 60px;"], [style$="padding:80px 60px"] { padding:48px 20px !important; }
  [style*="padding:80px 60px 0;"], [style$="padding:80px 60px 0"] { padding:32px 20px 0 !important; }
  [style*="padding:80px 60px 104px;"], [style$="padding:80px 60px 104px"] { padding:48px 20px 62px !important; }
  [style*="padding:88px 60px;"], [style$="padding:88px 60px"] { padding:53px 20px !important; }
  [style*="padding:88px 60px 104px;"], [style$="padding:88px 60px 104px"] { padding:53px 20px 62px !important; }
  [style*="padding:88px 60px 96px;"], [style$="padding:88px 60px 96px"] { padding:53px 20px 58px !important; }
  [style*="padding:96px 60px;"], [style$="padding:96px 60px"] { padding:58px 20px !important; }
  [style*="padding:96px 60px 84px;"], [style$="padding:96px 60px 84px"] { padding:58px 20px 50px !important; }
  [style*="padding:0 60px 56px"] { padding:0 20px 32px !important; }
  [style*="padding:0 60px 88px"] { padding:0 20px 53px !important; }
  [style*="padding:0 60px 96px"] { padding:0 20px 58px !important; }
  [style*="padding-top:96px"], [style*="padding-top:88px"] { padding-top:48px !important; }
  [style*="padding:48px 52px"] { padding:30px 22px !important; }
  [style*="padding:44px 40px"] { padding:32px 24px !important; }
  [style*="padding:44px 36px 48px"] { padding:32px 24px 34px !important; }

  /* Headings */
  h1[style*="font-size"] { font-size:40px !important; }
  h1[style*="font-size:74px"] { font-size:46px !important; }
  h1[style*="font-size:52px"], h1[style*="font-size:54px"] { font-size:34px !important; }
  h2[style*="font-size:3"], h2[style*="font-size:4"] { font-size:31px !important; }
  h2[style*="font-size:31px"], h2[style*="font-size:34px"] { font-size:26px !important; }

  /* Everything else stacks into one column */
  [style*="grid-template-columns:repeat(3, minmax(0, 1fr))"]:not([style*="gap:4px"]),
  [style*="grid-template-columns:repeat(2, minmax(0, 1fr))"],
  form [style*="grid-template-columns"] {
    grid-template-columns:minmax(0, 1fr) !important;
  }
  /* Footer: brand and contact full width, Pages and Services side by side */
  footer [style*="grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) 1fr 1.1fr"] > :first-child,
  footer [style*="grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) 1fr 1.1fr"] > :last-child { grid-column:1 / -1; }
  /* Tiles that spanned two columns would otherwise force a second column */
  [style*="grid-column:span 2"]:not([style*="position:relative; overflow:hidden"]) { grid-column:auto !important; }
  [style*="min-height:230px"] { min-height:0 !important; }
  footer [style*="grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)"] {
    grid-template-columns:minmax(0, 1fr) !important; gap:14px !important;
  }
  footer [style*="grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)"] > * { justify-self:center !important; text-align:center !important; }

  /* Trust strip under the home hero */
  div[style*="padding:22px 40px"] { flex-direction:column; align-items:center; gap:8px; padding:20px !important; }
  div[style*="padding:22px 40px"] > span { padding:0 !important; border:none !important; }

  /* Photo heights */
  section[style*="height:480px"] { height:380px !important; }
  div[style*="height:520px"], div[style*="height:480px"], div[style*="height:440px"],
  div[style*="height:420px"], div[style*="height:400px"] { height:260px !important; }
  div[style*="height:320px"], div[style*="height:300px"] { height:220px !important; }
  div[style*="height:238px"] { height:128px !important; }
  div[style*="height:172px"] { height:130px !important; }
  div[style*="height:230px"]:not([style*="min-height"]) { height:200px !important; }
  [style*="grid-auto-rows:212px"] { grid-auto-rows:140px !important; }

  /* Hero and call-to-action buttons go full width so they are easy to tap */
  section [style*="display:flex; gap:14px"] > a { flex:1 1 100%; text-align:center; }
}