@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
:root{
    --cream:#FFFFF3;
    --ink:#1F3915;
    --green:#3c5b3f;
    --accent:#EC8961;
    --stroke: rgba(60,91,63,.35);
    --surface: #FFFFF3;  /* whatever sits behind the diamonds */
    --d: 300px;
    --stroke-w: 1px;
    --row-gap: 1rem;
    --dur: .4s;               /* single shared timing for every bio/photo transition */
	--ease: ease;
    --scroll-pad: 40px;       /* space left above a member when scrolled into view */
  }

html {
	height:100%
}
body {
	font: 14px/1.3em "larken", Arial, sans-serif;
	color: #1F3915;
	background: #FFFFF3;
	height:100%;
}

.animatein {visibility:hidden}
.resizeimg {max-width: 100%;height: auto;}

.pagesection {width:100%;position:relative}

.lighttext {color:#FFFFF3}

.lightbg {background:#FFFFF3}
.orangebg {background: #EC8961;}

.buttonlink {border:1px solid #FFFFF3;display:flex;align-items: center;justify-content: center;padding:0.5rem 1rem;font-size:0.875rem;line-height:0.8em;border-radius: 1.125rem;box-sizing: border-box;height:2.25rem;width:120px;color:#FFFFF3;cursor: pointer;text-decoration: none;font-family:'NeueRationalMix';font-weight:500}
.pagelinks a {cursor: pointer;}

h1 {
font-size: 44.112px;
font-style: normal;
font-weight: 400;
line-height: 48.448px; /* 109.83% */
letter-spacing: -0.882px;
margin-bottom:3rem}

h2 {
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: 47.4px; /* 131.667% */
letter-spacing: -0.72px;}

h3 {font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 120% */
letter-spacing: -0.4px;}

h4 {font-family: 'NeueRationalMono';
font-size: 14px;
font-style: normal;
font-weight: 'NeueRationalMono'00;
line-height: 22px; /* 157.143% */
letter-spacing: -0.28px;}

.line {
    overflow: hidden;
    padding-bottom: 0.15em;
    margin-bottom: -0.15em;
}

.line > div {
    will-change: transform;
}

.small-line-mask {
    overflow: hidden;
    display: block;
    line-height: inherit;
}

.small-line-mask .line {
    display: block;
    padding-bottom: 0.15em;
}

.intro-line-mask {
    overflow: hidden;
    display: block;
    padding-bottom: 0.15em;
    margin-bottom: -0.15em;
}

.intro-line-mask .line {
    display: block;
}

.centertext {text-align: center;}

.navholder {position:fixed;top:3vw;right:2vw;z-index:2000;width:130px}
.menubutton {width:130px;justify-content: space-between;transition:background 0.2s, color 0.2s, border 0.2s}
.menubutton line {stroke:#FFFFF3;transition:stroke 0.2s}

.navlinks {margin-top:3px;pointer-events: none;}
.navlinks .buttonlink {width:100%;transition:background 0.2s, color 0.2s, border 0.2s, opacity 0.25s, transform 0.5s;margin-top:-1px;justify-content: flex-start;opacity:0;pointer-events: none;}
.navlinks .buttonlink:nth-child(1) {transform: translateY(-20px);}
.navlinks .buttonlink:nth-child(2) {transform: translateY(-40px);}
.navlinks .buttonlink:nth-child(3) {transform: translateY(-60px);}
.navlinks .buttonlink:nth-child(4) {transform: translateY(-80px);}

.menubutton:hover, .navlinks .buttonlink:hover {text-decoration: underline;}

.scrolled .menubutton, .scrolled .navlinks .buttonlink {background:rgba(31,57,21,0.6)}

.menuopen .menubutton {background:#EC8961;border-color:#EC8961;}
.menuopen .navlinks .buttonlink {opacity:1;transform: translateY(0);pointer-events:auto;transition:background 0.2s, color 0.2s, border 0.2s, opacity 0.5s, transform 0.25s}

/* #Page Styles
================================================== */
.videobg {
  position: fixed;
  top: -1px;
  left: 0;
  width: 100%;
  height: calc(100vh + 1px);
  z-index: -1;
}

.videobg video {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  /*filter: blur(54px);*/
  opacity:1;
  width:100%;
  min-height:100vh;
}

.introsection {display:flex;flex-direction: column;justify-content: space-between;padding:3vw 0;box-sizing: border-box;min-height:100vh}
.introicon {width:100%;height:25px;background:url(/img/content/icon.svg) left center no-repeat;background-size:contain}
.intrologo {width:calc(96vw - 20px);height: auto;}
.scroll {width:100%;height:18px;background:50% 50% no-repeat url(/img/ui/scroll.svg);background-size:contain;position:absolute;bottom:-9px;left:0;z-index:100}

.aboutsection, .teamsection {padding:10vw 0 0 0}

/**** team ****/
.teamsection {padding-bottom:5vw}
.teamsection * {box-sizing: border-box;}

.team{
    max-width:1100px;
    margin:0 auto;
    padding:80px 24px 120px;
  }

  .team-eyebrow{
    text-align:center;
    font-family:var(--mono);
    font-size:14px;
    font-weight:400;
    letter-spacing:.02em;
    margin:0 0 64px;
  }

  /* Fixed-width grid so the offset row can be centered with simple
     symmetric margins instead of guessing at justify-content. */
  .team-grid{
    width:calc(var(--d) * 3);
    margin:0 auto;
  }

  .team-row{
    display:flex;
    gap:0;                 /* 0 gap = diamonds share exactly one point */
  }

  /* Row 2 has 2 of the 3 slots' worth of width and is inset by
     half a diamond on each side -> sits centered under row 1,
     with each diamond landing on a touch-point above it. */
  .team-row.offset{
    width:calc(var(--d) * 2);
    margin: var(--row-gap) auto 0;
  }

  /* ---------- member cell ---------- */
  .member{
    width:var(--d);
    flex:0 0 var(--d);
    text-align:center;
    cursor:pointer;
  }

  /* Outer element = the stroke. It's transparent in the middle;
     its own background only ever shows in the thin ring created
     by --stroke-w padding. */
  .diamond{
    width:var(--d);
    height:var(--d);
    margin:0 auto;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: var(--stroke);
    padding: var(--stroke-w);
    transition: padding var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .member:hover .diamond {background: #EC8961;}

  /* Opaque by default (matches the page/surface color) so it fully
     blocks the outer ring color from showing through wherever the
     PNG is transparent -- otherwise you just see a flat wash instead
     of a crisp stroke. Switches to solid accent when selected. */
  .diamond-photo{
    width:100%;
    height:100%;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    overflow:hidden;
    background: var(--surface) bottom center no-repeat;
	background-size:auto 95%;
    transition: background-color 0.2s;
  }

  .diamond-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    -webkit-user-drag:none;
    user-select:none;
    pointer-events:none;
  }

  
  .member.active .diamond{
    padding:0;
  }
  .member.active .diamond-photo{
    background-color: var(--accent);
  }

  .member-name{
    margin-top:20px;
    font-size:21px;
  }
  .member-role{
    font-family:var(--mono);
    font-size:13px;
    color:var(--green);
    margin-top:1rem;
    font-weight: 400;font-family:'NeueRationalMono';
  }

  .toggle{
    appearance:none;
    border:none;
    background:none;
    font-family:var(--mono);
    font-size:16px;
    color:var(--green);
    cursor:pointer;
    margin-top:8px;
    padding:4px 10px;
    font-weight: 400;font-family:'NeueRationalMono';
    pointer-events:none;   /* click is handled on .member, not the button itself */
  }
  .member.active .toggle{ color:var(--accent); }

  /* ---------- bio panel (one per row) ---------- */
  .bio-panel{
    max-width:760px;
    margin:0 auto;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition: opacity var(--dur) var(--ease), max-height var(--dur) var(--ease), margin var(--dur) var(--ease);
  }
  .bio-panel.open{
    max-height:900px;   /* changes instantly -- no vertical animation */
    opacity:1;
    margin-top:56px;    /* changes instantly -- no vertical animation */
  }
  .bio-panel p{
    font-family:var(--mono);
    font-size:14.5px;
    line-height:1.8;
    color:var(--ink);
    margin:0 0 18px;
  }

  /* Used only when swapping content within an already-open panel
     (switching between two members in the same row) -- lets the
     text crossfade instead of the whole panel collapsing/reopening. */
  .bio-content{
    transition: opacity var(--dur) var(--ease);
	text-align: left;
	padding-bottom:10vw;
	background:url(/img/ui/divider.svg) bottom 5vw center no-repeat;
	background-size:auto 20px;
	max-width:65ch;
	margin:0 auto
  }

  /* Per-member panels are only relevant on mobile -- keep them out
     of the desktop flex row entirely so they can't affect layout.
     (This must come BEFORE the 720px media query below: equal-
     specificity rules resolve by source order, so the mobile
     override needs to be declared later to actually win on small
     screens.) */
  .bio-panel--member{
    display:none;
  }

  /* ---------- responsive: one member per row ---------- */
  @media (max-width:720px){
    :root{ --d:180px; --row-gap:70px; --scroll-pad:24px; }

    .team-grid{ width:100%; }

    .team-row,
    .team-row.offset{
      flex-direction:column;
      align-items:center;
      width:100%;
      gap:64px;
      margin:0;
    }
    .team-row.offset{ margin-top:64px; }

    /* Ignore the shared per-row panels entirely on mobile... */
    .bio-panel.bio-panel--row{ display:none; }

    /* ...and use each member's own panel instead, so it opens
       directly beneath that specific photo rather than the whole row. */
    .bio-panel--member{
      display:block;
      width:100%;
      max-width:100%;
      margin:0;
    }
    .bio-panel--member.open{
      margin-top:32px;
    }
  }

.memberbuttons {display:flex;gap:1rem;padding-top:1rem}
.memberbuttons .buttonlink {color:#1F3915;border-color:#1F3915;transition:border 0.2s}
.memberbuttons .buttonlink:hover {border-color:#EC8961}

.trackrecordsection {background:#fff url(/img/ui/lightbars.jpg) repeat-y;background-size:100% auto;padding:5vw 0 0 0}
.numberholder {padding:7.5vw 0;font-size:1.25rem;}
.bignumber {font-size:9vw;line-height:0.8em;margin-bottom:4rem}

.divider {width:100%;height:20px;background:url(/img/ui/divider.svg) 50% 50% no-repeat;background-size:contain;}
.divider.light {background-image: url(/img/ui/divider-white.svg);}


.portfoliosection {padding:3.5vw 0 5vw 0;min-height:100vh}
.portfoliolistholder {position:relative;padding-top:5vw;text-align: left;}
.portfoliofilter {position:absolute;top:5vw;right:3vw;z-index:100;display:flex;flex-direction: column;width: 10vw;gap:0.5rem;font-weight: 500;font-family:'NeueRationalMono';}
.portfoliofilter a {text-decoration: underline;cursor: pointer;}
.portfoliofilter a.active {text-decoration: none;}
.portfoliolist {display:flex;flex-wrap:wrap;justify-content:flex-start;padding:0 2vw}
.portfoliolist .portfolioitem {flex:0 0;flex-basis:calc(100% / 3)}
.portfoliolist .portfolioitem .pic {height:25vw;background:50% 50% no-repeat #FFFFF3;background-size:cover;}
.portfoliolist .portfolioitem .text {padding:1.5rem 0 5vw 0}
.portfolioitem .category {font-size: 14px;
font-style: normal;
font-weight: 500;
font-family:'NeueRationalMono';
line-height: 22px; /* 157.143% */
letter-spacing: -0.28px;
margin-bottom:0.75rem}
.propname {font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 34px; /* 113.333% */}

.portfoliolist .portfolioitem.firstitem {margin-left:-2vw;flex:0 0 80vw;}
.portfoliolist .portfolioitem.firstitem .pic {height:40vw}
.portfoliolist .portfolioitem.firstitem .text {padding:1.5rem 0 5vw 2vw}
.portfoliolist .portfolioitem.firstitem .propname {font-size:40px;line-height:110%}


.contactsection {padding:5vw 0 5vw 0;font-weight: 500;font-family:'NeueRationalMono';}
.contactdetails {font-size:1rem;line-height:1.5em;padding:5vw 0}
.contactdetails a {color:#FFFFF3}
.contactdetails p {margin: 0;}
.contactdetails .divider {margin:4vw 0}

.footersection {padding:3vw 0;font-weight: 500;font-family:'NeueRationalMono';}
.footerlinks {display:flex;gap:0.5rem;flex-direction: column;}
.footersection a {color:#1F3915}
.footersection .divider {margin:8vw 0 5vw 0;background-position: left center;}
.smallprint {max-width:30ch}


.privacy-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(31,57,21,.65);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	z-index: 9999;
}

.privacy-modal.open {
	opacity: 1;
	visibility: visible;
}

.privacy-modal-content {
	position: relative;
	width: min(900px, 100%);
	max-height: 85vh;
	background: #FFFFF3;
	padding: 3rem;
	overflow-y: auto;
	border-radius: 6px;
	transform: translateY(20px);
	transition: transform .3s ease;
}
.privacy-modal p, .privacy-modal ul, .privacy-modal ol {max-width:100ch}
.privacy-modal a {color:#EC8961}
.privacy-modal td {padding:0.75rem 0.5rem;border-bottom:1px solid #1F3915}

.privacy-modal.open .privacy-modal-content {
	transform: translateY(0);
}

.alpha-list {
    list-style-type: lower-alpha;
}

.privacy-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.privacy-body {
	margin-top: 2rem;
}

body.modal-open {
	overflow: hidden;
}

@media (max-width: 768px) {
	.privacy-modal {
		padding: 1rem;
	}

	.privacy-modal-content {
		padding: 2rem 1.5rem;
		max-height: 90vh;
	}
}

/****************************************************
* Misc
****************************/


.caps {text-transform:uppercase;letter-spacing:0.1em}
.num {text-align:right}



/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1450px) {
    :root{
      --d: 250px;
    }
  }
	
	/* bigger desktop */
	@media only screen and (max-width: 1260px) {
    :root{
      --d: 200px;
    }
  }

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
    /*:root{
      --d: 180px;
    }*/
  }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
    :root{
      --d: 110px;
    }
    h2 {font-size:26px;line-height:1.3em}
    
    /**** nav ****/
    .navholder {display:flex;flex-direction:column;align-items: flex-end;right:5vw}
    .menubutton {justify-content: flex-end;width:70px}
    .menulabel {display:none}
    
    .introicon {background-image:url(/img/content/logo.svg);height:36px;background-size:auto 18px}
    .intrologoholder {display:none}
    .introsection .pagelinks {padding-bottom:10vh}
    
    .aboutsection {padding-top:15vh}
    
    .teamsection {padding-top:15vh}
    .team {padding-top:0;width:100%}
    .team-row {gap:1rem}
    .team-row.offset {margin-top:1rem;gap:1rem}
    .member {display:flex;flex-direction:row;width:100%;justify-content: flex-start;align-items: center;}
    .member-name {margin-top:0}
    .member-text {text-align:left}
    .member-role{margin-top:6px}
    .toggle {padding-left:0;margin-top:0;padding-bottom:0}
    .diamond {margin:0 1rem 0 0}
    .bio-content {padding-bottom:15vh}
    .bio-panel--member.open {margin-top:0}
    
    .trackrecordsection {padding-top:15vh}
    .numberholder {padding:15vh 0}
    .bignumber {margin-bottom:1.5rem}
    .bignumber1 {font-size: 20vw;}
    .bignumber2 {font-size:17vw}
    .bignumber .sqft {font-size:0.5em;}
    
    .portfoliosection {padding-top:10vh}
    .portfoliolistholder {padding-top:10vh}
    .portfoliofilter {width:90vw;top:3vh;left:5vw;flex-direction:row;justify-content: space-between;}
    .portfoliolist {padding:0 5vw}
    
    
    
    .portfoliolist .portfolioitem {flex-basis:100%}
    .portfoliolist .portfolioitem .pic {height:85vw}
    .portfoliolist .portfolioitem .text {padding-bottom:15vw}
    
    
    .portfoliolist .portfolioitem.firstitem {margin-left:-5vw;flex-basis:95vw}
    .portfoliolist .portfolioitem.firstitem .pic {height:60vh}
    .portfoliolist .portfolioitem.firstitem .text {padding-left:5vw;padding-top:2rem;padding-bottom:15vw}
    .portfoliolist .portfolioitem.firstitem .propname {font-size:24px;line-height:1.3em}
    
    .contactsection {padding:10vh 0 20vh 0}
    .contactdetails {padding-top:10vh}
    .contactdetails .divider {margin:10vh 0}
    
    
    .footersection {padding:5vw 0 10vw 0}
    .footersection .divider {height:16px;margin:8vw 0}
    .smallprintsection {margin-top:30vh}
    
  }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

@font-face {
	    font-family: 'NeueRationalMix';
	    src: url('/webfonts/NeueRationalMix-Medium.woff') format('woff'),
	         url('/webfonts/NeueRationalMix-Medium.woff2') format('woff2');
	    font-weight: normal;
	    font-style: normal; }
      
@font-face {
	    font-family: 'NeueRationalMono';
	    src: url('/webfonts/NeueRationalMono-Regular.woff') format('woff'),
	         url('/webfonts/NeueRationalMono-Regular.woff2') format('woff2');
	    font-weight: 400;
	    font-style: normal; }
@font-face {
	    font-family: 'NeueRationalMono';
	    src: url('/webfonts/NeueRationalMono-Medium.woff') format('woff'),
	         url('/webfonts/NeueRationalMono-Medium.woff2') format('woff2');
	    font-weight: 500;
	    font-style: normal; }