@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');
:root{--paper:#f4f1e8;--paper-2:#ece8db;--ink:#1c1d18;--ink-soft:#55564c;--forest:#14261e;--forest-2:#1c3529;--gold:#b39c4f;--line:rgba(28,29,24,.16);--line-light:rgba(244,241,232,.18);--ease:cubic-bezier(.24,.58,.47,.99);--gutter:clamp(1.25rem,4vw,4rem);--shadow:0 18px 50px rgba(0,0,0,.12)}
*{box-sizing:border-box}figure{margin:0}html{scroll-behavior:smooth}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Geist",-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:400;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}body.page-enter{opacity:0;transform:translateY(10px)}body.page-ready{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}body.page-leave{opacity:0;transform:translateY(-8px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
::selection{background:var(--gold);color:var(--ink)}:focus-visible{outline:2px solid var(--gold);outline-offset:3px}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,2rem)}
.t-display{font-size:clamp(3.4rem,10.5vw,9.75rem);line-height:.92;letter-spacing:-.055em;font-weight:500}.t-h1{font-size:clamp(2.9rem,7.5vw,6.5rem);line-height:.94;letter-spacing:-.05em;font-weight:500}.t-h2{font-size:clamp(2.3rem,5.4vw,4.9rem);line-height:.96;letter-spacing:-.048em;font-weight:500}.t-h3{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.05;letter-spacing:-.03em;font-weight:500}.t-lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;letter-spacing:-.015em}.t-body{font-size:.9375rem;line-height:1.65;letter-spacing:-.005em}.t-meta{font-family:"Geist Mono","SFMono-Regular",Menlo,monospace;font-size:.6875rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}.t-num{font-family:"Geist Mono","SFMono-Regular",Menlo,monospace;font-size:.75rem;letter-spacing:.1em}
.gold{color:var(--gold)}.soft{color:var(--ink-soft)}.lightsoft{color:rgba(244,241,232,.62)}
.u-link{position:relative}.u-link::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}.u-link:hover::after,.u-link:focus-visible::after{transform:scaleX(1)}
.arrow-shift svg{transition:transform .3s var(--ease)}.arrow-shift:hover svg{transform:translate(4px,-4px)}
.reveal{opacity:0;transform:translateY(2.6rem);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}.reveal.is-inview{opacity:1;transform:translateY(0)}
.img-frame{overflow:hidden;background:var(--forest-2)}.img-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.1s var(--ease)}.img-zoom:hover img{transform:scale(1.045)}
.dark-page .site-nav{color:var(--paper)}
header{position:fixed;inset:0 0 auto;z-index:50;transition:background .5s,border-color .5s,color .5s}.site-nav{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem;border-bottom:1px solid transparent}.site-nav.scrolled{background:rgba(244,241,232,.9);backdrop-filter:blur(10px);border-bottom-color:var(--line)}body.dark-page .site-nav.scrolled{background:rgba(20,38,30,.9);border-bottom-color:var(--line-light);color:var(--paper)}
.nav-links{display:flex;align-items:center;gap:2rem}.nav-links a{white-space:nowrap}.nav-links a:hover{color:var(--ink)}body.dark-page .nav-links a:hover{color:var(--paper)}.menu-button{display:none;min-height:44px;border:0;background:none;color:inherit;align-items:center;gap:.6rem}.menu-lines{position:relative;width:24px;height:1px;background:currentColor}.menu-lines::before,.menu-lines::after{content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:transform .3s var(--ease)}.menu-lines::before{top:-4px}.menu-lines::after{top:4px}.menu-button.open .menu-lines{background:transparent}.menu-button.open .menu-lines::before{transform:translateY(4px) rotate(45deg)}.menu-button.open .menu-lines::after{transform:translateY(-4px) rotate(-45deg)}
.menu-overlay{position:fixed;inset:0;z-index:40;background:var(--forest);color:var(--paper);clip-path:inset(0 0 100% 0);transition:clip-path .65s cubic-bezier(.76,0,.24,1);pointer-events:none}.menu-overlay.open{clip-path:inset(0 0 0 0);pointer-events:auto}.mobile-inner{display:flex;height:100%;flex-direction:column;justify-content:space-between;padding-top:7rem;padding-bottom:2.5rem}.mobile-link{display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line-light);padding:1.25rem 0}.mobile-link:hover{color:var(--gold)}
.hero{min-height:100vh;display:grid;align-items:end;gap:clamp(1rem,2vw,2rem);padding-top:7rem;padding-bottom:2.5rem}.hero-copy{grid-column:span 7}.hero-media-col{grid-column:span 5}.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 2rem;color:var(--ink-soft)}.hero-cta{display:inline-flex;min-height:44px;align-items:center;gap:.75rem;border:1px solid var(--ink);padding:.8rem 1.5rem;margin-top:2.75rem}.hero-cta:hover{background:var(--ink);color:var(--paper)}.hero-media{position:relative;overflow:hidden;background:var(--forest);height:72vh}.hero-media .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-media .layer-duotone{filter:grayscale(1) contrast(1.05) brightness(.82) sepia(.32) hue-rotate(95deg) saturate(1.4)}.hero-media .layer-color{mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.65) 45%,transparent 72%);-webkit-mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.65) 45%,transparent 72%);transition:opacity .6s var(--ease)}.hero-figcap{position:absolute;left:1rem;bottom:1rem;z-index:10;color:rgba(244,241,232,.85)}
.marquee{display:flex;overflow:hidden;user-select:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.marquee-track{display:flex;flex-shrink:0;align-items:baseline;gap:3rem;padding:1.2rem 3rem 1.2rem 0;animation:marquee 36s linear infinite}.marquee-item{display:flex;align-items:center;gap:3rem;color:var(--ink-soft)}@keyframes marquee{to{transform:translateX(-100%)}}
.section-pad{padding-top:6rem;padding-bottom:7rem}.dark-section{background:var(--forest);color:var(--paper)}.border-top{border-top:1px solid var(--line)}.dark-section .border-top{border-color:var(--line-light)}
.business-list{position:relative;margin-top:4rem}.business-row{position:relative;display:grid;grid-template-columns:1fr 6fr 3fr 1fr;gap:1.25rem;align-items:center;padding:1.75rem 0;border-top:1px solid var(--line-light)}.business-row:last-child{border-bottom:1px solid var(--line-light)}.business-row:hover .business-name{transform:translateX(8px)}.business-number{color:var(--gold)}.business-name{font-size:clamp(1.6rem,3vw,2.8rem);transition:transform .3s var(--ease)}.business-short{color:rgba(244,241,232,.55);font-size:.9rem}.business-category{color:rgba(244,241,232,.45)}
.hover-preview{position:fixed;left:0;top:0;z-index:45;pointer-events:none;width:224px;height:280px;overflow:hidden;opacity:0;transform:translate3d(-400px,-400px,0);transition:opacity .28s var(--ease);display:block;background:var(--forest-2);box-shadow:var(--shadow)}.hover-preview.show{opacity:1}.hover-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s var(--ease)}.hover-preview img.active{opacity:1}
.directory{padding-top:6rem;padding-bottom:7rem}.directory-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;margin-top:3rem}.directory-item{display:flex;align-items:baseline;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}.directory-item .num{color:var(--gold)}.directory-item .cat{margin-left:auto;color:var(--ink-soft);font-family:"Geist Mono",monospace;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase}.directory-item:hover .directory-name{transform:translateX(5px)}.directory-name{transition:transform .3s var(--ease)}
.about-split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,7vw,7rem);align-items:start}.about-image{grid-column:span 5}.about-copy{grid-column:span 6;grid-column-start:7}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:3rem}.principle{border-top:1px solid var(--line);padding-top:1.25rem}.approach-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:3rem}.step{min-height:220px;padding:1.5rem;border-right:1px solid var(--line)}.step:last-child{border-right:0}.step h3{margin-top:3.5rem}.photo-section{position:relative;min-height:72vh;display:flex;align-items:center;background-size:cover;background-position:center;padding:6rem 0}.photo-section::before{content:"";position:absolute;inset:0;background:rgba(244,241,232,.78)}.photo-content{position:relative;z-index:1;max-width:760px}
.contact-page{background:var(--forest);color:var(--paper);min-height:100vh}.contact-grid{padding-top:8rem;padding-bottom:7rem;align-items:start}.contact-left{grid-column:span 5}.contact-right{grid-column:span 6;grid-column-start:7}.contact-details{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line-light)}.contact-details li+li{margin-top:1.5rem}.field{display:block}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.field label{display:block}.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-light);border-radius:0;padding:.85rem 0;color:var(--paper);font-size:1rem;outline:none;transition:border-color .3s var(--ease)}.field input::placeholder,.field textarea::placeholder{color:rgba(244,241,232,.35)}.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold)}.field select{appearance:none}.field select option{color:var(--ink);background:var(--paper)}.field-error{color:#e0a19a}.form-submit{display:inline-flex;min-height:44px;align-items:center;gap:.75rem;border:1px solid var(--paper);background:transparent;color:var(--paper);padding:1rem 2rem;cursor:pointer}.form-submit:hover{background:var(--paper);color:var(--ink)}.form-submit:disabled{opacity:.6;cursor:not-allowed}
.detail-main{padding-top:8rem;padding-bottom:6rem}.detail-hero{margin-top:3.5rem}.detail-hero img{display:block;width:100%;aspect-ratio:21/10;object-fit:cover}.detail-overview{margin-top:7rem}.detail-related{margin-top:8rem}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.5rem}.related-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.related-card .related-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:1rem}.detail-cta{margin-top:8rem;background:var(--forest);color:var(--paper);padding:4rem 3rem}.cap-list{display:grid;gap:.9rem;margin-top:1.5rem}.cap-item{display:flex;align-items:baseline;gap:.75rem;color:var(--ink-soft)}.cap-dot{width:4px;height:4px;border-radius:999px;background:var(--gold);flex:0 0 auto;transform:translateY(-2px)}
footer{background:var(--forest);color:var(--paper);border-top:1px solid var(--line-light)}.footer-grid{display:grid;grid-template-columns:5fr 2fr 3fr 2fr;gap:2rem;padding-top:4.5rem;padding-bottom:4.5rem}.footer-bottom{display:flex;justify-content:space-between;gap:1rem;padding-top:1.5rem;padding-bottom:1.5rem;border-top:1px solid var(--line-light);color:rgba(244,241,232,.5)}.footer-list{list-style:none;padding:0;margin:1.1rem 0 0}.footer-list li+li{margin-top:.75rem}.footer-list a{color:rgba(244,241,232,.8)}
.whatsapp-float{position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;display:inline-flex;align-items:center;gap:.65rem;min-height:52px;padding:.85rem 1rem;border:1px solid rgba(244,241,232,.28);border-radius:999px;background:#1daa61;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.22);font-family:"Geist Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}.whatsapp-float:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.28)}.whatsapp-icon{width:20px;height:20px;display:block}
.filters{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem 0;margin-top:3.5rem}.filter-button{min-height:44px;background:none;border:0;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}.filter-button.active{color:var(--ink)}.filter-dot{width:6px;height:6px;border-radius:999px;background:transparent}.filter-button.active .filter-dot{background:var(--gold)}.filter-count{color:var(--gold);font-family:"Geist Mono",monospace;font-size:.7rem}
.business-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem 2.5rem;margin-top:4rem}.business-card{display:block}.business-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}.business-card figure{margin:1rem 0 0}.business-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.25);transition:filter .7s var(--ease),transform 1.1s var(--ease)}.business-card:hover img{filter:grayscale(0);transform:scale(1.025)}.business-card-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:1.25rem}.business-card:hover .business-card-name{transform:translateX(6px)}.business-card-name{transition:transform .3s var(--ease)}
.error-page{min-height:70vh;padding-top:10rem;padding-bottom:6rem}

/* Mobile stability + layout calibration */
html,body{width:100%;max-width:100%;}
img,svg,video,canvas{max-width:100%;}
h1,h2,h3{overflow-wrap:normal;text-wrap:balance;}
.t-body,.t-lede{overflow-wrap:break-word;text-wrap:pretty;}

/* Keep touch devices free of sticky hover transforms and accidental hover states. */
@media (hover:none),(pointer:coarse){
  .img-zoom:hover img,.business-card:hover img{transform:none;filter:grayscale(.25)}
  .business-row:hover .business-name,.directory-item:hover .directory-name{transform:none}
  .arrow-shift:hover svg{transform:none}
  .u-link:hover::after{transform:scaleX(0)}
  .hero-cta:hover{background:transparent;color:inherit}
  .form-submit:hover{background:transparent;color:var(--paper)}
}

/* Center and contain the contact experience on wide screens without squeezing copy. */
.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px;margin-left:auto;margin-right:auto;}
.contact-left,.contact-right{grid-column:auto;min-width:0;}
.contact-left{text-align:center;}
.contact-details{text-align:center;}
.contact-right{text-align:center;}
#enquiryForm{width:100%;max-width:720px;margin-left:auto;margin-right:auto;text-align:left;}
#formSuccess{max-width:720px;margin-left:auto;margin-right:auto;text-align:center;}

/* About page: Who We Are uses the same clean full-bleed image treatment as the revised homepage. */
.who-we-are-background{background-image:url('/images/hero-port.jpg');}
.who-we-are-background .photo-section-overlay{background:rgba(244,241,232,.76);}
.who-we-are-content{max-width:900px;}
.who-we-are-content .t-h3{max-width:760px;}
.who-we-are-content .t-body{max-width:700px;}
.who-we-are-content .who-we-are-caption{display:block;margin-top:1.5rem;}

@media(max-width:900px){
  .grid-12{grid-template-columns:1fr;}
  .grid-12>*{grid-column:auto!important;grid-column-start:auto!important;grid-column-end:auto!important;min-width:0;}
  .contact-grid{grid-template-columns:1fr;max-width:760px;}
  .contact-left,.contact-right{grid-column:auto;}
  .contact-grid{padding-top:7rem;padding-bottom:5.5rem;}
  .hero-background,.photo-centered{min-height:100svh;}
  .menu-overlay{height:100svh;inset:0;}
  .mobile-inner{min-height:100svh;height:100svh;}
  .business-grid{grid-template-columns:1fr;gap:3.5rem;}
}

@media(max-width:600px){
  .wrap{padding-left:1rem;padding-right:1rem;}
  .hero-background{min-height:100svh;padding:6.5rem 1rem 4.5rem;}
  .photo-centered{min-height:82svh;padding:4.5rem 1rem;}
  .photo-content-centered{max-width:100%;}
  .who-we-are-content .t-h3{max-width:100%;}
  .who-we-are-content .t-body{max-width:100%;}
  .contact-grid{padding-top:7rem;}
  .contact-details{margin-top:2.5rem;padding-top:1.5rem;}
  .contact-right{margin-top:3.5rem;}
  .form-grid{grid-template-columns:1fr;gap:1.5rem;}
  .field input,.field select,.field textarea{font-size:16px;}
  .whatsapp-float{right:calc(1rem + env(safe-area-inset-right));bottom:calc(1rem + env(safe-area-inset-bottom));}
}

@media(max-width:900px){.nav-links,.desktop-cta{display:none}.menu-button{display:flex}.hero{grid-template-columns:1fr;align-items:center;padding-top:8rem}.hero-copy,.hero-media-col{grid-column:auto}.hero-media{height:62vh}.business-row{grid-template-columns:44px 1fr}.business-short,.business-category,.business-row .arrow{display:none}.directory-grid{grid-template-columns:1fr}.about-split{grid-template-columns:1fr}.about-image,.about-copy{grid-column:auto}.principles{grid-template-columns:1fr}.approach-grid{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--line)}.detail-hero img{aspect-ratio:4/3}.related-grid{grid-template-columns:1fr 1fr}.contact-left,.contact-right{grid-column:auto}.contact-grid{padding-top:8rem}.form-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.whatsapp-float{right:1rem;bottom:1rem}}
@media(max-width:600px){.t-display{font-size:clamp(3rem,17vw,5rem)}.section-pad{padding-top:4.5rem;padding-bottom:5.5rem}.business-list{margin-top:3rem}.hover-preview{display:none}.approach-grid,.related-grid,.footer-grid{grid-template-columns:1fr}.step{border-right:0}.detail-main{padding-top:7.5rem}.detail-overview,.detail-related,.detail-cta{margin-top:5rem}.detail-cta{padding:3rem 1.5rem}.footer-grid{padding-top:3.5rem;padding-bottom:3.5rem}.footer-bottom{flex-direction:column}.whatsapp-float span.label{display:none}.whatsapp-float{width:54px;height:54px;padding:0;justify-content:center}.mobile-inner{padding-top:6.5rem}}
@media(pointer:coarse){.hero-media .layer-color{mask-image:none;-webkit-mask-image:none;opacity:1}.hero-media .layer-duotone{display:none}.uji-cursor{display:none}}
@media(pointer:fine){.uji-cursor{position:fixed;top:0;left:0;z-index:80;pointer-events:none}.uji-cursor-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:999px;background:var(--gold);transition:transform .25s var(--ease),opacity .25s var(--ease)}.uji-cursor-tag{position:absolute;transform:translate(14px,14px);padding:.45rem .8rem;background:var(--ink);color:var(--paper);font-family:"Geist Mono",monospace;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;opacity:0;white-space:nowrap;transition:opacity .25s var(--ease)}.uji-cursor[data-label]:not([data-label=""]) .uji-cursor-tag{opacity:1}.uji-cursor[data-label]:not([data-label=""]) .uji-cursor-dot{transform:scale(2.4);opacity:.55}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.marquee-track{animation:none}.img-frame img{transition:none}.hero-media .layer-color{transition:none}body{transition:none!important}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Homepage visual treatment from the user's revised UJI design.
   Deliberately limited to hero, About, and Responsibility sections. */
.hero-background{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8rem 1.5rem 6rem;color:var(--paper);text-align:center;background:center/cover no-repeat url('/images/hero-port.jpg');overflow:hidden}
.hero-background-overlay{position:absolute;inset:0;background:rgba(18,24,20,.48)}
.hero-content-centered{position:relative;z-index:1;max-width:900px;margin:0 auto}
.hero-content-centered .hero-meta{justify-content:center}
.hero-centered-lede{max-width:560px;margin:2.2rem auto 0;color:rgba(244,241,232,.82)}
.hero-content-centered .hero-cta{border-color:var(--paper);color:var(--paper);margin-top:2.25rem}
.hero-content-centered .hero-cta:hover{background:var(--paper);color:var(--ink)}
.photo-centered{position:relative;min-height:72vh;display:flex;align-items:center;justify-content:center;padding:6rem 1.5rem;background-size:cover;background-position:center;text-align:center;overflow:hidden}
.photo-section-overlay{position:absolute;inset:0;background:rgba(244,241,232,.78)}
.photo-content-centered{position:relative;z-index:1;width:min(900px,100%);margin:0 auto}
.photo-content-centered h2,.photo-content-centered p{margin-left:auto;margin-right:auto}
.photo-content-centered h2{max-width:760px}
.photo-content-centered .t-body{max-width:680px}
.responsibility-copy{max-width:900px}
.responsibility-copy h2{max-width:760px}
.responsibility-copy .t-body{max-width:680px}
@media(max-width:900px){.hero-background{padding-top:8rem;min-height:92vh}.photo-centered{min-height:68vh;padding:5rem 1.25rem}}
@media(max-width:600px){.hero-background{min-height:88vh;padding:7rem 1rem 5rem}.photo-centered{min-height:76vh;padding:4.5rem 1rem}.photo-content-centered h2{max-width:100%}.photo-content-centered .t-body{max-width:100%}}


/* Final hero-only correction: true background image, centered copy, original reveal timing/style preserved. */
.hero-background{position:relative;isolation:isolate;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8rem 1.5rem 6rem;color:var(--paper);text-align:center;background-image:url('/images/hero-port.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;overflow:hidden;}
.hero-background::before{content:"";position:absolute;inset:0;background:rgba(18,24,20,.34);z-index:-1;}
.hero-background-overlay{position:absolute;inset:0;background:transparent;pointer-events:none;z-index:-1;}
.hero-content-centered{position:relative;z-index:1;width:min(900px,100%);margin:0 auto;}
.hero-background .hero-meta{justify-content:center;color:rgba(244,241,232,.86);}
.hero-background .t-display > .reveal:nth-child(2){color:rgba(244,241,232,.80)!important;}
.hero-background .soft{color:rgba(244,241,232,.84)!important;}
.hero-background .hero-centered-lede{max-width:560px;margin:2.2rem auto 0;}
.hero-background .hero-cta{border-color:var(--paper);color:var(--paper);margin-top:2.25rem;}
.hero-background .hero-cta:hover{background:var(--paper);color:var(--ink);}
@media(max-width:900px){.hero-background{min-height:100vh;padding-top:8rem;padding-bottom:6rem;}}

/* Final mobile/desktop layout guardrails — appended intentionally so they win over earlier legacy rules. */
.photo-centered::before{background:transparent;}
.photo-centered .photo-section-overlay{pointer-events:none;}

@media(max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;}
  .grid-12{grid-template-columns:1fr!important;}
  .grid-12>*{grid-column:auto!important;grid-column-start:auto!important;grid-column-end:auto!important;min-width:0;}
  .contact-grid{grid-template-columns:1fr!important;max-width:760px;margin-left:auto;margin-right:auto;}
  .contact-left,.contact-right{grid-column:auto!important;min-width:0;}
  .contact-left{text-align:center;}
  .contact-details{text-align:center;}
  .contact-right{text-align:center;}
  #enquiryForm{max-width:720px;margin-left:auto;margin-right:auto;text-align:left;}
  #formSuccess{max-width:720px;margin-left:auto;margin-right:auto;text-align:center;}
  .business-grid{grid-template-columns:1fr!important;gap:3.5rem;}
  .related-grid{grid-template-columns:1fr 1fr;}
  .approach-grid{grid-template-columns:1fr 1fr;}
  .hero-background,.photo-centered{min-height:100svh;}
  .menu-overlay{height:100svh;}
  .mobile-inner{height:100svh;min-height:100svh;}
}

@media(max-width:600px){
  .wrap{padding-left:1rem!important;padding-right:1rem!important;}
  .hero-background{min-height:100svh;padding:6.5rem 1rem 4.5rem;}
  .photo-centered{min-height:82svh;padding:4.5rem 1rem;}
  .photo-content-centered{max-width:100%;}
  .photo-content-centered h2,.photo-content-centered .t-h3,.photo-content-centered .t-body{max-width:100%;}
  .who-we-are-content .t-h3,.who-we-are-content .t-body{max-width:100%;}
  .related-grid,.approach-grid,.footer-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;gap:1.5rem;}
  .field input,.field select,.field textarea{font-size:16px;}
  .contact-right{margin-top:3.5rem;}
  .contact-grid{padding-top:7rem;padding-bottom:5.5rem;}
  .detail-overview,.detail-related,.detail-cta{margin-top:5rem;}
  .detail-cta{padding:3rem 1.5rem;}
  .whatsapp-float{right:calc(1rem + env(safe-area-inset-right));bottom:calc(1rem + env(safe-area-inset-bottom));}
}

@media (hover:none),(pointer:coarse){
  .img-zoom:hover img,.business-card:hover img{transform:none!important;filter:grayscale(.25)!important;}
  .business-row:hover .business-name,.directory-item:hover .directory-name{transform:none!important;}
  .arrow-shift:hover svg{transform:none!important;}
  .u-link:hover::after{transform:scaleX(0)!important;}
}

/* Desktop/touch separation: full hover-preview behavior remains desktop-only. */
@media (pointer:coarse){
  .hover-preview{display:none!important;}
  .uji-cursor{display:none!important;}
  .business-row{cursor:pointer;}
}

/* Contact page mobile centering correction.
   Scoped only to the Contact page so the existing desktop layout, typography,
   animation, spacing, and other pages are left untouched. */
@media (max-width: 900px){
  body.dark-page .contact-page{width:100%;overflow:hidden;}
  .contact-page .contact-grid{
    width:100%;
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
    justify-items:center;
    align-items:start;
  }
  .contact-page .contact-left,
  .contact-page .contact-right{
    width:100%;
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .contact-page .contact-left > *{
    margin-left:auto;
    margin-right:auto;
  }
  .contact-page .contact-details{
    width:100%;
    text-align:center;
  }
  .contact-page .contact-details > div{
    margin-left:auto;
    margin-right:auto;
  }
  .contact-page .contact-right{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .contact-page #enquiryForm,
  .contact-page #formSuccess{
    width:100%;
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
  }
  .contact-page #enquiryForm{
    text-align:center;
  }
  .contact-page .form-grid{
    width:100%;
    justify-items:center;
  }
  .contact-page .field{
    width:100%;
    text-align:center;
  }
  .contact-page .field label,
  .contact-page .field-error{
    text-align:center;
  }
  .contact-page .field input,
  .contact-page .field select,
  .contact-page .field textarea{
    display:block;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .contact-page .form-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width: 600px){
  .contact-page .contact-grid{
    padding-left:1rem;
    padding-right:1rem;
    padding-top:7rem;
    padding-bottom:5rem;
  }
  .contact-page .contact-left,
  .contact-page .contact-right,
  .contact-page #enquiryForm,
  .contact-page #formSuccess{
    max-width:560px;
  }
  .contact-page .contact-left .t-display{
    width:100%;
    text-align:center;
  }
  .contact-page .contact-left .t-lede{
    max-width:34ch;
    text-align:center;
  }
  .contact-page #enquiryForm .field + .field{
    margin-top:1.5rem;
  }
  .contact-page .field input,
  .contact-page .field select,
  .contact-page .field textarea{
    box-sizing:border-box;
    min-width:0;
  }
}

/* Final contact mobile containment fix.
   The mobile layout uses a normal flow instead of the desktop 12-column grid so
   the two contact halves cannot retain desktop grid placement or squeeze text. */
@media (max-width: 900px){
  .contact-page .contact-grid{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:8rem 1rem 5.5rem !important;
  }
  .contact-page .contact-left,
  .contact-page .contact-right{
    display:block !important;
    width:min(100%, 680px) !important;
    max-width:680px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-column:auto !important;
    grid-column-start:auto !important;
    grid-column-end:auto !important;
    float:none !important;
  }
  .contact-page .contact-left{
    text-align:center !important;
  }
  .contact-page .contact-left .t-lede{
    width:min(100%, 34ch) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .contact-page .contact-details{
    width:min(100%, 30rem) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }
  .contact-page .contact-details > div{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .contact-page .contact-details a{
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }
  .contact-page .contact-right{
    margin-top:4.5rem !important;
    text-align:center !important;
  }
  .contact-page #enquiryForm,
  .contact-page #formSuccess{
    display:block !important;
    width:min(100%, 680px) !important;
    max-width:680px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .contact-page #enquiryForm{text-align:center !important;}
  .contact-page .form-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    gap:1.5rem !important;
  }
  .contact-page .field{
    width:100% !important;
    min-width:0 !important;
    text-align:center !important;
  }
  .contact-page .field label,
  .contact-page .field-error{
    display:block !important;
    width:100% !important;
    text-align:center !important;
  }
  .contact-page .field input,
  .contact-page .field select,
  .contact-page .field textarea{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }
  .contact-page .form-submit{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:min(100%, 320px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width: 600px){
  .contact-page .contact-grid{padding:7rem 1rem 5rem !important;}
  .contact-page .contact-left,
  .contact-page .contact-right,
  .contact-page #enquiryForm,
  .contact-page #formSuccess{width:100% !important;max-width:560px !important;}
  .contact-page .contact-left .t-display{width:100% !important;max-width:none !important;}
  .contact-page .contact-details{margin-top:2.75rem !important;padding-top:1.5rem !important;}
  .contact-page .contact-right{margin-top:4rem !important;}
}