/* Atlas Media Strategies sub-page layer.
   Extends assets/site.css (the homepage design system) with the
   long-form page and form components used by About / Work With Us /
   Collab With Us / Grow With Us. */

/* Deeper sibling of --pink for small text on light backgrounds. The brand pink
   measures 1.69:1 against the card background, far below the 4.5:1 needed to
   be readable, while this passes at 4.64:1 and still reads as brand. */
:root{--rose:#B83D63}

/* Sub-pages scroll normally. The homepage's full-height snap is
   wrong for pages that are read top to bottom. */
html{scroll-snap-type:none}
section{scroll-snap-align:none;scroll-snap-stop:normal;min-height:auto}

/* Nav on sub-pages sits on a dark hero, then inverts on scroll,
   same behaviour as the homepage. */
.nav-links a.active{color:var(--pink)!important}
nav.scrolled .nav-links a.active{color:var(--pink)!important}

/* PAGE HERO */
.page-hero{background:var(--navy);padding:11rem 3.5rem 6rem;position:relative;overflow:hidden}
.page-hero-lines{position:absolute;inset:0;
  background-image:linear-gradient(rgba(250,158,188,0.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(250,158,188,0.04) 1px,transparent 1px);
  background-size:36px 36px;pointer-events:none}
.page-hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.page-hero .eyebrow{margin-bottom:1.5rem}
.page-title{font-family:'Playfair Display',serif;font-weight:900;line-height:0.98;
  color:var(--floral);font-size:clamp(2.6rem,6vw,5.5rem);letter-spacing:-0.015em;margin-bottom:1.5rem}
.page-title em{font-style:italic;color:var(--pink);font-weight:400}
.page-lede{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,2vw,1.9rem);
  font-style:italic;font-weight:300;color:var(--floral);opacity:0.55;max-width:640px;line-height:1.45}
.page-hero-body{font-size:1.05rem;line-height:1.85;color:var(--floral);opacity:0.5;
  max-width:560px;margin-top:1.75rem}
.page-hero-actions{display:flex;align-items:center;gap:1.25rem;margin-top:2.5rem;flex-wrap:wrap}
.hero-pills{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:2.5rem}

/* GENERIC CONTENT SECTIONS */
.sec{padding:6rem 3.5rem}
.sec-inner{max-width:1200px;margin:0 auto}
.sec.light{background:var(--floral)}
.sec.almond{background:var(--almond)}
.sec.navy{background:var(--navy)}
.sec.dark{background:var(--bean)}
.sec-head{max-width:720px;margin-bottom:3.5rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-lede{font-size:1.1rem;line-height:1.9;opacity:0.65}
.sec.navy .sec-lede,.sec.dark .sec-lede{color:var(--floral);opacity:0.45}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.two-col.narrow{gap:3rem}

/* CARD GRID */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.card-grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.acard{padding:2.25rem 2rem;background:rgba(248,243,234,0.55);border-left:2px solid var(--pink);
  transition:transform 0.25s,box-shadow 0.25s}
.acard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,25,87,0.07)}
.sec.navy .acard,.sec.dark .acard{background:rgba(248,243,234,0.05);
  border-left-color:var(--pink)}
.acard-num{font-family:'Cormorant Garamond',serif;font-size:0.85rem;letter-spacing:0.14em;
  color:var(--pink);opacity:0.75;display:block;margin-bottom:0.85rem}
.acard-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;
  color:var(--navy);margin-bottom:0.7rem;line-height:1.25}
.sec.navy .acard-title,.sec.dark .acard-title{color:var(--floral)}
.acard-text{font-size:0.98rem;line-height:1.8;color:var(--bean);opacity:0.65}
.sec.navy .acard-text,.sec.dark .acard-text{color:var(--floral);opacity:0.45}

/* LIST ROWS (mirrors the homepage's client rows) */
.row-list{margin-top:2rem}
.arow{padding:1.4rem 0;border-bottom:1px solid rgba(11,25,87,0.1);display:grid;
  grid-template-columns:auto 1fr;gap:1.75rem;align-items:baseline;transition:all 0.2s}
.arow:first-child{border-top:1px solid rgba(11,25,87,0.1)}
.sec.navy .arow,.sec.dark .arow{border-color:rgba(248,243,234,0.09)}
.arow-num{font-family:'Cormorant Garamond',serif;font-size:0.85rem;color:var(--pink);
  opacity:0.7;letter-spacing:0.1em}
.arow-name{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;
  color:var(--navy);margin-bottom:0.4rem}
.sec.navy .arow-name,.sec.dark .arow-name{color:var(--floral)}
.arow-desc{font-size:0.97rem;line-height:1.8;color:var(--bean);opacity:0.6;max-width:680px}
.sec.navy .arow-desc,.sec.dark .arow-desc{color:var(--floral);opacity:0.42}

/* VALUE / STAT STRIP */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border:1px solid rgba(248,243,234,0.09)}
.strip-col{padding:2.25rem 2rem;border-right:1px solid rgba(248,243,234,0.07)}
.strip-col:last-child{border-right:none}
.strip-num{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:900;
  color:var(--floral);line-height:1;display:block}
.strip-num em{font-style:italic;color:var(--pink);font-weight:400}
.strip-lbl{font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(248,243,234,0.4);margin-top:0.6rem;display:block;line-height:1.6}

/* Contact form chooser (homepage and About share this) */
.fp-tabs{display:flex;gap:0.6rem;justify-content:center;margin-bottom:2.25rem;flex-wrap:wrap}
.fp-tab{background:transparent;border:1px solid rgba(248,243,234,0.22);
  color:rgba(248,243,234,0.65);padding:0.7rem 1.5rem;font-family:'DM Sans',sans-serif;
  font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
  cursor:pointer;transition:all 0.2s}
.fp-tab:hover{border-color:var(--pink);color:var(--floral)}
.fp-tab.active{background:var(--pink);border-color:var(--pink);color:var(--navy)}
.fp-panel{display:none}
.fp-panel.active{display:block}

/* Stats sit in a row beneath the full-width story copy. */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.stat-row .stat-block{max-width:none}
@media(max-width:820px){.stat-row{grid-template-columns:1fr}}

/* MISSION STATEMENT */
.mission-quote{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,2.9vw,2.5rem);
  font-style:italic;font-weight:300;line-height:1.4;color:var(--floral);opacity:0.85;
  max-width:900px;margin:0 auto;text-align:center;padding:0 1rem;
  border-left:none;position:relative}
.mission-quote strong{font-style:normal;font-weight:600;color:var(--pink)}
.sec.light .mission-quote,.sec.almond .mission-quote{color:var(--navy);opacity:0.9}

/* TEAM / PROFILE BLOCKS */
/* Two per row: Alexa + Maria on top, Valentina + Jared beneath. The width cap
   keeps the portraits from ballooning to half the container. */
/* No width cap: the grid fills .sec-inner so the cards' left and right edges
   line up exactly with the section heading and intro copy above them. */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem}

/* Cards run horizontally: copy on the left, portrait on the right. */
.tcard{background:rgba(255,219,209,0.35);padding:2rem;border-top:2px solid var(--pink);
  transition:transform 0.25s,box-shadow 0.25s;overflow:hidden;
  display:grid;grid-template-columns:1fr 40%;gap:1.5rem;align-items:center}
.tcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,25,87,0.08)}
.tcard-body{min-width:0}
/* height:auto is required. It overrides the img height attribute, without which
   aspect-ratio is ignored and the image renders at its intrinsic height. */
.tcard-photo{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center top;
  display:block;transition:transform 0.4s ease}
.tcard:hover .tcard-photo{transform:scale(1.03)}

/* Below two-up, one card per row. The card is now much wider than it is in the
   2x2 grid, so the portrait takes a smaller share to stay in proportion. */
@media(max-width:900px){
  .team-grid{grid-template-columns:1fr}
  .tcard{grid-template-columns:1fr 30%}
}
/* Phones: two columns inside a card squeeze the copy, so stack, but pin the
   portrait to a fixed size. Left at 100% width a square photo would fill the
   card and make every card taller than the screen. */
@media(max-width:600px){
  .tcard{grid-template-columns:1fr;gap:1.25rem;padding:1.75rem}
  /* Full content width so the photo's edges line up with the name and copy
     beneath it. The square box matches the source files (900x900), so the whole
     portrait is visible, nothing is cropped. */
  .tcard-photo{order:-1;width:100%;aspect-ratio:1/1}
}
.tcard-role{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--rose);margin-bottom:0.7rem}
.tcard-name{font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:700;
  color:var(--navy);margin-bottom:0.7rem;line-height:1.25}
.tcard-text{font-size:1.02rem;line-height:1.75;color:var(--bean);opacity:0.68}
.tcard-links{display:flex;gap:0.9rem;margin-top:1rem}
.tcard-links a{color:var(--navy);opacity:0.35;transition:opacity 0.2s,color 0.2s;
  display:flex;align-items:center}
.tcard-links a:hover{opacity:1;color:var(--pink)}
/* On a dark section the deep rose would disappear, so keep the bright pink there. */
.sec.navy .tcard-role,.sec.dark .tcard-role,
.sec.navy .tcard-more,.sec.dark .tcard-more{color:var(--pink)}
.sec.navy .tcard,.sec.dark .tcard{background:rgba(248,243,234,0.05)}
.sec.navy .tcard-name,.sec.dark .tcard-name{color:var(--floral)}
.sec.navy .tcard-text,.sec.dark .tcard-text{color:var(--floral);opacity:0.45}

/* FORMS */
.form-sec{background:var(--bean);padding:6rem 3.5rem;position:relative;overflow:hidden}
.form-glow{position:absolute;border-radius:50%;background:var(--pink);opacity:0.04;pointer-events:none}
.form-inner{position:relative;z-index:2;max-width:840px;margin:0 auto}
.form-head{text-align:center;margin-bottom:3rem}
.form-head .eyebrow{justify-content:center}
.form-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.4rem);font-weight:900;
  color:var(--floral);line-height:1.05;margin-bottom:1rem}
.form-title em{font-style:italic;color:var(--pink);font-weight:400}
.form-sub{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-style:italic;
  font-weight:300;color:var(--floral);opacity:0.4;max-width:560px;margin:0 auto}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.f-field{display:flex;flex-direction:column}
.f-field.full{grid-column:1 / -1}
.f-label{font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:400;
  color:var(--floral);opacity:0.5;margin-bottom:0.6rem}
.f-label .req{color:var(--pink);opacity:0.9}
.f-input,.f-select,.f-textarea{width:100%;background:rgba(248,243,234,0.06);
  border:1px solid rgba(248,243,234,0.15);padding:0.85rem 1.1rem;
  font-family:'DM Sans',sans-serif;font-size:0.95rem;font-weight:300;color:var(--floral);
  outline:none;transition:border-color 0.2s,background 0.2s;border-radius:0}
.f-input::placeholder,.f-textarea::placeholder{color:rgba(248,243,234,0.22)}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:rgba(250,158,188,0.55);
  background:rgba(248,243,234,0.09)}
.f-textarea{resize:vertical;line-height:1.75;min-height:130px}
.f-select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FA9EBC' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;padding-right:2.6rem}
.f-select option{background:var(--bean);color:var(--floral)}

.f-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0.6rem}
.f-check{display:flex;align-items:flex-start;gap:0.7rem;padding:0.7rem 0.9rem;
  background:rgba(248,243,234,0.04);border:1px solid rgba(248,243,234,0.1);cursor:pointer;
  transition:border-color 0.2s,background 0.2s}
.f-check:hover{border-color:rgba(250,158,188,0.4)}
.f-check input{accent-color:var(--pink);margin-top:0.15rem;cursor:pointer;flex:none}
.f-check span{font-size:0.88rem;color:var(--floral);opacity:0.65;line-height:1.5}

/* Honeypot: hidden from people, visible to naive bots. */
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-actions{display:flex;align-items:center;gap:1.5rem;margin-top:2.25rem;flex-wrap:wrap}
.form-submit{background:var(--pink);border:none;padding:1rem 2.4rem;
  font-family:'DM Sans',sans-serif;font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:500;color:var(--navy);cursor:pointer;transition:all 0.2s}
.form-submit:hover:not(:disabled){background:var(--floral);transform:translateY(-2px)}
.form-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.form-note{font-size:0.82rem;color:var(--floral);opacity:0.7;line-height:1.7}
.form-note a{color:var(--pink);text-decoration:none;opacity:1}

.form-status{margin-top:1.5rem;padding:1rem 1.25rem;font-size:0.92rem;line-height:1.7;display:none}
.form-status.show{display:block}
.form-status.ok{background:rgba(250,158,188,0.12);border-left:3px solid var(--pink);color:var(--floral)}
.form-status.err{background:rgba(220,80,80,0.1);border-left:3px solid #e06060;color:#ffd9d9}

/* Success panel that replaces the form once sent */
.form-done{display:none;text-align:center;padding:3rem 2rem;
  background:rgba(248,243,234,0.04);border:1px solid rgba(250,158,188,0.25)}
.form-done.show{display:block}
.form-done-mark{font-family:'Playfair Display',serif;font-size:2.4rem;color:var(--pink);
  line-height:1;margin-bottom:1rem}
.form-done-title{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;
  color:var(--floral);margin-bottom:0.75rem}
.form-done-text{font-size:0.98rem;line-height:1.8;color:var(--floral);opacity:0.45;
  max-width:460px;margin:0 auto}

/* TEAM MEMBER MODAL */
.tcard[data-modal]{cursor:pointer}
.tcard[data-modal]:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.tcard-more{font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--rose);
  margin-top:1.2rem;display:inline-flex;align-items:center;gap:0.5rem;transition:gap 0.2s}
.tcard[data-modal]:hover .tcard-more{gap:0.9rem}
.tcard-bio-source{display:none}
/* Socials live in the card markup but only render inside the modal. A link
   nested in a role="button" card would be an accessibility trap. */
.tcard[data-modal] .tcard-links{display:none}

.tmodal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  padding:2rem 1.5rem;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s}
.tmodal.open{opacity:1;visibility:visible}

/* The blur that softens the page behind the dialog. */
.tmodal-backdrop{position:absolute;inset:0;background:rgba(11,25,87,0.55);
  backdrop-filter:blur(14px) saturate(0.9);-webkit-backdrop-filter:blur(14px) saturate(0.9);
  cursor:pointer}
@supports not (backdrop-filter:blur(2px)){
  .tmodal-backdrop{background:rgba(11,25,87,0.88)}
}

.tmodal-panel{position:relative;z-index:2;background:var(--floral);width:100%;max-width:820px;
  max-height:88vh;overflow-y:auto;display:grid;grid-template-columns:300px 1fr;
  transform:translateY(24px) scale(0.985);transition:transform 0.35s cubic-bezier(0.2,0.8,0.3,1);
  box-shadow:0 30px 80px rgba(11,25,87,0.35)}
.tmodal.open .tmodal-panel{transform:translateY(0) scale(1)}
.tmodal-media{background:var(--navy)}
.tmodal-photo{width:100%;height:100%;min-height:300px;object-fit:cover;object-position:center top;display:block}
.tmodal-body{padding:3rem 2.75rem}
.tmodal-role{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--rose);
  margin-bottom:0.9rem}
.tmodal-name{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;
  color:var(--navy);line-height:1.15;margin-bottom:1.5rem}
.tmodal-rule{width:2.5rem;height:2px;background:var(--pink);margin-bottom:1.5rem}
.tmodal-text p{font-size:1rem;line-height:1.9;color:var(--bean);opacity:0.72;margin-bottom:1.1rem}
.tmodal-text p:last-child{margin-bottom:0}
.tmodal-links{display:flex;gap:1.1rem;margin-top:1.75rem}
.tmodal-links a{color:var(--navy);opacity:0.4;transition:opacity 0.2s,color 0.2s;display:flex}
.tmodal-links a:hover{opacity:1;color:var(--pink)}

.tmodal-close{position:absolute;top:1rem;right:1rem;z-index:3;width:2.5rem;height:2.5rem;
  border:none;background:var(--floral);color:var(--navy);cursor:pointer;font-size:1.35rem;
  line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s,color 0.2s,transform 0.2s}
.tmodal-close:hover{background:var(--pink);transform:rotate(90deg)}
.tmodal-close:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* Lock the page behind the dialog so it can't scroll under the blur. */
body.tmodal-open{overflow:hidden}

@media(max-width:760px){
  .tmodal{padding:1rem}
  .tmodal-panel{grid-template-columns:1fr;max-height:92vh}
  .tmodal-photo{min-height:0;aspect-ratio:16/10}
  .tmodal-body{padding:2rem 1.6rem}
}
@media(prefers-reduced-motion:reduce){
  .tmodal,.tmodal-panel{transition:none}
  .tcard-photo{transition:none}
}

/* CROSS-LINKS between the three intake pages */
.crosslinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;
  margin-top:1rem}
.xlink{display:block;text-decoration:none;padding:2rem 1.9rem;background:rgba(248,243,234,0.05);
  border:1px solid rgba(248,243,234,0.1);transition:all 0.25s}
.xlink:hover{border-color:var(--pink);background:rgba(250,158,188,0.07);transform:translateY(-3px)}
.xlink-eyebrow{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--pink);margin-bottom:0.75rem;display:block}
.xlink-title{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;
  color:var(--floral);margin-bottom:0.5rem}
.xlink-text{font-size:0.92rem;line-height:1.75;color:var(--floral);opacity:0.42}
.xlink-arrow{color:var(--pink);font-size:0.9rem;margin-top:1rem;display:inline-block;
  transition:transform 0.2s}
.xlink:hover .xlink-arrow{transform:translateX(5px)}

/* FOOTER (sub-page copy of the homepage footer) */
.footer-brand{display:flex;align-items:center;gap:1rem}

/* RESPONSIVE */
@media(max-width:900px){
  .page-hero{padding:8rem 1.5rem 4rem}
  .sec,.form-sec{padding:3.5rem 1.5rem}
  .two-col{grid-template-columns:1fr;gap:2.5rem}
  .form-grid{grid-template-columns:1fr}
  .strip-col{border-right:none;border-bottom:1px solid rgba(248,243,234,0.07)}
  .strip-col:last-child{border-bottom:none}
  .arow{grid-template-columns:1fr;gap:0.4rem}
}