/* Texas Stone Atelier: ranch-modern editorial layout; clay, limestone, denim, bronze; strong material imagery and wide horizontal spans. */
:root {
  --clay: #b85b3d;
  --clay-deep: #913e28;
  --limestone: #efe8da;
  --warm-white: #faf7f0;
  --denim: #45667b;
  --denim-deep: #274251;
  --bronze: #2b2922;
  --ink: #20221f;
  --paper: #f8f4ea;
  --line: rgba(43, 41, 34, .23);
  --sans: "Manrope", Arial, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.2rem; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
button, input, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .7rem 1rem; background: var(--clay); color: #fff; font-weight: 800; transition: top .16s var(--ease-out); }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgba(239, 232, 218, .18); background: rgba(38, 38, 32, .94); color: var(--limestone); backdrop-filter: blur(12px); }
.header-inner { display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(230px, 1fr); align-items: center; min-height: 5.45rem; max-width: 1600px; margin: auto; padding: 0 clamp(1rem, 3vw, 3.75rem); gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; width: fit-content; }
.brand img { width: 2.6rem; height: 2.6rem; object-fit: contain; }
.brand-name { display: grid; font-size: .72rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .13em; }
.brand-name b { color: #fffaf2; font-weight: 800; }
.brand-name em { color: #c7c1b4; font-style: normal; margin-top: .22rem; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.5vw, 2.6rem); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.desktop-nav a, .footer-links nav a { text-decoration: none; position: relative; }
.desktop-nav a::after { position: absolute; content: ""; left: 0; bottom: -.45rem; width: 0; height: 2px; background: var(--clay); transition: width .2s var(--ease-out); }
.desktop-nav a:hover::after { width: 100%; }
.header-call { justify-self: end; color: #fffaf2; text-decoration: none; font-weight: 800; font-size: .83rem; white-space: nowrap; }
.header-call span { color: #c7c1b4; font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; margin-right: .45rem; }
.mobile-nav { display: none; }

.hero { position: relative; min-height: min(48.5rem, calc(100vh - 5rem)); color: white; overflow: hidden; display: grid; align-items: stretch; }
.hero-photo { position: absolute; inset: 0; background-image: url("assets/hero.jpg"); background-size: cover; background-position: center; transform: scale(1.01); }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 24, 22, .91) 0%, rgba(25, 25, 20, .71) 40%, rgba(22, 23, 20, .08) 78%), linear-gradient(0deg, rgba(18, 18, 15, .58), transparent 45%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(19rem, .8fr); width: min(1600px, 100%); min-height: inherit; margin: auto; padding-left: clamp(1rem, 7.3vw, 8rem); }
.hero-content { align-self: center; max-width: 46rem; padding: 8.2rem 2rem 7rem 0; }
.eyebrow { margin: 0 0 1.1rem; color: var(--clay); font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.light { color: #ecd7c6; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: .99; letter-spacing: -.035em; }
h1 { margin-bottom: 1.65rem; font-size: clamp(3.6rem, 7.2vw, 7.15rem); }
h1 i { color: #e29b7e; }
.hero-lede { max-width: 39rem; margin-bottom: 2.1rem; color: #e7e3d8; font-size: clamp(1rem, 1.55vw, 1.19rem); line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .9rem; min-height: 3.5rem; padding: .75rem 1.3rem; border: 1px solid transparent; border-radius: 0; font-family: var(--sans); font-size: .77rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: transform .16s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(.97); }
.button-clay { background: var(--clay); color: #fff8ef; }
.button-clay:hover { background: #ca6745; }
.button-bronze { width: 100%; background: var(--bronze); color: var(--limestone); cursor: pointer; }
.button-bronze:hover { background: var(--denim-deep); }
.call-link { color: white; font-size: .82rem; font-weight: 800; text-decoration: none; }
.call-link span { display: inline-block; margin-left: .25rem; color: #e7a48a; transition: transform .18s var(--ease-out); }
.call-link:hover span { transform: translateX(.24rem); }
.hero-plinth { align-self: end; max-width: 26rem; margin-left: auto; padding: 1.8rem clamp(1.25rem, 3vw, 3rem) 2.1rem; background: var(--clay); color: #fff7ec; }
.plinth-number { display: block; margin-bottom: 2.5rem; color: #f3c6ad; font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
.hero-plinth p { max-width: 16rem; margin-bottom: 2.2rem; font-family: var(--serif); font-size: clamp(1.55rem, 2vw, 2rem); line-height: 1.05; }
.trust-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.34); }
.trust-list li { padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.34); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.section-pad { padding: clamp(4.8rem, 9vw, 9rem) clamp(1rem, 7.3vw, 8rem); }
.services { background: var(--limestone); }
.section-heading { display: grid; gap: 2rem; }
.split-heading { grid-template-columns: 1.3fr .7fr; align-items: end; margin-bottom: 3.2rem; }
h2 { margin-bottom: 0; font-size: clamp(2.9rem, 5.2vw, 5.25rem); }
.split-heading > p { max-width: 29rem; margin: 0 0 .5rem auto; color: #535148; font-size: .95rem; line-height: 1.7; }
.service-rail { display: grid; grid-template-columns: repeat(4, minmax(16rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); overflow: auto hidden; }
.service-card { position: relative; min-height: 24rem; padding: 1.6rem 1.6rem 3.6rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.service-card:hover { z-index: 1; transform: translateY(-.45rem); box-shadow: 0 1rem 1.8rem rgba(43,41,34,.12); }
.service-icon { display: block; margin-bottom: 3.65rem; font-family: var(--serif); font-size: 2.3rem; line-height: 1; }
.service-card h3 { max-width: 13rem; margin-bottom: .95rem; font-family: var(--serif); font-size: 1.72rem; font-weight: 400; line-height: 1.03; }
.service-card p { max-width: 16rem; margin: 0; font-size: .87rem; line-height: 1.68; }
.card-index { position: absolute; right: 1.55rem; bottom: 1.35rem; font-size: .65rem; font-weight: 800; letter-spacing: .16em; }
.card-clay { background: #c76647; color: #fff8ef; }.card-lime { background: #eee6d5; color: var(--bronze); }.card-denim { background: var(--denim); color: #f4f2e9; }.card-bronze { background: var(--bronze); color: #e7dece; }

.about-section { display: grid; grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.15fr); background: var(--warm-white); }
.about-image-wrap { position: relative; min-height: 44rem; overflow: hidden; background: var(--denim-deep); }
.about-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.image-tag { position: absolute; right: 0; bottom: 0; padding: .7rem 1rem; background: var(--limestone); color: var(--bronze); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.about-copy { max-width: 60rem; }
.about-copy h2 { max-width: 47rem; margin-bottom: 2rem; }
.large-copy { max-width: 38rem; color: #4c4b44; font-size: 1.05rem; line-height: 1.8; }
.principle-list { display: grid; gap: 0; max-width: 47rem; margin-top: 3.2rem; border-top: 1px solid var(--line); }
.principle-list div { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.principle-list span { color: var(--clay); font-size: .67rem; font-weight: 800; letter-spacing: .13em; }.principle-list p { margin: 0; font-size: .88rem; line-height: 1.65; }

.gallery { background: #ded4c3; }
.gallery-heading { grid-template-columns: 1fr minmax(18rem, 25rem); align-items: end; margin-bottom: 2.8rem; }
.gallery-heading .placeholder-note { margin: 0; padding-left: 1.3rem; border-left: 2px solid var(--clay); color: #5b5149; font-size: .83rem; line-height: 1.68; }
.gallery-grid { display: grid; grid-template-columns: 1.1fr 1.18fr .8fr; grid-template-rows: minmax(15rem, 19rem) minmax(15rem, 19rem); gap: 1rem; }
.gallery-card { position: relative; min-height: 0; margin: 0; overflow: hidden; background: var(--bronze); }
.gallery-card.tall { grid-row: span 2; }.gallery-card.wide { grid-column: span 2; }.gallery-card.image-only { grid-column: 2; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }.gallery-card:hover img { transform: scale(1.04); }
.gallery-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; color: #fff8ed; background: linear-gradient(transparent, rgba(20,19,17,.83)); font-size: .72rem; }.gallery-card figcaption span { font-size: .59rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.gallery-card figcaption b { font-weight: 700; }

.reviews { position: relative; min-height: 31rem; overflow: hidden; background: var(--denim-deep); color: var(--limestone); display: grid; align-items: center; }
.reviews-inner { position: relative; z-index: 1; max-width: 50rem; padding-left: clamp(1rem, 7.3vw, 8rem); padding-right: 2rem; }.reviews h2 { margin-bottom: 1.7rem; max-width: 44rem; }.reviews-inner > p:last-of-type { max-width: 32rem; color: #d5d5ca; line-height: 1.75; }.review-mark { position: absolute; z-index: 0; top: 49%; right: clamp(1rem, 10vw, 14rem); color: rgba(184, 91, 61, .72); font-family: var(--serif); font-size: min(42vw, 42rem); line-height: .4; }

.contact-section { display: grid; grid-template-columns: minmax(20rem, .92fr) minmax(25rem, 1.08fr); background: var(--clay); color: #fff7ed; }.contact-intro { padding-right: clamp(1rem, 6vw, 6rem); }.contact-intro h2 { max-width: 34rem; margin-bottom: 1.9rem; }.contact-intro > p:not(.eyebrow) { max-width: 31rem; color: #fee3d3; line-height: 1.8; }.contact-details { display: grid; gap: .65rem; margin-top: 3.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.38); font-size: .86rem; }.contact-details address { font-style: normal; line-height: 1.6; }.contact-details a { width: fit-content; color: #fff8f0; font-weight: 800; }
.form-panel { align-self: center; margin: clamp(2rem, 6vw, 6rem) clamp(1rem, 7.3vw, 8rem) clamp(2rem, 6vw, 6rem) 0; padding: clamp(1.5rem, 4vw, 3rem); background: var(--limestone); color: var(--bronze); }
#wallpaperContactForm { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }.form-field { min-width: 0; }.full-field { grid-column: 1 / -1; }.form-field label { display: flex; justify-content: space-between; gap: .4rem; margin-bottom: .45rem; font-size: .67rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }.form-field label span { color: var(--clay); }.optional { color: #777167 !important; font-size: .58rem; }.form-field input, .form-field textarea { width: 100%; border: 1px solid rgba(43,41,34,.32); border-radius: 0; background: #fbf8f1; color: var(--bronze); padding: .8rem .85rem; outline: none; transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out); }.form-field textarea { resize: vertical; }.form-field input:focus, .form-field textarea:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(184,91,61,.17); }.form-field small { display: block; margin-top: .32rem; color: #706b62; font-size: .67rem; }.form-success { display: none; padding: 1.5rem; background: var(--denim-deep); color: white; font-size: 1rem; font-weight: 700; }

.map-section { background: var(--bronze); }.map-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 7.3vw, 8rem); color: #ece5d6; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.map-heading a { color: #e7a185; }.map-section iframe { display: block; width: 100%; height: 28rem; border: 0; background: #d6ccbb; }

.site-footer { display: grid; grid-template-columns: 1fr .9fr 1.15fr; gap: 3rem; padding: 3rem clamp(1rem, 7.3vw, 8rem); background: #191a17; color: #d4cfc3; }.footer-brand { display: flex; align-items: center; gap: .9rem; }.footer-brand img { width: 2.9rem; height: 2.9rem; object-fit: contain; }.footer-brand p, .footer-links p { margin: 0; font-size: .75rem; line-height: 1.7; }.footer-brand b { color: #faf4e9; text-transform: uppercase; letter-spacing: .09em; font-size: .67rem; }.footer-details { display: grid; align-content: start; gap: .4rem; font-size: .75rem; }.footer-details address { font-style: normal; }.footer-details a { color: #f1dfd3; }.footer-links { display: grid; align-content: start; gap: .9rem; }.footer-links nav { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; }.footer-links nav a { color: #f7f0e5; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.footer-links small { color: #87877f; font-size: .61rem; }

@media (max-width: 980px) { .header-inner { grid-template-columns: 1fr auto; }.desktop-nav, .header-call { display: none; }.mobile-nav { display: block; position: relative; }.mobile-nav summary { list-style: none; cursor: pointer; border: 1px solid rgba(239,232,218,.45); padding: .55rem .8rem; color: #fffaf2; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.mobile-nav summary::-webkit-details-marker { display: none; }.mobile-panel { position: absolute; top: calc(100% + .8rem); right: 0; display: grid; min-width: 13rem; padding: .6rem; background: var(--bronze); box-shadow: 0 .8rem 2rem rgba(0,0,0,.22); }.mobile-panel a { padding: .8rem; color: var(--limestone); font-size: .77rem; font-weight: 800; text-decoration: none; }.hero-grid { grid-template-columns: 1fr; padding-left: clamp(1rem, 6vw, 4rem); }.hero-content { padding-right: clamp(1rem, 6vw, 4rem); }.hero-plinth { width: min(26rem, 87%); margin: 0 0 0 auto; }.split-heading, .gallery-heading { grid-template-columns: 1fr; }.split-heading > p { margin-left: 0; }.about-section, .contact-section { grid-template-columns: 1fr; }.about-image-wrap { min-height: 32rem; }.contact-intro { padding-right: clamp(1rem, 7.3vw, 8rem); }.form-panel { margin: 0 clamp(1rem, 7.3vw, 8rem) clamp(3rem, 7vw, 5rem); }.site-footer { grid-template-columns: 1fr 1fr; }.footer-links { grid-column: 1 / -1; } }
@media (max-width: 620px) { html { scroll-padding-top: 5rem; }.header-inner { min-height: 4.6rem; }.brand img { width: 2.15rem; height: 2.15rem; }.brand-name { font-size: .63rem; }.hero { min-height: 43rem; }.hero-photo { background-position: 61% center; }.hero-wash { background: linear-gradient(90deg, rgba(21,24,22,.91), rgba(25,25,20,.55) 100%), linear-gradient(0deg, rgba(18,18,15,.55), transparent 55%); }.hero-content { align-self: start; padding-top: 5.3rem; padding-bottom: 3rem; }.hero-plinth { max-width: none; width: 100%; }.hero-plinth p { margin-bottom: 1.65rem; }.section-pad { padding-top: 4.25rem; padding-bottom: 4.25rem; }.service-rail { grid-template-columns: repeat(4, 80vw); }.service-card { min-height: 21rem; }.service-icon { margin-bottom: 2.8rem; }.about-image-wrap { min-height: 26rem; }.gallery-grid { grid-template-columns: 1fr; grid-template-rows: 23rem 15rem 23rem; }.gallery-card.tall, .gallery-card.wide, .gallery-card.image-only { grid-row: auto; grid-column: auto; }.reviews { min-height: 27rem; }.review-mark { right: -1rem; top: 52%; font-size: 20rem; }.form-panel { margin: 0 1rem 1rem; }.contact-intro { padding-bottom: 3rem; } #wallpaperContactForm { grid-template-columns: 1fr; }.full-field { grid-column: auto; }.map-heading { align-items: flex-start; flex-direction: column; }.map-section iframe { height: 22rem; }.site-footer { grid-template-columns: 1fr; gap: 2rem; }.footer-links { grid-column: auto; } }
@media (prefers-reduced-motion: no-preference) { .hero-content, .hero-plinth, .section-heading, .about-copy, .gallery-card, .reviews-inner, .contact-intro, .form-panel { animation: rise-in .58s var(--ease-out) both; }.hero-plinth { animation-delay: .12s; }.gallery-card:nth-child(2) { animation-delay: .08s; }.gallery-card:nth-child(3) { animation-delay: .16s; } @keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }