/* LOBA Group website.
   Phone first: the base rules are the approved phone design.
   Wider layouts are added in the media queries at the end (tablet from 640px, desktop from 900px). */

/* Self-hosted fonts (no third-party requests) */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-var.woff2) format("woff2")}

:root{
  --cream:#F6F4EE;
  --cream-2:#EDEAE2;
  --navy:#142132;
  --muted:#4F5B6A;
  --line:#D8D3C7;
  --teal:#1B8E9C;        /* restrained turquoise on cream */
  --teal-light:#6FD3DD;  /* turquoise on navy */
  --dark-line:rgba(255,255,255,.16);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --gutter:22px;
  --header-h:64px;
  --bar-h:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 4px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--navy);font:400 16px/1.65 var(--sans);overflow-x:hidden;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
img{display:block;max-width:100%;height:auto}
svg{flex:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em}
h1 em,h2 em{font-style:italic}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.dark :focus-visible{outline-color:var(--teal-light)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}

/* Header */
.header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  min-height:calc(var(--header-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0;
  background:var(--cream);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;min-height:44px;line-height:0}
.logo img{width:128px;height:auto}
.desk-nav{display:none}
.menu-btn{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 0 0 14px;border:0;background:none;
  color:var(--navy);font:500 15px var(--sans);cursor:pointer}
.menu-icon{position:relative;width:24px;height:8px}
.menu-icon i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .25s ease,top .25s ease}
.menu-icon i:first-child{top:0}.menu-icon i:last-child{top:6.5px}
.menu-btn[aria-expanded="true"] .menu-icon i{top:3.25px}
.menu-btn[aria-expanded="true"] .menu-icon i:first-child{transform:rotate(30deg)}
.menu-btn[aria-expanded="true"] .menu-icon i:last-child{transform:rotate(-30deg)}
.menu{position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);
  box-shadow:0 20px 30px -26px rgba(20,33,50,.4)}
.menu[hidden]{display:none}
.menu ul{padding:4px var(--gutter) 12px}
.menu li+li{border-top:1px solid var(--line)}
.menu a{display:flex;align-items:center;min-height:56px;font:400 28px var(--serif);text-decoration:none}

/* Shared type */
.kicker,.eyebrow{font:600 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.dark .eyebrow{color:var(--teal-light)}
.body{color:var(--muted);font-size:16px;line-height:1.7;max-width:30em}
.body+.body{margin-top:14px}
.dark .body{color:rgba(255,255,255,.78)}

/* Intro */
.intro{padding:40px var(--gutter) 28px}
.kicker{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.14em}
.kicker::before{content:"";width:18px;height:1.5px;background:var(--teal);flex:none}
h1{font-size:clamp(42px,13.4vw,58px);line-height:.98;margin-bottom:22px}
.lead{font-size:16px;line-height:1.7;color:var(--muted)}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:12px 14px 12px 16px;
  font:600 15px/1.2 var(--sans);text-decoration:none;border:1.5px solid var(--navy);transition:background .2s ease,color .2s ease}
.btn svg{width:15px;height:15px}
.btn-fill{background:var(--navy);color:#fff}
.btn-fill:active{background:#25374f}
.btn-line{background:transparent;color:var(--navy)}
.btn-line:active{background:var(--cream-2)}
.cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:28px}

/* Video blocks */
.media{position:relative;margin:0;overflow:hidden;background:var(--navy)}
.media-video{display:block;width:100%;object-fit:cover}
/* Hero slideshow: four stacked videos that crossfade */
.hero-slides{position:relative;margin:0;overflow:hidden;background:var(--navy);aspect-ratio:390/233}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.slide.is-active{opacity:1}
.slide video,.slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.slide::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(20,33,50,.72));pointer-events:none}
.slide-caption{position:absolute;z-index:1;left:var(--gutter);right:68px;bottom:20px;display:flex;align-items:center;gap:10px;
  color:#fff;font:500 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase}
.slide-caption::before{content:"";width:7px;height:7px;background:var(--teal-light);transform:rotate(45deg)}
.slide-dots{position:absolute;z-index:2;left:var(--gutter);bottom:9px;display:flex;gap:5px;margin:0}
.slide-dots i{width:14px;height:2px;background:rgba(255,255,255,.4);transition:background .4s ease}
.slide-dots i.on{background:#fff}
/* This video has letterbox bars baked in (about 11% top and bottom); crop them out */
.band .media-video{aspect-ratio:390/170;transform:scale(1.08)}
/* Play / pause control: always reachable; becomes a clear Play button if autoplay is blocked */
.media-btn{position:absolute;z-index:2;right:12px;bottom:6px;display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:44px;min-height:44px;padding:0 12px;border:0;border-radius:22px;background:transparent;color:#fff;
  font:600 13px var(--sans);letter-spacing:.02em;cursor:pointer}
.media-btn::before{content:"";width:30px;height:30px;border-radius:50%;flex:none;
  background:rgba(20,33,50,.55) var(--icon) center/12px no-repeat;border:1px solid rgba(255,255,255,.5)}
.media-btn[data-state="playing"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 2h2v8H3zM7 2h2v8H7z' fill='%23fff'/%3E%3C/svg%3E")}
.media-btn[data-state="paused"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5v9l7.5-4.5z' fill='%23fff'/%3E%3C/svg%3E");
  background:rgba(20,33,50,.6);padding:0 16px 0 7px;bottom:12px}
.media-btn[data-state="paused"]::before{background-color:var(--teal);border-color:var(--teal)}
.media-btn .label{display:none}
.media-btn[data-state="paused"] .label{display:inline}

/* Partners */
.partners{padding:24px var(--gutter) 22px;background:var(--cream-2);border-bottom:1px solid var(--line)}
.partners h2{font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:12px}
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 16px;align-items:center}
.partner-grid .more{display:none}
.partner-grid img{width:100%;height:40px;object-fit:contain;mix-blend-mode:multiply;filter:url(#logo-ink);clip-path:inset(4px)}

/* Sections */
.section{padding:52px var(--gutter)}
.section h2,.dark h2{font-size:clamp(40px,12vw,52px);line-height:1;margin-bottom:20px}
#expertise h2 em{display:block}

/* Expandable expertise rows */
.rows{margin-top:30px;border-top:1px solid var(--line)}
.rows details{border-bottom:1px solid var(--line)}
.rows summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;
  padding:10px 0;font:400 26px/1.15 var(--serif);cursor:pointer}
.rows summary::-webkit-details-marker{display:none}
.toggle{position:relative;flex:none;width:28px;height:28px;border:1px solid #A9B0B8;border-radius:50%}
.toggle::before,.toggle::after{content:"";position:absolute;left:8px;right:8px;top:12.75px;height:1.2px;background:var(--navy);transition:transform .25s ease}
.toggle::after{transform:rotate(90deg)}
details[open] .toggle::after{transform:rotate(0)}
.rows details p{padding:0 40px 22px 0;color:var(--muted);font-size:15.5px;line-height:1.65}

/* Dark sections */
.dark{background:var(--navy);color:#fff;padding:44px var(--gutter)}
.split-block{padding:0 0 40px}
.split-block+.split-block{padding:40px 0 4px;border-top:1px solid var(--dark-line)}
.links{display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:22px}
.text-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;font-size:15px;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(50% + 13px)/calc(100% - 26px) 1px}
.text-link svg{width:14px;height:14px;color:var(--teal-light);transition:transform .2s ease}
.text-link.plain{background:none;font-weight:500;color:rgba(255,255,255,.8)}
.text-link.plain svg{color:currentColor}
.section .text-link svg{color:var(--teal)}

/* Team */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:30px}
.team-grid a{display:block;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:14px}
.team-grid img{width:100%;aspect-ratio:1/1.18;object-fit:cover;object-position:center 22%;filter:grayscale(1);background:var(--line)}
.name{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-top:10px;font:400 clamp(20px,6vw,24px)/1.1 var(--serif)}
.name svg{width:13px;height:13px;margin-top:3px;color:var(--teal);transition:transform .2s ease}
.role{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--muted)}

/* Contact and footer */
.contact{padding-top:48px}
.contact h2{font-size:clamp(46px,14vw,60px)}
.contact .text-link{font-weight:500;font-size:15.5px}
.offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px}
.offices h3{font-size:clamp(22px,6.6vw,28px);line-height:1.1;margin-bottom:8px}
.offices p{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.72);overflow-wrap:anywhere}
.footer{margin-top:32px;padding-top:24px;border-top:1px solid var(--dark-line)}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-row img{width:118px}
.footer-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;margin-top:10px;font-size:13px;color:rgba(255,255,255,.7)}
.social{display:flex;gap:18px}
.social a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}

/* Real Estate page */
.section-tight{padding-top:0}
.desk-nav a[aria-current="page"]{color:var(--teal)}
.re-photo{margin:0}
.re-photo img{width:100%;aspect-ratio:390/233;object-fit:cover}
.features{display:grid;gap:36px;margin-top:34px}
.feature img{width:100%;aspect-ratio:16/10;object-fit:cover}
.feature h3{font-size:28px;line-height:1.1;margin:18px 0 10px}
.feature p{color:var(--muted);font-size:15.5px;line-height:1.7}
.quote blockquote{margin:0}
.quote blockquote p{font:400 clamp(28px,8vw,36px)/1.2 var(--serif)}
.quote footer{margin-top:22px;font-size:14px;color:rgba(255,255,255,.75)}
.quote footer strong{display:block;color:#fff;font-weight:600}

/* Bottom shortcut bar (phones): appears once the intro buttons scroll away */
.shortcut-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));background:rgba(246,244,238,.97);border-top:1px solid var(--line);
  transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.shortcut-bar.show{transform:none;visibility:visible;transition:transform .25s ease}
body.menu-open .shortcut-bar{transform:translateY(110%)}

/* 404 page */
.notfound{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.notfound .cta-pair{max-width:420px}

/* Small phones (320px) */
@media (max-width:359px){
  :root{--gutter:16px}
  .btn{font-size:14px;padding:10px 10px 10px 12px}
  .offices{grid-template-columns:1fr 1fr}
  .team-grid{gap:16px 10px}
  .slide-caption{letter-spacing:.1em;gap:8px}
}

/* Hover effects only where a mouse is used */
@media (hover:hover){
  .btn-fill:hover{background:#25374f;border-color:#25374f}
  .btn-line:hover{background:var(--navy);color:#fff}
  .text-link:hover svg,.team-grid a:hover .name svg{transform:translate(2px,-2px)}
  .team-grid a:hover img{filter:grayscale(.6)}
  .desk-nav a:not(.btn):hover{color:var(--teal)}
  .social a:hover{color:#fff}
}

/* Tablet */
@media (min-width:640px){
  :root{--gutter:40px}
  .team-grid{grid-template-columns:repeat(3,1fr);gap:28px 18px}
  .partner-grid{grid-template-columns:repeat(6,1fr)}
  .cta-pair{max-width:460px}
  .features{grid-template-columns:1fr 1fr;gap:28px}
}

/* Desktop */
@media (min-width:900px){
  :root{--gutter:max(48px, calc((100vw - 1240px) / 2));--header-h:80px}
  body{padding-bottom:0}
  .shortcut-bar{display:none}
  .menu-btn,.menu{display:none!important}
  .logo img{width:150px}
  .desk-nav{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500}
  .desk-nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;text-decoration:none;transition:color .2s ease}
  .btn-sm{min-height:44px;padding:8px 14px 8px 16px;font-size:14px;gap:18px}

  .top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;padding:64px var(--gutter) 72px}
  .top .intro{padding:0}
  h1{font-size:clamp(60px,5.8vw,86px);margin-bottom:28px}
  .lead{font-size:18px;max-width:28em}
  .cta-pair{margin-top:36px;gap:12px}
  .btn{min-height:56px;padding:14px 18px 14px 20px}
  .hero-slides,.re-photo img{aspect-ratio:6/5}
  .slide-caption{left:28px;bottom:30px;font-size:11.5px}
  .slide-dots{left:28px;bottom:16px}
  .media-btn{right:18px;bottom:14px}

  .partners{padding:40px var(--gutter)}
  .partner-grid .more{display:block}
  .partner-grid{gap:22px 40px}
  .partner-grid img{height:56px}

  .section{padding:112px var(--gutter)}
  .section h2,.dark h2{font-size:clamp(52px,4.8vw,70px)}
  .two-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:96px;align-items:start}
  .two-col .rows,.two-col .team-grid,.two-col .features{margin-top:6px}
  .rows summary{font-size:32px;min-height:96px}
  .rows details p{font-size:17px;max-width:36em}

  .dark{padding:104px var(--gutter)}
  .split{display:grid;grid-template-columns:1fr 1fr}
  .split-block{padding:0 64px 0 0}
  .split-block+.split-block{padding:0 0 0 64px;border-top:0;border-left:1px solid var(--dark-line)}
  .dark .body{font-size:17px}

  .band .media-video{aspect-ratio:1440/400}
  .team-grid{gap:40px 24px}
  .name{font-size:26px}
  .role{font-size:13.5px}

  .contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:96px;padding-bottom:40px}
  .contact h2{font-size:clamp(72px,7vw,104px)}
  .contact .links{margin-top:0}
  .contact .text-link{font-size:18px}
  .offices{margin-top:40px;gap:32px}
  .offices h3{font-size:32px}
  .offices p{font-size:14.5px}
  .footer{grid-column:1/-1;margin-top:80px}
  .footer-row img{width:140px}

  .quote{padding:120px var(--gutter)}
  .quote blockquote{max-width:900px}
  .quote blockquote p{font-size:clamp(40px,3.6vw,54px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}
.no-bar{padding-bottom:0}