/* Boundwell Fencing: concept site stylesheet (Output Loop lab 05C) */
:root{
  --off:#F4EFE6; --ink:#16130F; --ink-hover:#2A2520; --bark:#5A5148;
  --sky:#A9C6DE; --brick:#E06A4C; --mustard:#E3B23C; --lilac:#B9A6D9; --forest:#2F4A3A;
  --display:"Saira Extra Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Readex Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:max(20px,5vw);
  --ease:180ms ease-out;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--off);color:var(--ink);font:400 16px/1.6 var(--body);overflow-x:clip}
@media (min-width:1024px){body{font-size:17px}}
img,picture,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
p{margin:0 0 1em}
ul,ol,dl,dd{margin:0;padding:0}
h1,h2,h3{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.band--forest :focus-visible{outline-color:var(--off)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-100px;z-index:100;background:var(--ink);color:var(--off);padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:600}
.skip-link:focus{top:12px}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--pad)}
.display{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:.005em}
.section{padding-block:clamp(56px,8vw,112px)}
.section-title{font-size:clamp(44px,5vw,72px);margin-bottom:clamp(28px,4vw,48px)}
.band--off{background:var(--off);color:var(--ink)}
.band--forest{background:var(--forest);color:var(--off)}
.band--mustard{background:var(--mustard);color:var(--ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--off);font:600 16px/1 var(--body);text-decoration:none;cursor:pointer;transition:transform var(--ease),background-color var(--ease)}
.btn:hover{transform:translateY(-2px);background:var(--ink-hover)}
.btn--light{background:var(--off);border-color:var(--off);color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:rgba(22,19,15,.08)}
.btn--phone{min-height:44px;padding:0 18px;font-size:15px}

/* Header */
.site-header{position:relative;z-index:10;background:var(--off)}
.site-header--over{position:absolute;top:0;left:0;right:0;background:transparent}
.site-header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;padding-block:12px}
.wordmark{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.site-nav{order:3;width:100%}
.site-nav ul{display:flex;gap:4px;list-style:none;margin-left:-12px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-weight:500;text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
@media (min-width:768px){
  .site-header__inner{flex-wrap:nowrap;gap:24px}
  .wordmark{margin-right:auto}
  .site-nav{order:0;width:auto}
  .site-nav ul{margin-left:0}
}

/* Slider */
.slider{--h:max(100vh,640px);--word:min(19vw,290px);position:relative;display:flex;flex-direction:column;min-height:640px;overflow:hidden;background:var(--sky);color:var(--ink);touch-action:pan-y}
.slides{display:grid}
.slide{grid-area:1/1;position:relative;display:flex;flex-direction:column;visibility:hidden}
.slide.is-active,.slide.is-leaving{visibility:visible}
.slide.is-leaving{pointer-events:none}
.slide__word{position:absolute;z-index:1;top:calc(20vh + 2vw);left:0;right:0;text-align:center;white-space:nowrap;font-size:var(--word);line-height:.8;letter-spacing:.005em;color:var(--ink)}
/* Picket is the low fence (tips ~34% down the render vs ~5% for the tall styles), so its word drops to keep the overlap */
.slide[data-panel-large*="picket"] .slide__word{top:calc(20vh + 0.28 * 94vw)}
.slide__panel{position:relative;z-index:2;width:94vw;margin:20vh auto 0;transform-origin:50% 100%}
.slide__panel img{width:100%;height:auto}
.slide__card{position:relative;z-index:3;padding:12px var(--pad) 24px}
.slide__eyebrow{margin:0 0 6px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.slide__copy{margin:0 0 10px;font-size:16px;line-height:1.5}
.slide__price{margin:0 0 16px;font-weight:600}
.slider__controls{position:relative;z-index:5;display:flex;flex-direction:column;gap:12px;padding:0 var(--pad) 28px}
.slider__thumbs{display:flex;gap:8px}
.slider__buttons{display:flex;align-items:center;gap:12px}
.thumb{display:grid;place-items:center;width:72px;height:72px;padding:4px;border:0;border-radius:50%;cursor:pointer;color:inherit;transition:transform var(--ease)}
.thumb img{width:64px;height:64px}
.thumb:hover{transform:scale(1.08)}
.thumb[aria-current="true"]{box-shadow:inset 0 0 0 3px var(--ink)}
.thumb--sky{background:var(--sky)}.thumb--brick{background:var(--brick)}.thumb--mustard{background:var(--mustard)}.thumb--lilac{background:var(--lilac)}
.round-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:2px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:transform var(--ease)}
.round-btn:hover{transform:translateY(-2px)}
.pause-btn{min-height:48px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 15px/1 var(--body);cursor:pointer;transition:transform var(--ease)}
.pause-btn:hover{transform:translateY(-2px)}
.pause-btn[hidden]{display:none}
@media (min-width:768px){
  .slider{display:block;height:100vh;min-height:640px}
  .slides{height:100%}
  .slide__word{top:16vh}
  .slide[data-panel-large*="picket"] .slide__word{top:calc(16vh + 0.3 * var(--panel-w))}
  .slider{--panel-w:min(62vw,880px,calc((0.84 * var(--h) - 0.4 * var(--word)) / 0.92))}
  .slide__panel{position:absolute;bottom:0;left:0;right:0;width:var(--panel-w);margin:0 auto}
  .slide__card{position:absolute;left:5vw;bottom:7vh;max-width:340px;padding:0}
  .slider__controls{position:absolute;right:5vw;bottom:7vh;align-items:flex-end;padding:0}
}

/* What we do */
.what-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;list-style:none}
.what-item{border-top:2px solid var(--ink);padding-top:16px}
.what-item h3{font-family:var(--display);font-weight:800;font-size:34px;line-height:.95;text-transform:uppercase;margin-bottom:12px}
.what-item p{margin:0;font-size:16px;line-height:1.5}
@media (min-width:768px){.what-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}

/* Process */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;list-style:none}
.step{border-top:2px solid var(--off);padding-top:12px}
.step__num{display:block;font-family:var(--display);font-weight:900;font-size:72px;line-height:.9}
.step__title{margin:8px 0 0;font-size:19px;font-weight:600;line-height:1.3}
@media (min-width:768px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}

/* Photo cards */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;list-style:none}
.card{background:#fff;border-radius:16px;overflow:hidden;transition:transform var(--ease),box-shadow var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(22,19,15,.16)}
.card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.card p{margin:0;padding:16px 20px 20px;font-weight:500}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}

/* Reviews */
.reviews{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;list-style:none}
.review{margin:0}
.stars{display:flex;gap:4px;margin-bottom:16px;color:var(--ink)}
.stars svg{width:22px;height:22px}
.review blockquote{margin:0 0 16px;font-size:clamp(23px,2.2vw,30px);font-weight:500;line-height:1.3}
.review blockquote p{margin:0}
.review figcaption{font-size:16px;color:var(--bark)}
@media (min-width:1024px){.reviews{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}}

/* CTA band */
.cta__inner{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.cta__title{font-size:clamp(52px,7vw,104px)}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px}

/* Footer */
.site-footer{background:var(--ink);color:var(--off);padding-block:56px 32px}
.site-footer a{color:var(--off)}
.site-footer .wordmark{color:var(--off);display:inline-block;margin-bottom:12px}
.site-footer p{margin:0 0 6px}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.site-footer__credit{margin:40px 0 0!important;padding-top:20px;border-top:1px solid var(--off);font-size:15px}
@media (min-width:768px){.site-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Fence styles page */
.hero-media{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--ink)}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.intro-card{position:relative;z-index:2;max-width:760px;margin:clamp(-88px,-6vw,-40px) 0 0;padding:clamp(24px,3vw,40px);background:var(--off)}
.intro-card h1{font-size:clamp(44px,5.5vw,80px);margin-bottom:16px}
.intro-card p{margin:0;font-size:19px}
.style-band{padding-block:clamp(48px,7vw,96px)}
.style-band--sky{background:var(--sky)}.style-band--brick{background:var(--brick)}.style-band--mustard{background:var(--mustard)}.style-band--lilac{background:var(--lilac)}
.style-band{color:var(--ink)}
.style-band__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.style-band__cutout{width:100%;max-width:560px;justify-self:center}
.style-band__cutout img{width:100%;height:auto}
.style-band h2{font-size:clamp(56px,6.67vw,96px);margin-bottom:20px;overflow-wrap:break-word}
.specs{display:grid;grid-template-columns:minmax(0,1fr);margin:24px 0 32px;border-top:2px solid var(--ink)}
.specs div{display:grid;grid-template-columns:minmax(88px,120px) minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--ink)}
.specs dt{font-weight:600}
.specs dd{margin:0}
.style-band__photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
@media (min-width:900px){.style-band__grid{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:64px}.style-band__cutout{justify-self:start}}

/* Contact page */
.page-head{padding-block:clamp(48px,7vw,96px) clamp(32px,4vw,56px)}
.page-head h1{font-size:clamp(56px,6.67vw,96px);margin-bottom:16px}
.page-head p{margin:0;font-size:19px;max-width:620px}
.guide{background:var(--sky);color:var(--ink);padding-block:clamp(40px,5vw,72px);transition:background-color 300ms ease-out}
.guide[data-style="close-board"]{background:var(--sky)}
.guide[data-style="picket"]{background:var(--brick)}
.guide[data-style="slatted"]{background:var(--mustard)}
.guide[data-style="hit-and-miss"]{background:var(--lilac)}
.guide h2{font-family:var(--display);font-weight:900;font-size:clamp(40px,4.5vw,64px);line-height:.9;text-transform:uppercase;margin-bottom:24px}
.guide__fields{display:flex;flex-wrap:wrap;gap:16px 24px;margin-bottom:24px}
.guide__fields .field{flex:1 1 220px;max-width:340px}
.guide output{display:block;font-size:clamp(22px,2.6vw,32px);font-weight:500;line-height:1.3;max-width:900px}
.field{display:grid;gap:6px;margin-bottom:20px}
.guide .field{margin-bottom:0}
.field label{font-weight:600;font-size:15px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 14px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:400 16px/1.4 var(--body)}
.field textarea{min-height:140px;resize:vertical}
.field [aria-invalid="true"]{border-width:4px;padding:8px 12px}
.field__error{margin:0;font-weight:600;font-size:15px}
.contact-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.contact-info .phone{display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(48px,6vw,72px);line-height:1;letter-spacing:.02em;text-decoration:none;margin-bottom:16px}
.contact-info .phone:hover{text-decoration:underline;text-decoration-thickness:3px}
.contact-info dl{margin:0 0 32px}
.contact-info dl div{padding:10px 0;border-top:1px solid var(--ink)}
.contact-info dt{font-weight:600}
.contact-info dd{margin:0}
.contact-fig{margin:0 0 24px}
.contact-fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.contact-fig figcaption{margin-top:8px;color:var(--bark);font-size:16px}
.contact-form h2{font-family:var(--display);font-weight:900;font-size:clamp(40px,4.5vw,64px);line-height:.9;text-transform:uppercase;margin-bottom:24px}
.thanks{padding:28px;border:2px solid var(--ink);border-radius:16px;background:#fff;font-size:22px;font-weight:500;line-height:1.4}
.thanks:focus{outline:3px solid var(--ink);outline-offset:3px}
@media (min-width:900px){.contact-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}}

/* Reduced motion: no transitions, no lifts, nothing moves */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:hover,.round-btn:hover,.pause-btn:hover,.thumb:hover,.card:hover{transform:none}
  .pause-btn{display:none}
}

/* Cut-out halo fix (Opus test): the Blender shadow catcher leaves a ~33% grey ground plane that ends in hard edges at the image's left, right and bottom.
   Fade only the outer margins (the fence itself sits within x 11–94%, y < 93%; bottom fade starts at 92% in every render), so the contact shadow stays and the rectangle goes. */
.slide__panel img,.thumb img,.style-band__cutout img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 94%,transparent 100%),linear-gradient(to bottom,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 94%,transparent 100%),linear-gradient(to bottom,#000 92%,transparent 100%);
  mask-composite:intersect}