/* New controls are hidden on the approved desktop layout. */
.menu-toggle,.header-nav .mobile-only-link{display:none}
.site-footer .footer-channel-label{display:none}

/* Client photographs retain the entire frame, including portrait images. */
.portfolio .portfolio-open{display:block;width:auto;height:480px;padding:0;border:0;border-radius:0;cursor:zoom-in;background:#11251e}
.portfolio .portfolio-open img{display:block;width:auto;max-width:none;height:100%;object-fit:contain}
.portfolio .portfolio-open:focus-visible{outline:2px solid var(--milk);outline-offset:-4px}
.portfolio .carousel-shell{margin-top:32px}
.portfolio-viewer{width:min(1400px,calc(100% - 24px));max-width:none;height:calc(100dvh - 24px);max-height:none;padding:52px 16px 72px;border:1px solid #f7f5f033;border-radius:0;background:#172e26;color:var(--milk);overflow:hidden}
.portfolio-viewer::backdrop{background:#08120feb}
.photo-full{display:block;width:100%;height:100%;object-fit:contain}
.photo-close{position:absolute;right:8px;top:4px;width:44px;height:44px;font-size:30px}
.photo-controls{position:absolute;bottom:12px;left:16px;right:16px;display:flex;align-items:center;justify-content:center;gap:24px}
.portfolio-viewer button{appearance:none;min-width:44px;min-height:44px;border:1px solid #f7f5f055;border-radius:0;background:transparent;color:var(--milk);font-family:inherit;cursor:pointer}
.portfolio-viewer button:hover{background:#f7f5f020}.portfolio-viewer button:focus-visible{outline:2px solid var(--milk);outline-offset:3px}
.photo-prev,.photo-next{font-size:24px}.photo-counter{min-width:60px;text-align:center;font-size:13px}

.hero-actions{display:flex;gap:16px;width:696px;max-width:calc(100vw - 2 * var(--gutter))}
.hero-actions .cta{flex:0 0 340px;width:340px;max-width:none;min-height:64px}
.cta-label{min-width:0}
.hero-actions .cta-arrow{flex:0 0 48px;width:48px;height:48px}
.contact-dialog{width:min(480px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:48px 32px 32px;border:1px solid #24413733;border-radius:0;background:var(--milk);color:var(--pine);box-shadow:0 24px 80px #0005;overflow:auto;overscroll-behavior:contain}
.contact-dialog::backdrop{background:#0f1c18ba}
.contact-dialog h2{font-size:32px;line-height:1.15;letter-spacing:-.035em;margin:0 0 18px}
.contact-dialog p{font-size:14px;line-height:1.7;color:#747a70;margin:0 0 26px}
.contact-dialog-close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:var(--pine);font:300 30px/1 Arial,sans-serif;cursor:pointer}
.contact-dialog-close:hover{background:#24413712}
.contact-dialog-close:focus-visible{outline:2px solid var(--pine);outline-offset:-3px}
.contact-dialog-actions{display:grid;gap:12px}
@media(max-width:767px){.hero-actions{flex-direction:column;gap:12px;width:100%;max-width:none}.hero-actions .cta{flex:0 0 auto;width:100%;max-width:none;min-height:64px;padding:8px 8px 8px 25px;gap:12px;font-size:14px}.contact-dialog{padding:48px 20px 24px}.contact-dialog h2{font-size:28px}.contact-dialog .contact-button{font-size:14px;padding:14px 12px}}

/* Tablet and small laptop: approved desktop rules remain untouched above 1199px. */
@media(max-width:1199px){
 :root{--gutter:clamp(24px,3.65vw,40px)}
 body{min-width:0}
 .header{height:100px;z-index:10;gap:20px}
 .header .brand{font-size:19px;flex-shrink:0}
 .header-note,.header .geography{display:none}
 .menu-ready .menu-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin-left:auto;min-width:96px;min-height:48px;padding:10px 13px;color:var(--milk);border:1px solid #f7f5f055;background:#172e26cc;font:500 12px "Segoe UI",Arial,sans-serif;cursor:pointer}
 .menu-toggle:focus-visible{outline:2px solid var(--milk);outline-offset:4px}
 .menu-icon{position:relative;width:18px;height:14px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
 .menu-icon::after{content:"";position:absolute;left:0;top:5px;width:18px;border-top:1px solid currentColor}
 .menu-toggle[aria-expanded="true"] .menu-icon{border:0}
 .menu-toggle[aria-expanded="true"] .menu-icon::before,.menu-toggle[aria-expanded="true"] .menu-icon::after{content:"";position:absolute;top:6px;left:0;width:18px;border-top:1px solid currentColor;transform:rotate(45deg)}
 .menu-toggle[aria-expanded="true"] .menu-icon::after{transform:rotate(-45deg)}
 .header-nav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:12px 20px;background:#172e26;border:1px solid #f7f5f033;box-shadow:0 18px 30px #0003}
 .menu-ready .header-nav{display:none}
 .menu-ready .header-nav.is-open{display:flex}
 .header-nav a,.header-nav .mobile-only-link{display:flex;min-height:48px;align-items:center;justify-content:space-between;font-size:15px;border-bottom:1px solid #f7f5f01a;padding:10px 0}
 .header-nav a:last-child{border-bottom:0}
 .hero{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:#172e26}
 .hero .header{position:relative;top:auto;left:auto;right:auto;margin:0 var(--gutter);flex-shrink:0}
 .hero-image{top:100px;height:clamp(380px,52vw,620px);bottom:auto;background-position:84% center;animation:none;will-change:auto}
 .hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#172e26,transparent 68%)}
 .hero-shade{background:linear-gradient(90deg,#172e2655,transparent 80%)}
 .hero-content{position:relative;left:auto;right:auto;bottom:auto;padding:28px var(--gutter) 36px;margin-top:clamp(260px,34vw,440px)}
 .craft{font-size:clamp(22px,2.7vw,30px);gap:16px;margin-bottom:22px}
 .ornament{flex:0 0 96px;width:96px;height:22px}
 h1{font-size:clamp(53px,7.1vw,80px);max-width:100%;letter-spacing:-.045em}
 .hero-bottom{max-width:650px;gap:22px;margin-top:28px}
 .cta{min-width:0;max-width:100%;width:360px}
 .cta-arrow{flex:0 0 48px}
 .side-caption{display:none}
 .hero-footer{position:relative;left:auto;right:auto;bottom:auto;height:auto;min-height:78px;margin:auto var(--gutter) 0;gap:20px;padding:18px 0}
 .hero-footer .footer-label{font-size:8px;letter-spacing:1px;text-align:right}
 .counter-line{width:40px}
 .materials{padding-top:76px;padding-bottom:50px}
 .section-heading{gap:24px;align-items:flex-start}
 h2{font-size:clamp(43px,5.3vw,64px)}
 .section-intro{max-width:240px;font-size:13px}
 .material-grid{gap:24px}
 .material-body{padding:24px}
 .material-body h3{font-size:23px;min-height:58px}
 .material-benefit{min-height:44px}
 .material-details summary{gap:12px;flex-wrap:wrap}
 .details-button{gap:20px}
 .materials-note{flex-wrap:wrap}
 .materials-note p{flex:1;min-width:0;font-size:12px}
 .materials-note a{margin-left:0;min-height:44px;display:flex;align-items:center}
 .portfolio{padding-top:76px}
 .carousel-track{gap:20px;-webkit-overflow-scrolling:touch}
 .portfolio-bottom{flex-wrap:wrap;gap:20px}
 .request-section{padding-top:76px;padding-bottom:70px;gap:32px}
 .request-copy h2{font-size:clamp(34px,4.4vw,48px)}
 .request-copy h2 br{display:none}
 .request-subtitle{font-size:15px}
 .contact-heading{gap:28px}
 .contact-item{padding-right:20px}
 .contact-item+.contact-item{padding-left:20px}
 .contact-item p{font-size:19px}
 .contact-person{font-size:11px}
 .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px}
 .footer-nav a{font-size:14px;min-height:40px;display:flex;align-items:center;margin-bottom:4px}
 .footer-contact>p{font-size:14px}
 .footer-contact dl>div{font-size:12px}
 .footer-legal>span{font-size:12px}
 .footer-main h3{font-size:11px}
 .footer-legal>p{font-size:11px}
 .footer-end{flex-wrap:wrap;gap:16px;padding:22px 0;font-size:11px}
}

/* Phone: normal document flow avoids collisions at short viewport heights. */
@media(max-width:767px){
 :root{--gutter:clamp(16px,4.5vw,28px)}
 html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
 .hero .header{height:80px}
 .header .brand{font-size:16px;gap:10px;letter-spacing:.8px}
 .header .brand-icon{width:26px;height:33px;gap:3px}
 .header .brand-icon i{width:6px;height:21px}
 .header .brand-icon i:nth-child(2){height:28px}
 .header .brand-icon i:last-child{height:33px}
 .menu-ready .menu-toggle{min-width:84px;gap:10px;font-size:11px}
 .hero-image{top:80px;height:clamp(300px,84vw,460px);background-position:88% center}
 .hero-content{margin-top:clamp(210px,55vw,320px);padding-top:24px;padding-bottom:30px}
 .craft{font-size:clamp(14px,3.5vw,22px);letter-spacing:.65px;gap:10px;margin-bottom:18px;line-height:1.4}
 .ornament{flex:0 0 60px;width:60px;height:16px;padding:1px 2px}
 h1{font-size:clamp(32px,8.5vw,62px);line-height:1.09;letter-spacing:-.045em}
 .title-mask{overflow:hidden;padding-bottom:.11em}
 .hero-bottom{gap:20px;margin-top:22px;width:100%}
 .hero-bottom p{font-size:15px;line-height:1.65;max-width:470px}
 .hero-bottom p br{display:none}
 .cta{width:100%;max-width:420px;min-height:60px;padding-left:16px;gap:10px;font-size:clamp(12px,3.3vw,15px)}
 .cta-arrow{flex-basis:44px;width:44px;height:44px}
 .hero-footer{display:flex;flex-wrap:wrap;min-height:0;gap:12px;padding:16px 0 20px}
 .screen-counter{display:none}
 .scroll-link{width:100%;justify-content:space-between;min-height:44px;font-size:12px;gap:16px}
 .hero-footer .footer-label{width:100%;text-align:left;font-size:8px;letter-spacing:.8px}
 .materials{padding-top:58px;padding-bottom:42px}
 .section-heading{flex-direction:column;gap:20px;margin-bottom:28px}
 .section-eyebrow{font-size:9px;letter-spacing:1.2px;gap:10px;margin-bottom:18px;line-height:1.5}
 h2{font-size:clamp(32px,8.3vw,56px);line-height:1.12;letter-spacing:-.045em;overflow-wrap:break-word}
 .section-intro{font-size:14px;line-height:1.7;max-width:none}
 .material-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .material-index{left:16px;top:16px;font-size:9px}
 .material-body{padding:22px 18px}
 .material-body h3{font-size:clamp(22px,5.6vw,28px);min-height:0;max-width:none;line-height:1.25}
 .material-benefit{font-size:15px;line-height:1.65;min-height:0;margin:14px 0 22px}
 .material-details summary{flex-direction:column;align-items:stretch;gap:18px}
 .material-price{font-size:20px}
 .material-price small{font-size:12px}
 .details-button{min-height:48px;justify-content:space-between;font-size:14px;padding:0 16px}
 .material-description{font-size:14px}
 .material-description .availability-note{font-size:12px}
 .materials-note{margin-top:28px;gap:10px;align-items:flex-start}
 .materials-note p{font-size:12px;line-height:1.75}
 .materials-note a{flex-basis:100%;justify-content:space-between;font-size:14px;margin-top:8px}
 .portfolio{padding-top:58px}
 .portfolio>.section-heading{margin-bottom:20px;gap:22px}
 .carousel-controls{gap:12px;align-self:flex-end;margin:0}
 .carousel-arrow{width:48px;height:48px;touch-action:manipulation}
 .portfolio-disclaimer{font-size:12px;line-height:1.7;margin-bottom:24px}
 .carousel-track{gap:12px}
 .portfolio .portfolio-open{height:clamp(220px,65vw,320px)}
 .slide-badge{top:12px;left:12px;max-width:calc(100% - 24px);font-size:7px;letter-spacing:1px;padding:8px 10px}
 .portfolio-slide figcaption{padding:20px 0 25px;gap:14px}
 .slide-kicker{font-size:8px;letter-spacing:1px}
 .portfolio-slide h3{font-size:23px;line-height:1.2}
 .slide-number{font-size:9px;white-space:nowrap;letter-spacing:1px}
 .portfolio-bottom{padding:24px 0 32px;font-size:12px;gap:22px}
 .portfolio-bottom>span{flex-basis:100%;line-height:1.6;order:2}
 .portfolio-bottom>a{min-height:44px;display:flex;align-items:center;font-size:13px;margin-left:auto}
 .carousel-progress{width:80px}
 .request-section{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:58px;padding-bottom:54px}
 .request-copy h2{font-size:clamp(28px,7.3vw,48px);line-height:1.17}
 .request-subtitle{font-size:16px;line-height:1.7;margin:22px 0 26px;max-width:none}
 .request-benefits{max-width:none}
 .request-benefits li{font-size:15px;line-height:1.6;gap:16px;padding:16px 0}
 .request-benefits li>span{flex:0 0 18px;font-size:10px}
 .contact-section{padding-bottom:54px}
 .contact-heading{padding-top:42px;flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:28px}
 .contact-heading h2{font-size:clamp(36px,9vw,54px)}
 .contact-brand{font-size:15px;line-height:1.65;letter-spacing:.6px}
 .contact-brand>span{font-size:14px}
 .contact-grid{grid-template-columns:minmax(0,1fr)}
 .contact-item,.contact-item+.contact-item{padding:24px 0;border-left:0}
 .contact-item+.contact-item{border-top:1px solid #24413720}
 .contact-channel{font-size:12px}
 .contact-item p{font-size:23px;line-height:1.35;overflow-wrap:anywhere;margin:12px 0}
 .contact-person{font-size:12px;line-height:1.7}
 .site-footer{padding-top:46px}
 .footer-main{grid-template-columns:minmax(0,1fr);gap:34px;padding-bottom:34px}
 .footer-identity>.brand{font-size:20px}
 .footer-identity>p{font-size:17px;line-height:1.6;margin:24px 0}
 .footer-main h3{font-size:12px;margin-bottom:18px;line-height:1.5}
 .footer-nav a{font-size:15px;min-height:44px;line-height:1.6}
 .footer-contact>p{font-size:15px;line-height:1.7}
 .footer-contact dl>div{font-size:14px;gap:16px;flex-wrap:wrap;line-height:1.7}
 .footer-contact dd{color:#f7f5f085}
 .footer-legal>span{font-size:13px;line-height:1.7;overflow-wrap:anywhere}
 .footer-legal>p{font-size:12px;line-height:1.8}
 .footer-end{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 0;font-size:12px;line-height:1.7}
 .footer-end>span:first-child{font-size:10px}
 .footer-end>a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;font-size:14px}
}
@media(min-width:768px) and (max-width:900px){
 .request-section{grid-template-columns:minmax(0,1fr)}
 .request-copy h2{max-width:650px;font-size:44px}
 .request-subtitle{max-width:600px}
 .request-benefits{max-width:none}
 .contact-grid{grid-template-columns:minmax(0,1fr)}
 .contact-item,.contact-item+.contact-item{border-left:0;padding:24px 0}
 .contact-item+.contact-item{border-top:1px solid #24413720}
 .section-heading{flex-wrap:wrap}
}
@media(max-width:1199px) and (prefers-reduced-motion:reduce){
 .hero-image{animation:none}.menu-icon,.menu-icon::after,.menu-icon::before{transition:none}
}

@media(max-width:767px){.request-actions{padding:20px 18px;gap:12px}.contact-button{font-size:15px;padding:16px;min-height:60px}.footer-contact dd{font-size:14px}}

/* Compact footer only on phones; desktop presentation is retained. */
@media(max-width:767px){
 .site-footer{padding-top:28px;padding-bottom:28px}
 .site-footer .footer-main{gap:20px;padding-bottom:20px}
 .site-footer .footer-main>*{min-width:0}
 .site-footer .footer-identity>p,.site-footer .footer-ornament,.site-footer .footer-nav>h3{display:none}
 .site-footer .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;align-items:stretch}
 .site-footer .footer-nav a{margin:0;min-height:44px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
 .site-footer .footer-contact>h3{margin:0 0 8px}
 .site-footer .footer-contact>p{margin:0 0 12px;font-size:14px;line-height:1.6}
 .site-footer .footer-contact dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .site-footer .footer-contact dl>div{display:block;margin:0}
 .site-footer .footer-contact dt,.site-footer .footer-contact-value{display:none}
 .site-footer .footer-channel-label{display:inline}
 .site-footer .footer-contact dd{margin:0}
 .site-footer .footer-contact a{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:8px 12px;border:1px solid #f7f5f055;font-size:14px;line-height:1.5;color:var(--milk)}
 .site-footer .footer-legal:not(:has(a[href])){display:none}
 .site-footer .footer-legal a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;overflow-wrap:anywhere}
 .site-footer .footer-end{gap:6px;padding:16px 0 0;min-height:0;font-size:12px;line-height:1.5}
 .site-footer .footer-end>a{font-size:14px;min-height:44px}
}

/* Client-approved content update: clear header, three-line hero, compact footer. */
.header-note{font-size:12px;color:#f7f5f0d9}
.hero-image{background-position:center;animation:none;will-change:auto}
.hero-shade{background:linear-gradient(90deg,#0f1c18d9,#0f1c1829 65%,#0f1c1800),linear-gradient(0deg,#0d1714ed,transparent 75%)}
#hero-title{font-size:clamp(60px,5.3vw,102px);line-height:1.08;letter-spacing:-.045em;max-width:1160px}
.title-line-3{animation-delay:.45s}
.hero-actions{width:340px}
.footer-main{grid-template-columns:1fr 1.1fr 1.05fr}
.footer-end{justify-content:flex-end}
@media(min-width:1200px){.hero{min-height:860px}.hero-content{bottom:138px}.craft{font-size:26px}.header-nav .mobile-only-link{display:flex}}
@media(max-width:1199px){
 .header-note{display:block;margin-right:auto}
 #hero-title{font-size:clamp(48px,6.2vw,72px)}
 .hero-image{background-position:center}
 .footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 .header-note{font-size:10px;line-height:1.6;max-width:190px}
 #hero-title{font-size:clamp(30px,7.7vw,58px);line-height:1.15;letter-spacing:-.045em}
 .hero-actions{width:100%}
 .hero-image{background-position:center}
 .footer-main{grid-template-columns:minmax(0,1fr)}
}

/* One closing section with two compatible navigation anchors. */
.request-section{position:relative;padding-top:64px;padding-bottom:64px;gap:clamp(32px,5vw,72px);align-items:center}
.contact-anchor{position:absolute;top:0;left:0;width:0;height:0}
.request-section .request-subtitle{margin:24px 0 0;max-width:540px}
.request-section .request-actions{gap:12px;padding:28px}
.request-person h3{margin:0;color:var(--pine);font-size:24px;font-weight:500;letter-spacing:-.035em}
.request-person p{margin:8px 0 12px;font-size:14px;line-height:1.6;color:#747a70}
.request-section .contact-button{width:100%;min-width:0}
.request-button-copy{min-width:0}
.request-button-copy small{display:block;margin-top:5px;font-size:12px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:767px){
 .request-section{grid-template-columns:minmax(0,1fr);padding-top:40px;padding-bottom:40px;gap:28px}
 .request-section .request-subtitle{margin:20px 0 0}
 .request-section .request-actions{padding:20px 18px}
}
