/*
Theme Name: Squirrel Design
Author: Tom Rhodes
Author URI: https://tjrhodes.com
Theme URI: https://siteorigin.com/theme/corp
Description: SiteOrigin Corp Child Theme
Version: 1.0.0
Template: siteorigin-corp
Text Domain: siteorigin-corp
Domain Path: /languages/
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

input::-moz-focus-inner {
  border: 0;
}   

/* Focus rings: hidden for mouse clicks, kept for keyboard users.
 *
 * `:focus:not(:focus-visible)` rather than a blanket `a:focus` — a keyboard-
 * focused link matches BOTH :focus and :focus-visible, so killing the outline on
 * :focus removes the very ring :focus-visible is trying to draw.
 *
 * Deliberately no `border` reset. The dotted ring on click is the browser's
 * outline, not a border; the parent theme's only dotted borders are on abbr and
 * acronym. What it DOES draw with border-bottom on the <a> is the main-nav hover
 * underline (siteorigin-corp style.css line 669) and the current-page indicator
 * (line 679), so `border: none` on links silently removes both.
 *
 * No !important needed here now nothing competes for it. */
a:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* Base link colour. The parent's is its default accent #f14e4e (siteorigin-corp
 * style.css line 511, visited included) — coral, against a site of browns and gold.
 * `body a` only to outrank the parent's bare `a`, which loads after this file and
 * would win a tie. Kept this high up so every classed link rule below still wins.
 * Gold on white is 5:1, inside WCAG AA for text. */
body a,
body a:visited {
  color: var(--squig-gold);
}

body a:hover,
body a:focus,
body a:active {
  color: var(--squig-brown);
}

/* The SiteOrigin Blog widget prints its own link colours — the same coral, from
 * its design settings — into a generated stylesheet keyed to a hashed class
 * (.so-widget-sow-blog-masonry-<hash>) that changes whenever the widget is saved.
 * So these target the stable .so-widget-sow-blog, doubled to outrank the hashed
 * class plus the layout class the generated rules carry. Changing the colours in
 * the widget's own settings would also work, and would make these redundant. */
body .so-widget-sow-blog.so-widget-sow-blog .sow-blog-posts article .sow-entry-content a {
  color: var(--squig-gold);
}

body .so-widget-sow-blog.so-widget-sow-blog .sow-blog-posts article .sow-entry-content a:hover,
body .so-widget-sow-blog.so-widget-sow-blog .sow-blog-posts article .sow-entry-content a:focus,
body .so-widget-sow-blog.so-widget-sow-blog.so-widget-sow-blog .sow-blog-posts article .sow-entry-meta span a:hover,
body .so-widget-sow-blog.so-widget-sow-blog.so-widget-sow-blog .sow-blog-posts article .sow-entry-meta span a:focus {
  color: var(--squig-brown);
}

body .so-widget-sow-blog.so-widget-sow-blog.so-widget-sow-blog .sow-post-navigation .page-numbers:not(.dots).current,
body .so-widget-sow-blog.so-widget-sow-blog.so-widget-sow-blog .sow-post-navigation .page-numbers:not(.dots):hover,
body .so-widget-sow-blog.so-widget-sow-blog.so-widget-sow-blog .sow-post-navigation .page-numbers:not(.dots):focus,
body .so-widget-sow-blog.so-widget-sow-blog.so-widget-sow-blog .sow-post-navigation .sow-nav-links a:hover,
body .so-widget-sow-blog.so-widget-sow-blog.so-widget-sow-blog .sow-post-navigation .sow-nav-links a:focus {
  color: var(--squig-gold);
  border-color: var(--squig-gold);
}

/* Same treatment for buttons. The parent theme sets `outline: none` on :focus for
 * every button and button-like input (siteorigin-corp style.css line 428), which
 * left keyboard users with no visible focus on any button at all.
 *
 * The `body` prefix is doing real work: this child stylesheet is enqueued BEFORE
 * the parent's (corp-child-css, then siteorigin-corp-style-css), so on an equal
 * specificity tie the parent would win. `body button:focus-visible` is (0,1,2)
 * against the parent's (0,1,1) and wins regardless of order.
 *
 * The gallery pills and the contact submit button carry their own focus rings at
 * higher specificity, so they keep their own colours. */
body button:focus-visible,
body .button:focus-visible,
body input[type="button"]:focus-visible,
body input[type="reset"]:focus-visible,
body input[type="submit"]:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* header logo
   The parent theme swaps .custom-logo (light) for .alt-logo-scroll (dark) once the
   header is stuck, and scales both by the same percentage. Only the light one carried
   this cap, so the dark one rendered at its intrinsic 352px and grew on the swap. The
   two files share an aspect ratio, so one cap makes the swap size-for-size.
   The vw term leaves room for the 33px mobile menu button: at a flat 320px the
   logo filled a 400px phone and pushed the button 8px off the right edge, so
   every page scrolled sideways and the menu was half hidden. */
.site-branding .custom-logo,
.site-branding .alt-logo-scroll {
    max-width: min(320px, calc(100vw - 130px));
}

/*
large headings
*/

body h1,
body h2,
body h3,
body h4,
h4.latest_post_title {
    font-family: 'artico_extracond_light';
    font-style: normal !important;
    text-transform: uppercase;
    letter-spacing: .3rem;
}

body h1 {
    font-size: 4rem;
    text-align: center;
}

body h2 {
    font-size: 36px;
}

body h3 {
    font-size: 28px;
}

@media screen and (max-width: 1000px) {

    body h1 {
        font-size: 3rem;
        text-align: center;
    }

    body h2 {
        font-size: 24px;
    }

    body h3 {
        font-size: 18px;
    }

}

.squig-column-row {
    max-width: 1170px;
    margin: auto;
}

/*
header styles
*/

#masthead .corp-container {
    padding-left: 2rem;
    padding-right: 2rem;
}

/*
tree house view
*/

#tree-house-view-columns {
    max-width: 1170px;
    margin: auto;
}

#tree-house-view-columns p {
    font-size: 1.45rem;
    line-height: 2.75rem;
    margin-bottom: 2.75rem;
}

@media screen and (max-width: 1000px) {

    #tree-house-view-columns p {
        font-size: 1.25rem;
        line-height: 2rem;
        margin-bottom: 2rem;
    }

}

/*
call us row
*/

.call-me-row {
    padding-top: 40px;
    padding-bottom: 40px;
}

.call-us-text .textwidget h1,
.call-us-text .textwidget h1 a {
    color: white;
}

@media screen and (max-width: 1000px) {

    .call-us-text .textwidget h1,
    .call-us-text .textwidget h1 a {
        font-size: 3rem;
    }

        .call-me-row {
            padding-left: 40px;
            padding-right: 40px;
        }
}

/*
treehouses page - bark rows text colour
*/

#treehouses-call-us,
#not-only-treehouses,
#company-history-banner,
#the-team-banner,
#contact-call-us {
    max-width: none !important;
}

#treehouses-call-us .panel-background-overlay,
#not-only-treehouses .panel-background-overlay,
#company-history-banner .panel-background-overlay,
#the-team-banner .panel-background-overlay,
#contact-call-us .panel-background-overlay {
    background-size: 100% auto !important;
    background-position: top center !important;
}

#treehouses-call-us h1,
#treehouses-call-us h1 a,
#not-only-treehouses h2,
#not-only-treehouses h2 a {
    color: white;
}

@media screen and (max-width: 1000px) {
    #treehouses-call-us h1,
    #treehouses-call-us h1 a {
        font-size: 3rem;
    }
}

/*
image overlay
*/
.sow-masonry-grid-item .so-premium-image-overlay-container .so-premium-image-overlay-background {
    background-color: #2e2510;
}

/* Check Out Our Work — masonry hover styled to match blog section */
body.home .widget_sow-simple-masonry .so-premium-image-overlay {
    top: 0 !important;
    height: 100% !important;
}

body.home .widget_sow-simple-masonry .so-premium-image-overlay-background {
    opacity: 0.6 !important;
}

body.home .widget_sow-simple-masonry .so-premium-image-overlay-text {
    font-family: artico_extracond_light, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: .3rem !important;
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    color: var(--squig-off-white, #f9f9f9) !important;
    top: 50% !important;
    transform: translateY(-50%);
    padding: 1rem 1.5rem !important;
}

body.home .widget_sow-simple-masonry .so-premium-image-overlay-text {
    border-bottom: none;
    transition: none;
    width: fit-content !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 7px;
    transition: text-decoration-color 0.3s ease-in-out;
}

body.home .widget_sow-simple-masonry .so-premium-image-overlay-text:hover {
    text-decoration-color: #ccc;
}

body.home .widget_sow-simple-masonry .sow-masonry-grid-item a:hover .so-premium-image-overlay-text {
    border-bottom: none;
}

/*
arrows
*/

.arrow {
    position: absolute;
    left: 50%;
    width: 200px;
    line-height: 0;
    margin: 0;
    z-index: 5;
}

.arrow img {
    display: block;
    width: 100%;
    height: auto;
}

.arrow.arrow-top {
    top: 0;
    transform: translate(-50%);
}

.arrow.arrow-bottom {
    bottom: 0;
    transform: translate(-50%);
}

/* 
how we do it row
*/

#how-we-do-it {
    background-color: rgba(74,22,14,.2);
}

#how-we-do-it-title h3 {
    max-width: 800px;
    margin: auto;
}

.how-we-do-it-panel .how-we-do-it-number-title img {
    width: 40px;
    height: auto;
    margin-right: 20px;
}

.how-we-do-it-panel .how-we-do-it-number-title h4 {
    margin-top:40px;
}

@media screen and (max-width: 1000px) {

    #how-we-do-it-title h3 {
        padding-left: 40px;
        padding-right: 40px;
    }

}

/*
testimonials slider
*/

#homepage-testimonials .sp-testimonial-free-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

#homepage-testimonials .sp-testimonial-free-wrapper .sp-testimonial-free-section {
    margin: 40px;
    margin-left: 120px;
    margin-right: 120px;
    align-items: center;
    max-width: 1024px;
}


#homepage-testimonials .sp-testimonial-free-wrapper .sp-testimonial-free-section .sp-testimonial-title h3 {
    font-family: 'artico_extracond_light';
    font-style: normal !important;
    text-transform: uppercase;
    letter-spacing: .3rem;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

#homepage-testimonials .sp-testimonial-free-wrapper .sp-testimonial-free-section .sp-testimonial-content p {
    font-size: 1.4rem;
    line-height: 1.5;
    padding:40px;
}

#homepage-testimonials .sp-testimonial-free-wrapper .sp-testimonial-free-section h4.sp-testimonial-client-name {
    margin-top: 40px;
    font-family: 'artico_extracond_light';
    font-style: normal !important;
    letter-spacing: .3rem;
    font-size: 2rem;
}

#homepage-testimonials .sp-testimonial-free-wrapper .sp-testimonial-free-section .swiper-wrapper {
    align-items: center;
}

@media screen and (max-width: 1000px) {
    
    #homepage-testimonials .sp-testimonial-free-wrapper .sp-testimonial-free-section {
        margin-left: 0;
        margin-right: 0;
    }

    #homepage-testimonials .sp-testimonial-free-wrapper .sp-testimonial-free-section .sp-testimonial-title h3 {
        line-height: 3rem;
    }

    #homepage-testimonials .sp-testimonial-free-wrapper .sp-testimonial-free-section .sp-testimonial-content p {
        font-size: 1.25rem;
        padding:0;
    }
}

@media screen and (max-width: 600px) {

    #homepage-testimonials .sp-testimonial-free-wrapper .sp-testimonial-free-section .sp-testimonial-content p {
        font-size: 1.1rem;
    }
}

/*
high quality, low impact shizzle
*/

#high-quality-title-row {
    margin-bottom: 0;
}

#high-quality .hq-icon-title .zaso-icon__media .sow-icon-ionicons {
    width: 40px;
    height: auto;
    font-size: 40px;
    margin-right: 20px;
}

#high-quality .hq-icon-title .zaso-icon__text h4 {
    font-size: 2rem;
    margin: 0;
    padding-top:30px;
}

#high-quality .hq-icon-title .zaso-icon__text {
    padding: 0;
    margin: 0;
}

#high-quality {
    max-width: 1170px;
    margin:auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* 
tell us your dream row
*/

#tell-us-row #tell-us-columns form .sow-form-field input,
#tell-us-row #tell-us-columns form .sow-form-field textarea {
    background-color: rgba(74,22,14,.4);
}

/* Fields light up on focus.
   The widget's generated CSS gives them a 2px #ffcc5d border and, on focus, a 3px
   #1e73be outline — the plugin's default blue, over a brown row. Replaced here by
   lightening the border the field already has and adding a glow in the same colour,
   so focus reads as the field lighting up rather than a box appearing around it.

   The glow IS the focus indicator, for pointer and keyboard alike, which is why the
   blue outline is removed rather than left alongside it. A deliberate exception to
   the :focus-visible convention at the top of this file, not an oversight.

   Selectors follow this section's #tell-us-row convention, which also outranks the
   widget's generated class — that class carries a content hash
   (…-79131f36da30) and changes whenever the widget is edited, so it must never be
   targeted directly. The transition sits on the resting rule so it animates both
   ways. */
#tell-us-row #tell-us-columns form .sow-form-field input,
#tell-us-row #tell-us-columns form .sow-form-field textarea {
    transition: border-color .3s ease, box-shadow .3s ease;
}

#tell-us-row #tell-us-columns form .sow-form-field input:focus,
#tell-us-row #tell-us-columns form .sow-form-field textarea:focus {
    border-color: #ffe7b8;
    box-shadow: 0 0 0 1px rgba(255,231,184,.5), 0 0 16px 3px rgba(255,204,93,.4);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    #tell-us-row #tell-us-columns form .sow-form-field input,
    #tell-us-row #tell-us-columns form .sow-form-field textarea {
        transition: none;
    }
}

#tell-us-row #tell-us-columns .textwidget p {
    font-size: 1.5rem;
    font-weight: 500;
}

#tell-us-form-row #tell-us-columns {
    padding-left: 30px;
    padding-right: 30px;
}

/*
footer
*/

footer {
    position: relative;
}

footer p,
footer li a,
footer .bottom-bar .site-info span {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f9f9f9;
}

footer #footer-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/uploads/2024/05/bark-scaled.jpg);
    background-attachment: fixed;
    background-size: 100% auto;
    opacity: .36;
}

footer.site-footer {
    background-color:  rgb(74,22,14);
}

footer.site-footer:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

footer.site-footer .bottom-bar {
    background-color: rgba(18,6,4,1);
}

.instagram-gallery-modal__media_description>p {
    color: darkgrey;
}

/* "View on Instagram" rollover.
   Two things ganged up on it. The parent theme greys every footer-widget link on
   hover (siteorigin-corp .site-footer .widgets .widget a:hover, #b4b5b8) and the
   feed plugin washes the button with an inset white glow
   (rgba(255,255,255,.2) 0 0 20px 20px inset), so the text dimmed to grey while the
   blue lifted towards the same grey — the two met in the middle.

   Instead: text stays white and the blue simply darkens, #0095f6 -> #006eb8. The
   inset wash is cancelled, which is what was bleaching the background.

   Specificity, not !important: the parent's rule is (0,4,1) and the plugin's inset
   glow (0,2,0), so four classes plus the pseudo-class clears both. */
.site-footer .widgets .widget a.instagram-gallery__button--follow,
.site-footer .widgets .widget a.instagram-gallery__button--follow:hover,
.site-footer .widgets .widget a.instagram-gallery__button--follow:focus {
    color: #fff;
}

.site-footer .widgets .widget a.instagram-gallery__button--follow:hover,
.site-footer .widgets .widget a.instagram-gallery__button--follow:focus {
    background-color: #006eb8;
    box-shadow: none;
}

.site-footer .widgets .widget a.instagram-gallery__button--follow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media screen and (max-width:700px) {
    footer p,
    footer li a,
    footer .bottom-bar .site-info span
    {
        text-align: center;
    }

    footer #footer-container .menu-footer-container {
        text-align: center;
    }

    footer #footer-container .social-media-button-container {
        text-align: center;
    }
}

/*
internal pages and migrated content
*/

:root {
    --squig-brown: rgb(74,22,14);
    --squig-gold: #82672d;
    --squig-off-white: #f9f9f9;
    /* --squig-page-bg is injected by squirrel_page_bg() in functions.php so that the
       theme's surfaces and the SiteOrigin row backgrounds always match. Change the
       colour THERE, not here. The fallbacks below are only a safety net. */
    --squirrel-hero-image: url('/wp-content/uploads/2018/01/title-image-1-2048x1152.jpg');
    /* Half the width of the arrow notched out of the bottom of the hero: the
       notch spans 50% ± this. The blog sidebar indents by the same amount, so
       the two are deliberately tied — change it here and both follow. */
    --squirrel-arrow-half: 100px;
}

body.page:not(.home) .site-content,
body.single-post .site-content,
body.single-portfolio_page .site-content,
body.post-type-archive-portfolio_page .site-content {
    background: var(--squig-page-bg, #fff);
}

/* SiteOrigin row backgrounds are handled in PHP (squirrel_whiten_row_background),
   not here — see the note at the bottom of this block.

   !important is required: this stylesheet is enqueued at priority 8, so the parent's
   style.min.css loads after it and its `body { background: #f9f9f9 }` would otherwise
   win on source order. Visible as a grey strip between content and footer. */
body {
    background: var(--squig-page-bg, #fff) !important;
}

/* REMOVED: a blanket .panel-row-style override cannot work here. CSS cannot tell a
   row that is #f9f9f9 from one that is deliberately transparent, so it repainted
   transparent-over-bark rows (e.g. the homepage "Tell us your dream" form) white. */

body.page-layout-full-width-no-sidebar #secondary.widget-area,
body.page-layout-full-width-no-sidebar .widget-area {
    display: none;
}

body.page-layout-full-width-no-sidebar.sidebar .content-area,
body.page-layout-full-width-no-sidebar .content-area {
    float: none;
    margin: 0;
    width: 100%;
}

body.page-layout-full-width-no-sidebar.sidebar .site-main,
body.page-layout-full-width-no-sidebar .site-main {
    margin: 0;
}

body.squirrel-internal-hero #masthead {
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
}

body.squirrel-internal-hero #masthead:not(.stuck) {
    background: transparent;
    border-bottom: 0;
}

body.squirrel-internal-hero #masthead.stuck {
    background: #fff;
}

/*
stuck header: shrink and slide in

The parent's JS logo scaling is switched off in functions.php (it shrank the logo
over the first 48px of scroll, while the header was still transparent), so the
stuck size lives here. 0.755 is the parent's default logoScale, kept so the stuck
header is the same height it always was: 25px * .755 padding, 320px * .755 logo.
Both logos are capped so the swap stays size-for-size.

The slide-in animates on the .stuck class itself: the parent adds it at the exact
scroll where the header switches from absolute to fixed, so it fires once per
stick. The slide-out runs on .unsticking, which js/header.js holds alongside .stuck
until the animation ends. The parent sets position:absolute *inline* on every
scroll during that window, and nothing but !important beats an inline style —
without it the header jumps to page top mid-slide. The selector is deliberately
.unsticking alone, not .stuck.unsticking: the parent strips .stuck and forces a
layout before header.js can put it back, and if that intermediate recalc changed
animation-name the slide-out would cancel and restart on every scroll event —
i.e. never finish while the user is still scrolling. In is a heavy ease-out, out
is a heavy ease-in and a touch quicker, both by the client's eye.
*/
#masthead.stuck {
    padding-top: 19px;
    padding-bottom: 19px;
}

/* Same vw term as the resting cap, or on the smallest phones the logo would
   grow when the header sticks. */
#masthead.stuck .site-branding .custom-logo,
#masthead.stuck .site-branding .alt-logo-scroll {
    max-width: min(242px, calc(100vw - 130px));
}

.site-header.stuck {
    animation: squirrel-header-in .22s cubic-bezier(.16, 1, .3, 1);
}

#masthead.unsticking {
    position: fixed !important;
    animation: squirrel-header-out .18s cubic-bezier(.7, 0, .84, 0) forwards;
}

@keyframes squirrel-header-in {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes squirrel-header-out {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .site-header.stuck,
    #masthead.unsticking {
        animation: none;
    }
}

body.squirrel-internal-hero #masthead:not(.stuck) .main-navigation ul li a,
body.squirrel-internal-hero #masthead:not(.stuck) .site-description,
body.squirrel-internal-hero #masthead:not(.stuck) .header-search .search-submit {
    color: #fff;
}

/*
mobile menu icon: three bars that fold into an X while the menu is open

The parent's icon is one SVG path, so its bars cannot move independently. The SVG
stays in place, hidden, to keep the button's size; the bars are ::before (top),
::after (bottom) and a background gradient (middle), all in currentColor, at the
SVG's own measurements — 16px wide, 2px thick, 5.5px apart, centred in the button.
The open state is the parent's .to-close class on the button.

Two-step fold: opening slides the outer bars to the middle and then rotates them;
closing rotates back first and then slides out. Separate translate and rotate
properties are what let each step carry its own delay.

Colour moved from the SVG's fill to the button's color for the bars. The parent
filled it white under overlap-light and #2d2d2d otherwise, and Treehouses is set to
overlap-dark in its page settings, so its icon was invisible over the hero on
phones. Every internal hero is a dark-graded photo, so white regardless of the
page's overlap setting.
*/
#masthead #mobile-menu-button {
    color: #2d2d2d;
    background: linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat;
    transition: background-size .15s ease .15s;
}

body.overlap-light #masthead:not(.stuck) #mobile-menu-button,
body.squirrel-internal-hero #masthead:not(.stuck) #mobile-menu-button {
    color: #fff;
}

#masthead #mobile-menu-button svg {
    visibility: hidden;
}

#masthead #mobile-menu-button::before,
#masthead #mobile-menu-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    border-radius: 1px;
    background: currentColor;
    transition: rotate .15s ease, scale .15s ease, translate .15s ease .15s;
}

#masthead #mobile-menu-button::before {
    translate: 0 -5.5px;
}

#masthead #mobile-menu-button::after {
    translate: 0 5.5px;
}

#masthead #mobile-menu-button.to-close {
    background-size: 0 2px;
    transition-delay: 0s;
}

#masthead #mobile-menu-button.to-close::before,
#masthead #mobile-menu-button.to-close::after {
    translate: 0 0;
    scale: 1.2 1; /* rotated, 16px bars only span 11px — lengthen to match the bars' weight */
    transition: translate .15s ease, rotate .15s ease .15s, scale .15s ease .15s;
}

#masthead #mobile-menu-button.to-close::before {
    rotate: 45deg;
}

#masthead #mobile-menu-button.to-close::after {
    rotate: -45deg;
}

/*
mobile menu: white panel with an arrow, over a header that turns white to match

The parent builds #mobile-navigation (dark grey, #b2b2b2 text) and slides it open;
js/mobile-menu.js mirrors its open state onto #masthead as .squirrel-menu-open. On a
transparent header that class fades the bar to white and crossfades to the dark logo,
so header and panel read as one white sheet ending in the site's down-arrow.

The arrow is clip-path, like the hero notch, and the same size: 40px deep, spanning
50% ± --squirrel-arrow-half. The panel's bottom padding includes those 40px so the
last row clears the cut. Clip-path also clips box-shadow, so the shadow is a
drop-shadow filter on #masthead, which follows the arrow's outline.

Transitions run only while the menu opens (.squirrel-menu-open) or closes
(.squirrel-menu-closing, held 600ms by js/mobile-menu.js) — never on the resting
header. Put there, they also fired whenever the parent stuck or unstuck the header,
so a fast scroll back to the top showed the bar fading out from white. Opening fades
straight away; closing waits .2s, the length of the parent's slideUp('fast'), so the
header goes back to transparent only once the panel has gone. None of it applies to
.stuck, where the parent swaps logos instantly and the header is white anyway.

The parent toggles the logos with display, so both are forced to display and the
pair is stacked in one grid cell to crossfade on opacity instead.

The panel rules carry #masthead for specificity alone: the parent's stylesheet loads
after this one, so a bare #mobile-navigation selector ties and loses.
*/
#masthead #mobile-navigation {
    top: 100%; /* parent's 101% left a 1px strip of hero between bar and panel */
    padding: 20px 0 calc(28px + 40px);
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(50% + var(--squirrel-arrow-half)) calc(100% - 40px), 50% 100%, calc(50% - var(--squirrel-arrow-half)) calc(100% - 40px), 0 calc(100% - 40px));
}

#masthead #mobile-navigation ul li a {
    color: var(--squig-brown);
    border-color: rgba(74, 22, 14, .12);
}

#masthead #mobile-navigation > ul > li:last-child > a {
    border-bottom: 0;
}

#masthead #mobile-navigation ul li a:hover,
#masthead #mobile-navigation ul li.current-menu-item > a,
#masthead #mobile-navigation ul li .dropdown-toggle:hover {
    color: var(--squig-gold);
}

#masthead #mobile-navigation ul li .dropdown-toggle {
    color: var(--squig-brown);
}

#masthead.squirrel-menu-open {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
    transition: background-color .3s ease, filter .3s ease;
}

#masthead.squirrel-menu-closing {
    transition: background-color .3s ease .2s, filter .3s ease .2s;
}

/* After the rules above on purpose: the stuck header's white must arrive with the
   slide-in, not fade in behind it. */
#masthead.stuck {
    transition: none;
}

body[class*="overlap-"] #masthead.squirrel-menu-open:not(.stuck) {
    background-color: #fff;
}

/* After the white-icon rule above, which it ties on specificity. */
body[class*="overlap-"] #masthead.squirrel-menu-open #mobile-menu-button {
    color: var(--squig-brown);
}

/* After .to-close, which these tie on specificity. */
#masthead.squirrel-menu-open #mobile-menu-button {
    transition: color .3s ease, background-size .15s ease;
}

#masthead.squirrel-menu-closing #mobile-menu-button {
    transition: color .3s ease .2s, background-size .15s ease .15s;
}

body[class*="overlap-"] .site-header .site-branding {
    display: grid;
}

body[class*="overlap-"] .site-header .site-branding > a {
    grid-area: 1 / 1;
    align-self: center;
}

body[class*="overlap-"] .site-header .site-branding a.alt-logo,
body[class*="overlap-"] .site-header .site-branding img.alt-logo,
body[class*="overlap-"] .site-header .site-branding img.alt-logo-scroll {
    display: block;
}

body[class*="overlap-"] .site-header .site-branding img.alt-logo-scroll,
body[class*="overlap-"] .site-header.squirrel-menu-open .site-branding img.alt-logo,
body[class*="overlap-"] .site-header.stuck .site-branding img.alt-logo {
    opacity: 0;
}

body[class*="overlap-"] .site-header.squirrel-menu-open .site-branding img.alt-logo-scroll,
body[class*="overlap-"] .site-header.stuck .site-branding img.alt-logo-scroll {
    opacity: 1;
}

body[class*="overlap-"] .site-header.squirrel-menu-open .site-branding img {
    transition: opacity .3s ease;
}

body[class*="overlap-"] .site-header.squirrel-menu-closing .site-branding img {
    transition: opacity .3s ease .2s;
}

body[class*="overlap-"] .site-header.stuck .site-branding img {
    transition: none;
}

/* Set by js/mobile-menu.js when a menu link leaves the page: back to transparent at
   once, or a quick page load catches the bar mid-fade and flashes it white. */
#masthead.squirrel-menu-leaving,
#masthead.squirrel-menu-leaving #mobile-menu-button,
body[class*="overlap-"] #masthead.squirrel-menu-leaving .site-branding img {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    #masthead.squirrel-menu-open,
    #masthead.squirrel-menu-closing,
    #masthead #mobile-menu-button,
    #masthead.squirrel-menu-open #mobile-menu-button,
    #masthead.squirrel-menu-closing #mobile-menu-button,
    #masthead #mobile-menu-button::before,
    #masthead #mobile-menu-button::after,
    #masthead #mobile-menu-button.to-close::before,
    #masthead #mobile-menu-button.to-close::after,
    body[class*="overlap-"] .site-header.squirrel-menu-open .site-branding img,
    body[class*="overlap-"] .site-header.squirrel-menu-closing .site-branding img {
        transition: none;
    }
}

/*
nav underline on the transparent header

The parent draws the hover and current-page underline as a 2px border-bottom on the
link (siteorigin-corp style.css 671 and 683) in its default accent, #f14e4e — never
changed in the customizer, and over a hero photo it vanishes into the roof tiles.
White, like the text, on any overlap (transparent) header; the parent's .3s
transition on the link is what animates it, so there is nothing else to add.
[class*="overlap-"] rather than .squirrel-internal-hero so the homepage is covered.
*/
body[class*="overlap-"] #masthead:not(.stuck) .main-navigation div > ul:not(.cart_list) > li:hover > a,
body[class*="overlap-"] #masthead:not(.stuck) .main-navigation div > ul:not(.cart_list) > li.current > a,
body[class*="overlap-"] #masthead:not(.stuck) .main-navigation div > ul:not(.cart_list) > li.current_page_item > a,
body[class*="overlap-"] #masthead:not(.stuck) .main-navigation div > ul:not(.cart_list) > li.current-menu-item > a,
body[class*="overlap-"] #masthead:not(.stuck) .main-navigation div > ul:not(.cart_list) > li.current_page_ancestor > a,
body[class*="overlap-"] #masthead:not(.stuck) .main-navigation div > ul:not(.cart_list) > li.current-menu-ancestor > a {
    border-color: #fff;
}

body.squirrel-internal-hero .entry-thumbnail {
    display: none;
}

body.squirrel-internal-hero #content.site-content {
    padding-top: 0;
}

body.squirrel-internal-hero .entry-header {
    position: relative;
    min-height: 580px;
    margin: 0 0 40px;
    padding: 170px 30px 50px;
    background-image: linear-gradient(to bottom, rgba(10,10,10,.25), rgba(10,10,10,.45)), var(--squirrel-hero-image);
    background-position: center;
    background-size: cover;
}

body.squirrel-internal-hero .entry-header::after {
    content: '';
    position: absolute;
    bottom: -0.5px;
    left: 0;
    right: 0;
    height: 40px;
    background-color: var(--squig-page-bg, #fff);
    clip-path: polygon(0 0, calc(50% - var(--squirrel-arrow-half)) 0, 50% 100%, calc(50% + var(--squirrel-arrow-half)) 0, 100% 0, 100% 100%, 0 100%);
}

/* min() keeps the title as big as the screen allows without a word overflowing
   it: 19vw fits the longest title word ("IMAGINATIVE") at 400px wide. Phones get
   this rather than the 2rem single-post/project rules further down, which this
   selector outranks on specificity. */
body.squirrel-internal-hero .entry-header .entry-title {
    font-size: min(6rem, 19vw);
    padding-top:10rem;
    opacity: 0;
}

body.squirrel-internal-hero .entry-header .entry-title,
body.squirrel-internal-hero .entry-header .entry-meta,
body.squirrel-internal-hero .entry-header .entry-meta a {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

body.page:not(.home) .entry-content,
body.single-post .entry-content,
body.single-portfolio_page .entry-content {
    max-width: 1170px;
    margin: 0 auto;
}

body.page:not(.home) .entry-content p,
body.single-post .entry-content p,
body.single-portfolio_page .entry-content p,
body.page:not(.home) .textwidget p {
    font-size: 1.15rem;
    line-height: 1.8;
}

body.page:not(.home) .entry-content ul,
body.single-post .entry-content ul,
body.single-portfolio_page .entry-content ul {
    margin: 0 0 1.5rem 1.2rem;
}

body.page:not(.home) .entry-content li,
body.single-post .entry-content li,
body.single-portfolio_page .entry-content li {
    margin-bottom: .35rem;
    line-height: 1.8;
}

body.page:not(.home) .panel-grid,
body.page:not(.home) .panel-grid-cell,
body.page:not(.home) .panel-widget-style {
    box-sizing: border-box;
}

body.page:not(.home) .panel-row-style,
body.page:not(.home) .panel-grid-cell,
body.page:not(.home) .panel-grid-cell .so-panel {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

body.page:not(.home) .sow-headline,
body.single-post .entry-header,
body.single-portfolio_page .entry-header {
    margin-bottom: 1.25rem;
}

body.single-post .entry-header h1,
body.single-portfolio_page .entry-header h1 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.1;
}

body.single-post .entry-content,
body.single-portfolio_page .entry-content {
    padding: 0 24px 40px;
}

body.single-post .entry-content > p:first-of-type,
body.single-portfolio_page .entry-content > p:first-of-type {
    font-size: 1.28rem;
}

.squirrel-migrated-quote,
body.single-post blockquote,
body.single-portfolio_page blockquote {
    border-left: 6px solid var(--squig-gold);
    background: rgba(130,103,45,.08);
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    font-size: 1.2rem;
    line-height: 1.65;
}

.squirrel-migrated-button,
body.single-post .entry-content a.squirrel-migrated-button,
body.single-portfolio_page .entry-content a.squirrel-migrated-button,
body.page:not(.home) .ow-button-base a {
    display: inline-block;
    background: var(--squig-gold);
    color: #fff !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .9rem 1.1rem;
    border-radius: 3px;
    font-weight: 700;
    transition: background-color .2s ease, transform .2s ease;
    line-height: 2rem;
    
}

.squirrel-migrated-button:hover,
body.single-post .entry-content a.squirrel-migrated-button:hover,
body.single-portfolio_page .entry-content a.squirrel-migrated-button:hover,
body.page:not(.home) .ow-button-base a:hover {
    background: #5d4a20;
    transform: translateY(-1px);
}

body.page-id-95 .sow-contact-form,
body.page-id-95 form.sow-contact-form {
    margin-top: 1rem;
}

body.page-id-95 #contact-title .textwidget h2 {
    margin-top: 0;
}

/* The widget ships #f2f2f2 with a #c0c0c0 border in its generated CSS, which is the
   darkest grey on the site once the panels go white. Targeted by class, not by the
   generated .so-widget-sow-contact-form-default-<hash> selector, which is not stable. */
body.page-id-95 .sow-contact-form {
    border-color: rgba(130,103,45,.35) !important;
}

body.page-id-95 .sow-contact-form .sow-form-field label {
    color: var(--squig-brown);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

body.page-id-95 .sow-contact-form input,
body.page-id-95 .sow-contact-form textarea,
body.page-id-95 .sow-contact-form select {
    border: 1px solid rgba(130,103,45,.65);
    background: #fff;
    color: #2a2118;
    padding: 10px 12px;
}

/* Match the submit button to .squirrel-migrated-button above.
   It is a <button class="sow-submit"> inside .sow-submit-wrapper — an earlier
   rule here targeted `.sow-submit input`, which matches nothing, so the button
   was left entirely to the widget's generated stylesheet.
   That stylesheet styles it at (0,5,0) with a gold gradient, and applies :hover
   and :focus together so it keeps the hover look after a click. These rules take
   a body prefix to outrank it on specificity rather than with !important, and
   split :focus back out. The parent theme's own button:focus red is beaten the
   same way. */
body.page-id-95 .sow-contact-form .sow-submit-wrapper .sow-submit,
body.page-id-95 .sow-contact-form .sow-submit-wrapper .sow-submit:focus,
body.page-id-95 .sow-contact-form .sow-submit-wrapper .sow-submit:active,
body.home .sow-contact-form .sow-submit-wrapper .sow-submit,
body.home .sow-contact-form .sow-submit-wrapper .sow-submit:focus,
body.home .sow-contact-form .sow-submit-wrapper .sow-submit:active {
    display: inline-block;
    font-size: 1rem;
    background: var(--squig-gold);
    border: 0;
    border-radius: 3px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    padding: .9rem 1.1rem;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

body.page-id-95 .sow-contact-form .sow-submit-wrapper .sow-submit:hover,
body.home .sow-contact-form .sow-submit-wrapper .sow-submit:hover {
    background: #5d4a20;
    transform: translateY(-1px);
}

body.page-id-95 .sow-contact-form .sow-submit-wrapper .sow-submit:focus-visible {
    outline: 2px solid var(--squig-brown);
    outline-offset: 2px;
}

/* The homepage form sits on a dark row, so the brown ring would disappear. */
body.home .sow-contact-form .sow-submit-wrapper .sow-submit:focus-visible {
    outline: 2px solid var(--squig-off-white);
    outline-offset: 2px;
}

body.page-id-95 .sow-contact-form .sow-error {
    color: #970106;
    font-weight: 800;
}

body.page-id-87 #treehouses-intro,
body.page-id-89 #about-us-intro,
body.page-id-51876 #faqs-content,
body.page-id-51877 #privacy-content,
body.page-id-91 #gallery-intro {
    max-width: 1170px;
    margin: 0 auto;
}

body.page-id-95 #contact-rhs-column {
    margin-top: 7px;
}

/* About Us images */
body.page-id-89 .about-image img {
    width: 100%;
    height: auto;
    margin-bottom: .5rem;
}

/* The 48px margin-right that used to sit on #discuss-with-us is gone (9 Oct
   2026): it held the grey panel 48px short of the arrow's left edge, which is
   where it is now meant to stop. The gap it was providing is now the 100px
   between the arrow's left edge and its point. See the arrow-alignment block
   further down. */

body.page-id-51876 h3,
body.page-id-51877 h3,
body.page-id-51877 h4 {
    margin-top: 1.5rem;
    margin-bottom: .75rem;
}

body.single-portfolio_page .wp-block-gallery,
body.single-portfolio_page .gallery {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

@media screen and (max-width: 1000px) {
    body.page:not(.home) .entry-content p,
    body.single-post .entry-content p,
    body.single-portfolio_page .entry-content p,
    body.page:not(.home) .textwidget p {
        font-size: 1.05rem;
        line-height: 1.65;
    }

    body.single-post .entry-content,
    body.single-portfolio_page .entry-content {
        padding: 0 18px 30px;
    }
}

@media screen and (max-width: 700px) {
    .squirrel-migrated-button,
    body.single-post .entry-content a.squirrel-migrated-button,
    body.single-portfolio_page .entry-content a.squirrel-migrated-button,
    body.page:not(.home) .ow-button-base a {
        width: 100%;
        text-align: center;
    }

    body.single-post .entry-header h1,
    body.single-portfolio_page .entry-header h1 {
        font-size: 2rem;
    }

    /* The hero's height is its content, so lifting the title means moving 40px
       from above it to below it — the hero stays the same height and the title
       sits clear of the arrow instead of just above it. */
    body.squirrel-internal-hero .entry-header {
        min-height: 280px;
        padding: 140px 20px 75px;
    }

    body.squirrel-internal-hero .entry-header .entry-title {
        padding-top: calc(10rem - 40px);
    }

    /* The intro's 1.5rem / 3.4rem is an inline style typed into the page's Custom
       HTML widget, and only !important beats inline. Editing it in the page instead
       would mean rewriting page 87's post_content (see CLAUDE.md). 1.1rem is the
       body text size: ~7 words a line on a 390px phone, against 4–5 before. */
    #treehouses-intro p.intro {
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
    }
}


/* ==========================================================================
   Project Grid & Cards  (archive + shortcode)
   ========================================================================== */

.squirrel-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.squirrel-project-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: box-shadow .25s ease;
}

.squirrel-project-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
}

.squirrel-project-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.squirrel-project-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.squirrel-project-card:hover .squirrel-project-card__image img {
    transform: scale(1.05);
}

.squirrel-project-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.5rem 1.5rem;
    gap: .5rem;
}

.squirrel-project-card__meta {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--squig-gold, #82672d);
    margin: 0;
}

.squirrel-project-card__title {
    font-size: 1.2rem;
    letter-spacing: .02em;
    margin: 0;
    color: var(--squig-brown, rgb(74,22,14));
}

.squirrel-project-card__title a {
    color: inherit;
    text-decoration: none;
}

.squirrel-project-card__title a:hover {
    text-decoration: underline;
}

.squirrel-project-card__excerpt {
    font-size: .95rem;
    color: #555;
    margin: 0;
    flex: 1;
}

.squirrel-project-card__link {
    font-size: .85rem;
    color: var(--squig-gold, #82672d);
    text-decoration: underline;
    align-self: flex-start;
    margin-top: .25rem;
}

.squirrel-project-card__link:hover {
    color: var(--squig-brown, rgb(74,22,14));
}

/* No-results */
.squirrel-no-results {
    padding: 2rem;
    text-align: center;
    color: #888;
}


/* ==========================================================================
   Single project page
   ========================================================================== */

/* ── Two-column layout (body + sidebar) ──
   Body left; buttons, details and photos right, as on the live site. The
   sidebar's parts are cut out of the migrated content on the server — see
   inc/project-single.php. Stacks below 1000px, where 400px of sidebar would
   leave the text too narrow to read. */

.squirrel-project-layout {
    display: grid;
    /* Pinned to the hero's arrow, same as the blog layout: 50% ends the body
       text under the arrow's point, and column-gap:0 plus the aside's
       padding-left lands the sidebar on the arrow's right edge. A column gap
       here would sit between the two and push the sidebar past it. */
    grid-template-columns: 50% minmax(0, 1fr);
    column-gap: 0;
    max-width: 1170px;
    margin: 2rem auto 3rem;
    padding: 0 24px;
    align-items: start;
    box-sizing: border-box;
}

/* The generic single-page .entry-content box (max-width, auto margins, side
   padding) would inset the body inside its own grid column. */
body.single-portfolio_page .squirrel-project-layout .entry-content {
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* No padding-right: the column itself now stops at the arrow's point, so an
   inset would pull the text left of it. The sidebar's padding-left is the air. */

/* The facts cards at the top of a project — timings and cost, lifted out of the
   migrated opening list by inc/project-single.php. Off-white with a gold left
   edge, the same card treatment as .squirrel-project-details in the sidebar.

   auto-fit with a 120px floor because the lists are not a fixed length: 23
   projects have three items, six have four, and four have only a cost. One
   item fills the row on purpose — a lone "COST" banner reads as deliberate,
   where a third-width card stranded on the left would not. */
/* Selector carries the body/.entry-content prefix to outrank
   `body.single-portfolio_page .entry-content ul`, which indents prose lists by
   1.2rem — right for those, wrong here: the first card must line up with the
   column's left edge. */
body.single-portfolio_page .entry-content .squirrel-project-facts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .75rem;
    margin: 0 0 2rem;
    padding: 0;
}

body.single-portfolio_page .entry-content .squirrel-project-fact {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background: var(--squig-off-white, #f9f9f9);
    border-left: 4px solid var(--squig-gold, #82672d);
    border-radius: 0 4px 4px 0;
    padding: .85rem 1rem;
    margin: 0;
}

.squirrel-project-fact__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--squig-gold, #82672d);
}

/* The number is the point, so it gets the heading face. margin-top keeps the
   values on one line across the row: grid stretches the cards to equal height,
   and a label that wraps to two lines ("Design and Proposal") would otherwise
   push its own value lower than its neighbours'. */
.squirrel-project-fact__value {
    margin-top: auto;
    font-family: artico_extracond_light, sans-serif;
    font-size: 1.45rem;
    letter-spacing: .08rem;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--squig-brown);
}

/* Footnotes under the cards — anything an author put in brackets. Same
   body-prefixed selector as the cards above, to clear the 1.2rem prose-list
   indent. */
body.single-portfolio_page .entry-content .squirrel-project-fact-notes {
    list-style: none;
    margin: -1.25rem 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

body.single-portfolio_page .entry-content .squirrel-project-fact-notes li {
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: #6d5a51;
}

.squirrel-project-fact__mark {
    margin-left: .15em;
    font-size: .6em;
    vertical-align: super;
    line-height: 0;
    color: var(--squig-gold, #82672d);
}

/* [video] prints a fixed width:640px inline. min-width above stops the column
   growing to fit it, and this lets it shrink instead — MediaElement re-measures
   on resize and keeps the 16:9. Only Canopy Climb has one, 8 Oct 2026. */
.squirrel-project-content .wp-video {
    max-width: 100%;
}

.squirrel-project-aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Lands the sidebar's content on the arrow's right edge — see the layout rule
   above. Desktop only; below 1000px the columns stack. */
@media screen and (min-width: 1001px) {
    .squirrel-project-aside {
        padding-left: var(--squirrel-arrow-half);
    }
}

.squirrel-project-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.squirrel-project-actions .squirrel-migrated-button {
    display: block;
    text-align: center;
}

/* ── Details ── */

.squirrel-project-details {
    background: var(--squig-off-white, #f9f9f9);
    border-left: 4px solid var(--squig-gold, #82672d);
    border-radius: 0 4px 4px 0;
    padding: 1.25rem 1.5rem;
}

.squirrel-project-detail-list {
    margin: 0;
    padding: 0;
}

.squirrel-project-detail-row {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(130,103,45,.2);
}

.squirrel-project-detail-row:last-child {
    border-bottom: none;
}

.squirrel-project-detail-row dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--squig-gold, #82672d);
    font-weight: 700;
}

.squirrel-project-detail-row dd {
    font-size: .9rem;
    color: #333;
    margin: 0;
}

/* ── Gallery (single project page only) ──
   These class names are also used by the filterable archive gallery, whose
   styles live in css/project-gallery.css and load site-wide. Every rule here
   must stay scoped to the single-project template or the two collide: the
   aspect-ratio and overflow below were cropping the archive gallery's titles
   and excerpts clean off. Square cells to match the 500x500 crop the server
   sends; squirrel_project_gallery_item()'s `sizes` assumes these columns — the
   sidebar's width is set by the arrow alignment, so changing one means
   rechecking the other. */

body.single-portfolio_page .squirrel-project-gallery,
body.single-post .squirrel-project-gallery {
    margin: 0;    /* css/project-gallery.css gives the archive's wrapper 2rem */
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.single-portfolio_page .squirrel-project-gallery__item,
body.single-post .squirrel-project-gallery__item {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 3px;
}

body.single-portfolio_page .squirrel-project-gallery__item img,
body.single-post .squirrel-project-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

body.single-portfolio_page .squirrel-project-gallery__item:hover img,
body.single-post .squirrel-project-gallery__item:hover img {
    transform: scale(1.04);
}

@media screen and (max-width: 1000px) {
    .squirrel-project-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        padding: 0 18px;
    }

    .squirrel-project-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .squirrel-project-actions .squirrel-migrated-button {
        flex: 1 1 auto;
    }

    body.single-portfolio_page .squirrel-project-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 700px) {
    body.single-portfolio_page .squirrel-project-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Testimonial ── */

.squirrel-project-testimonial {
    max-width: 760px;
    margin: 3rem auto;
    padding: 0 2rem;
    text-align: center;
}

.squirrel-project-testimonial blockquote {
    position: relative;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.7;
    color: #333;
    margin: 0;
    padding: 1.5rem 2rem;
}

.squirrel-project-testimonial blockquote::before {
    content: '\201C';
    font-size: 5rem;
    line-height: 0;
    color: var(--squig-gold, #82672d);
    position: absolute;
    top: 1.25rem;
    left: -.25rem;
    font-style: normal;
}

/* ── External link CTA ── */

.squirrel-project-ext-link {
    text-align: center;
    margin: 2.5rem auto;
    padding: 0 2rem;
}

.squirrel-project-ext-link a {
    display: inline-block;
    padding: .75rem 2rem;
    background: transparent;
    border: 2px solid var(--squig-gold, #82672d);
    color: var(--squig-gold, #82672d);
    text-decoration: none;
    font-size: .9rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background .2s ease, color .2s ease;
}

.squirrel-project-ext-link a:hover {
    background: var(--squig-gold, #82672d);
    color: #fff;
}

/* ── Prev / Next navigation ── */

.squirrel-project-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1170px;
    margin: 3rem auto;
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(130,103,45,.2);
    gap: 1rem;
}

/* Set like .squirrel-post-nav__title on blog posts — same component, sibling
   page type. The heading font because it is a title: this site uses it for
   every clickable title (main menu, related posts, recent projects, post nav)
   and keeps the UI font for small labels and buttons. */
.squirrel-project-nav a {
    font-family: artico_extracond_light, sans-serif;
    font-size: 1.6rem;
    letter-spacing: .15rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--squig-brown);
    text-decoration: none;
    max-width: 45%;
    transition: color .2s ease;
}

.squirrel-project-nav a:hover,
.squirrel-project-nav a:focus-visible {
    color: var(--squig-gold);
}

.squirrel-project-nav__next {
    text-align: right;
    margin-left: auto;
}


/* ==========================================================================
   Page-builder rows aligned to the hero arrow
   Same geometry as the project and blog layouts.

   `!important` is unavoidable and is the approach this file already takes with
   SiteOrigin: cell widths come from a generated inline <style> using an ID
   (`#pgc-gb87-… { width: calc(60% - 12px) }`), and an ID beats any number of
   classes.

   Rows are addressed by the custom IDs set on them in Page Builder, which sit
   on the .panel-row-style wrapping the cells. Those are stable; the generated
   pg-/pgc- ones are regenerated on every save and must never be used.
   ========================================================================== */

@media screen and (min-width: 1001px) {

    #treehouses-intro > .panel-grid-cell,
    #about-us-intro > .panel-grid-cell,
    #company-history-content > .panel-grid-cell,
    #contact-main-row > .panel-grid-cell,
    #privacy-content > .panel-grid-cell,
    #faqs-content > .panel-grid-cell {
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* The usual split: the left column ends on the arrow's point. */
    #treehouses-intro > .panel-grid-cell,
    #about-us-intro > .panel-grid-cell,
    #contact-main-row > .panel-grid-cell,
    #privacy-content > .panel-grid-cell,
    #faqs-content > .panel-grid-cell {
        width: 50% !important;
    }

    /* "Discuss your project with us" is the mirror image: the panel on the left
       ends on the arrow's LEFT edge and the copy on the right begins on the
       point. The same geometry shifted one half-arrow left, which is why both
       widths are 50% ± the same variable and the indent below is unchanged. */
    #company-history-content > .panel-grid-cell:first-child {
        width: calc(50% - var(--squirrel-arrow-half)) !important;
    }

    #company-history-content > .panel-grid-cell:last-child {
        width: calc(50% + var(--squirrel-arrow-half)) !important;
    }

    /* The right-hand cell, indented so its content meets the arrow. */
    #treehouses-intro > .panel-grid-cell:last-child,
    #about-us-intro > .panel-grid-cell:last-child,
    #company-history-content > .panel-grid-cell:last-child,
    #contact-main-row > .panel-grid-cell:last-child,
    #privacy-content > .panel-grid-cell:last-child,
    #faqs-content > .panel-grid-cell:last-child {
        padding-left: var(--squirrel-arrow-half);
    }
}

/* ==========================================================================
   Recent projects list — [squirrel_recent_projects]
   Used in the Contact Us sidebar between the headline and the button, so it is
   sized for a narrow column rather than full width.
   ========================================================================== */

.squirrel-recent-projects {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.squirrel-recent-project + .squirrel-recent-project {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(130, 103, 45, .25);
}

.squirrel-recent-project__link {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.squirrel-recent-project__image {
    flex: 0 0 105px;
    width: 105px;
    height: 105px;
    object-fit: cover;
    border-radius: 3px;
}

.squirrel-recent-project__text {
    display: block;
}

.squirrel-recent-project__title {
    display: block;
    margin-bottom: .35rem;
    font-family: artico_extracond_light, sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--squig-brown, #4a160e);
    transition: color .2s ease;
}

.squirrel-recent-project__link:hover .squirrel-recent-project__title {
    color: var(--squig-gold, #82672d);
}

.squirrel-recent-project__excerpt {
    display: block;
    font-size: .9rem;
    line-height: 1.5;
    color: #666;
}

@media screen and (max-width: 600px) {

    .squirrel-recent-project__image {
        flex-basis: 70px;
        width: 70px;
        height: 70px;
    }

}


/* ==========================================================================
   Responsive – project pages
   ========================================================================== */

@media (max-width: 900px) {

    .squirrel-project-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .squirrel-project-details {
        position: static;
    }
}

@media (max-width: 600px) {

    .squirrel-projects-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1.5rem;
    }

    .squirrel-project-layout,
    .squirrel-project-gallery,
    .squirrel-project-testimonial,
    .squirrel-project-ext-link,
    .squirrel-project-nav {
        padding: 0 1rem;
    }

    .squirrel-project-gallery__grid {
        grid-template-columns: 1fr 1fr;
    }

    .squirrel-project-testimonial blockquote {
        font-size: 1rem;
        padding: 1rem 1.25rem;
    }

    .squirrel-project-nav {
        flex-direction: column;
        text-align: center;
    }

    .squirrel-project-nav a,
    .squirrel-project-nav__next {
        max-width: 100%;
        text-align: center;
        margin-left: 0;
    }
}


/* ==========================================================================
   Single blog post — below the content
   single.php and inc/post-single.php. Everything here sits in the content
   column; the parent printed it full width against the window edge.
   ========================================================================== */

/* Categories, above the content (8 Oct 2026).
   The date is filtered out and the categories moved here out of the hero, where
   they were 13px Open Sans in white, ran straight into the date with no
   separator, and sat against the arrow notch. Set like the UI elsewhere on this
   page — uppercase, tracked, gold — but unboxed, so they do not read as the tag
   pills at the foot of the post. See inc/post-single.php. */
body.single-post .entry-content .squirrel-post-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: 0 0 1.75rem;
}

body.single-post .entry-content .squirrel-post-cats a {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--squig-gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}

body.single-post .entry-content .squirrel-post-cats a:hover,
body.single-post .entry-content .squirrel-post-cats a:focus-visible {
    color: var(--squig-brown);
    border-bottom-color: var(--squig-brown);
}

/* The parent always prints .entry-meta, and with the date and categories both
   filtered out there is nothing left in it. Not `:empty` — the div still holds
   the template's whitespace, which `:empty` counts as content. */
body.single-post .entry-header .entry-meta {
    display: none;
}

/* The date and categories under the hero title: centred like the title, and
   clear of the arrow notch cut into the bottom of the hero. */
body.single-post.squirrel-internal-hero .entry-header .entry-meta {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Previous/next and related posts: the same 1170px box as the layout above, so
   they line up with the body column rather than running to the window edge.
   (This used to be shared with the parent's entry footer, which the tags have
   since moved out of.) */
.squirrel-post-after {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Two columns, matching single-portfolio_page.php exactly so a post and a
   project read as the same kind of page. Stacks at the same 1000px. */
.squirrel-post-layout {
    display: grid;
    /* 50%, not a fixed column, so the body text ends exactly under the point of
       the arrow notched out of the hero: that point is at 50% of the full-width
       .entry-header, and this container is centred on the same axis, so the two
       track each other at every width. The sidebar takes what is left. */
    grid-template-columns: 50% minmax(0, 1fr);
    /* No column gap: the sidebar's own padding-left is the gutter, and it is
       what puts the sidebar's content exactly on the arrow's right edge. A gap
       here would sit between the two and push the sidebar past it. Row gap only
       matters once the columns stack, where the 1000px query sets it. */
    column-gap: 0;
    max-width: 1170px;
    margin: 2rem auto 3rem;
    padding: 0 24px;
    align-items: start;
    box-sizing: border-box;
}

/* The generic single-page .entry-content box (max-width, auto margins, side
   padding) would inset the body inside its own grid column. */
body.single-post .squirrel-post-layout .entry-content {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* No padding-right here, unlike the project layout: the column itself now stops
   at the arrow point, so an inset would pull the text left of it. The grid gap
   is the air between the text and the sidebar. */

/* Stacks at 1000px, like the project layout. This has to come after the base
   rule above, not in the earlier 1000px block with .squirrel-project-layout:
   later wins at equal specificity, so up there it never applied and the body
   column collapsed to 0px inside a 400px aside on phones. */
@media screen and (max-width: 1000px) {
    .squirrel-post-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        padding: 0 18px;
    }
}

@media screen and (max-width: 600px) {
    .squirrel-post-layout {
        padding: 0 1rem;
    }
}

.squirrel-post-aside {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Indent the sidebar by half the arrow's width. The column boundary is at 50%,
   which is the arrow's point, so indenting by the half-width lands the
   sidebar's content exactly on the arrow's right edge. Desktop only, since
   below 1000px the columns stack and this would be a lopsided margin. */
@media screen and (min-width: 1001px) {
    .squirrel-post-aside {
        padding-left: var(--squirrel-arrow-half);
    }
}

/* The rule the client asked for between Tags and Recent projects. On the
   block rather than between them, so it survives either block being absent. */
.squirrel-post-aside__block + .squirrel-post-aside__block {
    border-top: 1px solid rgba(130,103,45,.25);
    padding-top: 2rem;
}

.squirrel-post-aside__heading {
    margin: 0 0 1.25rem;
    font-size: 1.3rem;
    letter-spacing: .3rem;
    text-transform: uppercase;
    color: var(--squig-brown);
}

/* Tags: unchanged treatment, moved out of the parent's entry footer. */
.squirrel-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.squirrel-post-tag {
    display: inline-block;
    line-height: 1.4;
    padding: .3rem .75rem;
    border: 1px solid rgba(130,103,45,.4);
    border-radius: 3px;
    background: none;
    color: var(--squig-gold);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.squirrel-post-tag:hover,
.squirrel-post-tag:focus-visible {
    background: var(--squig-gold);
    color: #fff;
}

/* ── Previous / next ── */

.squirrel-post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0 0;
    padding: 2rem 0;
    border-top: 1px solid rgba(130,103,45,.2);
    border-bottom: 1px solid rgba(130,103,45,.2);
}

.squirrel-post-nav__link {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-decoration: none;
}

/* Alone on its row, the newer-post link still belongs on the right. */
.squirrel-post-nav__link--next {
    grid-column: 2;
    text-align: right;
}

.squirrel-post-nav__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--squig-gold);
}

.squirrel-post-nav__title {
    font-family: artico_extracond_light, sans-serif;
    font-size: 1.6rem;
    letter-spacing: .15rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--squig-brown);
    transition: color .2s ease;
}

.squirrel-post-nav__link:hover .squirrel-post-nav__title {
    color: var(--squig-gold);
}

/* ── Related posts ── */

.squirrel-post-related {
    margin: 2.5rem 0 4rem;
}

.squirrel-post-related__heading {
    margin: 0 0 1.25rem;
    font-size: 1.6rem;
    letter-spacing: .3rem;
    text-transform: uppercase;
    color: var(--squig-brown);
}

.squirrel-post-related ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.squirrel-post-related li {
    margin: 0;
}

.squirrel-post-related__card {
    display: block;
    height: 100%;
    background: var(--squig-off-white);
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
}

.squirrel-post-related__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .4s ease;
}

.squirrel-post-related__card:hover .squirrel-post-related__image {
    transform: scale(1.04);
}

.squirrel-post-related__title {
    display: block;
    padding: 1rem 1.1rem .25rem;
    font-family: artico_extracond_light, sans-serif;
    font-size: 1.35rem;
    letter-spacing: .12rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--squig-brown);
}

.squirrel-post-related__date {
    display: block;
    padding: 0 1.1rem 1.1rem;
    font-size: .8rem;
    color: #777;
}

/* ── Galleries in posts ── same cells as projects, more columns. */

body.single-post .squirrel-project-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 1.5rem 0 2rem;
}

@media screen and (max-width: 1000px) {
    body.single-post .squirrel-project-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .squirrel-post-after {
        padding: 0 18px;
    }
}

@media screen and (max-width: 700px) {
    body.single-post .squirrel-project-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .squirrel-post-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .squirrel-post-nav__link--next {
        grid-column: auto;
    }

    .squirrel-post-related ul {
        grid-template-columns: minmax(0, 1fr);
    }
}