#crull{--cream:#f7f3e9;--green:#283c30;--red:#913f32;--gold:#bb965b;background:var(--cream);color:var(--green);font:15px/1.65 Arial,sans-serif;container-type:inline-size}
#crull *{box-sizing:border-box}
#crull a{color:inherit;text-decoration:none}
#crull .note{background:#e8e2d4;padding:8px 5%;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
#crull header{padding:22px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}
#crull .brand{font:27px/1.1 Georgia,serif;letter-spacing:-1px}
#crull .brand small{font:9px Arial;letter-spacing:3px;display:block;margin-top:8px}
#crull nav{display:flex;gap:24px;font-size:12px}
#crull nav a{border-bottom:1px solid transparent}
#crull nav a:hover{border-color:var(--red)}
#crull .hero{display:grid;grid-template-columns:1fr 1.08fr;min-height:480px}
#crull .intro{padding:55px 8% 48px 11%;display:flex;flex-direction:column;justify-content:center}
#crull .eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-weight:700}
#crull h1{font:clamp(44px,6.4cqw,78px)/1.02 Georgia,serif;letter-spacing:-2px;margin:22px 0}
#crull h1 i{font-weight:normal;color:var(--red)}
#crull p{max-width:430px;color:#536055}
#crull .btn{display:inline-block;background:var(--green);color:var(--cream);padding:13px 23px;font-size:12px;align-self:flex-start;margin-top:18px}
#crull .btn:hover{background:var(--red)}
#crull .hero figure{position:relative;margin:0;overflow:hidden}
#crull .hero img{width:100%;height:100%;object-fit:cover;object-position:42% center;position:absolute}
#crull figcaption{position:absolute;bottom:20px;left:24px;color:white;background:#283c30dc;padding:7px 12px;font:italic 14px Georgia}
#crull .strip{background:var(--green);color:var(--cream);display:flex;justify-content:space-around;gap:12px;padding:16px 5%;font:italic 17px Georgia}
#crull section{padding:58px 6%}
#crull h2{font:37px/1.16 Georgia,serif;letter-spacing:-1px;margin:12px 0 18px}
#crull .sectionhead{display:flex;justify-content:space-between;align-items:end;gap:25px}
#crull .sectionhead p{font-size:13px;max-width:290px}
#crull .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:26px}
#crull .product{border-top:1px solid #bfc5b5;padding-top:18px}
#crull .number{font:italic 13px Georgia;color:var(--red)}
#crull h3{font:27px Georgia;margin:12px 0}
#crull .product p{font-size:13px}
#crull .story{display:grid;grid-template-columns:1.05fr 1fr;padding:0 6% 58px;gap:6%;align-items:center}
#crull .story img{width:100%;aspect-ratio:1.2;object-fit:cover}
#crull .story p{font-size:14px}
#crull .line{height:1px;background:#cdd0c1;width:70px;margin:24px 0}
#crull .contact{background:#e9e5d8;text-align:center;padding:45px 8%}
#crull .contact p{margin:0 auto}
#crull footer{display:flex;justify-content:space-between;gap:20px;padding:25px 6%;font-size:11px}
#crull a:focus-visible{outline:3px solid var(--red);outline-offset:5px}
@container(max-width:650px){#crull header{align-items:start}
#crull nav{gap:12px;flex-wrap:wrap;justify-content:end;max-width:160px}
#crull .brand{font-size:23px}
#crull .hero{grid-template-columns:1fr}
#crull .intro{padding:35px 7%}
#crull h1{font-size:53px}
#crull .hero figure{min-height:310px}
#crull .strip{font-size:14px}
#crull .sectionhead{display:block}
#crull .cards{grid-template-columns:1fr;gap:15px}
#crull .story{grid-template-columns:1fr;gap:25px}
#crull h2{font-size:32px}
#crull footer{flex-wrap:wrap}
}



#crull .note{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
#crull nav{gap:20px;flex-wrap:wrap;justify-content:flex-end}
#crull nav a[aria-current=page]{color:var(--red);border-bottom:1px solid var(--red)}
#crull .hero{min-height:465px}
#crull .intro{padding-top:40px;padding-bottom:40px}
#crull h1{font-size:clamp(44px,5.8cqw,72px)}
#crull .cards{grid-template-columns:repeat(3,1fr)}
#crull .product a{display:inline-block;border-bottom:1px solid var(--red);font-size:12px;margin:8px 0}
#crull .page[hidden]{display:none!important}
#crull .pagehead{background:#e9e5d8;padding:45px 7%}
#crull .pagehead h1{margin:12px 0;font-size:clamp(42px,5cqw,65px)}
#crull .pagehead p{max-width:650px;margin-bottom:0}
#crull .reading{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:7%;padding:42px 7% 60px}
#crull .bodycopy p{max-width:740px}
#crull .bodycopy{font:16px/1.85 Arial,sans-serif}
#crull .bodycopy h3{font:29px/1.25 Georgia;margin:32px 0 13px}
#crull aside{border-top:3px solid var(--red);padding-top:18px;align-self:start;position:sticky;top:20px;font-size:13px}
#crull aside p{font-size:13px}
#crull .aside-title{font:22px Georgia}
#crull .meta{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--red)}
#crull .address{font-style:normal;font-size:16px;line-height:1.9}
#crull .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:50px 7%}
#crull .contact-grid a{border-bottom:1px solid var(--red);overflow-wrap:anywhere}
#crull .contact-grid h3{margin-top:20px}
#crull .contentnote{border-left:3px solid var(--gold);padding:12px 18px;background:#eee9dc;font:13px/1.6 Arial}
#crull .story figure{margin:0}
#crull .story .caption{font:italic 12px Georgia;margin-top:8px}
#crull .route{font:11px Arial;color:#536055;margin-top:20px}
#crull footer a{text-decoration:underline}
@container(max-width:700px){#crull header{flex-direction:column}
#crull nav{max-width:none;justify-content:flex-start;gap:15px}
#crull .reading{grid-template-columns:1fr}
#crull aside{position:static;margin-top:20px}
#crull .contact-grid{grid-template-columns:1fr;gap:5px}
#crull .cards{grid-template-columns:1fr}
#crull .hero{grid-template-columns:1fr}
#crull .hero figure{min-height:300px}
#crull h1{font-size:52px}
#crull .strip{flex-wrap:wrap}
}



#crull .hero figure{margin:10px 6% 30px 0;border-radius:32px;box-shadow:0 16px 36px -24px #283c3055;isolation:isolate}

#crull .hero figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f7f3e9a6 0%,#f7f3e921 19%,transparent 40%);pointer-events:none;z-index:1}

#crull .hero figcaption{z-index:2;border-radius:999px;left:20px;bottom:20px;padding:9px 15px}

#crull .story img{display:block;border-radius:28px;box-shadow:0 18px 38px -25px #283c3066}

#crull .story .caption{padding-left:8px;margin-top:14px}

@container(max-width:700px){#crull .hero figure{margin:10px 6% 28px;border-radius:24px;min-height:310px}
#crull .hero figure::after{background:linear-gradient(180deg,#f7f3e95c,transparent 30%)}
#crull .hero figcaption{left:14px;bottom:15px;font-size:12px}
#crull .story img{border-radius:24px}
}


body{margin:0;background:#f7f3e9}
 #crull{min-height:100vh}
 #crull main{min-height:60vh}
 #crull a:not(.btn):hover{text-decoration:underline}
 #crull .skip{position:absolute;left:12px;top:-80px;background:#f7f3e9;padding:12px;z-index:5}
 #crull .skip:focus{top:8px}
 #crull p{overflow-wrap:anywhere}
 #crull .reading a:not(.btn){text-decoration:underline}
 #crull .hero figure img{object-position:42% center}
 @media(max-width:360px){#crull h1{font-size:44px}
}