/*
Theme Name:  Wagholi Estates
Theme URI:   https://wagholiestates.com/
Author:      Custom Build
Author URI:  https://wagholiestates.com/
Description: A fully editable one-page corporate real-estate theme built for Wagholi Estates Pvt Ltd. Every section - hero slider, about, management, developer, investor documents, offices and contact form - is managed from the WordPress Customizer and admin, with no page-builder dependency.
Version:     1.3.2
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wagholi-estates
Tags:        one-column, custom-logo, custom-menu, custom-colors, editor-style, featured-images, threaded-comments, translation-ready
*/

/* =========================================================================
   1. DESIGN TOKENS
   Every colour below is overridden at runtime by the Customizer
   (see inc/customizer.php -> wagholi_estates_dynamic_css()).
   ========================================================================= */
/* Measured off panchshil.com (2026-08-25):
     headings  -> zapfHumanist601Semi  (Bitstream's Optima clone, self-hosted)
     everything else -> the plain system UI stack, no webfont at all.
   Zapf Humanist 601 is commercial so it is not bundled. The rule below tries
   local() first (macOS ships Optima, which is the same design), then a
   licensed drop-in in assets/fonts/, then falls through to the system stack -
   which is exactly what Panchshil uses for its own body copy, so the page
   stays coherent either way. See assets/fonts/README.txt.
   The 400-700 range stops the browser synthesising a fake bold. */
@font-face{
	font-family:"ZapfHumanist601";
	src:local("Zapf Humanist 601"), local("ZapfHumnst BT"), local("ZapfHumnst Bd BT"),
	    local("Optima"), local("Optima Regular"),
	    url("assets/fonts/zapf-humanist-601-semi.woff2") format("woff2"),
	    url("assets/fonts/zapf-humanist-601-semi.woff") format("woff");
	font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
	--we-accent:#b78d65;
	--we-accent-dark:#9b7550;
	--we-grey:#aaabaf;
	--we-dark:#252525;
	--we-body:#777777;
	--we-white:#ffffff;
	--we-light:#f7f7f7;
	--we-border:#e5e5e5;
	--we-footer-bg:#252525;
	--we-footer-text:#ffffff;

	--we-font-heading:"ZapfHumanist601",Optima,system-ui,-apple-system,"Segoe UI",sans-serif;
	/* Shared by the investor tab button and its panel heading so the two
	   "Annual Report" labels can never drift apart. */
	--we-tab-label:18px;
	--we-font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

	--we-container:1360px;
	--we-gutter:20px;
	--we-section-py:50px;
	--we-radius:3px;
	--we-transition:all .35s ease;
}

/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
	margin:0;
	font-family:var(--we-font-body);
	font-size:18px;
	font-weight:400;
	line-height:1.625;
	color:var(--we-body);
	background:var(--we-white);
	overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--we-accent);text-decoration:none;transition:var(--we-transition);}
a:hover,a:focus{color:var(--we-accent-dark);}
p{margin:0 0 8px;}
ul,ol{margin:0 0 16px;padding-left:20px;}
h1,h2,h3,h4,h5,h6{
	font-family:var(--we-font-heading);
	color:var(--we-dark);
	margin:0 0 16px;
	line-height:1.2;
	font-weight:600;
}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--we-accent);outline-offset:3px;}
.screen-reader-text{
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;
	margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.skip-link:focus{
	background:var(--we-white);color:var(--we-dark);clip:auto;clip-path:none;
	display:block;height:auto;left:6px;top:6px;padding:12px 24px;width:auto;z-index:100000;
	font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.2);
}

/* =========================================================================
   3. LAYOUT HELPERS
   ========================================================================= */
.we-container{width:100%;max-width:var(--we-container);margin:0 auto;padding:0 var(--we-gutter);}
.we-container--wide{max-width:1400px;}
.we-section{padding:var(--we-section-py) 0;position:relative;}
.we-section--tight{padding:50px 0;}
/* Zero-height marker each section drops in so menu anchors stay stable
   even when the anchor id is renamed in the Customizer. */
.we-anchor-target{display:block;height:0;line-height:0;font-size:0;overflow:hidden;}
.we-relative{position:relative;}
.we-text-center{text-align:center;}

/* Panchshil renders its eyebrows ("WE ARE NOW") in the body/system font at
   18px / 500 with 3.6px tracking - not in the heading face. */
.we-eyebrow{
	font-family:var(--we-font-body);
	font-size:18px;
	font-weight:500;
	line-height:1.556;
	color:var(--we-grey);
	text-transform:uppercase;
	letter-spacing:3.6px;
	margin:0 0 6px;
}
.we-title{
	font-family:var(--we-font-heading);
	font-size:28px;
	font-weight:600;
	line-height:1.333;
	color:var(--we-dark);
	margin:0 0 20px;
}
.we-title--sm{font-size:24px;}
.we-subtitle{
	font-family:var(--we-font-heading);
	font-size:20px;
	font-weight:600;
	color:var(--we-dark);
	margin:0 0 12px;
}
.we-rte p:last-child{margin-bottom:0;}
.we-rte a{color:var(--we-accent);text-decoration:underline;}

/* Buttons */
.we-btn{
	display:inline-block;
	font-family:var(--we-font-body);
	font-size:16px;
	font-weight:500;
	letter-spacing:.6px;
	text-transform:uppercase;
	color:var(--we-white);
	background:var(--we-accent);
	border:1px solid var(--we-accent);
	border-radius:var(--we-radius);
	padding:12px 34px;
	transition:var(--we-transition);
}
.we-btn:hover,.we-btn:focus{background:var(--we-accent-dark);border-color:var(--we-accent-dark);color:var(--we-white);}
.we-btn--ghost{background:transparent;color:var(--we-accent);}
.we-btn--ghost:hover{background:var(--we-accent);color:var(--we-white);}
.we-link-more{
	background:none;border:0;padding:0;
	color:var(--we-accent);font-weight:500;font-size:16px;margin-top:10px;
	display:inline-flex;align-items:center;gap:6px;
}
.we-link-more:hover{text-decoration:underline;}

/* Offset frame behind the About / Developer image pairs. Mirrors the
   reference site's .bg-border rule exactly: a single 5px #aaabaf rectangle
   sat at z-index:-1 behind both photos, so only its top-right and
   bottom-left corners peek out past the image stack. About and Developer
   use two different rectangle proportions on the live site (its
   .panchshil.bg-border::after override) - reproduced here as the
   --developer modifier, so the two sections are no longer sharing one frame.
   About: 70/80/8/16. Developer was 60/41/5 on the live site, which stopped
   the rule short of the base photo's bottom edge so only the top-right
   corner showed - extended to 80% tall per client request so the
   bottom-left corner comes through as well, matching About. */
.we-frame{position:relative;z-index:0;aspect-ratio:645/648;}
.we-frame::after{
	content:"";position:absolute;z-index:-1;
	pointer-events:none;
	border:5px solid var(--we-grey);
	left:16%;top:8%;width:70%;height:80%;
}
/* Base photo sits left and flush to the top; the overlay sits right and
   steps down over it. Measured off the live site, not eyeballed. */
.we-frame__back,
.we-frame__front{position:absolute;margin:0;}
.we-frame__back{z-index:1;left:3.1%;top:0;width:61%;height:75%;}
.we-frame__front{z-index:2;left:41.9%;top:15.6%;width:58.1%;height:81%;}
.we-frame__back img,.we-frame__front img{width:100%;height:100%;object-fit:cover;}

/* Developer runs its own proportions on the live site. */
.we-frame--developer{aspect-ratio:655/624;}
.we-frame--developer::after{left:16%;top:5%;width:60%;height:80%;}
.we-frame--developer .we-frame__back{left:3.1%;top:0;width:53.6%;height:70.8%;}
.we-frame--developer .we-frame__front{left:35.1%;top:16%;width:53.4%;height:78.5%;}

/* One image supplied: drop the frame and the overlap entirely. */
.we-frame--single{aspect-ratio:auto;}
.we-frame--single::after{display:none;}
.we-frame--single .we-frame__back{position:relative;left:auto;top:auto;width:100%;height:auto;}
.we-frame--single .we-frame__back img{height:auto;}

/* =========================================================================
   4. HEADER / NAVIGATION
   ========================================================================= */
.we-header{
	background:var(--we-white);
	position:relative;
	z-index:999;
	box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.we-header.is-sticky{position:sticky;top:0;}
.admin-bar .we-header.is-sticky{top:32px;}
/* Live header is full-bleed with asymmetric padding (8px 80px 8px 128px);
   the logo sits centred in a 25% column and the menu centred in the rest,
   which is why neither is flush to its edge. */
.we-header .we-container{max-width:none;padding:0;}
.we-header__inner{
	display:flex;align-items:center;gap:0;
	padding:8px 80px 8px 128px;
	/* Live site's header is 101px tall. box-sizing is border-box globally,
	   so this includes the 8px padding - it holds the height independently
	   of whatever aspect ratio the uploaded logo happens to have. */
	min-height:101px;
}
.we-branding{flex:0 0 25%;display:flex;align-items:center;justify-content:center;gap:14px;}
.we-nav{flex:1 1 auto;display:flex;justify-content:center;}
.we-branding img{width:150px;height:auto;}
.we-branding__text .site-title{
	font-family:var(--we-font-heading);font-size:28px;font-weight:600;
	color:var(--we-dark);margin:0;line-height:1.1;
}
.we-branding__text .site-title a{color:inherit;}
.we-branding__text .site-description{font-size:13px;margin:0;color:var(--we-body);}

/* Menu spacing measured off panchshil.com: flex row, 48px gap, centred,
   links at 18px/300 in mixed case with no side padding of their own. */
.we-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:48px;}
.we-nav li{position:relative;}
.we-nav a{
	display:block;
	font-family:var(--we-font-body);
	font-size:18px;font-weight:300;
	text-transform:none;
	color:var(--we-dark);
	padding:15px 0;
	letter-spacing:normal;
}
.we-nav a:hover,.we-nav a:focus,.we-nav .current-menu-item>a,.we-nav a.is-active{color:var(--we-accent);}
.we-nav ul ul{
	position:absolute;top:100%;left:0;min-width:220px;flex-direction:column;
	background:var(--we-white);box-shadow:0 8px 24px rgba(0,0,0,.12);
	opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--we-transition);
	padding:6px 0;
}
.we-nav li:hover>ul,.we-nav li:focus-within>ul{opacity:1;visibility:visible;transform:translateY(0);}
.we-nav ul ul a{padding:10px 18px;font-size:14px;text-transform:none;}

.we-nav-toggle{
	display:none;background:none;border:0;padding:8px;
	width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;
}
.we-nav-toggle span{display:block;height:2px;width:26px;background:var(--we-dark);transition:var(--we-transition);}
.we-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.we-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.we-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =========================================================================
   5. HERO SLIDER
   ========================================================================= */
/* Slider base is 1920x1000 and scales with the viewport, so height comes
   from the aspect ratio rather than a fixed pixel value. The 50px below
   matches the live section's inner padding. */
.we-hero{position:relative;overflow:hidden;padding-bottom:50px;}
/* The dark fallback belongs on the slider itself, not the section - on the
   section it paints the 50px bottom padding as a black strip under the hero. */
.we-hero__viewport{position:relative;width:100%;aspect-ratio:1920/1000;background:#333;}
.we-hero__slide{
	position:absolute;inset:0;opacity:0;visibility:hidden;
	transition:opacity .8s ease;
}
/* Every slide stays absolutely positioned so it fills the viewport's
   aspect-ratio box exactly. If the active slide goes position:relative it
   collapses to the image's own aspect instead, and any difference from the
   viewport ratio shows up as a grey strip of the backdrop underneath. */
.we-hero__slide.is-active{opacity:1;visibility:visible;}
.we-hero__slide img{width:100%;height:100%;object-fit:cover;}
.we-hero__caption{
	position:absolute;inset:0;display:flex;flex-direction:column;
	align-items:center;justify-content:center;text-align:center;
	padding:20px;color:var(--we-white);
	background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45));
}
.we-hero__caption h2{color:var(--we-white);font-size:clamp(24px,3.2vw,38px);margin:0 0 10px;text-shadow:0 2px 20px rgba(0,0,0,.5);}
.we-hero__caption p{font-size:clamp(16px,1.6vw,18px);max-width:720px;margin:0 auto 20px;text-shadow:0 1px 10px rgba(0,0,0,.5);}

.we-hero__arrow{
	position:absolute;top:50%;transform:translateY(-50%);
	width:48px;height:48px;border:0;border-radius:50%;
	background:rgba(0,0,0,.35);color:#fff;
	display:grid;place-content:center;z-index:12;transition:var(--we-transition);
}
.we-hero__arrow:hover{background:var(--we-accent);}
.we-hero__arrow--prev{left:18px;}
.we-hero__arrow--next{right:18px;}
.we-hero__arrow svg{width:20px;height:20px;fill:currentColor;}

/* vertical thumbnail rail, as on the reference slider */
.we-hero__thumbs{
	position:absolute;right:22px;top:50%;transform:translateY(-50%);
	display:flex;flex-direction:column;gap:5px;z-index:12;
}
.we-hero__thumb{
	width:49px;height:49px;padding:2px;background:none;
	border:2px solid rgba(0,0,0,.8);opacity:.5;transition:var(--we-transition);
	border-radius:0;overflow:hidden;
}
.we-hero__thumb img{width:100%;height:100%;object-fit:cover;}
.we-hero__thumb.is-active,.we-hero__thumb:hover,.we-hero__thumb:focus{opacity:1;}

/* =========================================================================
   6. ABOUT
   ========================================================================= */
/* Live site: two equal columns with a 20px gutter, each text column carrying
   20px of internal padding (which is why the copy starts 20px inside its
   column). Top-aligned, because Management and CIN stack under the copy.
   The media column takes no padding - the frame percentages are measured
   against the full column width. */
.we-about__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
/* About copy collapses behind a Read More that sits right above Management,
   same mechanic as the Developer section. */
.we-about__content{
	max-height:260px;overflow:hidden;transition:max-height .45s ease;position:relative;
}
.we-about.is-open .we-about__content{max-height:2400px;}
.we-about__content::after{
	content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
	background:linear-gradient(180deg,rgba(255,255,255,0),var(--we-white));
	transition:opacity .3s ease;
}
.we-about.is-open .we-about__content::after{opacity:0;}
.we-about__toggle{margin-bottom:6px;}

.we-about__body{padding:0 20px;}

/* =========================================================================
   7. MANAGEMENT
   ========================================================================= */
/* Management sits inside the About right-hand column. The reference site
   renders the roster as plain body copy - no cards, borders or photos - with
   the designation bold above the name, both at 16px/#777. */
.we-management{margin-top:26px;}
.we-management__intro{margin-bottom:18px;}
.we-directors{display:grid;grid-template-columns:repeat(2,1fr);gap:0 10px;}
.we-director{padding:0 5px;}
.we-director__photo{
	width:110px;height:110px;margin:0 0 12px;border-radius:50%;overflow:hidden;
	background:var(--we-light);border:3px solid var(--we-grey);
}
.we-director__photo img{width:100%;height:100%;object-fit:cover;}
.we-director__role{
	font-family:var(--we-font-body);font-size:18px;font-weight:700;
	color:var(--we-body);text-transform:none;letter-spacing:normal;margin:0;
}
.we-director__name{
	font-family:var(--we-font-body);font-size:18px;font-weight:400;
	color:var(--we-body);margin:0 0 8px;
}

/* CIN is a two-line text block at the foot of the same column, not a band. */
.we-cin{background:none;text-align:left;padding:0;margin-top:10px;}
.we-cin__label{
	font-family:var(--we-font-body);font-size:18px;font-weight:700;
	color:var(--we-body);text-transform:uppercase;letter-spacing:normal;margin:0;
}
.we-cin__value{
	font-family:var(--we-font-body);font-size:18px;font-weight:400;
	color:var(--we-body);margin:0 0 8px;letter-spacing:normal;
}

/* =========================================================================
   8. DEVELOPER
   ========================================================================= */
/* Top-aligned, not centred: on the live site the Developer label and the
   image container both start at the section's content top (y=1661). */
.we-developer__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.we-developer__body{padding:0 20px;}
.we-developer__content{
	max-height:200px;overflow:hidden;transition:max-height .45s ease;position:relative;
}
.we-developer.is-open .we-developer__content{max-height:2400px;}
.we-developer__content::after{
	content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
	background:linear-gradient(180deg,rgba(255,255,255,0),var(--we-white));
	transition:opacity .3s ease;
}
.we-developer.is-open .we-developer__content::after{opacity:0;}
.we-developer__site{display:inline-block;margin-top:14px;font-weight:600;}

/* =========================================================================
   9. INVESTORS
   ========================================================================= */
.we-tabs{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--we-border);}
.we-tabs__nav{display:flex;flex-direction:column;background:var(--we-light);border-right:1px solid var(--we-border);}
.we-tabs__btn{
	font-family:var(--we-font-heading);font-size:var(--we-tab-label);font-weight:600;
	text-align:left;color:var(--we-dark);background:transparent;
	border:0;border-bottom:1px solid var(--we-border);
	padding:16px 20px;transition:var(--we-transition);line-height:1.3;
}
.we-tabs__btn:last-child{border-bottom:0;}
.we-tabs__btn:hover{color:var(--we-accent);background:rgba(183,141,101,.07);}
.we-tabs__btn[aria-selected="true"]{background:var(--we-grey);color:var(--we-white);}
.we-tabs__panels{padding:34px 38px;background:var(--we-white);}
.we-tabs__panel[hidden]{display:none;}
.we-tabs__panel h3{
	font-family:var(--we-font-heading);font-size:var(--we-tab-label);font-weight:600;
	color:var(--we-dark);margin:0 0 18px;
}
.we-docs{list-style:none;margin:0;padding:0;}
.we-docs li{border-bottom:1px dashed var(--we-border);}
.we-docs li:last-child{border-bottom:0;}
.we-docs a{
	display:flex;align-items:center;gap:12px;padding:13px 4px;
	color:var(--we-dark);font-size:16px;font-weight:500;
}
.we-docs a:hover{color:var(--we-accent);padding-left:10px;}
.we-docs a svg{width:18px;height:18px;fill:var(--we-accent);flex-shrink:0;}
.we-docs__meta{margin-left:auto;font-size:13px;color:var(--we-grey);white-space:nowrap;}
.we-docs__empty{font-style:italic;color:var(--we-grey);}

/* =========================================================================
   10. CONTACT
   ========================================================================= */
/* Left column carries the heading and both offices side by side; the
   enquiry form is the right column. Matches the reference site's 631/631
   split with a 48px gutter, offices 304 wide at 24px apart. */
.we-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.we-offices{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.we-office__name{font-family:var(--we-font-heading);font-size:20px;font-weight:600;color:var(--we-dark);margin:0 0 8px;}
.we-office address{font-style:normal;line-height:1.9;}
.we-office a{color:var(--we-body);}
.we-office a:hover{color:var(--we-accent);}

.we-form{display:grid;gap:16px;}
.we-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.we-form label{display:block;font-size:14px;font-weight:600;color:var(--we-dark);margin-bottom:6px;}
.we-form input[type="text"],
.we-form input[type="tel"],
.we-form input[type="email"],
.we-form textarea{
	width:100%;font-family:var(--we-font-body);font-size:15px;color:var(--we-body);
	background:var(--we-white);border:1px solid #666;border-radius:var(--we-radius);
	padding:10px 16px;transition:var(--we-transition);
}
.we-form input:focus,.we-form textarea:focus{border-color:var(--we-accent);outline:none;box-shadow:0 0 0 3px rgba(183,141,101,.15);}
.we-form textarea{min-height:130px;resize:vertical;}
.we-form__hp{position:absolute!important;left:-9999px!important;}
.we-form__msg{padding:12px 16px;border-radius:var(--we-radius);font-size:14px;display:none;}
.we-form__msg.is-visible{display:block;}
.we-form__msg.is-success{background:#e8f5e9;color:#1b5e20;border:1px solid #a5d6a7;}
.we-form__msg.is-error{background:#fdecea;color:#a62b21;border:1px solid #f5b8b2;}
.we-form button[type="submit"]{justify-self:start;}
.we-form.is-busy button[type="submit"]{opacity:.6;pointer-events:none;}
.we-map{margin-top:50px;line-height:0;}
.we-map iframe{width:100%;height:380px;border:0;}

/* =========================================================================
   11. FOOTER
   ========================================================================= */
.we-footer{background:var(--we-footer-bg);color:var(--we-footer-text);padding:25px 0;margin-top:50px;}
.we-footer__inner{
	display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
	font-size:14px;
}
.we-footer a{color:var(--we-footer-text);}
.we-footer a:hover{color:var(--we-accent);}
.we-footer__nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-wrap:wrap;}

.we-totop{
	position:fixed;right:24px;bottom:24px;width:46px;height:46px;
	border:0;border-radius:var(--we-radius);background:var(--we-accent);color:#fff;
	display:grid;place-content:center;opacity:0;visibility:hidden;
	transition:var(--we-transition);z-index:900;
}
.we-totop.is-visible{opacity:1;visibility:visible;}
.we-totop:hover{background:var(--we-accent-dark);}
.we-totop svg{width:18px;height:18px;fill:currentColor;}

/* Preloader mark, mirrors the reference site's fading logo */
.we-preloader{
	position:fixed;inset:0;background:var(--we-white);z-index:99999;
	display:grid;place-content:center;transition:opacity .5s ease,visibility .5s ease;
}
.we-preloader.is-hidden{opacity:0;visibility:hidden;}
.we-preloader img{width:180px;}

/* =========================================================================
   12. INTERIOR PAGES / POSTS / COMMENTS
   ========================================================================= */
.we-page-header{background:var(--we-light);padding:56px 0;text-align:center;}
.we-page-header .we-title{margin:0;}
.we-entry{padding:60px 0;}
.we-entry__content h1,.we-entry__content h2,.we-entry__content h3{margin-top:1.4em;}
.we-entry__thumb{margin-bottom:30px;}
.we-layout--sidebar{display:grid;grid-template-columns:1fr 320px;gap:50px;}
.we-post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.we-post-card{border:1px solid var(--we-border);border-radius:var(--we-radius);overflow:hidden;transition:var(--we-transition);}
.we-post-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.08);transform:translateY(-4px);}
.we-post-card__body{padding:22px;}
.we-post-card__title{font-size:20px;margin:0 0 8px;}
.we-post-card__meta{font-size:13px;color:var(--we-grey);margin-bottom:10px;}
.we-pagination{margin-top:44px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.we-pagination .page-numbers{
	padding:8px 15px;border:1px solid var(--we-border);color:var(--we-dark);border-radius:var(--we-radius);
}
.we-pagination .page-numbers.current,.we-pagination .page-numbers:hover{background:var(--we-accent);border-color:var(--we-accent);color:#fff;}
.we-404{text-align:center;padding:100px 0;}
.we-404 .we-title{font-size:56px;}
.comment-list{list-style:none;padding:0;}
.comment-list ul.children{list-style:none;padding-left:34px;}
.comment-body{border-bottom:1px solid var(--we-border);padding:20px 0;}
.we-sidebar .widget{margin-bottom:34px;}
.we-sidebar .widget-title{font-size:20px;}

/* WordPress core alignment + caption classes */
.alignleft{float:left;margin:0 2em 1em 0;}
.alignright{float:right;margin:0 0 1em 2em;}
.aligncenter{margin-left:auto;margin-right:auto;display:block;}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:13px;color:var(--we-grey);text-align:center;padding-top:8px;}
.sticky,.gallery-caption,.bypostauthor{display:block;}

/* =========================================================================
   13. RESPONSIVE
   ========================================================================= */
/* Tablet and phone keep the desktop design rather than degrading to a plain
   stacked column: the two-column rows survive down to 768px, and the
   overlapping image frame is kept (scaled) on phones instead of being
   unstacked. Only the nav and the tab rail genuinely have to change. */

@media (max-width:1200px){
	.we-directors{grid-template-columns:repeat(2,1fr);}
	.we-header__inner{padding:8px 32px;}
	.we-branding{flex:0 0 auto;justify-content:flex-start;}
	.we-nav{justify-content:flex-end;}
}

/* --- Tablet: desktop layout intact, nav and tabs tightened to fit --- */
@media (max-width:991px){
	.we-branding img{width:120px;}
	.we-nav ul{gap:28px;}
	.we-nav a{font-size:14px;padding:15px 0;}
	.we-about__grid,.we-developer__grid,.we-contact__grid{gap:16px;}
	.we-about__body,.we-developer__body{padding:0 10px;}
	.we-tabs{grid-template-columns:220px 1fr;}
	:root{--we-tab-label:17px;}
	.we-tabs__btn{padding:14px 14px;}
	.we-tabs__panels{padding:28px 24px;}
	.we-offices{gap:16px;}
	/* The About column is ~348px on tablet; two director cells would be
	   159px against a 150px name, which wraps. Give each the full width. */
	.we-directors{grid-template-columns:1fr;}
	.we-post-list{grid-template-columns:repeat(2,1fr);}
	.we-hero__thumbs{right:12px;}
	.we-title{font-size:26px;}
}

/* --- Phones: single column where it must be, frame design preserved --- */
@media (max-width:767px){
	.we-nav-toggle{display:flex;}
	.we-header__inner{padding:8px 20px;min-height:auto;}
	.we-branding{flex:1 1 auto;justify-content:flex-start;}
	.we-branding img{width:130px;}
	.we-nav{
		display:block;
		position:absolute;left:0;right:0;top:100%;background:var(--we-white);
		box-shadow:0 12px 24px rgba(0,0,0,.12);
		max-height:0;overflow:hidden;transition:max-height .35s ease;
	}
	.we-nav.is-open{max-height:80vh;overflow-y:auto;}
	.we-nav ul{flex-direction:column;align-items:stretch;padding:8px 0;gap:0;}
	.we-nav a{padding:13px 24px;font-size:16px;border-bottom:1px solid var(--we-border);}
	.we-nav ul ul{
		position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
		background:var(--we-light);
	}

	.we-about__grid,.we-developer__grid,.we-contact__grid,.we-layout--sidebar{
		grid-template-columns:1fr;gap:30px;
	}
	.we-about__body,.we-developer__body{padding:0;}

	/* Frame stays intact - just thinner rule at this scale. */
	.we-frame::after{border-width:3px;}

	.we-tabs{grid-template-columns:1fr;}
	.we-tabs__nav{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--we-border);}
	.we-tabs__btn{flex:1 1 100%;text-align:center;border-right:0;border-bottom:1px solid var(--we-border);}
	.we-tabs__panels{padding:24px 18px;}

	.we-form__row{grid-template-columns:1fr;}
	.we-offices{grid-template-columns:1fr;}
	.we-post-list{grid-template-columns:1fr;}
	.we-title{font-size:24px;}
	.we-office__name{font-size:20px;}
	.we-cin__value{word-break:break-word;}
	.we-hero__thumbs{display:none;}
	.we-hero__arrow{width:38px;height:38px;}
	.we-footer__inner{justify-content:center;text-align:center;}
}

/* --- Small phones: the director pair needs the full width --- */
@media (max-width:600px){
	.we-eyebrow{font-size:16px;letter-spacing:3px;}
	.we-title{font-size:22px;}
}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}