/* ============================================================
   Section menu — "Our Company" radial fan
   Desktop: a hub button on the left edge that fans the six section
   links out along an arc. Labels stay horizontal and always
   readable. Phones keep the horizontal scrolling strip.
   ============================================================ */

/* ---------- phones / tablets: horizontal strip ---------- */
.rail{position:sticky;top:0;z-index:60;background:var(--beige);
  border-bottom:1px solid var(--beige-3);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px)}
.fan-hub{display:none}
.rail-in{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;
  width:min(1240px,100% - clamp(16px,3vw,40px)*2);margin-inline:auto;padding:10px 0 0}
.rail-in::-webkit-scrollbar{display:none}
.rail a{flex:1 1 auto;min-width:max-content;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:0 clamp(11px,1.3vw,18px);height:46px;
  font-size:12.4px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;
  border-radius:11px 11px 0 0;background:var(--tone);position:relative;
  transition:filter .25s var(--tr)}
.rail a+a::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:rgba(30,37,32,.10)}
.rail .ico{display:inline-grid;place-items:center;width:16px;height:16px;flex:0 0 16px;color:var(--ink);opacity:.75}
.rail .ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail .lbl{white-space:nowrap}
.rail a:nth-child(1){--tone:#FFFFFF}
.rail a:nth-child(2){--tone:#F7F3EA}
.rail a:nth-child(3){--tone:#EFE9DA}
.rail a:nth-child(4){--tone:#E3DCC8}
.rail a:nth-child(5){--tone:#D4D9C6}
.rail a:nth-child(6){--tone:#A9BAA2}
.rail a[aria-current="page"]{font-weight:700;box-shadow:inset 0 0 0 2px var(--gold)}

/* ---------- desktop: radial fan ---------- */
@media(min-width:1100px){
  /* A real hit area: a zero-sized box never receives pointerleave, so the
     fan closed the instant the cursor moved off the hub. The rail now spans
     the fan region and is click-through until it opens. */
  .rail{position:fixed;left:0;top:50%;transform:translateY(-50%);
    width:440px;height:440px;pointer-events:none;
    background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:70}
  .rail.open{pointer-events:auto}

  /* the hub */
  .fan-hub{display:grid;place-items:center;position:absolute;left:26px;top:50%;
    width:60px;height:60px;margin:-30px 0 0;padding:0;cursor:pointer;pointer-events:auto;
    border-radius:50%;border:1px solid rgba(227,201,136,.5);
    background:linear-gradient(150deg,var(--green-900),var(--green-700));
    box-shadow:0 14px 34px rgba(11,19,16,.34);
    transition:transform .4s var(--tr),box-shadow .35s var(--tr)}
  .fan-hub svg{width:22px;height:22px;fill:none;stroke:var(--gold-2);stroke-width:1.8;
    stroke-linecap:round;transition:transform .45s var(--tr)}
  .fan-hub:hover{transform:scale(1.06);box-shadow:0 18px 42px rgba(11,19,16,.42)}
  .rail.open .fan-hub{transform:scale(1.04)}
  .rail.open .fan-hub svg{transform:rotate(135deg)}

  /* a faint guide arc behind the items */
  .rail::before{content:"";position:absolute;left:56px;top:50%;width:340px;height:340px;
    margin:-170px 0 0 -170px;border-radius:50%;
    border:1px dashed rgba(227,201,136,.28);
    opacity:0;transform:scale(.7);pointer-events:none;
    transition:opacity .45s var(--tr),transform .45s var(--tr)}
  .rail.open::before{opacity:1;transform:scale(1)}

  .rail-in{display:block;position:absolute;left:56px;top:50%;width:0;height:0;
    padding:0;margin:0;overflow:visible;pointer-events:none}

  .rail a{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;
    height:44px;padding:0 16px 0 9px;min-width:0;width:max-content;
    border-radius:999px;background:var(--tone);color:var(--ink);
    font-size:12.2px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
    border:1px solid rgba(30,37,32,.10);
    box-shadow:0 10px 26px rgba(30,37,32,.18);
    transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;
    transition:transform .46s var(--tr),opacity .3s var(--tr),filter .25s var(--tr);
    will-change:transform,opacity}
  .rail a+a::before{display:none}

  .rail a .ico{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
    background:rgba(30,37,32,.09);opacity:1;place-items:center;display:grid}
  .rail a .ico svg{width:15px;height:15px;stroke-width:1.75}

  /* fan-out positions: six points on an arc, radius 172 */
  .rail.open a{opacity:1;pointer-events:auto}
  .rail.open .rail-in{pointer-events:auto}
  .rail.open a:nth-child(1){transform:translate(59px,-162px) translate(0,-50%) scale(1);transition-delay:.02s}
  .rail.open a:nth-child(2){transform:translate(128px,-115px) translate(0,-50%) scale(1);transition-delay:.06s}
  .rail.open a:nth-child(3){transform:translate(167px,-42px)  translate(0,-50%) scale(1);transition-delay:.10s}
  .rail.open a:nth-child(4){transform:translate(167px,42px)   translate(0,-50%) scale(1);transition-delay:.14s}
  .rail.open a:nth-child(5){transform:translate(128px,115px)  translate(0,-50%) scale(1);transition-delay:.18s}
  .rail.open a:nth-child(6){transform:translate(59px,162px)   translate(0,-50%) scale(1);transition-delay:.22s}

  .rail a:hover{filter:brightness(1.05)}
  .rail a[aria-current="page"]{background:var(--green-800);color:var(--beige);
    border-color:var(--green-800);box-shadow:0 12px 30px rgba(24,39,31,.36)}
  .rail a[aria-current="page"] .ico{background:rgba(227,201,136,.22)}
  .rail a[aria-current="page"] .ico svg{stroke:var(--gold-2)}

  /* content keeps clear of the hub */
  body[data-page="about"] .pg-wrap{width:min(1240px,100% - 184px);
    margin-left:max(120px,calc((100% - 1240px)/2));margin-right:auto}
}
@media(min-width:1640px){
  body[data-page="about"] .pg-wrap{margin-left:auto;margin-right:auto;
    width:min(1240px,100% - var(--gut)*2)}
}
@media(prefers-reduced-motion:reduce){
  .rail a,.rail::before,.fan-hub,.fan-hub svg{transition:none !important}
}

/* abraf-rail-mobile-minimal */
@media (max-width:1099px){
  .rail{background:var(--beige);border-bottom:1px solid var(--beige-3);box-shadow:none}
  .rail-in{padding:0 12px;gap:2px;touch-action:pan-x pan-y;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .rail a{height:38px;padding:0 10px;background:none !important;border:0;border-radius:0;
    box-shadow:none;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3, #6B7268);font-weight:600;position:relative}
  .rail a .ico{display:none}
  .rail a+a::before{display:none}
  .rail a[aria-current="page"]{color:var(--green-900);font-weight:700;
    box-shadow:none !important;background:none !important;border:0 !important}
  .rail a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;
    height:2px;border-radius:2px;background:var(--gold, #C9A44C)}
}

/* abraf-fan-four */
@media(min-width:1100px){
  .rail.open a:nth-child(1){transform:translate(86px,-149px) translate(0,-50%) scale(1);transition-delay:.02s}
  .rail.open a:nth-child(2){transform:translate(162px,-59px)  translate(0,-50%) scale(1);transition-delay:.07s}
  .rail.open a:nth-child(3){transform:translate(162px,59px)   translate(0,-50%) scale(1);transition-delay:.12s}
  .rail.open a:nth-child(4){transform:translate(86px,149px)   translate(0,-50%) scale(1);transition-delay:.17s}
  .rail.open a:nth-child(5),.rail.open a:nth-child(6){display:none}
}
.rail a:nth-child(1){background:#FFFFFF}
.rail a:nth-child(2){background:#EFE9DA}
.rail a:nth-child(3){background:#D4D9C6}
.rail a:nth-child(4){background:#A9BAA2}