/* Project pages (The Tides, Derby Heights; body class amis-proj). Builds on home.css and fdj.css (the project system):
   the touches the projects share. Each page sets its film poster through --poster / --poster-sm / --poster-xl on .phero__media. */

/* Film: 16:9, full width; the poster comes from the page (Media Library sizes set on the element). Overrides fdj.css's FDJ posters. */
.amis-proj .phero{background:var(--ink)}
.amis-proj.amis-tides .phero,.amis-proj.amis-tides .phero__media{background-color:#1f2624} /* The Tides keeps its sea tone behind the film */
.amis-proj .phero__media{background-color:var(--ink);background-image:var(--poster)!important}
@media (min-width:1300px){.amis-proj .phero__media{background-image:var(--poster-xl)!important}}
@media (max-width:767px){.amis-proj .phero__media{background-image:var(--poster-sm)!important}}
.amis-proj .phero__sound{background:rgba(42,38,34,.35)}
.amis-proj .phero__sound:hover,.amis-proj .phero__sound:focus-visible{background:rgba(42,38,34,.55)}

/* Intro: the project mark (AMIS brown, as on Fleurs de Jardin), the title, then the calls to action under the facts */
.amis-proj .pmark svg path{fill:var(--brown)}
.pcta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(24px,2.1vw,30px)} /* the same visible gap as lede to facts */
.pcta--left{justify-content:flex-start;margin-top:28px} /* the label rhythm (.sub) */
.btn--line{background:none;border:1px solid rgba(42,38,34,.35);color:var(--ink)}
.btn--line:hover,.btn--line:focus-visible{filter:none;border-color:var(--bronze);color:var(--bronze)}
.btn--light{border-color:rgba(251,246,239,.45);color:var(--ivory)}
.btn--light:hover,.btn--light:focus-visible{border-color:var(--gold);color:var(--gold)}

/* 01: island amenities, six figures in one row; the block sits at the same distance as the map above it */
.proj-band{margin-top:clamp(32px,4vw,56px)}
.proj-band .sub{margin-top:0}
.facts--six{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:0}
.drive li.drive__note{display:block}

/* a single photograph keeps one steady frame (no slider here: few images, a fixed grid instead) */
.amis-proj .duo:has(.duo__a:only-child) .duo__a img{aspect-ratio:16/9}
.proj-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(32px,4vw,56px)} /* same gap and spacing as the image pairs */
.proj-grid figure{margin:0;overflow:hidden}
.proj-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--sand)}
.proj-grid figcaption{margin-top:10px;font-size:11.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)} /* as the site's image captions */
.psec--brown .proj-grid figcaption{color:var(--ivory-40)}


/* residence tabs under an intro: the same space as a section head leaves above its content (.split--head) */
.amis-proj .psec.tabs>.split+.wrap{margin-top:clamp(36px,5vw,64px)}

/* closing band */
.proj-close .h-display{max-width:10em}

@media (max-width:1100px){
	.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.facts--six{grid-template-columns:repeat(3,minmax(0,1fr))}
	.facts--six li:nth-child(4){border-left:0;padding-left:0}
	.facts--six li:nth-child(n+4){border-top:1px solid rgba(42,38,34,.18)}
}
@media (max-width:599px){
	.pcta .btn{flex:1 1 100%}
	.facts--six{grid-template-columns:repeat(2,minmax(0,1fr))}
	.facts--six li:nth-child(4){border-left:1px solid rgba(42,38,34,.18);padding-left:clamp(12px,2vw,28px)}
	.facts--six li:nth-child(odd){border-left:0;padding-left:0}
	.facts--six li:nth-child(n+3){border-top:1px solid rgba(42,38,34,.18)}
}

/* Construction progress: three films side by side (YouTube loads only on play), each with its month */
.progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
.progress figure{margin:0}
.progress__media{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.progress__media img,.progress__media video,.progress__media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.progress__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(42,38,34,.18);border:0;cursor:pointer;color:var(--ivory);transition:background .25s}
.progress__play:hover,.progress__play:focus-visible{background:rgba(42,38,34,.32)}
.progress__play span{width:58px;height:58px;border-radius:50%;border:1px solid rgba(251,246,239,.8);display:flex;align-items:center;justify-content:center}
.progress__play svg{width:20px;height:20px;margin-left:3px}
.progress figcaption{margin-top:12px;font-family:var(--f-display);font-weight:400;font-size:clamp(18px,1.4vw,22px);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
@media (max-width:899px){.progress{grid-template-columns:1fr}}
.progress--two{grid-template-columns:repeat(2,minmax(0,1fr))} /* two films share the row */
@media (max-width:899px){.progress--two{grid-template-columns:1fr}}
/* the project mark as the page heading (its name is read out by the visually hidden text) */
h1.pmark{font-size:inherit;line-height:0;font-weight:inherit}

/* Simple pages (Social Impact, Careers): a brown title band under the header, then the numbered sections */
.phead{position:relative;isolation:isolate;overflow:hidden;background:var(--brown);color:var(--ivory);padding:clamp(64px,8vw,128px) 0 clamp(48px,6vw,88px)}
.phead__bg{position:absolute;inset:0;z-index:-1;margin:0}
.phead__bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.phead .eyebrow{color:var(--gold)}
.phead__title{margin:14px 0 0;font-family:var(--f-display);font-weight:300;font-size:clamp(48px,7.2vw,104px);line-height:1;letter-spacing:.02em;text-transform:uppercase;max-width:11em}
.phead__lede{margin-top:clamp(20px,2vw,28px);max-width:38em;color:rgba(251,246,239,.84)}
/* a photograph under a section title, in the label column (for smaller source images) */
.split__fig{margin:28px 0 0;overflow:hidden}
.split__fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--sand)}

/* Media: every post as a card, with the All / Blogs / News filter */
.mlist{padding-top:clamp(40px,5vw,72px)}
.mfilter{display:flex;flex-wrap:wrap;gap:10px}
.mfilter__btn{font:500 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;padding:13px 20px;border:1px solid rgba(42,38,34,.25);background:none;color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.mfilter__btn:hover,.mfilter__btn:focus-visible{border-color:var(--bronze);color:var(--bronze)}
.mfilter__btn[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:var(--ivory)}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(14px,2vw,28px);margin:clamp(32px,4vw,56px) 0 0;padding:0;list-style:none}
.mcard{display:flex;flex-direction:column;min-width:0}
.mcard[hidden]{display:none}
.mcard__img{display:block;overflow:hidden;background:var(--sand)}
.mcard__img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.mcard:hover .mcard__img img{transform:scale(1.03)}
.mcard__meta{display:flex;gap:14px;margin-top:16px;font-size:11.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.mcard__meta span{color:var(--bronze)}
.mcard__title{margin:10px 0 0;overflow-wrap:anywhere;font-family:var(--f-display);font-weight:400;font-size:clamp(19px,1.5vw,23px);line-height:1.3;letter-spacing:.01em;color:var(--ink)}
.mcard__title a{color:inherit;text-decoration:none}
.mcard__title a:hover,.mcard__title a:focus-visible{color:var(--bronze)}
.mcard__more{margin-top:auto;padding-top:16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);text-decoration:none}
@media (max-width:1099px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.mgrid{grid-template-columns:1fr}}

/* Contact: the office details under the title, the Forminator form (its own markup and styles) in the text column, the map below */
.cinfo .sub{margin-top:28px}
.cinfo .body a,.cinfo__link a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(42,38,34,.25)}
.cinfo .body a:hover,.cinfo__link a:hover{color:var(--bronze);border-color:var(--bronze)}
.cinfo__link{margin-top:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.cform{min-width:0}
.amis-contact .cform .forminator-ui,.amis-contact .cform .forminator-ui *{font-family:var(--f-body)!important}
.amis-contact .cform .forminator-ui .forminator-button-submit{background:var(--bronze)!important;color:#fff!important;border-radius:0!important;letter-spacing:.14em;text-transform:uppercase}
.amis-contact .cform .forminator-ui .forminator-button-submit:hover{filter:brightness(.94)}
.cmap{margin-top:clamp(48px,6vw,88px)}
.cmap iframe{display:block;width:100%;height:clamp(300px,36vw,460px);border:0;filter:grayscale(.35)}

/* Posts (blogs and news): one standard article. Reading column 720 px; the post's own blocks are styled here, so every post
   looks the same whatever its editor left in it (stray inline colours and list styles are neutralised) */
.post__head{padding-top:clamp(40px,5vw,80px);max-width:720px}
.post__crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.post__crumbs a{color:var(--bronze);text-decoration:none}
.post__crumbs a:hover{color:var(--ink)}
.post__meta{margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.post__title{margin:14px 0 0;font-family:var(--f-display);font-weight:300;font-size:clamp(32px,3.6vw,52px);line-height:1.15;letter-spacing:.005em;color:var(--ink);overflow-wrap:anywhere}
.post__media{margin-top:clamp(32px,4vw,56px)}
.post__media img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;background:var(--sand)}
.post__body{max-width:720px;margin-top:clamp(40px,5vw,72px);font-size:17px;line-height:1.75;color:var(--ink-70,#55504a)}
.post__body>*{margin:0}
.post__body>*+*{margin-top:18px}
.post__body h2,.post__body h3,.post__body h4,.post__body h5,.post__body h6{font-family:var(--f-display);font-weight:400;color:var(--ink);line-height:1.25;letter-spacing:.01em}
.post__body h2{font-size:clamp(25px,2.2vw,31px);margin-top:48px}
.post__body h3{font-size:clamp(21px,1.8vw,25px);margin-top:40px}
.post__body h4,.post__body h5,.post__body h6{font-size:20px;margin-top:32px}
.post__body h2+*,.post__body h3+*,.post__body h4+*,.post__body h5+*,.post__body h6+*{margin-top:14px}
.post__body strong,.post__body b{font-weight:600;color:var(--ink)}
.post__body a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.post__body a:hover{color:var(--ink)}
.post__body ul,.post__body ol{padding-left:1.3em}
.post__body li+li{margin-top:8px}
.post__body li::marker{color:var(--bronze)}
.post__body li ul,.post__body li ol{margin-top:8px}
.post__body hr{border:0;border-top:1px solid rgba(42,38,34,.18);margin:40px 0}
.post__body figure{margin:28px 0 0;overflow-x:auto}
.post__body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.post__body th,.post__body td{padding:12px 14px;border-bottom:1px solid rgba(42,38,34,.15);text-align:left;vertical-align:top}
.post__body thead th,.post__body tr:first-child td strong{color:var(--ink)}
.post__body img{max-width:100%;height:auto}
.post__body svg{width:1em;height:1em;vertical-align:-.12em;fill:var(--bronze)}
.post__body [style*="color"]{color:inherit!important}
.post__body [style*="list-style-type: none"]{padding-left:0}
.post__body [style*="padding-left"]{padding-left:1.3em!important}
.post__foot{max-width:720px;margin-top:clamp(48px,6vw,80px);padding-bottom:clamp(56px,7vw,104px)}
.post__label{display:block;margin:0;font:500 11.5px/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.post__share{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:22px 0;border-top:1px solid rgba(42,38,34,.18);border-bottom:1px solid rgba(42,38,34,.18)}
.post__share ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.post__share a{display:inline-block;padding:10px 16px;border:1px solid rgba(42,38,34,.25);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:border-color .2s,color .2s}
.post__share a:hover,.post__share a:focus-visible{border-color:var(--bronze);color:var(--bronze)}
.post__nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.post__nav a{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.post__nav a:hover .post__navtitle{color:var(--bronze)}
.post__next{grid-column:2;text-align:right}
.post__navtitle{font-family:var(--f-display);font-size:18px;line-height:1.35}
.post__more .mgrid{margin-top:clamp(28px,3vw,44px)}
@media (max-width:699px){.post__nav{grid-template-columns:1fr}.post__next{grid-column:1;text-align:left}.post__body{font-size:16px}}

/* Article pages (SEO pages, Privacy Policy, Our Partners): the post reading column and type styles, plus a long-title band,
   FAQs as question / answer rows, and partner logos at logo size */
.phead__title--long{font-size:clamp(34px,4.4vw,64px);line-height:1.08;max-width:16em}
.article__body{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(56px,7vw,104px)}
.article__body figure:first-child{margin-top:0}
.article__body figure img{display:block;width:100%;height:auto}
.article__body h6{font:500 11.5px/1.5 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-top:10px}
.article__body h2+h6,.article__body h3+h6{margin-top:8px}
.article__end{height:0}
.amis-article--our-partners .article__body figure{max-width:180px;margin-top:56px}
.amis-article--our-partners .article__body figure:first-child{margin-top:0}
.amis-article--our-partners .article__body figure+h2{margin-top:20px}
.amis-article .phead>.wrap{max-width:720px} /* the band's title lines up with the reading column below */

/* AMIS Projects (downloads): one card per project, two to a row */
.phead__lede{margin-top:clamp(16px,1.6vw,24px);max-width:40em;color:rgba(251,246,239,.84)}
.phead__lede+.phead__lede{margin-top:6px}
.dl{padding-top:clamp(48px,6vw,88px)}
.dl__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,5vw,80px) clamp(24px,3vw,48px);margin:0 auto;padding:0;list-style:none}
.dl__card{display:flex;flex-direction:column;min-width:0}
.dl__img{display:block;overflow:hidden;background:var(--sand)}
.dl__img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.dl__card:hover .dl__img img{transform:scale(1.03)}
.dl__name{margin:24px 0 0;font-family:var(--f-display);font-weight:300;font-size:clamp(24px,2vw,30px);line-height:1.2;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.dl__card .body{margin-top:14px}
.dl__card .pcta{margin-top:auto;padding-top:24px}
@media (max-width:899px){.dl__grid{grid-template-columns:1fr}}
/* Thank-you pages: the band is the page */
/* the thank-you band takes its content height on every screen (no empty space around the message) */
.phead--thanks .pcta{margin-top:clamp(28px,3vw,40px)}

/* Landing pages: the project's film behind the copy and the enquiry form; the form in the site's field style */
.lhero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--ivory);min-height:min(92vh,960px);display:flex;align-items:center}
.lhero__media,.lhero .lhero__media.phero__media{position:absolute;inset:0;z-index:-2;width:auto;height:auto;aspect-ratio:auto;background-size:cover;background-position:center;background-image:var(--poster)} /* fills the whole hero (the shared film rule is 16:9) */
@media (min-width:1300px){.lhero__media{background-image:var(--poster-xl)}}
@media (max-width:767px){.lhero__media{background-image:var(--poster-sm)}}
.lhero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(31,24,20,.72) 0%,rgba(31,24,20,.38) 55%,rgba(31,24,20,.55) 100%)}
.lhero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(48px,6vw,96px)}
.lhero__mark{max-width:320px}
.lhero__mark svg{width:100%;height:auto;display:block}
.lhero__mark svg path{fill:var(--ivory)}
.lhero__title{margin:clamp(28px,3vw,44px) 0 0;font-family:var(--f-display);font-weight:300;font-size:clamp(34px,4.2vw,58px);line-height:1.08;letter-spacing:.01em;text-transform:uppercase}
.lhero__tag{margin-top:16px;font-family:var(--f-display);font-size:clamp(20px,1.8vw,26px);letter-spacing:.02em;text-transform:uppercase;color:var(--gold)}
.lhero__line{margin-top:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,246,239,.84)}
.lform{background:var(--ivory);color:var(--ink);padding:clamp(24px,2.4vw,36px)}
.lform h3,.lform__title{margin:0 0 18px;font-family:var(--f-display);font-weight:400;font-size:clamp(22px,1.8vw,26px);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.sf-form{display:grid;gap:12px}
.sf-form>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px}
.sf-form input:not([type=hidden]):not([type=submit]),.sf-form select{width:100%;min-height:48px;padding:0 14px;border:1px solid rgba(42,38,34,.22);border-radius:0;background:#fff;font:400 15px/1.2 var(--f-body);color:var(--ink);appearance:none;-webkit-appearance:none}
.sf-form select{background-image:linear-gradient(45deg,transparent 50%,var(--bronze) 50%),linear-gradient(135deg,var(--bronze) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.sf-form input:focus-visible,.sf-form select:focus-visible{outline:2px solid var(--bronze);outline-offset:1px}
.sf-form input[type=submit]{margin-top:6px;min-height:50px;border:0;background:var(--bronze);color:#fff;font:500 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.sf-form input[type=submit]:hover{filter:brightness(1.06)}
.amis-landing .lform .forminator-ui,.amis-landing .lform .forminator-ui *{font-family:var(--f-body)!important}
.amis-landing .lform .forminator-button-submit{background:var(--bronze)!important;color:#fff!important;border-radius:0!important;letter-spacing:.14em;text-transform:uppercase}
.facts--left{margin-top:clamp(24px,2.1vw,30px)}
.cols--three{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px)}
@media (max-width:1099px){.cols--three{grid-template-columns:1fr 1fr}}
@media (max-width:899px){.lhero__in{grid-template-columns:1fr}.lhero{min-height:0}.cols--three{grid-template-columns:1fr}}
/* Post: link to the guide or project page that owns the post's subject */
.post__guide{max-width:720px;margin-top:clamp(28px,3vw,40px)}
.post__guide a{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:6px;transition:color .2s}
.post__guide a::after{content:"";width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.post__guide a:hover,.post__guide a:focus-visible{color:var(--bronze)}
/* Media: buyer guides */
.guides__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin:0;padding:0;list-style:none}
.guides__list li{border-bottom:1px solid rgba(42,38,34,.18)}
.guides__list a{display:block;padding:16px 28px 16px 0;position:relative;font-family:var(--f-display);font-size:clamp(17px,1.3vw,20px);line-height:1.35;color:var(--ink);text-decoration:none;transition:color .2s}
.guides__list a::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:1px solid var(--bronze);border-right:1px solid var(--bronze);transform:rotate(45deg)}
.guides__list a:hover,.guides__list a:focus-visible{color:var(--bronze)}
@media (max-width:699px){.guides__list{grid-template-columns:1fr}}
/* Search results and archives: page numbers */
.amis-fallback .pagination{margin-top:clamp(40px,5vw,64px)}
.amis-fallback .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.amis-fallback .page-numbers{display:inline-block;min-width:40px;padding:9px 14px;border:1px solid rgba(42,38,34,.25);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--ink);text-decoration:none}
.amis-fallback .page-numbers.current,.amis-fallback a.page-numbers:hover{border-color:var(--bronze);color:var(--bronze)}
.amis-fallback .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}