/* =============================================================
   NHH PROPERTIES — nhhproperties.com
   Rebuilt from the Squarespace design, September 2026.
   Type, colour and grid values are measured from the original.
   ============================================================= */

:root{
  --bg:#f2f2f2;
  --navy:#081b33;
  --body:rgba(8,27,51,.8);
  --green:#8cc642;
  --rule:rgba(8,27,51,.14);
  --wrap:1210px;
  --sans:'futura-pt','Jost','Futura','Century Gothic','Helvetica Neue',Arial,sans-serif;
  --sans-cond:'futura-pt-condensed','futura-pt','Jost','Helvetica Neue',Arial,sans-serif;
  --serif:'calluna','Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--sans);font-size:16px;line-height:24px;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
hr{border:0;border-top:1px solid var(--rule);margin:0}

.wrap{width:min(var(--wrap),100% - 96px);margin-inline:auto}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------- type */
h1,h2,h3,h4,p,blockquote,figure{margin:0}
.d-title{font-family:var(--serif);font-size:81px;line-height:81px;font-weight:300;letter-spacing:-.01em;color:var(--navy)}
h1,.h1{font-family:var(--serif);font-size:43.5px;line-height:52.2px;font-weight:400;letter-spacing:-.01em;color:var(--navy)}
h2,.h2{font-family:var(--serif);font-size:27px;line-height:37.8px;font-weight:300;letter-spacing:-.01em;color:var(--navy)}
.label{font-family:var(--sans);font-size:14px;line-height:16.8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.eyebrow{font-family:var(--sans);font-size:14px;line-height:28px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
p{font-size:16px;line-height:24px;letter-spacing:.02em;color:var(--body)}
p + p{margin-top:24px}
.small{font-size:12px;line-height:18px}

/* ---------------------------------------------------------- header */
.site-head{padding-top:110px}
.head-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.head-phone{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);justify-self:start;white-space:nowrap}
.head-logo{justify-self:center}
.head-logo img{width:346px;height:auto}
.site-nav{justify-self:end;display:flex;gap:16px;align-items:center}
.site-nav a{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.04em;
  text-transform:lowercase;color:var(--body);transition:color .18s}
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a[aria-current="page"]{color:var(--green)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--navy);
  font-size:18px;line-height:1;padding:8px 12px;cursor:pointer;font-family:var(--sans)}

/* ---------------------------------------------------------- hero */
.hero-img{margin-top:110px;height:480px;position:relative;overflow:hidden;background:#0b1a2a}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-img .hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 24px}
.hero-img .eyebrow{font-size:13px;line-height:33.8px;letter-spacing:.18em;margin-bottom:8px}
.hero-img .d-title{color:var(--bg);font-weight:400;letter-spacing:.01em;max-width:760px}

.hero-text{padding:110px 0 0;text-align:center}
.hero-text .eyebrow{display:block;margin-bottom:0}
.hero-text .d-title{margin-top:20px}

/* ---------------------------------------------------------- sections */
.sec{padding:122px 0 0}
.sec-page{padding-top:246px}
.sec-contact{padding-top:129px}
.sec-tight{padding:88px 0 0}
.split{display:grid;grid-template-columns:57.851% 31.488%;justify-content:space-between;
  column-gap:3%;align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:33.5px}
.cols2{display:grid;grid-template-columns:repeat(2,1fr);column-gap:34px}

.intro-p{margin-top:40px}
.intro-p + .intro-p{margin-top:24px}

.btn{display:inline-block;font-family:var(--sans-cond);font-size:18px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);border:1px solid var(--navy);
  padding:17px 35px;margin-top:50px;transition:background .18s,color .18s}
.btn:hover,.btn:focus-visible{background:var(--navy);color:var(--bg)}

.cblock{margin-top:36px}
.cblock .label{display:block;margin-bottom:24px}
.cblock h2{margin:0}

/* practice: three independent column stacks, as the original lays them out */
.practice{margin-top:92px}
.practice .col{display:flex;flex-direction:column}
.practice .cell{padding-bottom:50px}
.practice hr{margin-bottom:43px}
.practice h3{margin-bottom:22px}

/* quote */
.quote-band{padding:60px 0 0;text-align:center}
.quote-band hr{width:795px;max-width:100%;margin:0 auto}
.quote{font-family:var(--serif);font-size:36px;line-height:46.8px;font-weight:300;
  color:var(--navy);margin:87px auto 0;max-width:620px}
.quote .qm{color:var(--navy)}
.qattr{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--body);margin-top:48px;display:block}
.quote-band .rule-bottom{margin-top:81px}

/* ---------------------------------------------------------- forms */
.formsec{padding:120px 0 0;text-align:center}
.formsec h1{text-align:center}
.form-intro{max-width:547px;margin:60px auto 0;text-align:left}
form{max-width:588px;margin:60px auto 0;text-align:left}
.contact form{margin-left:0}
.field{margin-bottom:10px}
.field > .flabel{font-size:16px;letter-spacing:.02em;color:var(--body);display:block;margin-bottom:0}
.req{font-size:12px;color:var(--body);margin-left:6px}
.sub{font-size:12px;color:var(--body);display:block;margin-bottom:6px}
.two{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:#000;background:#fff;
  border:1px solid rgba(8,27,51,.18);padding:11px 12px;border-radius:0}
textarea{min-height:150px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--green)}
.radios{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.radios label{font-size:13px;letter-spacing:.02em;color:var(--body);display:flex;
  align-items:center;gap:11px;cursor:pointer}
.radios input{accent-color:var(--green);margin:0}
.fnote{font-size:12px;line-height:18px;color:var(--body);margin:2px 0 10px}
.submit{margin-top:16px;font-family:var(--sans-cond);font-size:16px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);background:none;border:1px solid var(--navy);
  padding:15px 32px;cursor:pointer;transition:background .18s,color .18s}
.submit:hover{background:var(--navy);color:var(--bg)}
.hp{display:none}

/* ---------------------------------------------------------- projects */
.proj{margin-top:127px}
.proj .cell{text-align:center;padding-bottom:0}
.proj hr{margin-bottom:56px}
.proj h2{margin-bottom:0}
.proj .plink{display:inline-block;font-family:var(--sans);font-size:14px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-top:18px}
.proj .plink:hover{text-decoration:underline}
.proj .ploc{display:block;font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--body);margin-top:10px}
.proj .pdesc{margin-top:16px;max-width:460px;margin-inline:auto}
.proj .cell{padding-bottom:54px}
.proj .row-rule{margin-top:43px}
.proj .cell-gap{height:86px}
.more{text-align:center;margin-top:215px}
.more-rule{width:795px;max-width:100%;margin:102px auto 0}

/* ---------------------------------------------------------- about */
.leader{margin-top:85px;display:grid;grid-template-columns:277px 1fr;column-gap:34px;align-items:start}
.leader .portrait{width:277px}
.leader .label{display:block;margin-bottom:21px}
.leader h2{margin-bottom:33px}
.leader .meta{margin-top:33px}
.leader .bio-p{margin-top:24px}
.leader .meta a{color:var(--green)}
.leader .meta a:hover{text-decoration:underline}
.leader .meta p + p{margin-top:25px}
.about-rule{width:1002px;max-width:100%;margin:105px auto 0}

/* ---------------------------------------------------------- footer */
.site-foot{margin-top:155px;padding-bottom:106px}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:43px 0 0}
.foot-top img{width:70px}
.foot-rule2{margin-top:76px}
.foot-grid{display:grid;grid-template-columns:57.851% 31.488%;justify-content:space-between;
  padding-top:46px;align-items:start}
.foot-nav a{color:var(--green)}
.foot-nav a:hover{text-decoration:underline}
.foot-grid .lines p{margin:0}
.foot-grid .lines p + p{margin-top:0}
.foot-sp{height:24px}
.foot-blurb{text-align:right}

/* ---------------------------------------------------------- responsive */
@media (max-width:1100px){
  .d-title{font-size:60px;line-height:62px}
  h1,.h1{font-size:36px;line-height:44px}
}
@media (max-width:900px){
  .head-grid{grid-template-columns:1fr auto;row-gap:18px}
  .head-logo{justify-self:center}
  .nav-toggle{display:block;justify-self:end}
  .site-nav{grid-column:1 / -1;justify-self:stretch;display:none;flex-direction:column;
    align-items:flex-start;gap:14px;padding-top:14px;border-top:1px solid var(--rule)}
  .site-nav.open{display:flex}
  .site-head{padding-top:48px}
  .hero-img{margin-top:48px;height:360px}
  .hero-text{padding-top:72px}
  .d-title{font-size:44px;line-height:48px}
  h1,.h1{font-size:32px;line-height:40px}
  .split,.cols3,.cols2,.foot-grid,.leader{grid-template-columns:1fr;row-gap:44px}
  .sec{padding-top:72px}
  .quote-band{padding-top:64px}
  .formsec{padding-top:96px}
  .leader .portrait{width:220px}
  .foot-blurb{text-align:left}
  .site-foot{margin-top:90px;padding-bottom:64px}
  .proj{margin-top:72px}
  .more{margin-top:96px}
}
@media (max-width:560px){
  .wrap{width:min(var(--wrap),100% - 40px)}
  .d-title{font-size:34px;line-height:38px}
  .two{grid-template-columns:1fr;row-gap:20px}
  .head-logo img{width:260px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}