@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;
  }

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;}

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: "RB Rational Neue Mono Test";
font-size: 14px;
font-style: normal;
font-weight: 400;
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}
.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}
.intrologo {width:100%;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 85%;
    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:4px;
  }

  .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;
    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
  }

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

    .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; }
  }

.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}
.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;
line-height: 22px; /* 157.143% */
letter-spacing: -0.28px;
margin-bottom:0.5rem}
.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}
.contactdetails {font-size:1rem;line-height:1.3em;padding:5vw 0}
.contactdetails a {color:#FFFFF3}
.contactdetails p {margin: 0;}
.contactdetails .divider {margin:4vw 0}

.footersection {padding:3vw 0}
.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}

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


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



/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {}
	
	/* bigger desktop */
	@media only screen and (min-width: 1100px) and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 959px) and (max-width:1099px) {}

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

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* 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; }
*/