/* ==========================================================================
   Family First Guidance - Founder & Directors / Advisory Board

   Same approach as service-counselling.css: everything is scoped under .tm so
   the shared navbar and footer styles in style.css stay untouched.
   ========================================================================== */

.tm{
    --tm-teal: #1EBCB8;
    --tm-teal-deep: #0E7C79;
    --tm-teal-tint: #E6F7F6;
    --tm-coral: #FE6766;
    --tm-ink: #1F2626;
    --tm-body: #4A5555;
    --tm-muted: #7C8A8A;
    --tm-line: #E2E9E9;
    --tm-cream: #F8FAFA;
    --tm-white: #FFFFFF;
    --tm-shadow: 0 2px 10px rgba(31,38,38,.05);
    --tm-shadow-lg: 0 18px 44px rgba(31,38,38,.14);
    --tm-serif: 'Libre Caslon Text', Georgia, serif;
    --tm-sans: 'Inter', 'Poppins', sans-serif;

    display: block;
    background: var(--tm-white);
    color: var(--tm-body);
    overflow-x: hidden;
}

/* Neutralise the global * { font-family / text-transform / border } rules
   from style.css, inside this page's content only. */
.tm,
.tm *{
    font-family: var(--tm-sans);
    text-transform: none;
    box-sizing: border-box;
}

/* The rule above must not clobber the icon fonts, or every icon inside .tm
   renders as an empty square. */
.tm i[class*="fa-solid"],
.tm i[class*="fa-regular"],
.tm i.fa,
.tm i.fas{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
}
.tm i[class*="fab"],
.tm i[class*="fa-brands"]{
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    font-style: normal;
}

.tm-wrap{
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --------------------------------------------------------------------------
   Page masthead
   -------------------------------------------------------------------------- */

.tm-masthead{
    background: linear-gradient(180deg, var(--tm-teal-tint) 0%, var(--tm-white) 100%);
    padding: 3.4rem 0 2.6rem;
    text-align: center;
}

.tm-masthead h1{
    font-family: var(--tm-serif);
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    color: var(--tm-ink);
    line-height: 1.15;
    margin: 0 0 .7rem;
    letter-spacing: -.015em;
}

.tm-masthead p{
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--tm-body);
    max-width: 44rem;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Founder

   He is the founder, so this reads as a formal profile rather than a card:
   a band across the page, a squared portrait, the name over a rule, and the
   facts from the biography set as a credential strip.
   -------------------------------------------------------------------------- */

.tm-founder{
    position: relative;
    padding: 3.6rem 0 3.4rem;
}

/* The band runs the full width of the window, while the content stays inside
   the page's normal measure. */
.tm-founder::before{
    content: '';
    position: absolute;
    inset: 0 calc(50% - 50vw);
    background: var(--tm-cream);
    border-top: 1px solid var(--tm-line);
    border-bottom: 1px solid var(--tm-line);
    z-index: 0;
}

.tm-founder__inner{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 3.4rem;
    align-items: start;
}

/* --- portrait ----------------------------------------------------------- */

.tm-founder__photo{
    position: relative;
    margin: 0;
    background: var(--tm-white);
    padding: 10px;
    border-radius: 3px;
    box-shadow: 0 18px 44px rgba(31,38,38,.16), 0 2px 5px rgba(31,38,38,.07);
    animation: tmFloat 7.5s ease-in-out infinite;
}

/* A teal rule along the foot of the mount - the only ornament, and it lines
   up with the rule under the name opposite. */
.tm-founder__photo::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--tm-teal);
    border-radius: 0 0 3px 3px;
}

.tm-founder__photo img{
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    border-radius: 1px;
    display: block;
    filter: contrast(1.04) saturate(1.04);
}

/* --- name block --------------------------------------------------------- */

.tm-founder__eyebrow{
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tm-teal-deep);
    margin-bottom: .85rem;
}

.tm-founder__name{
    font-family: var(--tm-serif);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--tm-ink);
    line-height: 1.15;
    margin: 0 0 .55rem;
    letter-spacing: -.015em;
}

.tm-founder__title{
    font-size: .97rem;
    font-weight: 500;
    color: var(--tm-teal-deep);
    margin: 0 0 1.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--tm-line);
}

.tm-founder__bio{
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--tm-body);
    margin: 0 0 1.8rem;
    max-width: 46rem;
}

/* --- credential strip --------------------------------------------------- */

.tm-facts{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    margin: 0 0 1.8rem;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--tm-line);
    max-width: 42rem;
}

.tm-fact dt{
    font-family: var(--tm-serif);
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--tm-ink);
    line-height: 1.2;
    margin-bottom: .3rem;
}

.tm-fact dd{
    margin: 0;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--tm-muted);
}

/* --------------------------------------------------------------------------
   Social icons
   -------------------------------------------------------------------------- */

.tm-links,
.tm-panel__links{
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.tm-links a,
.tm-panel__links a{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tm-white);
    border: 1px solid var(--tm-line);
    color: var(--tm-teal-deep);
    font-size: .95rem;
    text-decoration: none;
    transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}

.tm-links a:hover,
.tm-panel__links a:hover{
    background: var(--tm-teal);
    border-color: var(--tm-teal);
    color: var(--tm-white);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.tm-section{ padding: 3.2rem 0 1rem; }

.tm-head{
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 2.2rem;
}

.tm-eyebrow{
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tm-teal);
    margin-bottom: .6rem;
}

.tm-title{
    font-family: var(--tm-serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--tm-ink);
    line-height: 1.2;
    margin: 0;
}

.tm-intro{
    font-size: .98rem;
    line-height: 1.7;
    color: var(--tm-muted);
    margin: .8rem 0 0;
}

/* --------------------------------------------------------------------------
   The grid of people

   One line of text per card. Everything else lives in the profile panel, so
   the page reads as a roster rather than a wall of biography.
   -------------------------------------------------------------------------- */

/* Flex rather than grid: grid centres the track group but still leaves the
   empty track at the end, so a short last row hangs to the left. Flex wrapping
   centres every row, which matters here because neither group divides evenly
   into the number of columns. */
.tm-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
}

.tm-card{ width: 246px; }

.tm-card{
    background: var(--tm-white);
    border: 1px solid var(--tm-line);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* A resting shadow, not only one on hover, so the cards read as objects
       on the page rather than flat outlines. */
    box-shadow: 0 2px 6px rgba(31,38,38,.05), 0 10px 24px rgba(31,38,38,.06);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.tm-card.is-clickable{ cursor: pointer; }

.tm-card:hover,
.tm-card:focus-visible{
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(31,38,38,.18);
    border-color: rgba(30,188,184,.45);
    outline: none;
}

.tm-card__photo{
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--tm-cream);
    /* A hairline over the photo edge and a soft drop below it, so the picture
       sits on the card instead of being pasted flat into it. */
    box-shadow: inset 0 0 0 1px rgba(31,38,38,.06),
                0 6px 14px -6px rgba(31,38,38,.35);
}

.tm-card__photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: contrast(1.05) saturate(1.04);
    transform: scale(1.015);
    transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s;
}

.tm-card:hover .tm-card__photo img{
    transform: scale(1.07);
    filter: contrast(1.07) saturate(1.1) brightness(1.02);
}

/* A light sweeps across the photo as the pointer arrives. */
.tm-card__photo::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
                rgba(255,255,255,0) 38%,
                rgba(255,255,255,.34) 50%,
                rgba(255,255,255,0) 62%);
    transform: translateX(-120%);
    pointer-events: none;
    opacity: 0;
}

.tm-card:hover .tm-card__photo::after{
    animation: tmSheen .9s ease-out;
}

.tm-card__body{
    padding: 1.1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tm-card__name{
    font-family: var(--tm-serif);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--tm-ink);
    line-height: 1.3;
    margin: 0 0 .32rem;
}

.tm-card__role{
    font-size: .88rem;
    line-height: 1.45;
    color: var(--tm-muted);
    margin: 0 0 .9rem;
}

/* Pinned to the bottom so the link sits on one line across the whole row,
   however long the name above it runs. */
.tm-card__more{
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--tm-teal-deep);
}

.tm-card__more i{
    font-size: .72rem;
    transition: transform .25s;
}

.tm-card:hover .tm-card__more i{ transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Motion

   Everything here is deliberately slow and small. The pages should feel alive
   when you arrive, not animated at you.
   -------------------------------------------------------------------------- */

@keyframes tmFloat{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

@keyframes tmSheen{
    0%   { opacity: 0; transform: translateX(-120%); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(120%); }
}

/* Photos and cards rise into place the first time they are scrolled to.
   The .tm-anim class is added by team.js, so with JavaScript off nothing is
   hidden and the page simply renders as normal. */
@keyframes tmRise{
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

.tm-anim .tm-reveal{ opacity: 0; }

/* An animation with "backwards" fill rather than a transition: it holds the
   start state through the stagger delay, then leaves no declaration behind
   when it finishes - so the card's own hover transition still governs the
   lift afterwards. */
.tm-anim .tm-reveal.is-in{
    opacity: 1;
    animation: tmRise .75s cubic-bezier(.22,.61,.36,1) var(--tm-delay, 0ms) backwards;
}

@media (prefers-reduced-motion: reduce){
    .tm-anim .tm-reveal,
    .tm-anim .tm-reveal.is-in{
        opacity: 1;
        transform: none;
        transition: none;
    }
    .tm-founder__photo,
    .tm-card__photo::after,
    .tm-card:hover .tm-card__photo::after{
        animation: none !important;
    }
    .tm-card,
    .tm-card__photo img,
    .tm-panel{ transition: none !important; }
}

/* --------------------------------------------------------------------------
   Profile panel
   -------------------------------------------------------------------------- */

/* Both of these set display, which beats the browser's own [hidden] rule, so
   say it explicitly or every profile renders straight into the page. */
.tm-backdrop[hidden],
.tm-panel[hidden]{ display: none !important; }

.tm-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(18,26,26,.72);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity .22s;
}

.tm-backdrop.is-open{ opacity: 1; }

.tm-panel{
    position: relative;
    background: var(--tm-white);
    border-radius: 1.1rem;
    width: min(620px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--tm-shadow-lg);
    transform: translateY(14px) scale(.98);
    transition: transform .25s;
}

.tm-backdrop.is-open .tm-panel{ transform: none; }

.tm-panel__close{
    position: absolute;
    top: .9rem;
    right: .9rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--tm-line);
    background: var(--tm-white);
    color: var(--tm-ink);
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color .2s, color .2s, border-color .2s;
}

.tm-panel__close:hover{
    background: var(--tm-coral);
    border-color: var(--tm-coral);
    color: var(--tm-white);
}

/* Photo beside the name rather than filling a whole column.

   The advisory portraits are 350px square files. Anything bigger than a small
   fixed frame upscales them, which is what made them look soft, and a wide
   letterbox crop of a portrait cut the face off entirely. A 150px square is
   well inside the source size, so it stays sharp even on a high-density
   screen, and a square crop of a square file loses nothing. */
.tm-panel__head{
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.9rem 2rem 1.4rem;
    border-bottom: 1px solid var(--tm-line);
}

.tm-panel__photo{
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    border-radius: .9rem;
    overflow: hidden;
    background: var(--tm-cream);
    box-shadow: 0 10px 26px rgba(31,38,38,.18);
}

.tm-panel__photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    filter: contrast(1.05) saturate(1.04);
}

.tm-panel__id{ min-width: 0; padding-right: 2rem; }

.tm-panel__eyebrow{
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tm-teal);
    margin: 0 0 .45rem;
}

.tm-panel__name{
    font-family: var(--tm-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tm-ink);
    line-height: 1.25;
    margin: 0;
}

.tm-panel__body{ padding: 1.5rem 2rem 1.8rem; }

.tm-panel__points{
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
}

.tm-panel__points li{
    position: relative;
    padding-left: 1.3rem;
    margin-bottom: .7rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--tm-body);
}

.tm-panel__points li::before{
    content: '';
    position: absolute;
    left: 0;
    top: .6rem;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--tm-teal);
}

.tm-panel__points li:last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Closing note
   -------------------------------------------------------------------------- */

.tm-note{
    margin: 3.5rem 0 0;
    background: var(--tm-teal-tint);
    border-top: 1px solid rgba(30,188,184,.25);
    padding: 2.6rem 0;
    text-align: center;
}

.tm-note h2{
    font-family: var(--tm-serif);
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: 700;
    color: var(--tm-ink);
    margin: 0 0 .6rem;
}

.tm-note p{
    font-size: .98rem;
    line-height: 1.7;
    color: var(--tm-body);
    max-width: 38rem;
    margin: 0 auto 1.4rem;
}

.tm-note a.tm-btn{
    display: inline-block;
    background: var(--tm-teal);
    color: var(--tm-white);
    font-size: .92rem;
    font-weight: 600;
    padding: .8rem 1.9rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .2s, transform .2s;
}

.tm-note a.tm-btn:hover{
    background: var(--tm-teal-deep);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px){
    .tm-founder{ padding: 2.6rem 0; }
    .tm-founder__inner{
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .tm-founder__photo{ max-width: 260px; }
    .tm-facts{ gap: 1.1rem; }
    .tm-fact dt{ font-size: 1.12rem; }

}

@media (max-width: 680px){
    .tm-grid{ gap: 1rem; }
    .tm-card{ width: calc(50% - .5rem); }
    .tm-card__body{ padding: .9rem .85rem 1rem; }
    .tm-card__name{ font-size: .98rem; }
    .tm-card__role{ font-size: .81rem; }
    .tm-panel__head{
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.6rem 1.3rem 1.2rem;
    }
    .tm-panel__photo{ width: 128px; height: 128px; }
    .tm-panel__id{ padding-right: 0; }
    .tm-panel__name{ font-size: 1.2rem; }
    .tm-panel__body{ padding: 1.3rem 1.3rem 1.5rem; }
    .tm-masthead{ padding: 2.4rem 0 1.8rem; }
    .tm-facts{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px){
    .tm-card{ width: 100%; max-width: 300px; }
}