@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/nbd3avc.css");
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'butlerlight';
    src: url('../fonts/butler_light-webfont.woff2') format('woff2'),
         url('../fonts/butler_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'butlerregular';
    src: url('../fonts/butler_regular-webfont.woff2') format('woff2'),
         url('../fonts/butler_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'butlerultralight';
    src: url('../fonts/butler_ultra_light-webfont.woff2') format('woff2'),
         url('../fonts/butler_ultra_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/********** Preloader **********/

.preloader .h1{
font-family: "minerva-modern", sans-serif;
font-weight: 400;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 3px;
line-height: 1;
}
/* Second line of the lockup, matching the logo artwork: the subline there is
   roughly a quarter the height of LANESBOROUGH, widely tracked. The global
   `.small` (80%) is far too large here — at 80% it wrapped and collided with
   the counter circle the heading sits across. The text-indent cancels the
   trailing letter-space so the line stays optically centred. */
.preloader .h1 .small{
display: block;
margin-top: 0.5em;
font-size: 24%;
letter-spacing: 0.4em;
text-indent: 0.4em;
}

/* At 360px the 0.4em tracking pushes the line just past the gutters and it
   wraps in two, which reads as broken rather than as a lockup. */
@media screen and (max-width: 575px) {
  .preloader .h1 .small{
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
}
.preloader .h1 .span{
display: block;;
}

/********** Preloader End **********/

/********** Typography **********/

ul.dashed{
padding-left: 0;
}
.dashed li{
padding-bottom: 5px;
padding-left: 10px;
position: relative;
}
.dashed li::before {
content: "- ";
position: absolute;
left: 0;
}
.small {
font-size: 80%;
}

.x-small {
font-size: 40%;
}

li{
  font-size: 16px;
}

/********** Typography End **********/

/********** Header / Nav **********/
.menu-classic {
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin: 0;
  line-height: 3;
}
.menu-classic li{

 font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media screen and (max-width: 1199px) {
.header__col.header__col_left{
position:relative;
left:50%;
transform: translateX(-50%);
}


.header.opened .header__col_logo, .header.opened .header__col_additional {
  transform: translateY(0);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
}

@media screen and (max-width: 767px) {
.header__label.header__burger-label.me-2{
display: none;
}
}

/********** Header / Nav End **********/

/********** Header - Hero **********/

.overlay_circle-dark {
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, black 90%, black 100%);
}

.overlay_circle-dark-70 {
  background-image: radial-gradient(circle at center, rgba(8, 21, 42, 0.4) 0%, rgba(8, 21, 42, 0.6) 80%);
}
.overlay_circle-dark-50 {
  background-image: radial-gradient(circle at center, rgba(8, 21, 42, 0.2) 0%, rgba(8, 21, 42, 0.5) 100%);
}
/********** Header - Hero End **********/
/********** Accent — gold on all themes **********/

[data-arts-color-theme="dark"],
.preloader {
  --color-accent: #9d8857;
  --color-accent-dark-theme: #9d8857;
}

/********** Accent End **********/

/********** CTA marquee — light lane in front **********/

.section-cta .marquee-crossing-lanes__lane_rotate-1 {
  z-index: 40;
}

.section-cta .marquee-crossing-lanes__lane_rotate-2 {
  z-index: 50;
}

/********** CTA marquee End **********/



/********** Track record — faded background image **********/

.track-record-band {
  position: relative;
  isolation: isolate;
}

/* 768px and up only. The image is a wide cityscape, so at phone widths
   `cover` crops it to a narrow slice that reads as noise behind the text.
   Declaring the URL inside the media query (rather than overriding it to
   none below 768px) also means phones never download the file at all. */
@media screen and (min-width: 768px) {
  .track-record-band::before,
  .track-record-band::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
  }

  .track-record-band::before {
    background-image: url('../img/liam/track-record-bg-city.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.1;
  }

  /* Fades the image out over the lower 40% of the band. This replaces a
     mask-image, which produced identical pixels but forced an offscreen
     alpha-compositing pass across the whole six-row band on every repaint.
     The band is flat --color-light-4, so a gradient to that colour is
     visually equivalent and is an ordinary paint. */
  .track-record-band::after {
    background-image: linear-gradient(to bottom,
      rgba(var(--color-light-4-rgb), 0) 60%,
      rgb(var(--color-light-4-rgb)) 100%);
  }
}

/********** Track record End **********/

/********** Team — square portraits **********/

.team-member__avatar {
  position: relative;
  height: 0;
  padding-top: 100%;
}

.team-member__avatar .hover-zoom__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/********** Team End **********/





/********** Layout helpers (matched to lanecap.co.uk) **********/

.gutter-left {
  padding-left: var(--gutter-horizontal);
}

.gutter-right {
  padding-right: var(--gutter-horizontal);
}

/* Anchor targets sit flush with their section's top edge.
   These deliberately carry NO negative offset. The offset would only be
   correct if the fixed bar were on screen at the end of the jump, but the
   sticky header hides itself (opacity/visibility) when scrolling down --
   which is exactly what a menu click does -- so the offset was showing as
   empty space above the section instead of hiding behind the bar. */
.anchor-offset {
  position: absolute;
  top: 0;
  height: 0;
  width: 0;
}

/* Breathing room added *under the sticky bar* when a menu click travels UP and
   the bar slides back into view. The bar's own height is measured at runtime
   (app.getAnchorScrollOffset) — this is only the extra gap, so 0 on desktop
   parks the section flush with the bar's bottom edge. Small screens get a
   little more, since the bar sits tighter against the content there. */
:root {
  --anchor-scroll-gap: 0px;
}

@media screen and (max-width: 1199px) {
  :root {
    --anchor-scroll-gap: 6px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --anchor-scroll-gap: 10px;
  }
}

.section-header-band {
  position: relative;
}

/********** Layout helpers End **********/

/********** Services media fills its row **********/

.section-services .row {
  min-height: 44vw;
}

.section-services .parallax {
  position: relative;
  height: 100%;
  min-height: 44vw;
}

@media screen and (max-width: 991px) {
  .section-services .row,
  .section-services .parallax {
    min-height: 0;
  }
  .section-services .parallax {
    height: 70vw;
  }
}

/********** Services media End **********/

/********** Services text column **********/

.section-services .services-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--gutter-horizontal);
  padding-bottom: var(--gutter-horizontal);
}

@media screen and (max-width: 991px) {
  .section-services .services-text-col {
    padding-top: calc(var(--gutter-horizontal) * 1.2);
    padding-bottom: calc(var(--gutter-horizontal) * 1.6);
  }
}

/********** Services text column End **********/

/********** Dark palette — navy instead of near-black **********/

:root {
  --color-dark-1: #0B1B33;
  --color-dark-1-rgb: 11, 27, 51;
  --color-dark-2: #0B1B33;
  --color-dark-2-rgb: 11, 27, 51;
  --color-dark-3: #12294a;
  --color-dark-3-rgb: 18, 41, 74;
}

/********** Dark palette End **********/

/********** Team bios — left aligned copy **********/

.section-team .team-member__footer {
  text-align: left;
}

/********** Team bios End **********/

/********** CTA button — legible hover on the gold fill **********/

/* The template's `.button-circle:hover { color: var(--color-accent) }` assumes
   an outlined button, where turning the label gold reads as the hover state.
   This button is filled with that same gold (bg-accent-light-theme), so the
   label was going gold-on-gold and disappearing. Flip to the dark navy: 5.0:1
   against the gold, versus 3.4:1 for the white resting state. */
.button-circle.bg-accent-light-theme:hover,
.button-circle.bg-accent-light-theme:focus-visible {
  color: var(--color-dark-1);
}

/********** CTA button End **********/

/********** Footer — gold widget headings **********/

.footer .widget__title {
  color: var(--color-accent);
}

/********** Footer headings End **********/

/********** Footer — RICS mark **********/

/* White artwork on transparency, so it relies on the dark footer behind it.
   Sized by width with height:auto to preserve the 800x285 aspect ratio. */
.footer .rics-logo {
  display: block;
  width: 130px;
  max-width: 100%;
  height: auto;
  margin-top: 0.85rem;
}

/********** RICS mark End **********/

/********** Track record — cards **********/

/* Six cards, two up on desktop. Replaces a four-column table: with entries of
   very uneven length the table left three columns half-empty against a tall
   Outcome column, which read as ragged. A card keeps each mandate's facts in
   one bounded block, and the label/value meta rows preserve the asset type /
   location / role / outcome structure the client asked for. */

.tr-cards .row {
  row-gap: clamp(20px, 2vw, 32px);
}

.tr-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.4vw, 40px);
  /* Slightly translucent so the cityscape band still reads behind the grid,
     but solid enough to keep the small print legible over it. */
  background-color: rgba(var(--color-light-4-rgb), 0.82);
  border: 1px solid var(--color-border-opacity);
}

/* --- head --- */

.tr-card__index {
  display: block;
  margin-bottom: clamp(10px, 1vw, 16px);
  font-family: var(--font-primary);
  font-size: calc(var(--subheading-min-font-size) * 1px);
  font-weight: var(--subheading-font-weight);
  letter-spacing: var(--subheading-letter-spacing);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums lining-nums;
}

.tr-card__title {
  padding-bottom: clamp(16px, 1.5vw, 24px);
  border-bottom: 1px solid var(--color-border-opacity);
}

/* --- meta rows: asset type / location / role --- */

.tr-card__meta {
  margin: 0;
  padding: 0;
}

.tr-card__meta-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: clamp(12px, 1.2vw, 20px);
  padding: clamp(11px, 1vw, 15px) 0;
  border-bottom: 1px solid rgba(var(--color-dark-1-rgb), 0.08);
}

.tr-card__meta-row dt {
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--color-accent);
}

.tr-card__meta-row dd {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(14px, 0.95vw, 15px);
  line-height: 1.55;
  color: var(--paragraph-color);
}

.tr-card__meta-row:first-child dd {
  font-weight: 500;
  color: var(--h3-color-light-theme);
}

/* --- outcome block ---
   Cards stretch to match their neighbour's height. Letting the outcome follow
   the meta rows naturally puts that slack at the card's bottom edge; pinning
   it to the bottom instead opened a gap in the middle of the shorter card,
   which read as a mistake. */

.tr-card__outcome {
  padding-top: clamp(18px, 1.8vw, 26px);
}

.tr-card__outcome-label {
  margin-bottom: clamp(14px, 1.4vw, 20px);
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.tr-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tr-metrics li {
  font-size: inherit;
}

.tr-metric__value {
  display: block;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 31px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums lining-nums;
}

.tr-metric__label {
  display: block;
  margin-top: 7px;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-dark-1-rgb), 0.45);
}

.tr-card__note {
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  padding-top: clamp(16px, 1.6vw, 22px);
  border-top: 1px solid rgba(var(--color-dark-1-rgb), 0.08);
  font-family: var(--font-primary);
  font-size: clamp(13px, 0.9vw, 14px);
  line-height: 1.6;
  color: var(--paragraph-color);
}

/* --- narrow: labels move above their values so long values keep full width --- */

@media screen and (max-width: 575px) {
  .tr-card__meta-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .tr-card__meta-row dt {
    line-height: 1.2;
  }
}

/********** Track record cards End **********/

/********** Masthead — strapline **********/

/* Sits under the h1 inside the same animatedLines scope. Capped in width so it
   breaks into two or three balanced lines rather than one very wide one. */
.masthead__strapline {
  max-width: 46em;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.85;
}

/********** Masthead strapline End **********/

/********** Social links **********/

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-links li {
  font-size: inherit;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.75;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.social-links a svg {
  display: block;
  fill: currentColor;
}

.social-links a:hover,
.social-links a:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

/********** Social links End **********/

/********** Footer — temporary disclaimer **********/

/* Five paragraphs of legal small print. Left-aligned inside the centred bottom
   bar and width-capped, because centred justification at this length is
   unreadable; the copyright line below it stays centred. */
.footer__disclaimer {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.footer__disclaimer .textwidget {
  font-size: 12px;
  line-height: 1.65;
  opacity: 0.55;
}

.footer__disclaimer p {
  margin: 0 0 0.9em;
}

.footer__disclaimer p:last-child {
  margin-bottom: 0;
}

.footer__copyright {
  margin-top: 1.6rem;
  font-size: 13px;
}

@media screen and (max-width: 767px) {
  .footer__disclaimer .textwidget {
    font-size: 11px;
  }
}

/********** Footer disclaimer End **********/