:root { --black:#000; --ink:#171717; --paper:#f5f3ef; --gold:#be8c4d; --button:#be8c4d; --brand-gradient:radial-gradient(ellipse 115% 180% at 22% -45%,#4b5963 0%,#394650 53%,#24313b 100%); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--paper); color:#000; font-family:Roboto,Arial,sans-serif; }
.rail { width:min(1170px, calc(100% - 110px)); margin:0 auto; }
.site-header { height:123px; background:#000; }
.nav-rail { height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.brand-logo { display:block; position:relative; width:160px; height:93px; flex:none; overflow:hidden; }
.brand-logo img { position:absolute; top:50%; left:50%; width:140%; height:auto; max-width:none; transform:translate(-50%,-50%); }
nav { display:flex; gap:30px; padding-top:0; font:500 15px/1.2 Barlow,sans-serif; }
nav a { color:#fff; text-decoration:none; }
.hero { position:relative; isolation:isolate; min-height:760px; aspect-ratio:1672/941; background:#171717 url('assets/brittany-hero-wide.png') center top/cover no-repeat; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(15,14,13,.85) 0%,rgba(15,14,13,.68) 32%,rgba(15,14,13,.28) 57%,transparent 78%); }
.hero-content { width:min(1330px, calc(100% - 80px)); padding:150px 63px 0 25px; color:white; }
.script { margin:0; color:var(--gold); font:400 85px/1.3 Petemoss,cursive; }
.hero-script { margin-bottom:-5px; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin:0; font:600 75px/.98 Oswald,sans-serif; letter-spacing:.5px; }
.eyebrow { margin:28px 0 22px; font:600 34px/1 Oswald,sans-serif; }
.hero-actions,.center-actions { display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.gold-button { display:inline-block; width:max-content; max-width:100%; padding:20px 32px; background:var(--button); border:1px solid rgba(255,255,255,.18); color:#fff; text-decoration:none; font:600 32px/1 Oswald,sans-serif; white-space:nowrap; }
.philosophy { background:var(--paper); padding:70px 0 65px; }
.center-copy { text-align:center; }
.philosophy-script { font-size:76px; line-height:.72; }
.philosophy h2,.rates h2 { margin:16px 0 35px; font:600 58px/1 Oswald,sans-serif; }
.philosophy-copy { font:300 24px/1.3 Roboto,sans-serif; }
.philosophy-copy p { margin:0 auto 25px; max-width:1130px; }
.center-actions { align-items:center; gap:12px; margin-top:18px; }
.services { background:var(--paper); }
.service-head { height:344px; padding-top:35px; text-align:center; color:#fff; background:#111 url('assets/services-bg.webp') center/cover fixed; }
.service-head .script { font-size:67px; line-height:1; }
.service-head h2 { margin:8px 0 0; font:500 50px/1 Oswald,sans-serif; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:44px 30px; margin-top:-101px; }
.service-card { min-height:466px; border:1px solid rgba(255,255,255,.7); background:var(--paper); overflow:hidden; }
.service-card img { display:block; width:100%; height:232px; object-fit:cover; }
.service-card > div { padding:20px; }
.service-card h3 { margin:0 0 14px; color:#bf9f68; font:600 27px/1 Oswald,sans-serif; }
.service-card p { margin:0; font:400 20px/1.3 Barlow,sans-serif; }
.service-cta { padding:45px 0 40px; text-align:center; }
.logo-break { height:190px; background:#000 center/cover fixed no-repeat; }
.break-one { background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),url('assets/break-one.webp'); }
.break-two,.break-three { background-image:url('assets/break-two.webp'); }
.break-three { background-image:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)),url('assets/break-two.webp'); background-attachment:scroll; }
.rates { padding:87px 0 70px; background:var(--paper); }
.rates h2 { margin:0 0 42px; text-align:left; font-size:56px; font-weight:500; }
.rate-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.rate-card { display:flex; min-height:182px; flex-direction:column; align-items:flex-start; padding:20px; border:1px solid #e8e6e2; border-radius:14px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.06); color:#111; text-decoration:none; transition:box-shadow .18s ease,transform .18s ease; }
.rate-card[hidden],.rates-more[hidden] { display:none; }
.rate-card:hover,.rate-card:focus-visible { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.11); }
.rate-card h3 { margin:0 0 10px; font:700 18px/1.25 Roboto,Arial,sans-serif; }
.rate-card p { margin:0 0 12px; font:400 16px/1.35 Roboto,Arial,sans-serif; }
.rate-card b { margin-top:auto; font:700 16px/1.3 Roboto,Arial,sans-serif; }
.rates-more { display:block; margin:30px auto 0; padding:8px 2px 10px; border:0; border-bottom:2px solid var(--gold); background:transparent; color:#191919; font:600 20px/1 Oswald,sans-serif; letter-spacing:.04em; cursor:pointer; }
.rates-more::after { content:"↓"; display:inline-block; margin-left:11px; color:var(--gold); font:400 18px/1 Arial,sans-serif; transition:transform .18s ease; }
.rates-more[aria-expanded="true"]::after { content:"↑"; }
.rates-more:hover::after,.rates-more:focus-visible::after { transform:translateY(4px); }
.rates-more[aria-expanded="true"]:hover::after,.rates-more[aria-expanded="true"]:focus-visible::after { transform:translateY(-4px); }
.rates-more:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.rates-note { margin:28px 0 0; font:400 15px/1.45 Roboto,Arial,sans-serif; }
.rates-grid { display:grid; grid-template-columns:657px 1fr; gap:0; }
.rates-grid > img { width:450px; height:464px; object-fit:contain; justify-self:center; align-self:start; margin-top:25px; }
.price-list { padding:0 0 0 15px; margin-top:-14px; transform:translateY(-35px); font:20px/1.35 Arial,sans-serif; }
.price-list p { display:grid; grid-template-columns:minmax(0,auto) minmax(10px,1fr) auto; align-items:center; gap:10px; padding:12px 0; margin:0; border-bottom:1px dashed #00000020; }
.price-list i { height:1px; background:repeating-linear-gradient(to right,#000 0 4px,transparent 4px 10px); }
.price-list b { white-space:nowrap; } .price-gold { color:#b99b61; }
.rates-actions { margin-top:35px; }
.work { padding:0 0 80px; background:var(--paper); }
.work-head { display:grid; min-height:190px; place-items:center; background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),url('assets/break-one.webp') center/cover no-repeat; color:#fff; box-shadow:inset 0 1px rgba(190,140,77,.35),inset 0 -1px rgba(190,140,77,.35); }
.work-head h2 { position:relative; margin:0; padding-bottom:19px; font:600 58px/1 Oswald,sans-serif; text-shadow:0 2px 10px rgba(12,20,27,.28); }
.work-head h2::after { content:""; position:absolute; bottom:0; left:50%; width:112px; height:2px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent); }
.work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; max-width:930px; margin-top:65px; }
.work-grid a { display:block; overflow:hidden; aspect-ratio:1; }
.work-reel { position:relative; }
.work-reel::after { content:"▶"; position:absolute; inset:0; display:grid; place-items:center; width:52px; height:52px; margin:auto; border-radius:50%; background:rgba(25,33,41,.7); color:#fff; font:24px/1 Arial,sans-serif; pointer-events:none; }
.work-grid img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.work-grid a:hover img,.work-grid a:focus-visible img { transform:scale(1.04); }
.work-actions { margin-top:32px; text-align:center; }
.tiktok-feature { margin-top:65px; }
.tiktok-head { background-attachment:fixed; }
.tiktok-head h2 { text-align:center; }
.tiktok-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; max-width:930px; margin:65px auto 0; }
.tiktok-grid a { display:block; overflow:hidden; aspect-ratio:1; }
.tiktok-grid img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.tiktok-grid a:hover img,.tiktok-grid a:focus-visible img { transform:scale(1.04); }
.work-lightbox { width:min(88vw,760px); max-width:none; max-height:calc(100dvh - 40px); padding:0; border:0; background:transparent; color:#fff; overflow:visible; }
.work-lightbox::backdrop { background:rgba(10,14,18,.82); backdrop-filter:blur(5px); }
.work-lightbox img { display:block; width:100%; max-height:calc(100dvh - 40px); aspect-ratio:1; object-fit:contain; border-radius:10px; box-shadow:0 22px 65px rgba(0,0,0,.4); }
.work-lightbox.is-reel { width:min(88vw,530px); }
.work-lightbox iframe { display:block; width:100%; height:min(86dvh,850px); border:0; border-radius:10px; background:#111; }
.work-lightbox img[hidden],.work-lightbox iframe[hidden] { display:none; }
.work-lightbox button { position:absolute; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(26,32,38,.62); color:#fff; cursor:pointer; backdrop-filter:blur(8px); }
.work-lightbox button:hover,.work-lightbox button:focus-visible { background:rgba(67,78,88,.92); }
.work-lightbox-close { top:12px; right:12px; font:400 30px/1 Arial,sans-serif; }
.work-lightbox-prev,.work-lightbox-next { top:50%; transform:translateY(-50%); font:400 38px/1 Arial,sans-serif; }
.work-lightbox-prev { left:12px; }
.work-lightbox-next { right:12px; }
.meet { padding:58px 0; background:var(--paper); }
.meet-grid { display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:42px; align-items:center; }
.meet-grid > img { width:440px; height:472px; max-width:100%; object-fit:cover; }
.meet-copy { padding:0; }
.meet-copy h2 { margin:0 0 32px; color:#000; font:500 50px/1 Oswald,sans-serif; }
.meet-copy p { margin:0 0 28.6px; font:400 22px/28.6px Montserrat,Roboto,sans-serif; }
.contact { height:528px; padding:35px 0 40px; background:var(--paper); }
.contact-grid { display:grid; grid-template-columns:512px 1fr; }
.contact h2 { margin:0 0 31px; color:#000; font:400 25px/32.5px Oswald,sans-serif; }
.contact h3 { margin:0 0 8px; font:400 16px/20.8px Oswald,sans-serif; }
.contact p { margin:0 0 25px; font:300 20px/1.3 Montserrat,Roboto,sans-serif; }
.contact .contact-address { font-weight:500; }
.contact .contact-hours { font-weight:400; }
.contact img { width:618px; height:337px; object-fit:cover; }
.contact a { color:inherit; }
.contact-map { width:100%; height:337px; border:0; }
footer { height:181px; display:flex; align-items:center; justify-content:center; gap:24px; background:#000; color:#fff; }
footer img { width:120px; height:80px; object-fit:contain; }
footer p { margin:0; font:400 15px/1 Roboto,sans-serif; }
.solution-hero { position:relative; isolation:isolate; min-height:720px; background:#171717 url('assets/systems.jpg') center/cover fixed; }
.solution-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(15,13,12,.72); }
.solution-hero-content { padding:138px 63px 110px; color:#fff; }
.solution-script { margin-bottom:0; font-size:76px; }
.solution-hero h1 { margin:0; font:600 72px/.98 Oswald,sans-serif; }
.solution-eyebrow { margin:28px 0; font:600 30px/1 Oswald,sans-serif; }
.solution-story { padding:68px 0 76px; background:var(--paper); }
.solution-story-script { font-size:72px; line-height:.78; }
.solution-story h2,.solution-consultation h2 { margin:18px 0 28px; font:600 54px/1 Oswald,sans-serif; }
.solution-story-copy { max-width:1020px; margin:0 auto; font:300 23px/1.4 Roboto,sans-serif; }
.solution-story-copy p { margin:0 0 22px; }
.solution-benefits { padding-bottom:70px; background:var(--paper); }
.solution-benefits-head { padding:45px 0 115px; text-align:center; color:#fff; background:#111 url('assets/services-bg.webp') center/cover fixed; }
.solution-benefits-head .script { font-size:65px; line-height:1; }
.solution-benefits-head h2 { margin:8px 0 0; font:500 48px/1 Oswald,sans-serif; }
.solution-benefit-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:-66px; }
.solution-card { overflow:hidden; border:1px solid rgba(255,255,255,.7); background:var(--paper); }
.solution-card img { display:block; width:100%; height:230px; object-fit:cover; }
.solution-card > div { padding:22px; }
.solution-card h3 { margin:0 0 14px; color:#bf9f68; font:600 27px/1 Oswald,sans-serif; }
.solution-card p { margin:0; font:400 19px/1.4 Barlow,sans-serif; }
.solution-consultation { padding:78px 0; background:#171717 url('assets/break-two.webp') center/cover fixed; color:#fff; text-align:center; }
.solution-consultation-copy { max-width:700px; margin:0 auto 30px; font:300 22px/1.4 Roboto,sans-serif; }
@media (max-width:900px) { .rail { width:min(100% - 40px, 680px); } .site-header { height:86px; } .nav-rail { align-items:center; padding:8px 0; } .brand-logo { width:100px; height:65px; } nav { display:none; } .hero,.solution-hero { height:auto; min-height:700px; background-attachment:scroll; } .hero-content,.solution-hero-content { padding:100px 5px; } .script { font-size:63px; } .hero h1,.solution-hero h1 { font-size:57px; } .eyebrow,.solution-eyebrow { font-size:28px; } .gold-button { padding:16px 25px; font-size:23px; white-space:normal; } .philosophy,.rates,.meet,.contact { height:auto; } .philosophy { padding:60px 0; } .philosophy-script,.solution-story-script { font-size:58px; } .philosophy h2,.rates h2,.solution-story h2,.solution-consultation h2 { font-size:48px; } .philosophy-copy,.meet-copy p,.solution-story-copy,.solution-consultation-copy { font-size:20px; } .service-head,.solution-benefits-head,.solution-consultation { background-attachment:scroll; } .cards,.solution-benefit-cards { grid-template-columns:1fr; margin-top:-90px; } .service-card { min-height:0; } .service-card img { height:auto; aspect-ratio:1.55; } .logo-break { background-attachment:scroll; } .rates { padding:55px 0; } .rates-grid,.meet-grid,.contact-grid { grid-template-columns:1fr; height:auto; gap:30px; } .rates-grid > img,.meet-grid > img,.contact img { width:100%; height:auto; max-height:none; } .price-list { padding:0; font-size:19px; } .rates-actions { margin-top:35px; } .meet { padding:50px 0; } .meet-copy { padding:0; } footer { height:auto; padding:30px 20px; flex-direction:column; text-align:center; } }
@media (max-width:900px) { .price-list { margin-top:0; transform:none; } }
@media (max-width:900px) { .rate-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .rate-card { min-height:170px; } }
@media (max-width:600px) {
  .rates h2 { margin-left:0; }
  .rate-cards { grid-template-columns:1fr; }
  .rate-card { min-height:0; }
  .price-list { font-size:16px; }
  .price-list p { gap:6px; }
  .price-list b { font-size:15px; }
}
@media (max-width:900px) { .hero { background-size:cover; background-position:70% top; } .hero::before { background:rgba(20,18,16,.58); } }
@media (max-width:600px) {
  .hero {
    min-height:820px;
    aspect-ratio:auto;
    background:#171717 url('assets/brittany-hero-mobile.jpg?v=2') center center/cover no-repeat;
  }
  .hero::before {
    z-index:0;
    background:linear-gradient(to bottom,rgba(14,13,12,.86) 0%,rgba(14,13,12,.84) 37%,rgba(14,13,12,.52) 50%,rgba(14,13,12,.06) 72%);
  }
  .hero-content {
    position:relative;
    z-index:2;
    width:calc(100% - 36px);
    padding:45px 0 0;
    text-align:center;
  }
  .hero-script { font-size:clamp(43px,11vw,60px); line-height:1.1; margin-bottom:10px; }
  .hero h1 { font-size:clamp(38px,9vw,52px); line-height:1.03; }
  .hero h1 br { display:none; }
  .hero .eyebrow { margin:17px 0 18px; font-size:clamp(20px,5vw,25px); }
  .hero-actions { align-items:center; gap:10px; }
  .hero-actions .gold-button { width:min(100%,370px); padding:13px 16px; font-size:clamp(18px,4.5vw,22px); line-height:1.15; text-align:center; }
}
@media (max-width:900px) { .work-head { min-height:135px; } .work-head h2 { font-size:43px; } .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:35px; } .work { padding-bottom:55px; } }
@media (max-width:900px) { .tiktok-feature { margin-top:50px; } .tiktok-head { background-attachment:scroll; } .tiktok-grid { margin-top:35px; } .tiktok-head h2 { max-width:calc(100% - 30px); font-size:clamp(30px,5vw,43px); line-height:1.1; } }
@media (max-width:600px) { .work-lightbox { width:calc(100vw - 24px); } .work-lightbox button { width:38px; height:38px; } .work-lightbox-close { top:8px; right:8px; } .work-lightbox-prev { left:8px; } .work-lightbox-next { right:8px; } }
@media (max-width:900px) {
  .meet-grid { gap:28px; }
  .meet-grid > img { width:min(100%,350px); height:auto; justify-self:center; }
  .meet-copy h2 { margin-bottom:24px; }
}
@media (max-width:600px) {
  .philosophy-script { font-size:44px; line-height:1; }
  .philosophy h2 { font-size:40px; line-height:1.08; }
}
@media (max-width:900px) {
  .philosophy-copy { font-size:20px; }
}
