:root{
  --cream:#f7f2e8;
  --ivory:#fbf8f1;
  --green:#17352f;
  --rust:#9b5033;
  --muted:#6b675f;
  --line:#ded6c9;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
  --script:"Parisienne",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--green);font-family:var(--sans)}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(89%,1380px);margin:auto}

/* HERO */
.hero{
  min-height:515px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(247,242,232,.97) 0%,rgba(247,242,232,.86) 31%,rgba(247,242,232,.28) 62%,rgba(247,242,232,.03) 100%),
    url("https://www.professional.ucsb.edu/sites/default/files/images/2021-10/Copy%20of%20SBHarboratSunset_PhotobyJaySinclair.jpg.jpg");
  background-size:cover;
  /* A lower focal point lifts the photograph, revealing more harbor water. */
  background-position:center 80%;
}
.nav{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}
.logo{
  font:400 35px/.8 var(--serif);
  letter-spacing:.12em;
}
.logo small{
  display:block;
  margin-top:8px;
  font:500 7px var(--sans);
  letter-spacing:.24em;
}
nav{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:9px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.cta{
  background:var(--rust);
  color:white;
  border:1px solid var(--rust);
  padding:14px 23px;
}
.hero-content{padding:32px 0 68px}
.hero h1{
  margin:0;
  font:400 clamp(92px,10vw,154px)/.77 var(--serif);
  letter-spacing:-.055em;
}
.kicker{
  margin-top:18px;
  font-size:20px;
  letter-spacing:.29em;
}
.tagline{
  margin-top:18px;
  font:italic 400 19px/1.4 var(--serif);
  max-width:445px;
}
.button{
  display:inline-block;
  margin-top:20px;
  padding:13px 24px;
  border:1px solid var(--rust);
  color:var(--rust);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.button.fill{background:var(--rust);color:white}
.location{
  margin-top:24px;
  color:#66635d;
  font-size:8px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* SERVICES */
.services{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--ivory);
  border-bottom:1px solid var(--line);
}
.service{
  text-align:center;
  padding:37px 25px 33px;
  border-right:1px solid var(--line);
}
.service:last-child{border-right:0}
.icon{
  color:var(--rust);
  font-size:28px;
  height:35px;
}
.service h2{
  margin:8px 0 10px;
  font-size:10px;
  letter-spacing:.17em;
}
.service p{
  margin:auto;
  max-width:230px;
  color:#5e5b54;
  font:14px/1.4 var(--serif);
}
.learn{
  display:inline-block;
  margin-top:18px;
  color:var(--rust);
  font-size:8px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* WHO */
.who{padding:54px 0;background:var(--cream)}
.who-grid{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:62px;
  align-items:center;
}
.eyebrow{
  color:var(--rust);
  font-size:9px;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.who h2,.about h2,.origin h2{
  margin:16px 0 0;
  font:400 41px/1.06 var(--serif);
  letter-spacing:-.025em;
}
.who-copy{
  max-width:450px;
  margin:17px 0;
  color:#66635c;
  font:15px/1.55 var(--serif);
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}
.card{background:#f0e9dd}
.card img{
  width:100%;
  height:195px;
  object-fit:cover;
}
.card-label{
  padding:12px 7px 14px;
  text-align:center;
  font-size:8px;
  line-height:1.4;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* ABOUT */
.about{
  display:grid;
  grid-template-columns:45% 55%;
  background:var(--ivory);
  min-height:390px;
}
.about-photo{
  min-height:390px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#eee9df;
}
.about-photo img{
  width:78%;
  max-width:380px;
  height:auto;
  margin:28px auto;
  object-fit:contain;
  object-position:center;
}
.about-copy{
  position:relative;
  padding:55px 7%;
}
.about h2{font-size:43px}
.about-copy p{
  max-width:590px;
  margin:17px 0;
  color:#625f57;
  font:14px/1.55 var(--serif);
}
.signature{
  position:absolute;
  right:8%;
  bottom:30px;
}
.signature-name{
  font:500 31px var(--script);
  color:#33433e;
  transform:rotate(-2deg);
}
.signature-title{
  margin-top:3px;
  font-size:7px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ORIGIN */
.origin{
  min-height:420px;
  color:white;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(35,29,23,.82),rgba(35,29,23,.65)),
    url("https://www.professional.ucsb.edu/sites/default/files/images/2021-10/Copy%20of%20SBHarboratSunset_PhotobyJaySinclair.jpg.jpg");
  background-size:cover;
  background-position:center 53%;
}
.origin-inner{padding:55px 0}
.origin h2{color:white;font-size:42px}
.origin p{
  max-width:490px;
  margin:17px 0;
  color:rgba(255,255,255,.9);
  font:14px/1.55 var(--serif);
}
.origin .button{color:white;border-color:white}

/* CONTACT */
.contact{padding:76px 0;background:var(--cream)}
.contact h2{
  max-width:850px;
  margin:16px 0;
  font:400 clamp(48px,6vw,76px)/.95 var(--serif);
}
.contact p{
  max-width:530px;
  color:#66635c;
  font:15px/1.55 var(--serif);
}

/* FOOTER */
footer{
  background:#17312d;
  color:var(--cream);
  padding:38px 0 22px;
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.footer-logo{font:400 34px var(--serif);letter-spacing:.12em}
.footer-sub{
  margin-top:6px;
  color:#b9c3bc;
  font-size:7px;
  letter-spacing:.22em;
}
.footer-links{
  display:flex;
  gap:28px;
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.bottom{
  display:flex;
  justify-content:space-between;
  margin-top:30px;
  padding-top:15px;
  border-top:1px solid #3a514c;
  color:#a9b4ae;
  font-size:7px;
}

@media(max-width:850px){
  nav{display:none}
  .hero{min-height:650px}
  .hero-content{padding-top:75px}
  .services{grid-template-columns:1fr 1fr}
  .service{border-bottom:1px solid var(--line)}
  .who-grid{grid-template-columns:1fr;gap:35px}
  .about{grid-template-columns:1fr}
  .about-photo{min-height:430px}
  .signature{position:static;margin-top:25px}
  .origin{min-height:480px}
}
@media(max-width:560px){
  .services{grid-template-columns:1fr}
  .service{border-right:0}
  .cards{grid-template-columns:1fr}
  .hero h1{font-size:92px}
  .kicker{font-size:14px}
  .who h2,.about h2,.origin h2{font-size:37px}
  .about-photo img{width:72%;height:auto}
  .footer-row{flex-direction:column;gap:25px}
  .bottom{flex-direction:column;gap:7px}
}

/* Accessible navigation and consultation form */
:focus-visible{outline:3px solid var(--green);outline-offset:5px}
footer :focus-visible,.origin :focus-visible{outline-color:var(--cream)}
.skip-link{position:absolute;left:16px;top:-100px;z-index:10;padding:14px;background:var(--ivory);color:var(--green)}
.skip-link:focus{top:16px}
[id]{scroll-margin-top:24px}
nav{font-size:12px;gap:20px}
nav a,.footer-links a{padding:12px 0}
.logo small,.footer-sub,.signature-title,.bottom{font-size:11px}
.button,.learn,.eyebrow,.card-label,.service h2,.location,.footer-links{font-size:12px}
.learn{padding:12px 0;text-decoration:underline;text-underline-offset:4px}
.contact-details{display:grid;gap:12px;font-style:normal;line-height:1.6;margin:28px 0}
.contact-details a,.consent a,.policy-links a{text-decoration:underline;text-underline-offset:3px}
.consultation{margin-top:48px;max-width:900px;border-top:1px solid var(--line);padding-top:36px}
.consultation h3{font:400 36px/1.2 var(--serif);margin:0 0 16px}
.consultation p{max-width:none;font:16px/1.6 var(--sans)}
fieldset{border:0;border-bottom:1px solid var(--line);padding:24px 0;margin:0 0 24px;min-width:0}
legend{font:500 20px/1.5 var(--sans);padding:0;max-width:100%}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:grid;gap:10px;align-content:start}
.full{grid-column:1/-1}
label{font-size:16px;line-height:1.6}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea{width:100%;min-width:0;border:1px solid #7b776e;border-radius:0;background:var(--ivory);padding:13px;color:var(--green);font:16px/1.5 var(--sans)}
textarea{resize:vertical}
.choice{display:flex;align-items:flex-start;gap:12px;padding:10px 0;min-height:44px;cursor:pointer}
.choice input{width:20px;height:20px;flex-shrink:0;margin:3px 0 0;accent-color:var(--green)}
.consent{margin-top:20px}
button.button{font-family:var(--sans);cursor:pointer;font-size:13px;min-height:48px}
.button:hover,.cta:hover{filter:brightness(.9)}
.policy-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:25px;font-size:14px}
.policy-links a{padding:8px 0}
.footer-links{flex-wrap:wrap}
[hidden]{display:none!important}
@media(max-width:1050px){nav{gap:12px;font-size:11px}.cta{padding:12px}}
@media(max-width:850px){.nav{height:auto;min-height:100px;flex-wrap:wrap;gap:20px;padding-top:20px;padding-bottom:20px}nav{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px}.hero-content{padding-top:35px}.hero{background-image:linear-gradient(90deg,rgba(247,242,232,.96),rgba(247,242,232,.8)),url("https://www.professional.ucsb.edu/sites/default/files/images/2021-10/Copy%20of%20SBHarboratSunset_PhotobyJaySinclair.jpg.jpg")}}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.contact-details{font-size:15px}.contact h2{font-size:44px}.signature-name{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dedicated consultation page */
.consultation-header{border-bottom:1px solid var(--line);background:var(--ivory)}
.consultation-page{max-width:1000px;padding-top:56px;padding-bottom:76px}
.consultation-page h1{font:400 clamp(38px,6vw,64px)/1.1 var(--serif);margin:16px 0 24px;letter-spacing:-.025em}
.consultation-page .consultation{border:0;margin:0;padding:0;max-width:none}
.consultation-page p{color:var(--muted)}
.consultation-page .contact-details{margin-top:36px;font-size:16px}