/* Shared presentation and accessible gallery for the Spock v1 site. */
:root { --tlp-ink:#343b43; --tlp-teal:#386774; --tlp-muted:#70788e; }
.tlp-content { max-width:1120px; margin:auto; padding:42px 28px 56px; color:var(--tlp-ink); }
.tlp-content h1,.tlp-hero h1 { font-family:'Playfair Display',serif; font-weight:400; line-height:1.15; }
.tlp-content h1 { font-size:clamp(34px,5vw,52px); color:var(--tlp-muted); margin:0 0 20px; }
.tlp-content h2 { line-height:1.3; }
#wsite-content .tlp-content p { font-size:18px!important; line-height:1.65!important; margin-bottom:18px; }
.tlp-intro { max-width:800px; margin-bottom:28px; }
.tlp-actions { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0; }
a.tlp-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:8px 20px; box-sizing:border-box; color:#fff; background:var(--tlp-teal); border:2px solid var(--tlp-teal); font-family:'Montserrat',sans-serif; font-size:14px; line-height:1.4; text-decoration:none; }
a.tlp-button:hover { background:#254e5a; border-color:#254e5a; color:#fff; }
a.tlp-button-secondary { color:var(--tlp-teal); background:#fff; }
:is(a,button,input,textarea):focus-visible { outline:3px solid #a25b12; outline-offset:4px; }
.tlp-content a:not(.tlp-button) { color:var(--tlp-teal); text-decoration:underline; text-underline-offset:3px; }
.tlp-hero { max-width:900px; margin:auto; padding:30px!important; background:rgba(18,27,30,.78); color:white; box-sizing:border-box; }
.tlp-hero h1 { color:white!important; font-size:clamp(34px,4.2vw,56px)!important; margin-bottom:20px; }
.tlp-hero p { font-family:'Montserrat',sans-serif!important; color:white!important; font-size:17px!important; line-height:1.65!important; max-width:720px; margin:0 auto; }
.tlp-hero .tlp-actions { justify-content:center; }
.wsite-header-section.tlp-approved-photo { height:570px!important; }
.tlp-services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin:30px 0; }
.tlp-service { background:#f7f6f4; padding:24px; }
.tlp-service img { width:100%; height:245px; object-fit:cover; margin-bottom:22px; }
#wsite-content .tlp-service h2 { font-size:27px!important; }
.tlp-callout { margin-top:40px; padding:28px; background:#eef4f4; }
.tlp-callout h2 { font-size:30px!important; }
.tlp-columns { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:48px; align-items:start; }
.tlp-aside { background:#f7f6f4; padding:28px; }
.tlp-aside img { width:100%; height:auto; }
.tlp-aside h2 { font-size:26px!important; }
.tlp-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.tlp-project { margin:0; min-width:0; }
.tlp-project a { display:block; background:#f4f2ef; }
.tlp-project img { display:block; width:100%; height:270px; object-fit:cover; }
.tlp-before-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tlp-before-grid img { height:auto; aspect-ratio:4/3; object-fit:contain; }
.tlp-project figcaption { padding:12px 0 20px; font:16px/1.5 'Gentium Basic',serif; color:var(--tlp-ink); }
#tlp-contact-form { margin:0; }
#tlp-contact-form input,#tlp-contact-form textarea { width:100%!important; padding:12px!important; font:18px/1.4 'Gentium Basic',serif!important; border:1px solid #7b8588; border-radius:2px; background:#fff; color:#242d32; }
#tlp-contact-form label { display:inline-block; margin-top:8px; }
#tlp-contact-form textarea { min-height:150px; }
#tlp-contact-form .tlp-submit { min-height:48px; margin-top:16px; padding:12px 24px; font-family:'Montserrat',sans-serif; border-radius:2px; border:0; background:#386774; color:#fff; cursor:pointer; }
#tlp-contact-form .tlp-submit:disabled { opacity:.65; cursor:wait; }
#tlp-contact-status { margin-top:16px; }
.tlp-menu-button { background:transparent; border:0; color:inherit; padding:0; font:inherit; cursor:pointer; }
.tlp-skip { position:fixed; left:12px; top:-100px; z-index:100000; padding:14px; background:#fff; color:#163f49; }
.tlp-skip:focus { top:12px; }
.tlp-dialog { width:min(1000px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); box-sizing:border-box; padding:20px; border:0; border-radius:5px; background:#fff; color:#263b42; overflow:auto; }
.tlp-dialog::backdrop { background:rgba(0,0,0,.82); }
.tlp-dialog-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.tlp-dialog button { min-width:44px; min-height:44px; padding:8px 14px; font:14px/1.4 'Montserrat',sans-serif; color:#fff; background:#386774; border:0; border-radius:2px; cursor:pointer; }
.tlp-dialog figure { margin:0; }
.tlp-dialog img { display:block; max-width:100%; max-height:calc(100dvh - 225px); width:auto; height:auto; margin:auto; object-fit:contain; }
.tlp-dialog figcaption { margin:14px 0 0; font:18px/1.4 'Gentium Basic',serif; text-align:center; }
.tlp-dialog-controls { display:flex; gap:12px; justify-content:center; margin-top:14px; }
.tlp-gallery-open { overflow:hidden; }
@media(max-width:767px) {
 #header { display:flex!important; align-items:center; gap:10px; padding:8px 16px!important; box-sizing:border-box; }
 #header .nav-trigger { display:block; flex:0 0 44px; width:44px; margin:0; }
 #header .open-btn { box-sizing:border-box; width:44px; padding:12px 10px; }
 #header #sitename { display:block; flex:1; min-width:0; margin:0; padding-right:12px; }
 #header #wsite-title { font-size:26px!important; line-height:1.12; }
 .tlp-content { padding:30px 24px 40px; }
 .tlp-columns,.tlp-services,.tlp-gallery-grid { grid-template-columns:1fr; gap:24px; }
 .tlp-hero { padding:22px 18px!important; }
 .tlp-hero h1 { font-size:34px!important; }
 .tlp-hero p { font-size:15px!important; }
 .wsite-header-section.tlp-approved-photo { height:auto!important; min-height:460px; }
 .tlp-hero .tlp-actions { flex-direction:column; }
 .tlp-service,.tlp-aside,.tlp-callout { padding:22px; }
 .tlp-project img { height:auto; max-height:480px; object-fit:contain; }
 .tlp-dialog { padding:14px; }
 .tlp-dialog-bar { font-size:13px; }
 .tlp-dialog button { font-size:13px; }
}