/* Pier House Aran: plain CSS, no frameworks. Look follows the old Hestia theme. */
@font-face{font-family:Roboto;font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/roboto.woff2) format('woff2')}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/roboto-slab.woff2) format('woff2')}
:root{--accent:#768df2;--teal:#009999;--ink:#3c4858;--muted:#6c757d;--bar:#e5e3ec;--bg:#b5b5b5}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem} /* keep anchor targets (e.g. skip link, #enquiry-form) clear of the fixed header */
body{margin:0;font:300 17px/1.7 Roboto,"Helvetica Neue",Arial,sans-serif;color:#555;background:#fff}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
h1{font:700 2.1rem/1.2 "Roboto Slab",Georgia,serif;color:var(--ink);margin:0 0 1rem}
p{margin:0 0 1rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:.5rem;z-index:10}

/* header
   The bar is "solid" (lilac, dark text) on inner pages, after the home page is scrolled, and while the mobile menu is open.
   Otherwise (top of the home page) it is transparent over the photo with white text. */
.hero{background-size:cover;background-position:center;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
.hero-home{background-image:url(/assets/img/hero-home.jpg);min-height:90vh}
.hero-inner{background-image:url(/assets/img/hero-inner.jpg);min-height:300px;padding-top:73px}
.bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  padding:1.4rem max(1rem,calc((100% - 1140px)/2 + 1rem));
  transition:padding .15s ease,background-color .15s ease,box-shadow .15s ease}
.js .bar{position:fixed}
.brand{position:relative;display:block;width:130px;height:54px}
.brand img{position:absolute;left:0;top:0}
.brand .logo-w{transition:opacity .15s ease 0s}
.brand .logo-d{transition:opacity .15s ease .15s}
.brand .logo-d{opacity:0}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
nav a{display:block;padding:.6rem 1rem;font:500 .75rem/1 Roboto,Arial,sans-serif;text-transform:uppercase;color:#fff;transition:color .15s ease}
nav a:hover,nav a:focus,nav a[aria-current]{text-decoration:underline}
nav .cta a{background:var(--accent);color:#fff;border-radius:3px;padding:1rem 1.6rem;box-shadow:0 2px 6px rgba(0,0,0,.2)}
nav .cta a:hover{text-decoration:none;filter:brightness(1.08)}
nav .cta a svg{width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:.4em;fill:currentColor}
.nav-toggle{display:none;width:44px;height:44px;padding:0;border:0;background:none;color:#fff;cursor:pointer;position:relative}
.nav-toggle span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;border-radius:1px;transition:transform .15s ease,opacity .15s ease,top .15s ease}
.nav-toggle span:nth-child(1){top:14px}.nav-toggle span:nth-child(2){top:21px}.nav-toggle span:nth-child(3){top:28px}
.menu-open .nav-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-open .nav-toggle span:nth-child(2){opacity:0}
.menu-open .nav-toggle span:nth-child(3){top:21px;transform:rotate(-45deg)}
/* solid state */
.inner .bar,.scrolled .bar,.menu-open .bar{background:var(--bar);padding-top:.6rem;padding-bottom:.6rem;
  box-shadow:0 10px 20px -12px rgba(0,0,0,.42),0 3px 20px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2)}
.inner .brand .logo-w,.scrolled .brand .logo-w,.menu-open .brand .logo-w{opacity:0}
.inner .brand .logo-d,.scrolled .brand .logo-d,.menu-open .brand .logo-d{opacity:1;transition-delay:0s}
.inner .brand .logo-w,.scrolled .brand .logo-w,.menu-open .brand .logo-w{transition-delay:.15s}
.inner nav a,.scrolled nav a,.menu-open nav a,.inner .nav-toggle,.scrolled .nav-toggle,.menu-open .nav-toggle{color:#3c4858}
.inner nav .cta a,.scrolled nav .cta a,.menu-open nav .cta a{color:#fff}

/* content */
.card{max-width:1140px;margin:0 auto;padding:3rem 1rem 4rem}
.inner .card{max-width:760px}
.home .card{max-width:1140px}
.two{display:grid;grid-template-columns:7fr 5fr;gap:2rem;align-items:start}
.lead{color:#777}
.float{float:left;margin:.3rem 1.2rem .6rem 0;border-radius:3px}
.stack,.gallery{list-style:none;margin:0;padding:0}
.stack{text-align:center}
.stack li{margin-bottom:1.5rem}
.stack img{width:min(300px,100%);border-radius:6px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.5rem 0}
.gallery.two-up{grid-template-columns:repeat(2,1fr)}
.gallery img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;border:2px solid #cfcfcf;border-radius:3px}
.wide{width:100%;border-radius:3px}
.map{display:block;width:100%;height:450px;border:0;margin-top:1.5rem}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:3px;padding:.8rem 1.6rem;
  font:500 .8rem/1 Roboto,Arial,sans-serif;text-transform:uppercase;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn:disabled{background:#9aa0b4;cursor:not-allowed;box-shadow:none;filter:none}
.note{font-size:.95rem;color:#777}

/* enquiry form */
.enquiry fieldset{border:0;margin:0;padding:0}
.enquiry legend{position:absolute;left:-999px}
.row{display:grid;grid-template-columns:200px 1fr;gap:.5rem 1rem;padding:.8rem 0;border-bottom:1px solid #eee;align-items:center}
.row>label,.lbl{font-weight:500;color:var(--ink)}
.names{display:flex;gap:.5rem;flex-wrap:wrap}
.ctl input,.ctl select,.ctl textarea{font:inherit;padding:.5rem .6rem;border:1px solid #bbb;border-radius:3px;background:#fff;color:#333;max-width:100%}
.ctl input:not([type=date]){width:min(100%,260px)}
.names input{width:min(100%,160px)!important}
.ctl textarea{width:100%;max-width:380px}
.n{display:block;font-weight:500;color:var(--ink);margin:.2rem 0}
.inline .n{display:inline-block;margin-right:.8rem}
:focus-visible{outline:3px solid #2b3fb0;outline-offset:2px}
.hp{position:absolute;left:-9999px}
.cf-turnstile{margin:1rem 0}

/* image dialog */
.zoom{border:0;padding:0;background:transparent;max-width:min(96vw,1100px);max-height:96vh;overflow:visible;color:#fff}
.zoom::backdrop{background:rgba(0,0,0,.85)}
.zoom figure{margin:0;text-align:center}
.zoom img{display:block;max-width:100%;max-height:82vh;margin:0 auto;border-radius:3px;background:#222}
.zoom figcaption{padding:.6rem 3rem 0;font-size:.95rem;min-height:1.6em}
.zoom button{position:absolute;border:0;background:rgba(0,0,0,.55);color:#fff;font:400 2rem/1 Roboto,Arial,sans-serif;cursor:pointer;width:2.8rem;height:2.8rem;border-radius:50%}
.zoom button:hover{background:rgba(0,0,0,.8)}
.zoom button[hidden]{display:none}
.z-close{top:-.5rem;right:-.5rem}
.z-prev,.z-next{top:calc(41vh - 1.4rem)}
.z-prev{left:.5rem}.z-next{right:.5rem}
html:has(dialog[open]){overflow:hidden}
.js a[data-zoom]{cursor:zoom-in}

/* footer */
footer{background:var(--teal);color:#fff}
.wrap{max-width:1140px;margin:0 auto;padding:1.5rem 1rem}
.badges{list-style:none;margin:0;padding:0 0 1.2rem;display:flex;gap:1.2rem;justify-content:flex-end;align-items:center;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.25)}
.badges img{display:block;height:50px;width:auto}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:1.2rem}
.foot-row p{margin:0;font-size:.9rem}
.foot-nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
footer a{color:#fff;font:500 .75rem/1 Roboto,Arial,sans-serif;text-transform:uppercase;padding:.6rem .9rem;display:block}

@media (max-width:768px){
  .hero-home{min-height:70vh;background-position:60% center}
  .hero-inner{min-height:240px;padding-top:0}
  .js .hero-inner{padding-top:73px}
  .float{float:none;display:block;margin:0 0 1rem}
  /* without JavaScript: a plain, always-visible solid bar at the top of the hero */
  html:not(.js) .bar{position:relative;background:var(--bar);padding-top:.6rem;padding-bottom:.6rem}
  html:not(.js) .brand .logo-w{opacity:0}
  html:not(.js) .brand .logo-d{opacity:1}
  html:not(.js) nav a{color:#3c4858}
  html:not(.js) nav .cta a{color:#fff}
  .hero::before{display:none}
  /* hamburger */
  .js .nav-toggle{display:block}
  .js nav{display:none;width:100%;max-height:calc(100vh - 80px);overflow:auto}
  .js .menu-open nav{display:block}
  .js nav ul{flex-direction:column;align-items:stretch;gap:0;padding:.4rem 0 .6rem}
  .js nav a{padding:.9rem .25rem}
  .js nav .cta{margin-top:.5rem}
  .js nav .cta a{text-align:center}
  .bar{padding-top:.6rem;padding-bottom:.6rem}
  .two{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .badges{justify-content:center}
  .foot-row{justify-content:center;text-align:center}
  h1{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){.bar,nav a,.nav-toggle span{transition:none}.brand img{transition:none!important}}