/* Shared glass language for interior pages. Timber belongs to the homepage only. */
:root{--site-paper:var(--color-page-bg);--site-ink:var(--color-text);--site-blue:var(--color-brand)}
html,body{overflow-x:hidden;background:var(--site-paper)!important}
body{position:relative;isolation:isolate;background:var(--site-paper)!important}
body::before,body::after{display:none!important}
body>.page,body>.nav,body>.content,body>.shared-footer{position:relative;z-index:2}
.page{background:var(--site-paper)!important}
.page-landscape{display:none!important}

.timber-panel{--mx:50%;--my:50%;position:relative;isolation:isolate;width:min(78vw,1120px)!important;margin-left:auto!important;margin-right:auto!important;padding:72px 42px;border:var(--border-width-default) solid var(--color-border-strong);border-radius:var(--radius-panel);background:linear-gradient(145deg,rgba(7,16,30,.97),rgba(3,10,22,.95) 52%,rgba(8,20,47,.96));box-shadow:var(--shadow-inner-highlight),var(--shadow-inner-subtle),var(--shadow-card);backdrop-filter:blur(7px) saturate(1.04);-webkit-backdrop-filter:blur(7px) saturate(1.04)}
.timber-panel::after{content:"";position:absolute;z-index:5;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(300px circle at var(--mx) var(--my),#c7d4ff 0,var(--color-brand-light) 25%,transparent 69%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--duration-normal);pointer-events:none}
.timber-panel:hover::after{opacity:1}

.content.timber-panel{min-height:calc(100dvh - 220px);margin-top:130px!important;margin-bottom:90px!important;padding:72px 42px!important}
.content.timber-panel::before{display:none!important}
.content.timber-panel::after{inset:0!important;border-radius:inherit!important}
.page>.timber-panel{margin-top:0;margin-bottom:90px}
.page>.timber-panel .head{width:100%;margin-bottom:58px}
.page>.timber-panel .grid{width:100%}
.head.timber-panel{margin-bottom:70px!important}
.videos.timber-panel{margin-top:130px!important;margin-bottom:90px!important}
.layout.timber-panel{margin-bottom:110px!important}

/* Centered page introductions */
.page>.timber-panel>.head{text-align:center}
.page>.timber-panel>.head>div{max-width:720px;margin:26px auto 0;gap:0;align-items:center}
.page>.timber-panel>.head strong,.page>.timber-panel>.head span{display:block;text-align:center}
.head.timber-panel{text-align:center;display:flex;flex-direction:column;align-items:center}
.head.timber-panel>span{max-width:720px;margin-top:24px;text-align:center}

@media(max-width:760px){
  .timber-panel{width:calc(100% - 28px)!important;padding:54px 18px!important;border-radius:25px;backdrop-filter:blur(6px) saturate(1.02);-webkit-backdrop-filter:blur(6px) saturate(1.02)}
  .content.timber-panel{min-height:calc(100dvh - 160px);margin-top:105px!important;margin-bottom:55px!important;padding:54px 18px!important}
  .page>.timber-panel,.head.timber-panel,.videos.timber-panel,.layout.timber-panel{margin-bottom:60px!important}
  .videos.timber-panel{margin-top:80px!important}
  .timber-panel::after{opacity:.34;background:radial-gradient(190px circle at 50% 0,var(--color-brand-highlight) 0,transparent 72%)}
}
/* Keep the intrinsic logo proportions when SEO width/height attributes are present. */
.nav img.brand {
  height: auto !important;
  aspect-ratio: 1142 / 337;
  object-fit: contain;
}

/* Warm navigation and footer surfaces on every interior page. */
.nav{color:var(--site-ink)}
.nav .pill{border-color:var(--color-border)!important;background:var(--color-header-bg)!important;box-shadow:var(--shadow-sm)}
.nav .pill a{color:var(--site-ink)}
.nav .pill a:hover,.nav .pill a.active{background:var(--site-blue)!important;color:var(--color-text-inverse)!important}
.shared-footer{background:var(--color-footer-bg)!important;border-top-color:var(--color-footer-border)!important;color:var(--color-footer-text)!important}
.shared-footer a{color:var(--site-ink)!important;border-bottom-color:var(--color-link-underline)!important}

/* Interior hierarchy: frameless page groups with light glass cards. */
.timber-panel{
  color:var(--site-ink);
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.timber-panel::after{display:none}
.content.timber-panel p,.content.timber-panel span,
.head.timber-panel>span,.page>.timber-panel>.head span,
.videos.timber-panel .video-head{color:var(--color-content-muted)!important}
.layout .details>p,.layout .details>a,.layout .social a,
.layout .enquiry>p{color:var(--color-content-muted)!important}

.card,.form{
  color:var(--site-ink);
  border-color:var(--color-border)!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.card::before,.form::before{
  background:radial-gradient(230px circle at var(--mx) var(--my),#fff 0,rgba(255,255,255,.92) 27%,transparent 68%)!important;
}
.card::after{
  display:none!important;
}
.grid figure:hover{border-color:rgba(255,255,255,.92)!important}
.card small,.card b,.card p{color:var(--color-card-copy)!important}
.card i{color:var(--color-card-icon)!important;border-color:var(--color-border)!important;background:transparent!important;box-shadow:none!important}
.card i.icon-video,.card i.icon-camera{position:relative;display:grid;place-items:center}
.card i.icon-video > span{transform:translateX(-4px)}
.card i.icon-video .video-reel{
  position:absolute;
  top:13px;
  width:17px;
  height:17px;
  border:2px solid currentColor;
  border-radius:50%;
  box-sizing:border-box;
}
.card i.icon-video .reel-left{left:17px}
.card i.icon-video .reel-right{left:36px}
.card i.icon-video .video-body{
  position:absolute;
  left:16px;
  top:30px;
  width:39px;
  height:25px;
  border:2px solid currentColor;
  border-radius:5px;
  box-sizing:border-box;
}
.card i.icon-video .video-lens{
  position:absolute;
  left:53px;
  top:33px;
  width:13px;
  height:20px;
  background:currentColor;
  clip-path:polygon(0 22%,100% 0,100% 100%,0 78%);
}
.card i.icon-camera::before{
  content:"";
  width:31px;
  height:23px;
  border:2px solid currentColor;
  border-radius:5px;
  box-sizing:border-box;
}
.card i.icon-camera::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:11px;
  border:2px solid currentColor;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-sizing:border-box;
}
.form label,.form small{color:var(--color-form-label)!important}
.form input,.form textarea{color:var(--color-text)!important;background:transparent!important;border-color:var(--color-border)!important}
.form button{background:var(--color-brand)!important;color:var(--color-text-inverse)!important}
.form button{
  box-shadow:none!important;
  transform:scale(1);
  transform-origin:center;
  transition:transform var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)!important;
}
.form button:hover{
  background:var(--color-brand)!important;
  color:var(--color-text-inverse)!important;
  box-shadow:none!important;
  transform:scale(1.04);
}
.form button:active{transform:scale(.98)}
.videos.timber-panel iframe{background:var(--color-surface-dark-elevated)}

/* Contact form: match the dark frosted service-card treatment. */
.layout .form{
  color:var(--color-text-inverse)!important;
  border:var(--border-width-default) solid rgba(255,255,255,.34)!important;
  background:linear-gradient(145deg,rgba(10,28,52,.48),rgba(4,13,28,.42) 52%,rgba(19,59,169,.28))!important;
  box-shadow:var(--shadow-inner-highlight)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
  backdrop-filter:blur(10px) saturate(1.08)!important;
}
.layout .form label,
.layout .form small{color:var(--color-text-inverse)!important}
.layout .form input,
.layout .form textarea{
  color:var(--color-text-inverse)!important;
  caret-color:var(--color-text-inverse);
  border-color:rgba(255,255,255,.34)!important;
  background:rgba(4,13,28,.24)!important;
}
.layout .form input:focus,
.layout .form textarea:focus{
  border-color:rgba(255,255,255,.78)!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.1)!important;
}
.layout .form button{
  font-size:0!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:var(--color-brand)!important;
  color:var(--color-text-inverse)!important;
  box-shadow:none!important;
}
.layout .form button:hover{
  background:var(--color-brand)!important;
  color:var(--color-text-inverse)!important;
}
.layout .form button::after{
  content:"SEND ENQUIRY";
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--color-text-inverse);
}

/* Contact: headline and form share the same top alignment. */
.layout.timber-panel{align-items:start!important;padding-top:34px!important}
.contact-intro{margin:-38px 0 48px!important;color:var(--color-content-muted)!important;font-size:17px!important;line-height:1.65!important}
.layout .enquiry{padding-top:0}

/* Services: compact three-column rhythm on phones. */
@media(max-width:600px){
  body:has(.page>.timber-panel .grid .card) .page>.timber-panel{
    width:calc(100% - 10px)!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
  .page>.timber-panel .grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .page>.timber-panel .grid .card{
    min-width:0;
    min-height:0;
    aspect-ratio:1/1;
    padding:19px 5px 11px;
    gap:7px;
    border-radius:14px;
  }
  .page>.timber-panel .grid .card small{
    top:11px;
    left:11px;
    font-size:8px;
  }
  .page>.timber-panel .grid .card i{
    width:40px;
    height:40px;
    border-radius:12px;
    font-size:18px;
  }
  .page>.timber-panel .grid .card h2{
    max-width:100%;
    font-size:11px;
    line-height:1.12;
    letter-spacing:-.035em;
    overflow-wrap:anywhere;
  }
  .page>.timber-panel .grid .card b{
    right:10px;
    bottom:9px;
    font-size:12px;
  }
}