tr:not(:last-child) td,
tr:not(:last-child) th {
    border-style: dashed;
    border-color: var(--primary-color);
}
tr:last-child td,
tr:last-child th {
    border-style: none;
}
td, th, tr, table{
    background-color: var(--secondary-color) !important;
}

@media (max-width: 560px){
    p {
        font-size: small;
    }
    table td{
        font-size: small;
    }
    table th{
        font-size: small;
    }
}

.service-item {
    overflow: hidden;
    position: relative;
    display: flex !important;
    flex-direction: column;
    border-radius: 1rem;
}

.service-item > p{
    margin:  1rem .5rem .5rem .5rem;
    font-weight: 300;
    color: var(--primary-color);
    font-size: small;
    text-align: justify
}

.service-item a {
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The <picture> is the frame: it owns the position, size and slanted clip, so
   the mask stays put while the image zooms inside it on hover. */
.service-item picture {
    position: absolute;
    top: 1%;
    width: 100%;
    min-width: 100%;
    height: 250px;
    display: block;
    overflow: hidden;
    clip-path: url(#slantedRectangle);
    -webkit-clip-path: url(#slantedRectangle);
    border-radius: 1rem 2rem 1rem 1rem;
}

.service-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.service-item .text-container {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    padding: .5rem 1rem 3rem 4rem;
    font-size: medium;
    font-weight: 700;
    z-index: 3;
    background: transparent;
    align-items: flex-end;
    justify-content: right;
    display: flex;
}
.service-item h5 {
    color: var(--primary-color);
    text-decoration: none;
    font-size: medium;
    font-weight: 700;
    text-align: right;
    width: 60%;
    background: transparent;
}

/* ============================================================ featured projects

   Three stages in the sidebar column: a sliding thumbnail strip picks a project,
   the .service-item preview below shows it, and clicking the preview opens the
   fullscreen carousel. The strip's window size is the single knob everything else
   reads, including the JS, so the breakpoints live here and nowhere else. */

.featured-strip {
    --featured-visible: 5;
    --featured-gap: 6px;
    /* Room under the tile row for the active tile's underline. */
    --featured-underline: 10px;
    display: flex;
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    gap: .25rem;
    margin-bottom: .75rem;
}

/* Uncapped: the viewport takes the whole column and the tiles divide it, so tile
   size follows --featured-visible alone. */
.featured-strip-viewport {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    padding-bottom: var(--featured-underline);
}

.featured-strip-track {
    display: flex;
    gap: var(--featured-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform var(--dur-slow) var(--ease-out);
}

/* Set while the loop snaps from the cloned tail back to the head, so the reset
   is invisible instead of scrolling all the way back. */
.featured-strip-track.no-anim {
    transition: none;
}

.featured-strip-track > li {
    flex: 0 0 calc(
        (100% - (var(--featured-visible) - 1) * var(--featured-gap)) / var(--featured-visible)
    );
    min-width: 0;
}

/* Unselected tiles are deliberately dimmed, desaturated and shrunk: at this size
   an outline alone is easy to miss, so the selected one is the only tile in full
   colour and it is the only one wearing a ring and an underline. No overflow
   clipping here, because both of those are pseudo-elements that sit outside the
   tile; the image rounds its own corners instead. */
.featured-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: none;
    border-radius: .4rem;
    background: transparent;
    opacity: .45;
    filter: grayscale(.55);
    transform: scale(.93);
    cursor: pointer;
    transition: opacity var(--dur-base) var(--ease-standard),
                filter var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-out);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.featured-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .4rem;
}

/* The ring. Drawn over the image so it reads on a light photo, and as a
   pseudo-element so turning it on never nudges the layout. */
.featured-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: .4rem;
    pointer-events: none;
    transition: border-color var(--dur-base) var(--ease-standard);
}

/* The underline, growing out from the centre — the movement is what catches the
   eye when selection jumps to a different tile. */
.featured-thumb::before {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: calc(-1 * var(--featured-underline) + 3px);
    height: 3px;
    border-radius: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform var(--dur-base) var(--ease-out);
}

.featured-thumb:hover,
.featured-thumb:focus-visible {
    opacity: .85;
    filter: grayscale(0);
    transform: scale(.97);
}

/* Keyboard focus stays a separate signal from selection: an offset outline, so
   tabbing through the strip never looks like it has changed the preview. */
.featured-thumb:focus-visible {
    outline-color: var(--logo-color);
}

.featured-thumb[aria-current="true"] {
    opacity: 1;
    filter: none;
    transform: scale(1);
}

.featured-thumb[aria-current="true"]::after {
    border-color: var(--primary-color);
}

.featured-thumb[aria-current="true"]::before {
    transform: scaleX(1);
}

/* Reads as "more beyond this edge": the gradient tucks the tile underneath it
   rather than letting the count float over a hard crop. Stops above the
   underline row so it never sits on top of the active tile's marker. */
.featured-strip-more {
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--featured-underline);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 .3rem 0 1.5rem;
    font-size: .7rem;
    font-weight: 700;
    color: var(--primary-color);
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--secondary-color) 65%);
}

.featured-strip-more[hidden] {
    display: none;
}

/* Padded to match the viewport's underline row, so the chevrons stay centred on
   the tiles rather than on the tiles-plus-underline box. */
.featured-strip-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 .1rem var(--featured-underline);
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
}

.featured-strip-nav:hover {
    color: var(--logo-color);
}

/* Overrides the shared `a, button` transition from motion.css so window.fadeSwap
   has an opacity transition to wait on. */
.featured-preview a.fade-swap {
    cursor: pointer;
    transition: opacity var(--dur-base) var(--ease-standard);
}

/* The slant exists to make room for the location label. With no location there
   is nothing to make room for, so it only cuts the image away — show the whole
   frame rounded instead. Toggled per project by featured_projects.js. */
.featured-preview.has-no-location picture {
    clip-path: none;
    -webkit-clip-path: none;
    border-radius: 1.4rem;
}

/* Arriving from the unlocated state, the label is new to a corner that was empty
   a moment ago, so it uncovers from the right edge inward — the same corner the
   slant sweeps up toward. Delayed by the swap's own fade so the image has
   settled first: one arrival rather than two things moving at once. */
@keyframes featured-location-wipe {
    from {
        clip-path: inset(0 0 0 100%);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* `both` holds it clipped through the delay; without it the label would show,
   then wipe in again. */
.featured-preview h5.is-arriving {
    animation: featured-location-wipe var(--dur-slow) var(--ease-out) var(--dur-base) both;
}

.featured-expand {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .7rem;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-standard);
}

.service-item:hover .featured-expand,
.service-item:focus-within .featured-expand {
    opacity: 1;
}

/* ------------------------------------------------------ fullscreen carousel */

#featuredFull .modal-content {
    border: none;
    border-radius: 0;
}

#featuredFull .carousel-item {
    text-align: center;
}

/* Deliberately not a .service-item: that class would drag in the slanted
   clip-path and its fixed 250px height. */
#featuredFull .featured-full-picture img {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
}

#featuredFull .featured-full-caption {
    padding: 1rem 3rem 2rem;
    color: #fff;
}

#featuredFull .featured-full-caption h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

#featuredFull .featured-full-caption p {
    margin: 0;
    font-size: small;
    font-weight: 300;
    opacity: .75;
}

.featured-full-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    font-size: 18px;
    z-index: 1051;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

@media (max-width: 991px) {
    .featured-strip {
        --featured-visible: 4;
    }
}

@media (max-width: 560px) {
    #featuredFull .featured-full-caption {
        padding: .75rem 1rem 1.5rem;
    }
}

@media (max-width: 1280px) and (min-width: 992px){
    .service-item .text-container {
        left: 3%;
    }
    .service-item a {
        height: 200px;
    }
    .service-item picture {
        margin-top: 20px;
        height: 200px;
    }
}


@media (max-width: 450px) {
    .service-item .text-container {
        left: 3%;
    }
    .service-item a {
        height: 150px;
    }
    .service-item picture {
        margin-top: 20px;
        height: 150px;
    }
    .featured-preview.has-no-location picture {
        border-radius: 2.5rem;
    }
}